ZuoTi.Pro
Question

Develop the Change Calculator application In this exercise, you’ll create an application that displays the minimum...

Develop the Change Calculator application

In this exercise, you’ll 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 it’s an integer that’s between 0 and 99. If it isn’t, 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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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

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

var calculateChange = function() {
   
};

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

engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

Dear Student ,

As per the requirement submitted above , kindly find the below solution.

This example is used to calculate the minimum number of quarters, dimes, nickels, and pennies for the entered cents by the user.

Here , this javascript code is using JavaScript function Math.floor().

Math.floor() :

This function is used to round off the passed number to function to its nearest integer.

Note : Here No change in the CSS file , so not submitting calculate.css file again

Following section gives the details about or modified calculate.js file.

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

var calculateChange = function () {

var cents = parseInt($("cents").value); //getting the value entered by user

if (cents <= 0 || cents > 99) {

//if invalid value then alert() the user

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

}

//To findout quarters
var quarters = Math.floor(cents / 25);
//To findout remaining cents
cents %= 25;
//displaying number of quarters in the textbox
$("quarters").value = quarters
  
//To findout dimes
var dimes = Math.floor(cents / 10);
//To findout remaining cents
cents %= 10;
//displaying number of dimes in the textbox
$("dimes").value = dimes
  
//To findout nickels
var nickels = Math.floor(cents / 5);
//To findout remaining cents
cents %= 5;
//displaying number of nickels in the textbox
$("nickels").value = nickels
  
//To findout pennies
var pennies = Math.floor(cents / 1);
//To findout remaining cents
cents %= 1;
//displaying number of pennies in the textbox
$("pennies").value = pennies

};

window.onload = function () {

$("calculate").onclick = calculateChange;

};

Following is the code for Index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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>

Output : Below is the output of these example

Input 1 : Invalid input i.e. cents entered is negative

Input 2 : Valid input

Change Calculator localhost:10360/Index.html 110% Q.search Change Calculator Enter number of cents (0-99): 67 Calculate Quart

Input 3 : cents value > 99Change Calculator localhost:10360/Index.html 110% a. Search Change Calculator Enter number of cents (0-99): 100 Calculate PleInput 4 : When cents =99

Change Calculator 1 localhost 10360/Indexhtml ☆ a. Search 11096 Change Calculator Enter number of cents (0-99):99 Calculate Q

Note : Please find the updated solution and provide feedback .(Kindly change the vote)

0 0
Add a comment
Know the answer?
Add Answer to:
Develop the Change Calculator application In this exercise, you’ll create an application that displays the minimum...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • In this exercise, you’ll upgrade a version of the MPG application so the error messages are...

    In this exercise, you’ll upgrade a version of the MPG application so the error messages are displayed in span elements to the right of the text boxes. Open the HTML and JavaScript files in this folder: exercises_short\ch06\mpg\ Then, run the application and click the Calculate MPG button to see that an error message is displayed in an alert dialog box for each of the two input fields. 2. In the HTML file, add a span element after the input element...

  • Modify an application that lets users add tasks to a list so the tasks can also...

    Modify an application that lets users add tasks to a list so the tasks can also be deleted when they’re completed. 1. In the HTML file, enclose the text for each of the three existing list items in a <p> element. Then, Add buttons like the ones shown above preceding the <p> elements. No ids or names are required for these buttons, but they should be assigned to the class named “delete”. 2. In the JavaScript file, modify the event...

  • Add JavaScript code in the “find_primeV2.js” to allow users to enter a number, and then based...

    Add JavaScript code in the “find_primeV2.js” to allow users to enter a number, and then based on the number of user enters, to find out how many prime numbers there are up to and including the user inputted number and then display them on the web page. The following are the detailed steps to complete this assignment: Step 1. [30 points] In “find_primeV2.js”, complete isPrime() function by (1) Adding one parameter in function header. That parameter is used to accept...

  • In this exercise, you’ll modify the Future Value Calculator application to include a header and footer....

    In this exercise, you’ll modify the Future Value Calculator application to include a header and footer. Review the project Open the header.jsp file and note that it contains the code necessary for the start of an HTML page including the opening html, head, and body tags, the title for the web page, and a link including the CSS file. Open the footer.jsp file and note that includes a copyright notice and the closing body and html tags. Modify the code...

  • In an external JavaScript file, you need to create two global variables for the Quarter name...

    In an external JavaScript file, you need to create two global variables for the Quarter name array and the Sales amount array. Create an anonymous function and connect it to the onclick event of the Add to Array button that adds the values from the fields (Quarter and Sales) to the respective arrays. Create an anonymous function and connect it to the onclick event of Display Sales button displays the contents of the arrays, displays the sum of all the...

  • PHP code that is given : <?php // Here is where your preprocessing code goes //...

    PHP code that is given : <?php // Here is where your preprocessing code goes // An example is already given to you for the First Name $fname = $_GET['fname']; ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Exercise 2 - GET Echo</title> <style> body { margin:0; padding:0; font-family: Arial; } form { margin:20px; } input[type="text"], input[type="password"] { width:150px; padding:3px; font-size:1em; } input[type="submit"] { padding:3px; font-size:1em; } label { display:inline-block; width:150px; } .input-container { padding:5px; } </style> </head> <body> <form...

  • write a PHP program makes change for a given number of cents. The program should ask...

    write a PHP program makes change for a given number of cents. The program should ask the user for the amount of cents and then output the change for specific denominations of ten dollar bills, five dollar bills, one dollar bills, quarters, dimes, nickels, and pennies. Here is a sample program output for an input of 265 cents: Change for 2 dollars and 65 cents : 0 ten dollar bills 0 five dollar bills 2 one dollar bills 2 quarters...

  • Visual Basic Programming Step 1-2 not important, it's just file naming.

    Visual Basic Programming Step 1-2 not important, it's just file naming. 3. Form contains nine Labels, one TextBox, and three Button controls. You use labels to let user know what to enter and what will be displayed; TextBoxes to input a number between 1 and 99. Buttons to Calculate change. Clear Input and Exit program. See below Form Layout with Controls for more details 4. Declare variables to store the entered value in TextBox, and what will be displayed in...

  • Visual Basic Programming Step 1-2 not important, it's just file naming. 3. Form contains nine Labels,...

    Visual Basic Programming Step 1-2 not important, it's just file naming. 3. Form contains nine Labels, one TextBox, and three Button controls. You use labels to let user know what to enter and what will be displayed; TextBoxes to input a number between 1 and 99. Buttons to Calculate change. Clear Input and Exit program. See below Form Layout with Controls for more details 4. Declare variables to store the entered value in TextBox, and what will be displayed in...

  • Write a C program that calculates exact change. In order to receive full credit, please remember...

    Write a C program that calculates exact change. In order to receive full credit, please remember that only int arithmetic is exact, so you’ll need to break up your double into two ints, the one before the decimal point and the one after the decimal point. Another point worth mentioning is that the % operator gives the remainder. In other words, when working with int values, 9 / 5 = 1 whereas 9 % 5 = 4. Keep this in...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT