Join Chris Converse for an in-depth discussion in this video Add bulb graphics to sections, part of Creating a Calculation Tool with AngularJS 1.
- [Voiceover] Now we're going to add some color…and background graphics to the section elements.…So let's go back to our text editor.…Let's first go back to index.html.…Let's scroll up.…What we need to do here is we need a way to differentiate…the different sections, so we're going to add a class…onto each one of the sections inside of the main element.…So let's select the first section element,…which is for Incandescent.…Let's hit a space.…Let's say "class =," put in two quotes,…and then we'll use "inc" for incandescent.…
Let's come up here and copy that class name.…Let's find the second one for Halogen.…Let's paste that. Let's change "inc" to "hal."…Then we'll find the third section element,…change "inc" to "cfl,"…and then we'll find the fourth one,…and change "inc" to "led."…So with these in place, save your HTML,…let's go back to our CSS file,…going to scroll up here a little bit,…and now we're going to write a rule…that's going to target each one of the individual sections.…
So I come up here and copy the myCalculator,…
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