Stuck on the Cash Register project! Some tests won't pass :(

JavaScript
1

Hey! I’m stuck on this project! I’m having trouble with the tests. If i chance the cid and price as the tests describe then some code passes, but others don’t. Can someone help, please!

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</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div id="main">
      <div id="user-input">
        <label for="cash">Enter cash from customer:</label
        ><input type="number" name="cash" id="cash" /><button id="purchase-btn">
          Purchase
        </button>
        <p id="change-due"></p>
      </div>
      <div id="register">
        <h1>Cash Register</h1>
        <img src="images/cash-register1.png" alt="cash register image" />
        <p id="cash-screen">Total: $1.87</p>
      </div>
      <div id="cid">
        <p id="drawer"></p>
      </div>
    </div>
    <script src="script.js" defer></script>
  </body>
</html>

JS:

let cash = document.getElementById("cash");
let displayChangeDue = document.getElementById("change-due");
let purchaseBtn = document.getElementById("purchase-btn");
let displayCid = document.getElementById("drawer");
let priceDisplay = document.getElementById("cash-screen");
let changeGiven = [];
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],
];

priceDisplay.innerHTML = `Total: $${price}`;

const getDenominationValue = {
  PENNY: 0.01,
  NICKEL: 0.05,
  DIME: 0.1,
  QUARTER: 0.25,
  ONE: 1,
  FIVE: 5,
  TEN: 10,
  TWENTY: 20,
  "ONE HUNDRED": 100,
};

let detailedCid = [...cid].reverse().map((item) => {
  return {
    denomination: item[0],
    value: getDenominationValue[item[0]],
    amount: item[1] / getDenominationValue[item[0]],
  };
});

function checkRegister() {
  let cashInt = parseFloat(cash.value);
  let change = Number((cashInt - price).toFixed(2));
  let totalCid = cid.reduce((total, sum) => total + sum[1], 0);
  console.log(totalCid);

  if (cashInt < price) {
    alert("Customer does not have enough money to purchase the item");
    return;
  } else if (cashInt === price) {
    displayChangeDue.innerText =
      "No change due - customer paid with exact cash";
    return;
  }

  if (change > totalCid) {
    displayChangeDue.innerText = "Status: INSUFFICIENT_FUNDS";
    return;
  }

  detailedCid.forEach((item) => {
    if (change >= item.value) {
      let count = 0;
      while (item.amount > 0 && change >= item.value) {
        change -= item.value;
        change = parseFloat(change.toFixed(2));
        item.amount -= 1;
        count++;
      }
      if (count > 0) {
        changeGiven.push([item.denomination, count * item.value]);
      }
    }
  });

  if (change > 0) {
    displayChangeDue.innerText = "Status: INSUFFICIENT_FUNDS";
    return;
  } else {
    displayCashInDrawer();
    displayChange();
  }
}

function displayChange() {
  let remainingCid = detailedCid.reduce(
    (total, { value, amount }) => total + value * amount,
    0
  );

  if (remainingCid === 0) {
    displayChangeDue.innerHTML =
      "Status: CLOSED <br>" +
      changeGiven.map((cash) => `${cash[0]}: $${cash[1]} <br>`).join("");
  } else {
    displayChangeDue.innerHTML =
      "Status: OPEN <br>" +
      changeGiven.map((cash) => `${cash[0]}: $${cash[1]} <br>`).join("");
  }
}

function displayCashInDrawer() {
  displayCid.innerHTML =
    "<h4>Cash in Drawer:</h4>" +
    cid
      .map((cash) => `${cash[0]}: $${cash[1].toFixed(2)} <br>`)
      .reverse()
      .join("");
}
purchaseBtn.addEventListener("click", checkRegister);
window.onload = displayCashInDrawer;
2

if which tests pass and which not change depending on the starting value of cid and price you have an issue you need to solve: the tests will change the value of cid and price without restarting the app

Your code contains global variables that are changed each time the function is run. This means that after each function call completes, subsequent function calls start with the previous value. To fix this, make sure your function doesn’t change any global variables, and declare/assign variables within the function if they need to be changed.

Example:

var myGlobal = [1];
function returnGlobal(arg) {
  myGlobal.push(arg);
  return myGlobal;
} // unreliable - array gets longer each time the function is run

function returnLocal(arg) {
  var myLocal = [1];
  myLocal.push(arg);
  return myLocal;
} // reliable - always returns an array of length 2