In this exercise, you’ll modify a Change Calculator application so it uses an ob

ID: 3602394 • Letter: I

Question

In this exercise, you’ll modify a Change Calculator application so it uses an object literal.

Open the HTML and JavaScript files in this folder:

exercises_extrach11change_literal

Note that there are two JavaScript files for this application: the main JavaScript file (calculate.js) and the start of a library file (library_coin.js).

In the calculate.js file, note that three functions are supplied. The $ function. The calculateChange function that contains all of the code for the application. And an onload event handler that attaches this function to the click event of the Calculate button and sets the focus on the first field.

In the library_coin.js, note that just the strict declaration has been provided.

In the index.html file, add the script tag for the library file.

In the library file, code an object literal named coins that has a cents property and two methods:

The isValid method should determine whether the cents property is valid.

The getNumber method should accept a divisor parameter (like 25 for quarters), calculate the number of coins of that type that are required, update the cents property with the remaining cents, and return the number of coins.

Change the code in the calculate.js file to use the object literal to get the cents entered by the user, validate the user’s entry, and calculate the number of coins.

index.html

<!DOCTYPE html>
<html>
<head>
<title>Change Calculator</title>
<link rel="stylesheet" href="calculate.css">
<script src="calculate.js"></script>
</head>
<body>
<main>
<h1>Change Calculator</h1>

<label>Enter number of cents (0-99):</label>
<input type="text" id="cents">
<input type="button" value="Calculate" name="calculate" id="calculate"><br>
<br>

<label>Quarters:</label>
<input type="text" id="quarters" disabled><br>

<label>Dimes:</label>
<input type="text" id="dimes" disabled><br>

<label>Nickels:</label>
<input type="text" id="nickels" disabled><br>

<label>Pennies:</label>
<input type="text" id="pennies" disabled><br>
</main>
</body>
</html>

calculate.js

"use strict";

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

var calculateChange = function() {
var cents, quarters, dimes, nickels, pennies;

// get the number of cents from the user
cents = Math.floor(parseInt($("cents").value));

if (isNaN(cents) || cents < 0 || cents > 99) {
alert("Please enter a valid number between 0 and 99");
} else {
// calculate the number of quarters
quarters = cents / 25; // get number of quarters
quarters = Math.floor(quarters);
cents = cents % 25; // assign the remainder to the cents variable

// calculate the number of dimes
dimes = cents / 10; // get number of dimes
dimes = Math.floor(dimes);
cents = cents % 10; // assign the remainder to the cents variable

// calculate the number of nickels
nickels = cents / 5;
nickels = Math.floor(nickels);

// calculate the number of nickels and pennies
pennies = cents % 5;

// display the results of the calculations
$("quarters").value = quarters;
$("dimes").value = dimes;
$("nickels").value = nickels;
$("pennies").value = pennies;
}
};

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

library_coin.js

"use strict";

Explanation / Answer

html:

<!DOCTYPE html>

<html>

<head>

<title>Change Calculator</title>

</head>

<body>

<main>

<h1>Change Calculator</h1>

<label>Enter number of cents (0-99):</label>

<br>

<label>Quarters:</label>

<label>Dimes:</label>

<label>Nickels:</label>

<label>Pennies:</label>

</main>

</body>

</html>

calculate.js:
var $ = function (id) {

return document.getElementById(id);

};

var calculateChange = function() {

var cents, quarters, dimes, nickels, pennies;

// get the number of cents from the user

cents = Math.floor(parseInt($("cents").value));

var cents = new coins(cents);

if (!cents.isValid()) {

alert("Please enter a valid number between 0 and 99");

} else {

// calculate the number of quarters

quarters = cents.getNumber(25); // get number of quarters

// calculate the number of dimes

dimes = cents.getNumber(10); // get number of dimes

// calculate the number of nickels

nickels = cents.getNumber(5);

// calculate the number of nickels and pennies

pennies = cents.getNumber(1);

// display the results of the calculations

$("quarters").value = quarters;

$("dimes").value = dimes;

$("nickels").value = nickels;

$("pennies").value = pennies;

}

};

window.onload = function () {

$("calculate").onclick = calculateChange;

$("cents").focus();

};

library_coin.js:
function coins(cents){

this.cents = cents;

this.isValid = function()

{

return !(isNaN(cents) || cents < 0 || cents > 99);

}

this.getNumber = function(divisor)

{

var n = Math.floor(cents/divisor);

cents = cents - n * divisor;

return n;

}

Navigate

In this exercise, you’ll make a couple of quick enhancement to the Miles Per Gal

In this exercise, you’ll modify an application that uses a timer to display the

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

In this exercise, you’ll modify a Change Calculator application so it uses an ob

Question

Explanation / Answer

Related Questions

Navigate