Build a Cash Register Project - Build a Cash Register

Tell us what’s happening:

Describe your issue in detail here.
the code solves all problems but i have to manually change the cid variable and the price variable and i don’t know why is this my mistake or a bug in the tests

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Cash Register</title>
    <meta charset = "utf-8">
    <link rel ="stylesheet" href="styles.css">
  </head>
  <body>
    <input id="cash" type="number"></input>
    <div id="change-due"></div>
    <button id="purchase-btn">Purchase</button>
    <script src="script.js"></script>
  </body>
</html>
/* file: styles.css */
:root{
  --secondary:#b3e0ff;
  --main:#66c2ff;
}
body{
  background:linear-gradient(45deg,#66c2ff, #b3e0ff);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
#cash{
  padding:2px;
  margin:20px;

}
#purchase-btn{
  border:1px solid #2b7eb5;
  color:var(--secondary);
  padding:4px;
  background:#33adff;
  box-shadow:5px 5px 2px rgba(102, 194, 255,0.8);
  border-radius:2px;
  cursor:pointer;
}
#purchase-btn:hover{
  color:white;
}
#purchase-btn:active{
  border:none;
  color:white;
  padding:4px;
}
/* file: script.js */
let price = 1.87;
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 cashAmo = document.getElementById("cash")

const changeSection = document.getElementById("change-due")

const purchaseBtn = document.getElementById("purchase-btn")

let cashInDrawer = cid.map((element)=>element[1]).reduce((currentValue,previousValue)=>currentValue+previousValue)

changeSection.textContent = "what did you just do"
purchaseBtn.addEventListener("click",cashReg)

function cashReg(){
 if(parseFloat(cash.value) == price){
  changeSection.innerText = `No change due - customer paid with exact cash`
  return
  }
  else if(parseFloat(cash.value)<price||cash.value ===""){
  alert("Customer does not have enough money to purchase the item")
  return 
}
else{
  changeDue()
}
}
function changeDue(){
  if(cashInDrawer< cash.value - price){
    changeSection.innerText = `Status: INSUFFICIENT_FUNDS`
    return 
  }
  else if(cashInDrawer >= cash.value - price){
    changeSection.innerText = changeSum()
  }
}

function changeSum(){
  const pid = [...cid]
let stash = cash.value - price ;

let result = [["HUNDRED", 0],["TWENTY", 0],["TEN", 0],["FIVE", 0],["ONE", 0],["QUARTER", 0],["DIME", 0],["NICKLE", 0],["PENNY", 0]];
let stats = "OPEN";

if(cashInDrawer - stash === 0){
  stats = "CLOSED"
}
while(stash>=100&& pid[8][1]!=0){
result[0][1] += 100
pid[8][1] -= 100
stash -= 100
}

while (stash<100 && pid[7][1]!=0 && stash >= 20||pid[8][1] == 0 && pid[7][1]!=0 && stash > 20){
result[1][1] += 20
pid[7][1] -= 20
stash -= 20
}

 while (stash<20 && pid[6][1]!= 0 && stash >= 10||pid[7][1] == 0 && pid[6][1]!=0&& stash >= 10){
result[2][1] += 10
pid[6][1] -= 10
stash -= 10
}

while (stash<10&& pid[5][1]!=0 && stash >= 5||pid[6][1] == 0 && pid[5][1]!=0&& stash >= 5){
result[3][1] += 5
pid[5][1] -=5
stash -=5
}

 while (stash<5&& pid[4][1]!=0&& stash >= 1||pid[5][1] == 0 && pid[4][1]!=0&& stash >= 1){
result[4][1] += 1
pid[4][1] -=1
stash -=1
}

while (stash<1&& pid[3][1]!=0&& stash >= 0.25||pid[4][1] == 0 && pid[3][1]!=0&& stash >= .25){
result[5][1] += 0.25
pid[3][1] -=0.25
stash -= 0.25
}

while (stash<0.25&& pid[2][1]!=0&& stash >= 0.1||pid[3][1] == 0 && pid[2][1]!=0&& stash >= 0.1){
result[6][1] += 0.1
pid[2][1] -=0.1
stash -= 0.1
}

while (stash<0.1&& pid[1][1]!=0&& stash >= 0.05| pid[2][1] == 0 && pid[1][1]!=0&& stash >= 0.05){
result[7][1] += 0.05
pid[1][1] -=0.05
stash -=0.05
}

while (stash<0.05&& pid[0][1]!=0&& stash >= 0.01||pid[1][1] == 0 && pid[0][1]>=stash&& stash >= 0.01){
result[8][1] = stash
pid[0][1] -= stash
stash -= stash
}

if(result[8][1]<0.1){
result[8][1] = result[8][1].toFixed(2)
}
console.log(result[8][1])
let finishedRes =[]  ;
result.filter((elem)=>elem[1]!=0).forEach((elem)=> finishedRes.push(`${elem[0]}: $${elem[1]}`))
if(stash>0){
  return "Status: INSUFFICIENT_FUNDS"
}
return `Status: ${stats} ${finishedRes.join(" ")}`
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36 OPR/106.0.0.0 (Edition std-2)

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.

When code is changed manually, the preview is reloaded, resulting in whole code being executed. On the other hand tests are changing only cid, price and #cash element. Since trying cases manually work, but tests run one-by-one fail, this suggests there’s part of the code that’s executed (only) on the initial load.

ty for the help i just transfered every thing to the eventListener so every part executes when the button is clicked