# I Want To Make Images Appear According To Mathematic Results Using Javascript

## 18 January 2016 - 1 answer

I made this cash register program for a class. Now I'd like the change to appear as images of dollars and coins instead of characters. For example, if the change should include two tens and three-quarters, I'd like two images of ten dollar bills, and three images of quarters to appear on the screen.

I have searched for answers, but can't figure it out. I'm just asking for a nudge in the right direction. Thanks!

``````\$(document).ready(function() {

\$("button").click(function() {
var totalAmount = \$("input[name='total']").val();
var amountTender = \$("input[name='tender']").val();
var truncatedAmount = Math.floor(totalAmount * 100) / 100;
var truncatedTender = Math.floor(amountTender * 100) / 100;
var change = (truncatedTender - truncatedAmount);
var truncatedChange = Math.round(change * 100) / 100;

if (truncatedTender < truncatedAmount) {
\$("body").append("That's not enough to cover the bill.");
} else {

var twenties = truncatedChange / 20;
var mod1 = truncatedChange % 20;
twenties = Math.floor(twenties);
var tens = mod1 / 10;
var mod2 = mod1 % 10;
tens = Math.floor(tens);
var fives = mod2 / 5;
var mod3 = mod2 % 5;
fives = Math.floor(fives);
var ones = mod3 / 1;
var mod4 = mod3 % 1;
ones = Math.floor(ones);
mod4 = Math.floor(mod4 * 100) / 100;
mod4 = mod4 * 100;
var quarters = mod4 / 25;
var mod5 = mod4 % 25;
quarters = Math.floor(quarters);
var dimes = mod5 / 10;
var mod6 = mod5 % 10;
dimes = Math.floor(dimes);
var nickels = mod6 / 5;
var mod7 = mod6 % 5;
nickels = Math.floor(nickels);
var pennies = mod7;
pennies = Math.floor(pennies);

if (truncatedChange / 20 >= 1) {
\$("div").append("Twenties:" + " " + twenties + "<br/>");
}
if (mod1 / 10 >= 1) {
\$("div").append("Tens:" + " " + tens + "<br/>");
}
if (mod2 / 5 >= 1) {
\$("div").append("Fives:" + " " + fives + "<br/>");
if (mod3 / 1 >= 1) {
\$("div").append("Ones:" + " " + ones + "<br/>");
}
if (mod4 / 25 >= 1) {
\$("div").append("Quarters:" + " " + quarters + "<br/>");
}
if (mod5 / 10 >= 1) {
\$("div").append("Dimes:" + " " + dimes + "<br/>");
}
if (mod6 / 5 >= 1) {
\$("div").append("Nickels:" + " " + nickels + "<br/>");
}
if (mod7 / 1 >= 1) {
\$("div").append("Pennies:" + " " + pennies + "<br/>");
}

\$("div").append("Total Change" + " " + truncatedChange.toFixed(2));
}
});
});``````
``````body {
font-family: sans-serif;
}
background-color: purple;
color: white;
text-align: center;
font-size: 3.0em;
/*rounded corners*/
}
div {
background-color: #C0C0C0;
/*rounded corners*/
height: 90vh;
}
span,
input,
button {
font-size: 2em;
display: block;
width;
100vw;
margin: 0 auto;
}``````
``````<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br/>
<div>
<form>
<span>Amount of bill:</span>
<br/>
<input type="number" name="total"></input>
<br/>
<span>Amount tendered:</span>
<br/>
<input type="number" name="tender"></input>
</form>
<br/>
<button>Calculate</button>
<br/>

</div>``````

I would do it like so:

Use an object to store the currency collection. Each property name is a type of currency and the property value would be the number of items.

``````var currency = {
twenty: 2,
ten: 1,
five: 2,
one: 3,
quarter: 2,
dime: 1,
nickel: 1,
penny: 3
}
``````

Set the values of the properties using the calculations you have above, like so:

``````currency["penny"] = Math.floor(pennies); // (example)
``````

Find or create images with the same names as the properties. For pennies, the image file should be named penny.jpg (or penny.png).

Create a ul element in your HTML with an id of "currency-list"

``````<ul id="currency-list"></ul>
``````

Loop through all the properties and display the quantity of each type of currency and a corresponding image of your choice:

``````var c, currText, currImg, currDiv, list, listItem;
list = document.getElementById("currency-list")
for (c in currency) {
listItem = document.createElement("li");
currText = document.createTextNode(currency[c]);
currDiv = document.createElement("div")
currImg = document.createElement("img");
currImg.setAttribute("src", c+".jpg");
currDiv.appendChild(currText);
currDiv.appendChild(currImg);
listItem.appendChild(currDiv);
list.appendChild(listItem);
}
``````