Simple currency change maker in JavaScript is a program with the help of which you can calculate how much change you need for particular amount. This program is helpful in understanding the use of If loop in JavaScript and also Math.floor function and use of modulus in JavaScript.
Math.floor: The floor() method rounds a number 
to the nearest integer, and returns the result. You can learn more about the same at here.
Modulus will give you reminder of the given value.
In this program we will take user input in the text field with id “cents” and calculate the change once user click on calculate button. Once clicked result will be displayed on quarters, dimes, nickels and pennies text filed respectively.
Below is the html and css code of page I have used for the example. Now create a html page with any name and copy and paste below text on the same. Please note we are including “change.js” script file in the head section and “styles.css” file for css code. You can create change.js file and place JavaScript code inside that or you can use any other name, just don’t forgot to change the name on script file in that case.
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Make Change</title>
<link rel=”stylesheet” href=”styles.css”>
<script src=”change.js”></script>
</head>
<body>
<main>
<h1>Change Calculator</h1>
<label>Enter amount of change due (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>
styles.css file code.
body {
font-family: Arial, Helvetica, sans-serif;
background-color: white;
margin: 0 auto;
width: 600px;
border: 3px solid blue;
}
h1 {
color: blue;
margin-top: 0;
}
main {
padding: 1em 2em;
}
label {
float: left;
width: 16em;
text-align: right;
}
input {
margin-left: 1em;
margin-bottom: .5em;
}
Now our final code for the complete functionality of change program. Use this code in change.js file or any other name file with .js extension and include that file in your index page.
var $ = function(id) {
return document.getElementById(id);
};
var processEntry = function (){
var cents = parseInt($(“cents”).value);
if(cents<=0||cents>=100){
alert(“Please enter number between 1 to 99 only.”);
}else{
makeChange(cents);
}
}
var makeChange = function(cents){
if (cents > 24){
var quarters = Math.floor(cents/25);
$(“quarters”).value = quarters;
var cents = Math.floor(cents%25);
}
if (cents > 9){
var dimes = Math.floor(cents/10);
$(“dimes”).value = dimes;
var cents=Math.floor(cents%10);
}
if (cents > 4){
var nickels = Math.floor(cents/5);
$(“nickels”).value = nickels;
var cents=Math.floor(cents%5);
}
if (cents > 0) {
var pennies = Math.floor(cents/1);
$(“pennies”).value = pennies;
}
}
// Process the calculation on window load and click of makechange button
window.onload = function() {
$(“calculate”).onclick = processEntry;
};
Please note the first function “var $”. We need this to call element by id reference. If your are using jquery for your example in that case we don’t need to define the same.
var $ = function(id) {
return document.getElementById(id);
};
“makeChange” is the function where we are converting the user input value into different changes. We are calling makeChange function from processEntry function after validating the user input. In this case user input must be between 1-99. Now we need to call the processEntry function on click of calculate button. We will do that on window.onload.
Now check how to create digital clock in JavaScript.
Leave a Reply