Build a Cash Register Project - Build a Cash Register

JavaScript
1

Tell us what’s happening:

When I try all the tests manually, I get the correct output however the tests are still not passing

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Cash Register</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="container">
      <h1>Cash Register</h1>
      <label for="cash" id="input-label">Enter money from customer:</label>
      <input type="number" id="cash" />
      <button id="purchase-btn">Purchase</button>
      <p id="change-due"></p>
    </div>
    <script src="script.js"></script>
  </body>
</html>

/* file: script.js */
let price = 1.87;
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]
];

cid = [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]]

let cidObj = Object.fromEntries(cid);

const currencyToAmount = {
  'ONE HUNDRED': 100,
  'TWENTY': 20,
  'TEN': 10,
  'FIVE': 5,
  'ONE': 1,
  'QUARTER': 0.25,
  'DIME': 0.1,
  'NICKEL': 0.05,
  'PENNY': 0.01  
}

const cash = document.getElementById('cash');
const output = document.getElementById('change-due');
const btn = document.getElementById('purchase-btn');


const handleOutput = () => {
  if (Number(cash.value) < price) {
    alert("Customer does not have enough money to purchase the item");
    return;
  }

  if (Number(cash.value) === price) {
    output.innerText = "No change due - customer paid with exact cash";
    return;
  }

  let change = Number(cash.value) - price;
  let amountUsed = {};
  let total = Object.values(cidObj).reduce((sum, m) => sum + m, 0);
  total = Math.round(total * 100) / 100;
  let status = "OPEN";

  if (total < change) {
    status = "INSUFFICIENT_FUNDS";
    output.innerText = `Status: ${status}`;
    return;
  }

  while (change > 0) {
    let found = false; 
    for (let key in currencyToAmount) {
      if (currencyToAmount[key] <= change && cidObj[key] > 0) {
        change = Math.round((change - currencyToAmount[key]) * 100) / 100;
        cidObj[key] = Math.round((cidObj[key] - currencyToAmount[key]) * 100) / 100;
      if (amountUsed[key]) {
        amountUsed[key] += currencyToAmount[key];
      } else {
        amountUsed[key] = currencyToAmount[key];
      }
        found = true;
        break;
      }
    }
    if (!found) {
      status = "INSUFFICIENT_FUNDS";
      break;
    }
  }

  if (status === "INSUFFICIENT_FUNDS") {
    output.innerText = `Status: ${status}`;
    return;
  }

  let remainingCash = Object.values(cidObj).reduce((sum, m) => sum + m, 0);
  remainingCash = Math.round(remainingCash * 100) / 100;

  if (remainingCash === 0) {
    status = "CLOSED";
  }

  output.innerText = `Status: ${status}`;
  for (let key in amountUsed) {
    output.innerText += ` ${key}: $${amountUsed[key].toFixed(2)}`;
  }

  output.innerText = output.innerText.trim();
}

btn.addEventListener('click', () => {
  handleOutput();
})

cash.addEventListener('keydown', (e) => {
  if (e.key === "Enter") {
    handleOutput();
  }
})

/* file: styles.css */
*, ::before, ::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Roboto';
}

body {
  background-color: #FFFDF2;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  
}

h1 {
  margin-bottom: 3rem;
  font-size: 4rem;
  text-align: center;
}

#cash, #purchase-btn,
#change-due {
  width: 80%;
  height: 3rem;
  margin-bottom: .2rem;
  font-size: 1.3rem;
  text-align: center;
}

#purchase-btn {
  border: none;
  margin-bottom: 2rem;
}

#input-label {
  margin-bottom: .3rem;
  font-size: 1.3rem;
}

@media (min-width: 768px) {
  .container {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
  }
  #purchase-btn:hover {
    background-color: rgb(230, 230, 230);
    cursor: pointer;
  }
}

@media (min-width: 1000px) {
  .container {
    width: 50%;
  }
}

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 Edg/131.0.0.0

Challenge Information:

Build a Cash Register Project - Build a Cash Register

2

Hi there!

The global variable assignment are throwing errors in this project. You should not have any global variable, except price and cid once only.