Creating a Calculation Tool with AngularJS 1.x

We'll begin by hooking our CSS and AngularJS files into our HTML file. (Find the Exercise Files in this lecture)

To begin our layout, we’ll create the HTML structure necessary for the structure and content of our calculation tool.

Using HTML5 section elements, we’ll create an area to display the wattage and costs for each bulb.

In order to give users the ability to choose and input values, we’ll add the form controls within an HTML form elements.

Using CSS, we’ll style the top section, allowing room for background graphics.

Now we’ll make use of the SVG graphics by assigning them into multi-colored backgrounds.

Using CSS text properties, we’ll style the text that will represent the wattage and cost values.

Instead of adding extra, repetitive information within the HTML file, we’ll use CSS pseudo elements to add the currency information, as well as the duration values to the cost indicator.

Next, we’ll style the main form element in order to position the form elements within to a 3-column layout.

We'll use CSS to control aspects for the form design, including setting font sizes and custom arrows for the select (dropdown) menu.

Using CSS media queries, we’ll make the design responsive by adjusting the layout for small screens.

To account for form elements on small screens, we’ll make additional adjustments which will help the experience on mobile devices.

We'll begin our AngularJS application by defining an app variable and a controller in our JavaScript file. Then, we’ll assign the app and controller to elements within the HTML file.

By defining the lumens values in an array variable, we can use AngularJS to dynamically populate the select menu with those array values.

Now we'll define a series of variables, as well as default values for them. This will allow the calculator to have some default data when the page first loads.

Next, we'll set up a variable for each bulb’s conversion value.

Creating a custom function within our AngularJS controller allows us to run a set of instructions based on page load, or user interaction with the calculator.

In order to calculate the wattage needed for the incandescent bulb to produce 600 lumens of light, we’ll multiply the lumens by the corresponding conversion rate.

With our calculations for incandescent bulbs complete, we’ll duplicate the conversion statements, and switch the conversion rates for each of the remaining bulbs.

In order to calculate the cost, we’ll need to calculate the total number of hours per year the bulb will be used, then multiply that by the cost and wattage requirements.