Creating a Calculation Tool with AngularJS 1.x

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

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!

Menu