Build a cash register question

halli.
I cannot clear the instructions in one place. How can I clear the instructions here?
could you help me?

const purchaseBtn = document.getElementById("purchase-btn");
const changeDuo = document.getElementById("change-due");
const drawer = document.getElementById("drawer");
const cash = document.getElementById("cash");
const priceInput = document.getElementById("price");
const price = parseFloat(priceInput.value);

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 drawerList = [
  ["PENNY", 0.01],
  ["NICKEL", 0.05],
  ["DIME", 0.1],
  ["QUARTER", 0.25],
  ["ONE", 1],
  ["FIVE", 5],
  ["TEN", 10],
  ["TWENTY", 20],
  ["ONE HUNDRED", 100]
];

const rechnen = () => {
  
  const priceOfCash = parseFloat(cash.value);
  let change = priceOfCash - price;

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

  if (priceOfCash === price) {
    changeDuo.innerHTML = `<p>No change due - customer paid with exact cash</p>`;
    return;
  }

  let totalCID = cid.map(unit => unit[1]).reduce((acc, amount) => acc + amount, 0);

  if (change > totalCID) {
    changeDuo.innerHTML = "Status: INSUFFICIENT_FUNDS";
    return;
  }

  let changeArray = [];
  for (let i = drawerList.length - 1; i >= 0; i--) {
    const unitName = drawerList[i][0];
    const unitValue = drawerList[i][1];
    const availableAmount = cid[i][1];
    const unitsToGive = Math.floor(change / unitValue);
    const amountToGive = Math.min(unitsToGive * unitValue, availableAmount);

    if (amountToGive > 0) {
      cid[i][1] -= amountToGive;
      changeArray.push([unitName, amountToGive]);
      change -= amountToGive;
      change = parseFloat(change.toFixed(2));
    }
  }

  if (change > 0) {
    changeDuo.innerHTML = "Status: INSUFFICIENT_FUNDS";
  } else {
    let totalChangeGiven = changeArray.reduce((acc, unit) => acc + unit[1], 0);
    if (totalChangeGiven === totalCID &&) {
      changeDuo.innerHTML = "Status: CLOSED";
    } else {
      changeDuo.innerHTML = `Status: OPEN `;
      changeArray.forEach(unit => {
        changeDuo.innerHTML += `<p>${unit[0]}: $${unit[1].toFixed(2)}</p>`;
      });
    }

    drawer.innerHTML = '';
    cid.forEach(unit => {
      drawer.innerHTML += `<p>${unit[0]}: $${unit[1].toFixed(2)}</p>`;
    });
  }
};

purchaseBtn.addEventListener("click",  () => {
  const price = parseFloat(priceInput.value); 
  rechnen(price)});
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Cash Register Project</title>
  <link rel="stylesheet" href="styles.css" />
</head>

<body>
  <header>
    <h1>Cash Register Project</h1>
    <p>Enter cash from customer:</p>
    <input type="number" id="price" placeholder="Enter price"></input>
    <input type="number" id="cash"></input>
<div id="change-due"></div>
<button type="submit" id="purchase-btn">purchase</button>
    </header>
    <main>
      <h3>Total: $3.26</h3>
        <p>Change in drawer:</p>
        <div id="drawer">
      </div>
    </main>
  <script src="./script.js"></script>
</body>

</html>

your javascript code is not executable, please fix the syntax errors and provide the fixed code

1 Like

thank you. i found where is mistake.
thank you so much