Build a Cash Register Project - Build a Cash Register

JavaScript
1

Tell us what’s happening:

After some changes on my code yesterday, now the project passes for most of the tests but not the last two tests. I tried to change the code so it works for Status: CLOSED but it just either gives INSUFFICIENT_FUNDS or OPEN. What is missing?

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 (change === 0 && totalCid === cashInput - price) {
    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/126.0.0.0 Safari/537.36

Challenge Information:

Build a Cash Register Project - Build a Cash Register

2

This is the place where you need the closed status to happen correct?
Check the conditions on your if statement. Do they match the testcase?

Here’s the last testcase for ref:

  1. When price is 19.5, the value in the #cash element is 20, cid is [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]], and the #purchase-btn element is clicked, the value in the #change-due element should be "Status: CLOSED PENNY: $0.5"