Build a Cash Register Project - Build a Cash Register

JavaScript
1

Tell us what’s happening:

I cant seem to get this case 19 correct “19. When price is less than the value in the #cash element, total cash in drawer cid is equal to change due, and the #purchase-btn element is clicked, the value in the #change-due element should be “Status: CLOSED” with change due in coins and bills sorted in highest to lowest order.”

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">
    <title>Cash Register App</title>
</head>
<body>
    <h2>Cash Register</h2>
    <p>Price of Item: <span id="price">$19.50</span></p>
    <p>Amount Given: <input type="number" id="cash" /></p>
    <p id="change-due"></p>
    <button id="purchase-btn">Purchase</button>

    <script src="script.js"></script>
</body>
</html>


/* file: script.js */
```const denominations = [
  { name: "ONE HUNDRED", value: 100 },
  { name: "TWENTY", value: 20 },
  { name: "TEN", value: 10 },
  { name: "FIVE", value: 5 },
  { name: "ONE", value: 1 },
  { name: "QUARTER", value: 0.25 },
  { name: "DIME", value: 0.1 },
  { name: "NICKEL", value: 0.05 },
  { name: "PENNY", value: 0.01 },
];

let price = 0; // Initialize price of the item
let cid = []; // Initialize cash in drawer (2D array)

document.getElementById("purchase-btn").addEventListener("click", () => {
  const cashInput = document.getElementById("cash").value;
  const cash = parseFloat(cashInput);

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

  const changeDue = cash - price;
  const changeResult = calculateChange(changeDue, cid);

  const changeDueElement = document.getElementById("change-due");

  if (changeResult.status === "INSUFFICIENT_FUNDS") {
    changeDueElement.textContent = "Status: INSUFFICIENT_FUNDS";
  } else if (changeResult.status === "CLOSED") {
    changeDueElement.textContent = `Status: CLOSED ${formatChange(changeResult.change)}`;
  } else {
    changeDueElement.textContent = `Status: OPEN ${formatChange(changeResult.change)}`;
  }
});

function calculateChange(change, cid) {
  let remainingChange = change;
  const changeArr = [];
  let totalCid = 0;

  for (let i = 0; i < cid.length; i++) {
    totalCid += cid[i][1];
  }
  totalCid = Math.round(totalCid * 100) / 100;

  if (totalCid < change) {
    return { status: "INSUFFICIENT_FUNDS", change: [] };
  }

  for (const denom of denominations) {
    const drawerItem = cid.find((item) => item[0] === denom.name);
    if (!drawerItem || remainingChange < denom.value) continue;

    let usedAmount = 0;
    while (remainingChange >= denom.value && drawerItem[1] > 0) {
      remainingChange = Math.round((remainingChange - denom.value) * 100) / 100;
      drawerItem[1] -= denom.value;
      usedAmount += denom.value;
    }
    if (usedAmount > 0) changeArr.push([denom.name, usedAmount]);
  }

  if (remainingChange > 0) return { status: "INSUFFICIENT_FUNDS", change: [] };
  if (totalCid === change) return { status: "CLOSED", change: changeArr };

  return { status: "OPEN", change: changeArr };
}

function formatChange(changeArr) {
  return changeArr
    .map(([name, amount]) => `${name}: $${amount.toFixed(2)}`)
    .join(" ");
}```


/* 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/131.0.0.0 Safari/537.36

Challenge Information:

Build a Cash Register Project - Build a Cash Register

2

Hi there!

You should not have any variable in the global scope, except the price and cid.

3

Do you know what’s happening instead?

Try adding some console.log logging, to check what’s the result in #change-due element. It isn’t very convenient, but since tests run in order, it’s going to be easy to pin-point which log message is from the last test.

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.