Test #7 failed - Build a Cash Register project

Tell us what’s happening:

Test #7 fails :
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.

Why? I typed 100 for cash and I got the same result of the requested one.

Here’s the JavaScript I wrote:

Your code so far

let price = 3.26;
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]
];
let cidSec = [0, 0, 0, 0, 0, 0, 0, 0, 0];

const changeToGive = document.getElementById("change-due");
const cash = document.getElementById("cash");
const purchaseBtn = document.getElementById("purchase-btn");
const changeInDrawer = document.getElementById("change-in-drawer");
const totalPrice = document.getElementById("total-price");

let errorCheck = false;

const updateDrawer = (money) => {
  //update drawer
  let htmlString = "<p><strong>Change in drawer:</strong></p>";
  money.forEach((piece) => {
    if (piece[1] > 0) {
      htmlString += `<p>${piece[0]}: $${piece[1]}</p>`;
    }
  });
  changeInDrawer.innerHTML = htmlString;

  //update total price
  totalPrice.textContent = `Total: $${price}`;
};

window.onLoad = updateDrawer(cid);

const checkCash = (userCash) => {
  if (userCash < price) {
    errorCheck = true;
    alert("Customer does not have enough money to purchase the item");
  } else if (userCash === price) {
    errorCheck = true;
    changeToGive.innerHTML = `<p>No change due - customer paid with exact cash</p>`;
  } else {
    errorCheck = false;
  }
};

const resetCidSec = () => {
  cidSec.forEach((el) => {
    el = 0;
  });
};

const checkClosedDrawer = () => {
  let drawerWCash = false;
  cid.forEach((el) => {
    if (el[1] > 0) {
      drawerWCash = true;
    }
  });
  if (drawerWCash) {
    changeToGive.innerHTML = `<p>Status: OPEN</p>` + changeToGive.innerHTML;
  } else {
    changeToGive.innerHTML = `<p>Status: CLOSED</p>` + changeToGive.innerHTML;
  }
};

const updateChange = (userCash) => {
  if (!errorCheck) {
  let change = userCash - price;
  const cidMemo = cid;

    while (change >= 100 && cid[8][1] >= 100) {
      change -= 100;
      cidSec[8] += 100;
      cid[8][1] -= 100;      
    }
    while (change >= 20 && cid[7][1] >= 20) {
      change -= 20;
      cidSec[7] += 20;
      cid[7][1] -= 20;
    }
    while (change >= 10 && cid[6][1] >= 10) {
      change -= 10;
      cidSec[6] += 10;
      cid[6][1] -= 10;
    }
    while (change >= 5 && cid[5][1] >= 5) {
      change -= 5;
      cidSec[5] += 5;
      cid[5][1] -= 5;
    }
    while (change >= 1 && cid[4][1] >= 1) {
      change -= 1;
      cidSec[4] += 1;
      cid[4][1] -= 1;
    }
    while (change >= 0.25 && cid[3][1] >= 0.25) {
      change -= 0.25;
      cidSec[3] += 0.25;
      cid[3][1] -= 0.25;
    }
    while (change >= 0.1 && cid[2][1] >= 0.1) {
      change -= 0.1;
      cidSec[2] += 0.1;
      cid[2][1] -= 0.1;
    }
    while (change >= 0.05 && cid[1][1] >= 0.05) {
      change -= 0.05;
      cidSec[1] += 0.05;
      cid[1][1] -= 0.05;
    }
    while (change >= 0 && cid[0][1] > 0) {
      change -= 0.01;
      cidSec[0] += 0.01;
      cid[0][1] -= 0.01;
    }

  if (change <= 0) {
    cid.forEach((cidUp, index) => {
      if (cidSec[index] > 0) {
        changeToGive.innerHTML = `
        <p>${cidUp[0]}: $${cidSec[index]}</p>
        ` + changeToGive.innerHTML;
      }
    });

    checkClosedDrawer();
  
    updateDrawer(cid);
    resetCidSec();
  } else {
    changeToGive.innerHTML = `<p>Status: INSUFFICIENT_FUNDS</p>`;
    cid = cidMemo;
    resetCidSec();
    }
};
};

const variousChecks = (cashToCheck) => {
  checkCash(cashToCheck);
  updateChange(cashToCheck);
}

purchaseBtn.addEventListener('click', () => {
  variousChecks(parseFloat(cash.value));
    cash.value = "";
});

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

Your browser information:

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

Challenge Information:

Build a Cash Register Project - Build a Cash Register

Could you share your HTML as well? It’s required to fully reproduce working state.

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

Looks like code depends on some external variables other than the price, cid and #cash element, which persists between tests when they are run one by one, without reloading page. This creates side-effect and different result than expected when testing.