Build a Cash Register Project - Build a Cash Register

JavaScript
1

Tell us what’s happening:

Hi, I don’t understand why my code won’t run through the tests. The code is doing exactly what the test is saying but it won’t run through the algorithm I don’t know why

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

    <label for="price">Item Price:</label>
    <input type="number" id="price" placeholder="Enter item price" step="0.01">

    <label for="cash">Customer Cash:</label>
    <input type="number" id="cash" placeholder="Enter cash given" step="0.01">

    <button id="purchase-btn">Calculate Change</button>

    <div id="change-due" class="output">Change Due: </div>
  </div>

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

/* file: styles.css */
body {
  font-family: Arial, sans-serif;
  background-color: #f9f9f9;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.container {
  background: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  width: 300px;
  text-align: center;
}

h1 {
  font-size: 24px;
  margin-bottom: 20px;
  color: #333;
}

label {
  display: block;
  font-size: 14px;
  margin: 10px 0 5px;
  color: #555;
}

input {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

button {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 4px;
  background-color: #007BFF;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #0056b3;
}

.output {
  margin-top: 20px;
  font-size: 16px;
  color: #333;
  border-top: 1px solid #ddd;
  padding-top: 10px;
}


/* file: script.js */
let price;
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 DENOMINATIONS = {
  "PENNY": 0.01,
  "NICKEL": 0.05,
  "DIME": 0.1,
  "QUARTER": 0.25,
  "ONE": 1,
  "FIVE": 5,
  "TEN": 10,
  "TWENTY": 20,
  "ONE HUNDRED": 100
};

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

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

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

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

  const changeDueElement = document.getElementById('change-due');
  changeDueElement.textContent = `Change Due: ${result.message}`;
});

function calculateChange(changeDue, cid) {
  let totalCid = cid.reduce((total, denom) => total + denom[1], 0);
  totalCid = parseFloat(totalCid.toFixed(2));

  if (totalCid < changeDue) {
    return { status: "INSUFFICIENT_FUNDS", message: "Status: INSUFFICIENT_FUNDS" };
  }

  if (totalCid === changeDue) {
    return { status: "CLOSED", message: `Status: CLOSED ${formatCid(cid)}` };
  }

  let changeArray = [];
  for (let i = cid.length - 1; i >= 0; i--) {
    let denomName = cid[i][0];
    let denomTotal = cid[i][1];
    let denomValue = DENOMINATIONS[denomName];
    let denomUsed = 0;

    while (changeDue >= denomValue && denomTotal > 0) {
      changeDue -= denomValue;
      denomTotal -= denomValue;
      denomUsed += denomValue;

      changeDue = parseFloat(changeDue.toFixed(2));
    }

    if (denomUsed > 0) {
      changeArray.push([denomName, denomUsed]);
    }
  }

  if (changeDue > 0) {
    return { status: "INSUFFICIENT_FUNDS", message: "Status: INSUFFICIENT_FUNDS" };
  }

  return { status: "OPEN", message: `Status: OPEN ${formatCid(changeArray)}` };
}

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

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 shouldn’t have any global variable, except the above two.