Build a Cash Register Project - Build a Cash Register

JavaScript
1

Tell us what’s happening:

Hi everyone. I’m having a problem with my code. The console’s giving 18th and 19th failed tests. I can’t understand what problem is. I will be appreciate if you help me figure it out. Have a good day🙂

Your code so far

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cash Register Project</title>
    <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=Oswald:wght@200..700&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <main>
      <h1>Cash Register Project</h1>
      <div id="change-due"></div>
      <div class="input-div">
        <label for="cash">Enter cash from customer: </label>
        <input type="number" id="cash" class="user-input" value />
        <button class="check-btn-styles" id="purchase-btn">Purchase</button>
      </div>
      <div class="container">
        <div class="top-display-screen-container">
          <p id="price-screen" class="price-screen">Total: $3.26</p>
          <div class="connector"></div>
        </div>
        <div class="top-register">
          <div class="btns-container">
            <button class="btn"></button>
            <button class="btn"></button>
            <button class="btn"></button>
            <button class="btn"></button>
            <button class="btn"></button>
            <button class="btn"></button>
            <button class="btn"></button>
            <button class="btn"></button>
            <button class="btn"></button>
          </div>
          <div id="cash-drawer-display" class="cash-drawer-display">
            <p><strong>Change in drawer:</strong></p>
            <p>Pennies: $1.01</p>
            <p>Nickels: $2.05</p>
            <p>Dimes: $3.1</p>
            <p>Quarters: $4.25</p>
            <p>Ones: $90</p>
            <p>Fives: $55</p>
            <p>Tens: $20</p>
            <p>Twenties: $60</p>
            <p>Hundreds: $100</p>
          </div>
        </div>
        <div class="bottom-register">
          <div class="circle"></div>
        </div>
      </div>
    </main>
    <script src="script.js"></script>
  </body>
</html>


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

let price = 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 currentUnit = {
  "PENNY": 0.01,
  "NICKEL": 0.05,
  "DIME": 0.10,
  "QUARTER": 0.25,
  "ONE": 1.00,
  "FIVE": 5.00,
  "TEN": 10.00,
  "TWENTY": 20.00,
  "ONE HUNDRED": 100.00
};

const currencyMap = {
  "PENNY": "Pennies",
  "NICKEL": "Nickels",
  "DIME": "Dimes",
  "QUARTER": "Quarters",
  "ONE": "Ones",
  "FIVE": "Fives",
  "TEN": "Tens",
  "TWENTY": "Twenties",
  "ONE HUNDRED": "Hundreds"
};

const updateDrawerDisplay = (drawer) => {
  const display = document.getElementById("cash-drawer-display");
  drawer.forEach(([name, amount]) => {
    const label = currencyMap[name];
    const paragraph = Array.from(display.getElementsByTagName("p")).find(p =>
      p.textContent.startsWith(label + ":")
    );
    if (paragraph) {
      paragraph.textContent = `${label}: $${amount.toFixed(2)}`;
    }
  });
};

const change = (money) => {
  let chan = parseFloat((money - price).toFixed(2));
  let totalCid = parseFloat(cid.reduce((sum, [, amount]) => sum + amount, 0).toFixed(2));
  let drawer = cid.map(([name, amount]) => [name, amount]);

  if (chan === 0) {
    changeDue.innerHTML = "No change due - customer paid with exact cash";
    updateDrawerDisplay(drawer);
    return;
  }

  if (money < price) {
    alert("Customer does not have enough money to purchase the item");
    return;
  }

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

  const changeArr = [];
  let remainingChange = chan;

  for (let i = cid.length - 1; i >= 0; i--) {
    const [name, totalAmount] = cid[i];
    const unit = currentUnit[name];
    let amountAvailable = drawer[i][1];
    let amountToGive = 0;

    while (remainingChange >= unit && amountAvailable >= unit) {
      amountToGive += unit;
      amountAvailable -= unit;
      remainingChange = parseFloat((remainingChange - unit).toFixed(2));
    }

    if (amountToGive > 0) {
      changeArr.push([name, parseFloat(amountToGive.toFixed(2))]);
      drawer[i][1] = parseFloat((drawer[i][1] - amountToGive).toFixed(2));
    }
  }

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

  const remainingInDrawer = parseFloat(drawer.reduce((sum, [, amount]) => sum + amount, 0).toFixed(2));

  if (remainingInDrawer === 0) {
    let output = "Status: CLOSED";
    const usedChange = new Map(changeArr);
    
    cid.forEach(([name]) => {
      if (usedChange.has(name)) {
        output += `<br>${name}: $${usedChange.get(name).toFixed(2)}`;
      }
    });

    changeDue.innerHTML = output;
    cid = drawer;
    updateDrawerDisplay(drawer);
    return;
  }

  let output = "Status: OPEN";
  changeArr.forEach(([name, amount]) => {
    output += `<br>${name}: $${amount.toFixed(2)}`;
  });

  changeDue.innerHTML = output;
  cid = drawer;
  updateDrawerDisplay(cid);
};

purchaseBtn.addEventListener("click", () => change(parseFloat(cash.value)));
cash.addEventListener("keydown", e => {
  if (e.key === "Enter") {
    e.preventDefault();
    change(parseFloat(cash.value));
  }
});



/* 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/132.0.0.0 Safari/537.36 OPR/117.0.0.0

Challenge Information:

Build a Cash Register Project - Build a Cash Register

2

have you tried testing your app?

I have added this code to test your app (it’s really similar to what the tests do when you press Run the Tests), and your app is not correct

console.log("\nTest #18");
price = 19.5;
document.querySelector("#cash").value = 20;
cid = [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]];
document.querySelector("#purchase-btn").click();
console.log("actual", document.querySelector("#change-due").innerText);
console.log("expected", "Status: CLOSED PENNY: $0.5");
3

In the head of change(), toFixed() convert number type to string type, so later if(chan > totalCid) will error.
For example, 2<10 but '2'>'10'.

(This is not the only error, doing more test will help.)