Build A Cash Register Project - Build A Cash Register

Hello

I am running into an issue that I can’t quite understand. I have been running the tests on my code constantly to troubleshoot specific issues, however, whenever I change the value of a specific array in cid, some tests that were passing before suddenly fail, while the tests that I took the cid from to directly troubleshoot the issues suddenly passed.

This perplexes me, because I am pretty sure the tests are looking to reassign each array to match the cid of the specific test, but if that is the case then why do some checks suddenly fail when I manually change it myself? Below, I include my HTML and CSS, and then two different JS snippets, one with cid matching one test, and another matching a different cid. Any ideas?

Apologies in advance for the messy notes and code.

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="styles.css">    
  </head>
  <body>
    <main>
      <h2>Cash Register</h2>
      <div id="change-due"></div>
      <input id="cash" placeholder="Enter Cash" type="number"></input>
      <button id="purchase-btn">Purchase</button>   
    </main>
    <script src="script.js"></script>
  </body>
</html>
body {
  font-family: sans-serif;
  color: #eeeeee;
  background-color: #222222;
}
// We need to take change, convert it into individual bills
// to give to the customer, and deduce that amount from
// each array in cid 

let cashInput = document.getElementById("cash");
let price = 19.5;
let purchaseBtn = document.getElementById("purchase-btn");
let changeDue = document.getElementById("change-due")

// something about changing the values here is causing an issue with the checks
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 cashReference = [
  ["PENNY", 0.01],
  ["NICKEL", 0.05],
  ["DIME", 0.1],
  ["QUARTER", 0.25],
  ["ONE", 1],
  ["FIVE", 5],
  ["TEN", 10],
  ["TWENTY", 20],
  ["ONE HUNDRED", 100]
];

const calculate = () => {

  // Change needs to be compared to each different value of
  // bill, take out the appropriate number of bills, 
  // subtract that total from each array in the cid,
  // and display the amount on screen

  let change = cashInput.value - price;
  let i = 8;
  changeDue.innerHTML = ""

  if (!determineChange() || !determineStatus()) {
    return
  }

  while (i >= 0) {

    if (change >= cashReference[i][1]) {
      console.log(change)
      let numberOfBills = Math.floor(change / cashReference[i][1])
      let amountOfBills = numberOfBills * cashReference[i][1];
      if (amountOfBills > cid[i][1]) {
        let restInDrawer = cid[i][1]
        change -= restInDrawer
        changeDue.textContent += `${cid[i][0]}: \$${restInDrawer} `
        cid[i][1] -= cid[i][1]
      } else {
        cid[i][1] -= amountOfBills;
        change -= amountOfBills;
        changeDue.textContent += `${cid[i][0]}: \$${amountOfBills} `  
      }
      change = change.toFixed(2) 
    }
    i--;
  }
}

// Deduces the total of all the cash currently in cid

let cidTotal = 0;

for (let i = 0; i <= 8; i++) {
  cidTotal += cid[i][1];
};

let roundedCidTotal = cidTotal.toFixed(2);
console.log(roundedCidTotal)

// Determines if cash register is functional

const determineStatus = () => {
  
  let change = cashInput.value - price;

  if (roundedCidTotal < change) {
    changeDue.innerHTML = `<p>Status: INSUFFICIENT_FUNDS </p>`;
    return false 
  } else if (roundedCidTotal === change) {
    changeDue.innerHTML = `<p>Status: CLOSED </p>`;
    return false
  } else if (roundedCidTotal > change) {
    changeDue.innerHTML = `<p>Status: OPEN </p>`;
    return true
    // might throw error over if change can be returned, come back to this later
  }
}

// Checking if cash is less than or equal to price to
// give change-due message

const determineChange = () => {

  if (cashInput.value < price) {
    alert("Customer does not have enough money to purchase the item")
    return false
  } else if (cashInput.value == price) {
    changeDue.innerHTML = `<p>No change due - customer paid with exact cash</p>`
    return false
  } else {return true}
}

purchaseBtn.addEventListener("click", calculate);
// We need to take change, convert it into individual bills
// to give to the customer, and deduce that amount from
// each array in cid 

let cashInput = document.getElementById("cash");
let price = 19.5;
let purchaseBtn = document.getElementById("purchase-btn");
let changeDue = document.getElementById("change-due")

// something about changing the values here is causing an issue with the checks
let cid = [
  ["PENNY", 0.1],
  ["NICKEL", 0],
  ["DIME", 0],
  ["QUARTER", 0],
  ["ONE", 0],
  ["FIVE", 0],
  ["TEN", 0],
  ["TWENTY", 0],
  ["ONE HUNDRED", 0]
];

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

const calculate = () => {

  // Change needs to be compared to each different value of
  // bill, take out the appropriate number of bills, 
  // subtract that total from each array in the cid,
  // and display the amount on screen

  let change = cashInput.value - price;
  let i = 8;
  changeDue.innerHTML = ""

  if (!determineChange() || !determineStatus()) {
    return
  }

  while (i >= 0) {

    if (change >= cashReference[i][1]) {
      console.log(change)
      let numberOfBills = Math.floor(change / cashReference[i][1])
      let amountOfBills = numberOfBills * cashReference[i][1];
      if (amountOfBills > cid[i][1]) {
        let restInDrawer = cid[i][1]
        change -= restInDrawer
        changeDue.textContent += `${cid[i][0]}: \$${restInDrawer} `
        cid[i][1] -= cid[i][1]
      } else {
        cid[i][1] -= amountOfBills;
        change -= amountOfBills;
        changeDue.textContent += `${cid[i][0]}: \$${amountOfBills} `  
      }
      change = change.toFixed(2) 
    }
    i--;
  }
}

// Deduces the total of all the cash currently in cid

let cidTotal = 0;

for (let i = 0; i <= 8; i++) {
  cidTotal += cid[i][1];
};

let roundedCidTotal = cidTotal.toFixed(2);
console.log(roundedCidTotal)

// Determines if cash register is functional

const determineStatus = () => {
  
  let change = cashInput.value - price;

  if (roundedCidTotal < change) {
    changeDue.innerHTML = `<p>Status: INSUFFICIENT_FUNDS </p>`;
    return false 
  } else if (roundedCidTotal === change) {
    changeDue.innerHTML = `<p>Status: CLOSED </p>`;
    return false
  } else if (roundedCidTotal > change) {
    changeDue.innerHTML = `<p>Status: OPEN </p>`;
    return true
    // might throw error over if change can be returned, come back to this later
  }
}

// Checking if cash is less than or equal to price to
// give change-due message

const determineChange = () => {

  if (cashInput.value < price) {
    alert("Customer does not have enough money to purchase the item")
    return false
  } else if (cashInput.value == price) {
    changeDue.innerHTML = `<p>No change due - customer paid with exact cash</p>`
    return false
  } else {return true}
}

purchaseBtn.addEventListener("click", calculate);

Are you making any calculations in the global scope? When code is modified in editor, the preview is reloaded effectively executing all code again. However during the tests that will not happen.

Would the cidTotal calculation be global? I am not certain how that would be an issue necessarily but nothing else is really being calculated in the global scope besides taking money out of cid and putting money back in

Yes. This calculation happens only once - when preview window is loaded. When tests are changing cid, the value from the initial calculations stays unchanged.