Math operations in js?

Question

I am trying to create a simple change calculator app in JS. I am able to get the change for my dollars and quarters but having trouble with the dimes.Here is my code so far. Everytime I try to get the dimes to work I am having a trouble printing the right amount.

var dollars, quarters, dimes, nickels;

function calculateChange() {
  var amountDue = document.getElementById('amount-due').value;
  var amountReceived = document.getElementById('amount-received').value;
  var change = amountReceived - amountDue;
  //document.getElementById('change-output').innerHTML = change.toFixed(2);

  dollars = Math.floor((change / 100) * 100);
  document.getElementById("dollars-output").innerHTML = dollars;
  var remainder = change - dollars;
  console.log(dollars)

  quarters = Math.floor((change % 1) * 4);
  document.getElementById('quarters-output').innerHTML = quarters;
  console.log(quarters)

  dimes = Math.floor((change % 15) * 0.10);
  document.getElementById('dimes-output').innerHTML = dimes;
  console.log(dimes)
  return;

  // = Math.floor((change % 0.1) * 20);
  //document.getElementById('nickels-output').innerHTML = nickels;

  // pennies =  Math.floor(Math.round(change % 0.05 * 100));
  //document.getElementById('pennies-output').innerHTML = pennies;

};

document.getElementById("calculate-change").addEventListener("click", calculateChange);

Amount due: <input id="amount-due"><br>
Amount-received: <input id="amount-received"><br>
<input type="button" value="Calculate change" id="calculate-change"><br>
Dollars: <span id="dollars-output"></span><br>
Quarters: <span id="quarters-output"></span><br>
Dimes: <span id="dimes-output"></span>

Can someone help me see what to do different?

Answer 1

You can make your code easier to read (and shorter) if you use data structures to your advantage. For instance instead of having variables for dollars, quarters, etc. You can use an array that holds then number of pennies each it worth.

If you do this, you will be able to take advantage of the tools javascript gives you to make your life a little easier. Also, when dealing with money, it's common to deal in integer values of pennies (a dollar = 100, quarter=25, etc), which reduces rounding errors.

If you make an array of these values representing your denominations like:

let coins = [100, 25, 10, 5, 1]

then you can simply loop over the list with a map() and it will return a new list representing how many of each demonization you need:

let due = 1.51
let recieved = 3.00
let change = recieved * 100 - due * 100 // convert to pennies to avoid rounding

let coins = [100, 25, 10, 5, 1]         // denominations -- easy to adjust

let change_coins = coins.map(coin => {
    let n = Math.floor(change / coin)
    change -= n * coin
    return n
})

console.log(change_coins)
// 1 dollar, 1 quarter, 2 dimes, 0 nickels, 4 pennies

Now if you want to add the ability to include 2-dollar bills (or fives, tens, etc), just add 200 to the start of the list.

Answer 2

I think it would be a lot easier to do it without % and just simple division. Something like this would work:

const calcChange = function(amt) {
  const numDollars = Math.floor(amt);
  let remainder = amt - numDollars;
  const numQuarters = Math.floor(remainder / 0.25);
  remainder -= numQuarters * 0.25;
  const numDimes = Math.floor(remainder / 0.1);
  remainder -= numDimes * 0.1;
  const numNickles = Math.floor(remainder / 0.05);
  remainder -= numNickles * 0.05;
  const numPennies = Math.floor(remainder * 100);

  console.log(
    `Your change is ${numDollars} dollars, ${numQuarters} quarters, ${numDimes} dimes, ${numNickles}, and ${numPennies} pennies`
  );
};

Answer 3

Let's assume owed 126.35 and received 140.

So, dollars 13, quarters 2 and dimes 1 and 5 cents.

I suggest you keep reducing the change field each time, after taking one piece to separate variable.

change = change - dollars;
...

change = change - (quarters * 0.25);
...

And so on.

This will make the calculations simple.

Answer 4

You seem to have some confusion in your calculations. For example, (change / 100) * 100 just means change. Likewise, (change % 1) just means change. What you probably actually want is something more like:

dollars = Math.floor(change);
var remainderafterdollars = change - dollars;
quarters = Math.floor(remainderafterdollars / 0.25);
var remainderafterquarters = remainderafterdollars - (quarters * 0.25);
dimes = Math.floor(remainderafterquarters / 0.10);
var remainderafterdimes = remainderafterquarters - (dimes * 0.10);
nickels = Math.floor(remainderafterdimes / 0.05);
pennies = remainderafterdimes - (nickels * 0.05);

Answer 5

(change / 100) * 100 is the same as change (unless there's floating point roundoff error), so Math.floor((change / 100) * 100) is the same as Math.floor(change). You should just calculate the floor of the division, e.g.

dollars = Math.floor(change/100);

Then you multiply this by 100 and subtract it from the change to get the remainder that you need to process with smaller denominations. For each denomination, you divide by the value of that coin, get the floor of that, then subtract to get the next remainder.

var dollars, quarters, dimes, nickels;

function calculateChange() {
  var amountDue = document.getElementById('amount-due').value;
  var amountReceived = document.getElementById('amount-received').value;
  var change = amountReceived - amountDue;
  //document.getElementById('change-output').innerHTML = change.toFixed(2);

  var dollars = Math.floor(change / 100);
  document.getElementById("dollars-output").innerHTML = dollars;
  var remainder = change - dollars * 100;

  var quarters = Math.floor(remainder / 25);
  document.getElementById('quarters-output').innerHTML = quarters;
  remainder = remainder - quarters * 25;

  var dimes = Math.floor(remainder / 10);
  document.getElementById('dimes-output').innerHTML = dimes;
  remainder = remainder - dimes * 10;

  var nickels = Math.floor(remainder/5);
  document.getElementById('nickels-output').innerHTML = nickels;
  remainder = remainder - nickels * 5;

  var pennies = remainder;
  document.getElementById('pennies-output').innerHTML = pennies;

};

document.getElementById("calculate-change").addEventListener("click", calculateChange);

Amount due: <input id="amount-due"><br>
Amount-received: <input id="amount-received"><br>
<input type="button" value="Calculate change" id="calculate-change"><br>
Dollars: <span id="dollars-output"></span><br>
Quarters: <span id="quarters-output"></span><br>
Dimes: <span id="dimes-output"></span><br>
Nickels: <span id="nickels-output"></span><br>
Pennies: <span id="pennies-output"></span><br>