Library

Course: Creating a Calculation Tool with AngularJS 1.x

Creating a Calculation Tool with AngularJS 1.x

  • Life Time Access
  • Certificate on Completion
  • Access on Android and iOS App
About this Course

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
Basic knowledge
  • Patience : )
  • A Text Editor
  • A modern Web Browser
What you will 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
Curriculum
Number of Lecture: 23
Total Duration: 01:16:59
Introduction
  • Introduction to this course  

    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.

  • About this course  

    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.

  • About the exercise files  

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

Preparing the Page Structure with HTML
  • Hooking in CSS and AngularJS  

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

  • Add main HTML structure  

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

  • Add in labels, wattage and cost  

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

  • Adding the form elements  

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

Creating the Layout with CSS
  • Styling the light bulb sections  

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

  • Adding bulb graphics to sections  

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

  • Style section text area  

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

  • Adding content with CSS Pseduo-elements  

    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.

  • Styling the form area  

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

  • Styling the form text and elements  

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

  • Adjusting the Main area for small screens  

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

  • Adjusting the Form 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.

Writing the Calculation Script
  • Defining our AngularJS Application and Controller  

    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.

  • Setting up our select options  

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

  • Setting default input 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.

  • Set variables for conversion values  

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

  • Creating a custom function in the controller  

    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.

  • Calculate wattage usage for incandescent bulbs  

    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 remaining 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.

  • Calculating the cost  

    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.

Reviews (0)