Ad

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

- 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;
}
header {
  background-color: purple;
  color: white;
  text-align: center;
  font-size: 3.0em;
  padding-bottom: 0.25em;
  border-radius: 0.5em;
  /*rounded corners*/
}
div {
  background-color: #C0C0C0;
  border-radius: 0.5em;
  /*rounded corners*/
  height: 90vh;
}
span,
input,
button {
  font-size: 2em;
  border-radius: 0.5em;
  display: block;
  width;
  100vw;
  margin: 0 auto;
  padding: 0.5em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>Macy's Deli</header>
<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>

Ad

Answer

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);
}
Ad
source: stackoverflow.com
Ad