Build a Cash Register Project - Build a Cash Register

JavaScript
1

Tell us what’s happening:

Hello guys, I need some help :sweat_smile:

I’m stuck on the last two steps of my JS cash register project:

Step 18:

Price = 19.5

#cash value = 20

cid = [[“PENNY”, 0.5], [“NICKEL”, 0], [“DIME”, 0], [“QUARTER”, 0], [“ONE”, 0], [“FIVE”, 0], [“TEN”, 0], [“TWENTY”, 0], [“ONE HUNDRED”, 0]]

When I click #purchase-btn, #change-due should show: “Status: CLOSED PENNY: $0.5”

Step 19:

Price < cash

Total cash in drawer equals the change due

When I click #purchase-btn, #change-due should show “Status: CLOSED”

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</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Cash Register</h1>

  <label for="cash">Customer Cash: </label>
  <input type="number" id="cash" step="0.01" placeholder="Enter cash amount">
  <button id="purchase-btn">Purchase</button>

  <p id="change-due"></p>

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


/* file: styles.css */
body {
  font-family: Arial, sans-serif;
  background-color: #f8f0e3;
  padding: 30px;
}

input, button {
  padding: 10px;
  margin: 10px 0;
  font-size: 16px;
}

#change-due {
  margin-top: 20px;
  font-weight: bold;
}

/* 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 currencyUnits = [
  { 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 }
];

document.getElementById("purchase-btn").addEventListener("click", function() {
  let cash = parseFloat(document.getElementById("cash").value);
  const changeDueElem = document.getElementById("change-due");

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

  if (cash === price) {
    changeDueElem.textContent = "No change due - customer paid with exact cash";
    return;
  }

  let changeDue = +(cash - price).toFixed(2);
  let totalCid = cid.reduce((sum, [_, amount]) => sum + amount, 0).toFixed(2);
  let changeArray = [];

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

  for (let unit of currencyUnits) {
    let [name, _] = cid.find(c => c[0] === unit.name);
    let available = cid.find(c => c[0] === unit.name)[1];
    let amountToReturn = 0;

    while (changeDue >= unit.value && available >= unit.value) {
      changeDue -= unit.value;
      changeDue = Math.round(changeDue * 100) / 100;
      available -= unit.value;
      amountToReturn += unit.value;
    }

    if (amountToReturn > 0) {
      changeArray.push([unit.name, amountToReturn]);
    }
  }

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

  const remainingCash = cid.reduce((sum, [name, amount]) => {
    const used = changeArray.find(c => c[0] === name)?.[1] || 0;
    return sum + (amount - used);
  }, 0).toFixed(2);

  if (remainingCash == 0) {
    let statusClosed = changeArray.map(c => `${c[0]}: $${c[1]}`).join(" ");
    changeDueElem.textContent = `Status: CLOSED ${statusClosed}`;
  } else {
    let statusOpen = changeArray.map(c => `${c[0]}: $${c[1]}`).join(" ");
    changeDueElem.textContent = `Status: OPEN ${statusOpen}`;
  }
});

Your browser information:

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

Challenge Information:

Build a Cash Register Project - Build a Cash Register

2

have you tested your app? what is the output you get?

3

It works perfectly but I still can’t proceed.

4

so you tested your app using those conditions?
can you describe how you tested it?