Develop the Change Calculator application

In this exercise, youll create an application that displays the minimum number of quarters, dimes, nickels, and pennies that make up the number of cents specified by the user. Without the use of a JavaScript Library (for coins).

1. Open the HTML and JavaScript files below:

2. In the JavaScript file, note that three functions are supplied. The $ function. The start of a calculateChange function. And an onload event handler that attaches the calculateChange function to the click event of the Calculate button.

3. In the calculateChange function, get the value entered by the user and make sure its an integer thats between 0 and 99. If it isnt, display an alert box with this message: Please enter a valid number between 0 and 99.

4. If the number entered by the user is valid, write code to calculate the number of coins needed for the cents entered by the user. Start with the quarters and work your way down to the pennies. Use the Math.floor method to round your results to the next lower integer whenever needed. And use the number of cents remaining from the last calculation as the starting point for the next calculation.

5. Display the number for each coin in the corresponding text box. Be sure to display whole numbers.

calculate.css

body { font-family: Arial, Helvetica, sans-serif; background-color: white; margin: 0 auto; width: 500px; border: 3px solid blue; padding: 0 2em 1em; } h1 { color: blue; margin-bottom: .25em; } label { float: left; width: 14em; text-align: right; padding-bottom: .5em; } input { margin-left: 1em; margin-bottom: .5em; }

index.html

Change Calculator

Enter number of cents (0-99):

Quarters:

Dimes:

Nickels:

Pennies:

calculate.js

var $ = function (id) { return document.getElementById(id); };

var calculateChange = function() { };

window.onload = function () { $("calculate").onclick = calculateChange; };