HOME > Development > Creating a Calculation Tool with AngularJS 1.x

Creating a Calculation Tool with AngularJS 1.x

  • Development
  • May 09, 2025
SynopsisCreating a Calculation Tool with AngularJS 1.x, available at...
Creating a Calculation Tool with AngularJS 1.x  No.1

Creating a Calculation Tool with AngularJS 1.x, available at $19.99, has an average rating of 4.45, with 23 lectures, based on 33 reviews, and has 189 subscribers.

You will learn about 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 This course is ideal for individuals who are Designers or Web Designers or Front-end Developers It is particularly useful for Designers or Web Designers or Front-end Developers.

Enroll now: Creating a Calculation Tool with AngularJS 1.x

Summary

Title: Creating a Calculation Tool with AngularJS 1.x

Price: $19.99

Average Rating: 4.45

Number of Lectures: 23

Number of Published Lectures: 23

Number of Curriculum Items: 23

Number of Published Curriculum Objects: 23

Original Price: $19.99

Quality Status: approved

Status: Live

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
  • Who Should Attend

  • Designers
  • Web Designers
  • Front-end Developers
  • Target Audiences

  • Designers
  • Web Designers
  • Front-end Developers
  • 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.

    Course Curriculum

    Chapter 1: Introduction

    Lecture 1: Introduction to this course

    Lecture 2: About this course

    Lecture 3: About the exercise files

    Chapter 2: Preparing the Page Structure with HTML

    Lecture 1: Hooking in CSS and AngularJS

    Lecture 2: Add main HTML structure

    Lecture 3: Add in labels, wattage and cost

    Lecture 4: Adding the form elements

    Chapter 3: Creating the Layout with CSS

    Lecture 1: Styling the light bulb sections

    Lecture 2: Adding bulb graphics to sections

    Lecture 3: Style section text area

    Lecture 4: Adding content with CSS Pseduo-elements

    Lecture 5: Styling the form area

    Lecture 6: Styling the form text and elements

    Lecture 7: Adjusting the Main area for small screens

    Lecture 8: Adjusting the Form area for small screens

    Chapter 4: Writing the Calculation Script

    Lecture 1: Defining our AngularJS Application and Controller

    Lecture 2: Setting up our select options

    Lecture 3: Setting default input values

    Lecture 4: Set variables for conversion values

    Lecture 5: Creating a custom function in the controller

    Lecture 6: Calculate wattage usage for incandescent bulbs

    Lecture 7: Calculate wattage usage for remaining bulbs

    Lecture 8: Calculating the cost

    Instructors

  • Creating a Calculation Tool with AngularJS 1.x  No.2
    Chris Converse
    Designer and Developer at Codify Design Studio
  • Rating Distribution

  • 1 stars: 0 votes
  • 2 stars: 1 votes
  • 3 stars: 3 votes
  • 4 stars: 9 votes
  • 5 stars: 20 votes
  • Frequently Asked Questions

    How long do I have access to the course materials?

    You can view and review the lecture materials indefinitely, like an on-demand channel.

    Can I take my courses with me wherever I go?

    Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!