Build a Cash Register Project - Build a Cash Register

Tell us what’s happening:

Describe your issue in detail here.
I cant identify that code error in that out put shows lots of error

  • When the value in the #cash element is less than price, an alert should appear with the text "Customer does not have enough money to purchase the item".

  • Failed: When the value in the #cash element is equal to price, the value in the #change-due element should be "No change due - customer paid with exact cash".

  • Failed: When price is 19.5, the value in the #cash element is 20, cid is [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]], and the #purchase-btn element is clicked, the value in the #change-due element should be "Status: OPEN QUARTER: $0.5".

  • Failed: When price is 3.26, the value in the #cash element is 100, cid is [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]], and the #purchase-btn element is clicked, the value in the #change-due element should be "Status: OPEN TWENTY: $60 TEN: $20 FIVE: $15 ONE: $1 QUARTER: $0.5 DIME: $0.2 PENNY: $0.04".

  • Failed: When price is 19.5, the value in the #cash element is 20, cid is [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]], and the #purchase-btn element is clicked, the value in the #change-due element should be "Status: INSUFFICIENT_FUNDS"

  • Failed: When price is 19.5, the value in the #cash element is 20, cid is [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 1], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]], and the #purchase-btn element is clicked, the value in the #change-due element should be "Status: INSUFFICIENT_FUNDS".

Failed: When price is 19.5, the value in the #cash element is 20, cid is [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]], and the #purchase-btn element is clicked, the value in the #change-due element should be "Status: CLOSED PENNY: $0.5".

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">
    <input type="number" id="cash" placeholder="Enter cash provided by customer">
    <div id="change-due"></div>
    <button id="purchase-btn">Purchase</button>
  </div>
  <script src="script.js"></script>
</body>
</html>

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

.container {
  text-align: center;
}

#cash {
  padding: 8px;
  font-size: 16px;
}

#change-due {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
}

#purchase-btn {
  padding: 8px 16px;
  font-size: 16px;
  background-color: #4CAF50;
  border: none;
  color: white;
  cursor: pointer;
  margin-top: 20px;
}

#purchase-btn:hover {
  background-color: #45a049;
}

/* file: script.js */
document.getElementById("purchase-btn").addEventListener("click", function() {
  const price = 19.5;
  const cashProvided = parseFloat(document.getElementById("cash").value);

  if (cashProvided < price) {
    alert("Customer does not have enough money to purchase the item");
    return; // Stop execution if cash provided is less than price
  }

  if (cashProvided === price) {
    document.getElementById("change-due").innerText = "No change due - customer paid with exact cash";
    return; // Stop execution if cash provided is equal to price
  }

  const cid = [
    ["PENNY", 0.5],
    ["NICKEL", 0],
    ["DIME", 0],
    ["QUARTER", 0],
    ["ONE", 0],
    ["FIVE", 0],
    ["TEN", 0],
    ["TWENTY", 0],
    ["ONE HUNDRED", 0]
  ];

  const changeDue = getChange(price, cashProvided, cid);
  document.getElementById("change-due").innerText = changeDue;
});

function getChange(price, cashProvided, cid) {
  const currencyValues = {
    "ONE HUNDRED": 100,
    "TWENTY": 20,
    "TEN": 10,
    "FIVE": 5,
    "ONE": 1,
    "QUARTER": 0.25,
    "DIME": 0.1,
    "NICKEL": 0.05,
    "PENNY": 0.01
  };

  let change = cashProvided - price;
  let availableCash = 0;

  for (let [name, amount] of cid) {
    availableCash += amount;
  }

  if (change > availableCash) {
    return "Status: INSUFFICIENT_FUNDS";
  }

  if (change === availableCash) {
    return "Status: CLOSED";
  }

  let changeArray = [];
  for (let i = cid.length - 1; i >= 0; i--) {
    const currencyName = cid[i][0];
    const currencyValue = currencyValues[currencyName];
    let currencyAmount = cid[i][1];

    let currencyChange = 0;
    while (currencyValue <= change && currencyAmount > 0) {
      change -= currencyValue;
      change = Math.round(change * 100) / 100;
      currencyAmount -= currencyValue;
      currencyChange += currencyValue;
    }

    if (currencyChange > 0) {
      changeArray.push([currencyName, currencyChange]);
    }
  }

  if (change > 0) {
    return "Status: INSUFFICIENT_FUNDS";
  }

  return changeArray.map(currency => `${currency[0]}: $${currency[1]}`).join(" ");
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:124.0) Gecko/20100101 Firefox/124.0

Challenge Information:

Build a Cash Register Project - Build a Cash Register

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.

price and cid need to be global variables

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