Released
12/15/2015Using these lessons, and the free exercise files, you can build any kind of calculation tool for your clients, from shipping cost to mortgage payment calculators.
- Creating the HTML page structure
- Hooking in CSS and AngularJS
- Adding form elements
- Styling the layout with CSS
- Adjusting the layout for small (mobile) screens
- Defining the AngularJS application and controller
- Calculating usage and cost
Skill Level Beginner
Duration
Views
- [Voiceover] Hi, I'm Chris Converse, and welcome to Creating a Calculation Tool with AngularJS. Now, we use calculation tools all the time on the web. We use them to add the cost of items in our virtual shopping carts, figure out the cost of shipping, plan fuel costs for a roadtrip, order building materials for home renovations, or figure out potential mortgage payments. In this course, we'll be creating a tool that will allow users to compare energy usage and annual costs between different types of light bulbs. This will require that we take into account three pieces of information: the lumens, which is the brightness of the bulb, the cost per kilowatt hour, and the number of hours per day the bulb will be used.
Now after we build the design and layout for our calculator application using HTML and CSS, we'll use JavaScript and Angular to declare a series of variables, make calculations, and then bind those variables to HTML using Angular's data binding elements. My goal in this course is to walk you through the process of creating a calculation tool with AngularJS and allow you to create your own calculation tools for your clients. And finally, the exercise files for this course are available to all members. So download the files, and let's start creating a fun and engaging calculation tool with Angular.
Share this video
Embed this video
Video: Introduction to this course