This used AngularJS and was based on this in-depth explanation. This site demonstrates AngularJS features such as Routing, Templates, and Views.
I feel comfortable with AngularJS Templates and Routing now. I want to play around with passing information from one page to the another. I also want to connect the information passing with functions/calculations. Onward and upward…
This used AngularJS and was based on this walkthrough. This site demonstrates AngularJS features such as Routes, Templates, and Controllers.
The AngularJS routing conflicts with the Ruby on Rails routing. I tried to use Code Pen but it does not allow multiple HTML files which are required for AngularJS templates. As a result I built this site using Plunker.
This was built with JQuery Easing and was based on this tutorial. This animation provides a link to this blog entry where I detail my lessons learned from 75 days of building sites.
Here are my reflections:
What have I done well?
- Focused on small and consistent steps. Made sure to learn by building small pieces and gradually adding on to those pieces.
- Used tutorials when I needed to get started with new technologies.
- Learned from Free Code Camp and solved coding challenges at Code Wars.
- Used Google, documentation, Stack Overflow, Github to build my sites.
What would I have done differently?
- Try to put the pieces together better, i.e. make sure the AngularJS sites have the Bootstrap design features.
- Don’t be afraid to abandon Ruby on Rails especially if I dive more into AngularJS and want to synchronize with a database. If this were to happen, don’t hesitate to learn Node and the rest of the MEAN Stack.
- Build more basic sites where I learn and explain a concept, i.e. a coding problem, or a computer science concept like Closures.
Overall this has been a rewarding journey and I have learned, built, and shared much. I am especially proud to say that I have learned how to learn. If I have an idea, I know how to read Stack Overflow, blog posts, documentation, and if these do not yield a solution, I also know how to get help from Slack, IRC, or from Meetup members. I am eager to see where the rest of this journey will take me, and which concepts or technologies I might explore next…
This used AngularJS and was based on this example. This site demonstrates AngularJS features such as Route Service, Templates, and Controllers.
The AngularJS routing conflicts with the Ruby on Rails routing. As a result, I built this site in CodePen. I will likely build a number of AngularJS sites that involve routing in CodePen.
To learn Routing and other AngularJS features, I will continue to use my favorite process–small and consistent steps that will snowball into massive learning and building 🙂
AngularJS Countdown Timer
This site is a basic Countdown Timer with Resume and Stop functionality.
After yesterday’s AngularJS high, I have today’s relative low. But it is okay, I am accepting that learning and building something new will have its ups and downs and will also be two steps forward and one step backward. As long as I am moving forward, learning, and enjoying the process, I welcome the challenges 🙂
AngularJS Retirement Calculator
This site is an improved version of the Compound Interest Calculator because it performs the calculations instantly.
Update: I am getting the hang of the scope variables and bindings of AngularJS. I just need to keep building sites that use the features of AngularJS and I will improve even more at finding the documentation and examples that I need to build what I want.
This used AngularJS and was based on this example. This site demonstrates AngularJS features such as scopes, directives, and two-way binding.
I think I am going to learn from a number of simple AngularJS examples and tutorials to gain an understanding of its fundamentals. I will of course gradually modify and combine the code to build my own projects. For instance, I can use what I learned from this site to rebuild my Compound Interest Calculator using AngularJS.
Furthermore this Pet Shop site will allow me to compare and contrast the JQuery way with the AngularJS way. I think having this goal will make learning AngularJS even more interesting, tangible, and compelling.
Here are some links that helped me with this site:
Get Spinner UI value on change
Get value attribute from jQueryUI Spinner
To Dos with AngularJS
This used AngularJS and was based on this video. This site demonstrates AngularJS features such as controllers, directives, and forms.
I finished the free AngularJS Course. I don’t think I absorbed that much, but I did gain an overview of much of the terminology and a realization of what AngularJS can do well. To earn a greater understanding, I have the option of following this formula by doing an AngularJS tutorial repeatedly until things make sense, or follow short and sweet tutorials for a few days and then start building simple applications on my own as soon as I can like I did with my tip calculator.
Either way it will be interesting to learn by building and blogging instead of just reading text 🙂
This site used HTML, CSS, and Bootstrap. It was an emulation of elements from this site.
This site was built much quicker than the previous Bootstrap sites. I think the more I use Bootstrap the more I can reuse code from previous sites. Furthermore the better and more quickly I recognize patterns, i.e. 3 columns means each column will have a width of 4, if there is a wide carousel maybe hide that for smaller phone screens.
At first I thought coding challenges were pointless, frustrating, and unpleasant. I now realize they can be enjoyable if they are bite size and not too easy but not too hard. They are also a way to warm up my mind and also to learn language and specific ways of solving problems. Furthermore after you solve a problem at Code Wars, you can gain access to others’ solutions. Viewing others’ solutions is eye-opening and informative.