Build a Cash Register Project - Build a Cash Register

Tell us what’s happening:

Hello guys (SOS HERE) i dont understand this code is complete but still gives me two errors what could be the problem

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    
</head>
<body>
    <input type="text" id="cash">
    <div id="change-due"></div>
    <button id="purchase-btn">Purchase</button>
    <script src="./script.js"></script>
</body>
</html>

/* file: styles.css */

/* 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 cash = document.getElementById("cash");
const change = document.getElementById("change-due");
const sale = document.getElementById("purchase-btn");


let currencyUnit = [
  ["PENNY", 0.01],
  ["NICKEL", 0.05],
  ["DIME", 0.1],
  ["QUARTER", 0.25],
  ["ONE", 1],
  ["FIVE", 5],
  ["TEN", 10],
  ["TWENTY", 20],
  ["ONE HUNDRED", 100]
];

sale.addEventListener("click", () =>{
  const cashValue = parseFloat(cash.value);
  const changeDue = cashValue - price;

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

  if(cashValue === price){
    change.innerText = "No change due - customer paid with exact cash";
    return;
  }
  const changeResult = getChange(changeDue, cid);
  if (changeResult.status === "INSUFFICIENT_FUNDS" || changeResult.status === "CLOSED") {
    change.innerText = `Status: ${changeResult.status} ${formateChange(changeResult.change)}`
  }else {
    let changeText = `Status: OPEN ${formateChange(changeResult.change)}`;
    change.innerText = changeText.trim()
  }
});

const getChange = (changeDue, cid) =>{
  let totalCid = parseFloat(cid.reduce((sum, [_, amount]) => sum + amount, 0).toFixed(2))
  if (totalCid < changeDue){
    return {status: "INSUFFICIENT_FUNDS", change: []}
  }
let changeArray = [];
let remainingChange = changeDue;

for(let i = currencyUnit.length -1; i >= 0; i--) {
  let unit = currencyUnit[i][0];
  let unitValue = currencyUnit[i][1];
  let unitInDrawer = cid[i][1];
  
  if (unitValue <= remainingChange && unitInDrawer > 0){
    let amountFromUnit = 0;

    while(remainingChange >= unitValue && unitInDrawer > 0){
      remainingChange = (remainingChange - unitValue).toFixed(2);
      unitInDrawer -= unitValue;
    }
    if(amountFromUnit > 0){
      changeArray.push([unit, amountFromUnit])
    }
  }
}//end of for loop

if(remainingChange > 0){
  return {status: "INSUFFICIENT_FUNDS", change: []}
}

if(changeDue === totalCid) {
  return {status: "CLOSED", change: cid}
}

return {status: "OPEN", change: changeArray }

}//end of getChange()


const formateChange = changeArray => changeArray.map(([unit, amount]) => `${unit}: $${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/125.0.0.0 Safari/537.36

Challenge Information:

Build a Cash Register Project - Build a Cash Register

I’ve tried manually both falling cases. After clicking the button, the only text that is displayed is: Status: OPEN.

so what should be the problem

That doesn’t look like the expected result.

can you please help me with that

what part of your code determines what’s written in the page?