Build a Cash Register Project - Build a Cash Register

Tell us what’s happening:

I’m stuck on this project since the beginning of this year, I’ve made a lot of changes here so far but the code doesn’t pass of the last two test, 18 and 19.

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="stylesheet" href="./styles.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
  <title>Cash Register</title>
</head>
<body>
  <h1>Cash Register</h1>
  <div id="cash-register">
    <label for="cash">Enter cash</label>
    <input id="cash" type="number" class="user-input" value="">
    <p id="price"></p>
    <p id="change"></p>
    <div id="change-due"></div>
  </div>
  <button id="purchase-btn">Purchase</button>
  <div class="container">
    <div class="top-display">
      <p id="price-screen" class="price-screen"></p>
    </div>
    <div id="cash-drawer-display" class="cash-drawer-display">
      <h2>Cash Drawer Display</h2>
    </div>
  </div>
  <script src="./script.js"></script>
</body>
</html>
/* file: script.js */
let price = 19.5;
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 cash = document.getElementById("cash");
const changeDue = document.getElementById("change-due");
const purchaseBtn = document.getElementById("purchase-btn");
const priceScreen = document.getElementById("price-screen");
const cashDrawerDisplay = document.getElementById("cash-drawer-display");

const checkRegister = () => {
  let cashInput = parseFloat(cash.value);
  if (isNaN(cashInput)) {
    alert("Please enter a valid amount");
    return;
  }

  let change = Number((cashInput - price).toFixed(2));
  let totalCid = Number(cid.reduce((total, sum) => total + sum[1], 0).toFixed(2));

  document.getElementById("change").innerHTML = `<b>Change: </b> ${change}`;
  if (cashInput < price) {
    alert("Customer does not have enough money to purchase the item");
    return;
  } else if (cashInput === price) {
    changeDue.innerHTML = "No change due - customer paid with exact cash";
    return;
  } else if (cash.value === "") {
    return;
  }

  if (change > totalCid) {
    changeDue.innerHTML = "Status: INSUFFICIENT_FUNDS";
    return;
  }

  const denominations = [
    { name: "ONE HUNDRED", value: 100.00 },
    { name: "TWENTY", value: 20.00 },
    { name: "TEN", value: 10.00 },
    { name: "FIVE", value: 5.00 },
    { name: "ONE", value: 1.00 },
    { name: "QUARTER", value: 0.25 },
    { name: "DIME", value: 0.10 },
    { name: "NICKEL", value: 0.05 },
    { name: "PENNY", value: 0.01 }
  ];

  let changeArr = [];
  let cidCopy = JSON.parse(JSON.stringify(cid)); // Deep copy of cid

  for (let denom of denominations) {
    let value = 0;
    while (change >= denom.value && cidCopy.find(el => el[0] === denom.name)[1] >= denom.value) {
      change -= denom.value;
      change = Number(change.toFixed(2));
      value += denom.value;
      cidCopy.find(el => el[0] === denom.name)[1] -= denom.value;
    }
    if (value > 0) {
      changeArr.push([denom.name, value]);
    }
  }

  if (change > 0) {
    changeDue.innerHTML = "Status: INSUFFICIENT_FUNDS";
    return;
  }

  if (price < cashInput && totalCid === cashInput - price && purchaseBtn) {
    changeDue.innerHTML = "Status: CLOSED " + changeArr.map(cash => `${cash[0]}: $${cash[1].toFixed(2)}`).join(" ");
    cid = cid.map(denom => [denom[0], 0]);
  } else {
    changeDue.innerHTML = "Status: <b>OPEN</b> <br><br>" + changeArr.map(cash => `<b>${cash[0]}</b>: $${cash[1].toFixed(2)} <br>`).join(" ");
    cid = JSON.parse(JSON.stringify(cidCopy));
  }

  displayCashInDrawer();
};

const displayCashInDrawer = () => {
  cashDrawerDisplay.innerHTML = cid.map(item => `<p>${item[0]}: $${item[1].toFixed(2)}</p>`).join('');
};

window.onload = displayCashInDrawer;

purchaseBtn.addEventListener("click", checkRegister);

cash.addEventListener("keydown", e => {
  if (e.key === "Enter") {
    checkRegister();
  }
});
/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36

Challenge Information:

Build a Cash Register Project - Build a Cash Register

I am testing 18, and your app gives back

It should say “CLOSED” instead

and checking right before

  if (change > 0) {
    changeDue.innerHTML = "Status: INSUFFICIENT_FUNDS";
    return;
  }

there change is 0.01

maybe you need a different method to deal with floating point errors

YEP, you have value being 0.49000000000000027 a couple of lines above. There is no space for the last PENNY