Build a Cash Register Project - Build a Cash Register

JavaScript
1

Tell us what’s happening:

How do I approach the logic or outputting the change like this in test case 12: “Status: OPEN TWENTY: $60 TEN: $20 FIVE: $15 ONE: $1 QUARTER: $0.5 DIME: $0.2 PENNY: $0.04” ?

I am already calculating the change and updating the status. But I’m not sure how to approach outputting the change left in twenties, tens, fives, ones, cents, etc. At first I tried using floor division and modulo but I don’t think that is right. Any hints would be appreciated!

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content = "width=device-width, initial-scale=1.0">
    <link rel="stylesheets" href="styles.css">
    <title>Cash Register</title>
  </head>
  <body>
    <div class="container">
      <h1>Cash Register</h1>
      <form>
        <label for="cash"></label>
        <input id="cash" name="cash" type="number">
        <button type="submit" id="purchase-btn">Buy</button>
      </form>
      <div id="change-due">Change Due: </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>


/* file: script.js */

let price = 19.5; //1,87
let cid = [
  ['PENNY', 1.01],
  ['NICKEL', 2.05],
  ['DIME', 3.1],
  ['QUARTER', 4.25],
  ['ONE', 90],
  ['FIVE', 55],
  ['TEN', 20],
  ['TWENTY', 60],
  ['ONE HUNDRED', 100]
];

const cashInput = document.getElementById("cash");
const purchaseBtn = document.getElementById("purchase-btn");
const changeDue = document.getElementById("change-due");

 const calculateChange = (cashGiven, price) => {
    let change = (Number(cashGiven) * 100 - price * 100) / 100;
    //console.log(`Price in dollars: ${price}`);
    //console.log(`Price in cents: ${100*price}`);
    //console.log(`Cash Given in dollars: ${cashGiven}`);
    console.log(`Cash Given in cents: ${100*cashGiven}`);
    console.log(`Change: ${change}`);
    // break change into dollars, quarters, dimes, nickels, and quarters and output like this
    //cash given: $100
    //price: 3.26;
    //change: 96.74
    let dollars = Math.floor(change / 100);
   // console.log(`change / 100 is: ${dollars}`)
    let cents = change % 100;
    //console.log(`change % 100 is: ${cents}`);
    let quarters = Math.floor(cents / 25);
   // console.log(`cents / 25 is: ${quarters}`)
    //"Status: OPEN TWENTY: $60 TEN: $20 FIVE: $15 ONE: $1 QUARTER: $0.5 DIME: $0.2 PENNY: $0.04"
    return change;
}

//console.log(`Change due (cents): ${change}`);
//console.log(`Cash in drawer total (cents): ${cidTotal}`);
//console.log(`cidTotal < change? ${cidTotal < change}`);

//console.log(`cidTotal: ${cidTotal}`)
purchaseBtn.addEventListener("click", (event) => {
  event.preventDefault();

  const cashInputVal = Number(cashInput.value);
  let status = "";
  let change = 0;
  
  // cash in drawer as cents = 33541 or $335.41
  const cidTotal = cid.reduce((acc, el)=> acc + Math.round(el[1] * 100), 0) / 100;

  if (cashInputVal < price) {
    alert("Customer does not have enough money to purchase the item");
    return;
  }
  if (cashInputVal === price) {
    changeDue.innerText = "No change due - customer paid with exact cash";
    return;
  }
  
  change = calculateChange(cashInputVal, price);

  if (cashInputVal > price) {
    if(cidTotal < change){
      status = "INSUFFICIENT_FUNDS";
      changeDue.innerText =`Status: ${status}`;
    }
    else if(cidTotal === change){
      status = "CLOSED";
      changeDue.innerText =`Status: ${status}`;
    }
    //if(cidTotal > change)
     else{
      status = "OPEN";
      changeDue.innerText =`Status: ${status} $${change}`;
    }
  }
})





```css
/* file: styles.css */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}
html, body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  background-color: rgb(124, 228, 124);
  width: 25rem;
  height: 25rem;
  border-radius: 10px;
  margin-top: 40px;
}

h1 {
  margin-top: 40px;
  margin-bottom: 20px;
}

form{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
}

input {
  height: 20px;
}

#purchase-btn {
  width: 40px;
  height: 20px;
  font-size: 15px;
}

#change-due {
  margin-top: 20px;
  display: flex;
  align-items: center;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.2 Safari/605.1.15

Challenge Information:

Build a Cash Register Project - Build a Cash Register

2

Try to imagine you are operating a real cash register and you owe a certain amount of change.

What steps would you do in real life to make change?

2 Likes
3

I would start with the largest bills and remove them from the register like if I had $17.34 change I would see how many tens I need, then how many fives, then ones, then quarters and dimes etc. So maybe looping through the 2d array cid and subtracting my change from each unit/denomination and updating the array? I’ll try that, thanks.

2 Likes
4

Please do not open duplicate topics. Just open one topic per lab.