Join Chris Converse for an in-depth discussion in this video Calculating the cost, part of Creating a Calculation Tool with AngularJS 1.
- So the final set of calculations we need to make…to complete our calculation tool…is to calculate the price.…Inside of our custom function,…after we've calculated all of the wattage values,…let's come in here, let's hit a few returns.…And, the first thing we're going to do in here…is set up a conditional statement…to keep users from entering more than 24 hours in a day.…So, we're going to do that by typing if,…put in our parentheses, put in a set of curly brackets,…and then inside of the parentheses for if,…we want to check and see if the current…hours is greater than 24.…
I'm going to scroll up here and copy…the $scope.current_hours.…Let's paste it inside the parentheses.…Then, we're going to say greater than 24.…And, inside of the brackets,…the $scope.current_hours = 24.…So, if somebody puts in a number greater than 24,…we're simply going to reset this back to 24.…Then, I'll hit a few returns.…Next, we're going to declare a temporary variable…where we're going to calculate the current number of hours…times the total number of days.…
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.
- Creating the HTML page structure
- Hooking in CSS and AngularJS
- Adding form elements
- Styling the layout with CSS
- Adjusting the layout for small (mobile) screens
- Defining the AngularJS application and controller
- Calculating usage and cost