Creating a Calculation Tool with AngularJS 1.x
4.2 (30 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
174 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Creating a Calculation Tool with AngularJS 1.x to your Wishlist.

Add to Wishlist

Creating a Calculation Tool with AngularJS 1.x

Learn to conceive, calculate, design and script a custom calculation tool for your web site.
4.2 (30 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
174 students enrolled
Created by Chris Converse
Last updated 1/2016
Curiosity Sale
Current price: $10 Original price: $20 Discount: 50% off
30-Day Money-Back Guarantee
  • 1.5 hours on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Add the AngularJS framework to a web page
  • Create an Angular App and Controller
  • Create a web layout with HTML and CSS
  • Combine color and graphics to an AngularJS App
  • Define variables that will be reflected in the HTML file
  • Create HTML-based form elements, and tie them to AngularJS
  • Dynamically update HTML based on user interactions
View Curriculum
  • Patience : )
  • A Text Editor
  • A modern Web Browser

Learn to create a useful web tool that calculates and converts results for your users. In this project, you'll help webpage visitors calculate their energy savings from switching to efficient LED and CFL light bulbs. Chris Converse walks through each step in the process: building the main HTML page, creating the form elements, styling the layout with CSS, and performing calculations on the input using JavaScript and AngularJS's data binding elements. Chris also helps you adjust the layout to display better on small screens and mobile devices.

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.

Who is the target audience?
  • Designers
  • Web Designers
  • Front-end Developers
Students Who Viewed This Course Also Viewed
Curriculum For This Course
23 Lectures
3 Lectures 02:59

This goal of this course is to teach you to create a calculation too for your web site. We’ll be using three key pieces of information in order calculate and compare different outcomes.

Preview 01:16

We’ll be creating a calculation tool in this course that will allow users to compare energy usage and costs between different types of light bulbs.

Preview 00:43

The exercise files contains ready-to-use SVG graphics, and HTML, CSS files, a copy of AngularJS, as well as a copy of full final project. (Find the exercise files in Section 2, Lecture 4 "Hooking in CSS and AngularJS")

Preview 01:00
Preparing the Page Structure with HTML
4 Lectures 12:11

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

Hooking in CSS and AngularJS

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

Add main HTML structure

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

Add in labels, wattage and cost

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

Adding the form elements
Creating the Layout with CSS
8 Lectures 32:19

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

Styling the light bulb sections

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

Preview 03:54

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

Style section text area

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.

Preview 03:41

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

Styling the form area

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

Styling the form text and elements

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

Adjusting the Main area for small screens

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

Adjusting the Form area for small screens
Writing the Calculation Script
8 Lectures 32:46

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.

Preview 05:57

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

Setting up our select options

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.

Setting default input values

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

Set variables for conversion values

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.

Creating a custom function in the controller

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.

Calculate wattage usage for incandescent bulbs

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

Calculate wattage usage for 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.

Calculating the cost
About the Instructor
Chris Converse
4.5 Average rating
835 Reviews
43,476 Students
8 Courses
Designer and Developer at Codify Design Studio

Chris has over 25 years experience in graphic design and interactive media, with a unique focus on both design and development. Chris possesses development skills across such languages as HTML, CSS, JavaScript (including jQuery and AngularJS), and PHP, making his design execution optimal across various media. In addition to designing and teaching online, Chris speaks at number of industry-related conferences, including HOW Design, Adobe MAX, Adobe ADIM, AIGA, and the Creative Publishing Network.