Creating a Calculation Tool with AngularJS 1.x
- Development
- May 09, 2025

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
Who Should Attend
Target Audiences
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

Chris Converse
Designer and Developer at Codify Design Studio
Rating Distribution
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!
- Random Picks
- Popular
- Hot Reviews
- Search Based YouTube Automation- Passive Income Blueprint
- Link Building with LinkSafari Get Backlinks without Budget
- Fundamentals of Quality Assurance Engineer
- Advanced Photoshop Manipulations Tutorials Bundle
- Life Insurance Annuity Ultimate Buyer’s Guide
- Crypto Trading Mastery (Scalping, Day trading, price action)
- Personal Finance
- Company Valuation Financial Modeling
- 1YouTube Masterclass The Best Guide to YouTube Success
- 2Photoshop CC- Adjustement Layers, Blending Modes Masks
- 3Personal Finance
- 4SolidWorks Essential Training ( 2023 2024 )
- 5The Architecture of Oscar Niemeyer
- 6Advanced Photoshop Manipulations Tutorials Bundle
- 7Polymer Clay Jewelry Making Techniques for Beginners
- 8How To Market Your Book Grow Your Mailing List
- 1Linux Performance Monitoring Analysis Hands On !!
- 2Content Writing Mastery 1- Content Writing For Beginners
- 3Media Training for PrintOnline Interviews-Get Great Quotes
- 4Learn Facebook Ads from Scratch Get more Leads and Sales
- 5The Complete Digital Marketing Course Learn From Scratch
- 6C#- Start programming with C# (for complete beginners)
- 7[FREE] How to code 10 times faster with Emmet
- 8Driving Results through Data Storytelling