Creating a Calculation Tool with AngularJS 1.x

Learn to conceive, calculate, design and script a custom calculation tool for your web site.
4.8 (20 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.
145 students enrolled
25% off
Take This Course
  • Lectures 23
  • Length 1.5 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 1/2016 English

Course Description

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.

What are the requirements?

  • Patience : )
  • A Text Editor
  • A modern Web Browser

What am I going to get from this course?

  • 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

Who is the target audience?

  • Designers
  • Web Designers
  • Front-end Developers

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.


Section 1: Introduction

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.


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.


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")

Section 2: Preparing the Page Structure with HTML

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.

Section 3: Creating the Layout with CSS

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.

Section 4: Writing the Calculation Script

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.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Chris Converse, Designer and Developer at Codify Design Studio

Chris has over 22 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.

Ready to start learning?
Take This Course