Join Chris Converse for an in-depth discussion in this video Add the labels, wattage, and cost, part of Creating a Calculation Tool with AngularJS 1.
- View Offline
- Now we're going to add some content…for each one of the individual sections,…which will correspond to the information…about each lightbulb.…So inside of our main section here…let's go inside of the first section.…Going to split this open.…Now inside of this section element let's add a <div> tag.…Let's end the element.…I'll split this open.…Then inside of here we're going to add an <h4>,…this is the heading type we'll use to specify…each type of lightbulb.…
So I'll add an <h4> tag.…We'll type in incandescent, in the <h4>.…On the next line we'll add a paragraph element…and we'll put in the wattage.…So add our <p> tag.…We'll type 100.0, then end the paragraph element.…Now we're putting a number in here now,…so that we have something in the html…so we can style it with CSS.…Later on we'll be replacing the contents of this…paragraph element based on the calculations…we get in our angular app.…
Then we'll head another line and another paragraph element.…Under the wattage we're going to have the cost.…So for this example we'll put 13.14,…
Using 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