Build A Cash Register Project

I am having a problem with the decimals when my function changeOutput() runs and gives the change that’s due, specifically when subtracting DIME values (.10) from the total change due.

The cash in register total is 335.41, the price total is set at 1.87, the input cash from the customer is 335.41, and the total change due is 333.54. The change returned is correct from ONE HUNDRED to QUARTER, but when it gets to the DIME, it goes over what there is in the “cash in drawer” (there’s 3.1 dimes cid but returns $4.2 in dimes). But overall, the change that is returned is correct and totals 333.54.

I made some console.log tests, and sure enough, at some point it went from .1, .2, 0.30000000000000004, 0.4, .5, .6, .7, 0.7999999999999999, 0.8999999999999999, and so on. Am I missing something in my code, or does it have something to do with .10 not adding up correctly. I vaguely remember something about floats not being able to add correctly.
PLEASE HELP.

let price = 1.87;   //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 test = document.getElementById("test");
const purchaseBtn = document.getElementById("purchase-btn");
const priceTotal = document.querySelector(".cr-total-rect-3");
const changeDue = document.getElementById("change-due");
const cashInput = document.getElementById("cash");
const crScreen = document.querySelector(".cr-screen");
let changeWorthArr = [100, 20, 10, 5, 1, .25, .1, .05, .01];
let checker = true;

priceTotal.textContent = `Total: $${price}`;


// const cidReversed = cid.slice().reverse();
// console.log("cid reversed:", cidReversed);
const cidReverse = [...cid].reverse();
// console.log("cid reversed:", cidReverse);

const changeOutput = () =>{
  let dueChange = (parseFloat(cashInput.value) - price).toFixed(2);
  let cidTotal = cidReverse.reduce((acc,el)=>acc+el[1],0).toFixed(2);
  console.log("CID Total: " , cidTotal); //TEST
  console.log("Due change: ", dueChange); //TEST
  changeDue.innerText = "";

  if(cidTotal < dueChange){
    changeDue.innerText = "Status: INSUFFICIENT_FUNDS";
    return;
  }else if(cidTotal === dueChange){
    changeDue.innerText = "Status: CLOSED";
  }else if(cidTotal > dueChange){
    changeDue.innerText += `Status: OPEN
    `;
  }
  
  for(let i =0; i < cidReverse.length; i++){
    let count = 0;
    while(cidReverse[i][1] !== 0){
      if(dueChange >= changeWorthArr[i]){
        dueChange = parseFloat((dueChange - changeWorthArr[i]).toFixed(2));
        cidReverse[i][1] = cidReverse[i][1] - changeWorthArr[i];
        count = count + changeWorthArr[i];
        // count = (count + changeWorthArr[i]).toFixed(2);
        // count = parseFloat(count+ changeWorthArr[i].toFixed(2));
        console.log("change: " + cidReverse[i][0] + " | element: " + i + " | change due:", count);
      }else{
        break;
      }
    }
    if(count > 0){
      changeDue.innerText += `${cidReverse[i][0]}: $${count.toFixed(2)}
      `;
    }
  }
  // if(dueChange > 0){
  //   changeDue.innerText = "Status: INSUFFICIENT_FUNDS";
  //   updateCID(cidReverse, cid);
  // }
};

const checkCashInput = () =>{
  if(parseFloat(cashInput.value) < price){
    alert("Customer does not have enough money to purchase the item");
  }else if(parseFloat(cashInput.value) === price){
    changeDue.textContent = "No change due - customer paid with exact cash";
    checker = false;
  }
};

const changeInDrawer = () =>{
  crScreen.innerHTML = `
  <p class="cid-p"><b>Change in drawer:</b></p>
  <p class="cid-p">Pennies: $${cid[0][1].toFixed(2)}</p>
  <p class="cid-p">Nickles: $${cid[1][1].toFixed(2)}</p>
  <p class="cid-p">Dimes: $${cid[2][1].toFixed(2)}</p>
  <p class="cid-p">Quarters: $${cid[3][1].toFixed(2)}</p>
  <p class="cid-p">Ones: $${cid[4][1]}</p>
  <p class="cid-p">Fives: $${cid[5][1]}</p>
  <p class="cid-p">Tens: $${cid[6][1]}</p>
  <p class="cid-p">Twenties: $${cid[7][1]}</p>
  <p class="cid-p">Hundreds: $${cid[8][1]}</p>
  `;
};
changeInDrawer();

const updateCID = (updateArr,updatedArrValues) =>{
  let i = 0;
  let j = updatedArrValues.length - 1;
  while(i < updateArr.length && j >=0){
    updateArr[i][1] = updatedArrValues[j][1];
    i++;
    j--;
  }
   console.log("udateArr result: " , updateArr);
  changeInDrawer();
};

purchaseBtn.addEventListener("click", ()=>{
  checkCashInput();
  if(checker){
    changeOutput();
  }else{
    checker = true;
  }
  // updateCID();
  updateCID(cid, cidReverse);
});

HTML

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <title>Cash Register</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Cash Register Project</h1>
    <div id="change-due"></div>
    <label for="cash">Enter Cash From Customer</label>
    <input id="cash" type="number">
    <button id="purchase-btn">Purchase</button>

    <div id="cr-container">
      <div class="cr-body">
        <div class="button-grid">
          <div class="btn-1"></div>
          <div class="btn-2"></div>
          <div class="btn-3"></div>
          <div class="btn-4"></div>
          <div class="btn-5"></div>
          <div class="btn-6"></div>
          <div class="btn-7"></div>
          <div class="btn-8"></div>
          <div class="btn-9"></div>
        </div>
        <!-- Displays the change in drawer -->
        <div class="cr-screen"></div>
      </div>
      <div class="cr-total-rect-1"></div>
      <div class="cr-total-rect-2"></div>
      <div class="cr-total-rect-3"></div>
      <div class="line"></div>
      <div class="receipt">
        <div class="r-line-1"></div>
        <div class="r-line-2"></div>
        <div class="r-line-3"></div>
      </div>
      <div class="cr-body-bottom">
        <div class="circle"></div>
      </div>
    </div>


    <script src="script.js"></script>
  </body>
</html>

Not only add correctly. The way float numbers are represented internally in computers, makes their arithmetic operations inaccurate. A bit more explicit example of that:

console.log(0.1 + 0.1 + 0.1 === 0.3)  // false

Try thinking of way that would allow making the bulk of calculations on integers.

2 Likes

So adding .1 is not the solution, I tried doing console.log(0.1 * 3) and it gave me the same result, so is it inevitable that I would get the same results like 0.30000000000000004? I guess I could put .toFixed(2) at the end.

that will not garantee precision

try to make operations between integers only

1 Like

Convert the amount in cents while doing calculations to avoid precision problems and then convert the result in dollars.

1 Like

How would that work with Quarter, Dime, Nickel, and Penny if they are supposed to be decimals in certain cases?

I suggest this video

1 Like

Ah, so for example, if we add the DIME, it should be console.log((10 + 10 + 10)/100); and I should incorporate this logic to my function when dealing with QUARTER, DIME, NICKEL, and PENNY.

the final division should be at the last possible moment you need to do it

2 Likes

I fixed my code and it works great, but there is a potential error and I don’t know if it’s the website or my code. I wanted to see if “Status: CLOSED” worked correctly so I put the change that’s due (337.28 - 1.87 = 335.41) exactly to what is inside the cash in register (335.41). In my while loop from the function changeOutput(), the logic makes sense. while(cidReverse[i][1] > 0) execute the instructions. But as I checked my tests on console.log(), it displays a message:

Potential infinite loop detected on line 54. Tests may fail if this is not changed.

Then it ends my while loop early and I am left with an extra two pennies left.

let price = 1.87;   //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 test = document.getElementById("test");
const purchaseBtn = document.getElementById("purchase-btn");
const priceTotal = document.querySelector(".cr-total-rect-3");
const changeDue = document.getElementById("change-due");
const cashInput = document.getElementById("cash");
const crScreen = document.querySelector(".cr-screen");
let changeWorthArr = [100, 20, 10, 5, 1, .25, .1, .05, .01];
let checker = true;

priceTotal.textContent = `Total: $${price}`;


// const cidReversed = cid.slice().reverse();
// console.log("cid reversed:", cidReversed);
const cidReverse = [...cid].reverse();
cidReverse.forEach((el)=>{
  el[1] = Math.ceil(el[1] * 100);
})
//  console.log("cid reversed:", cidReverse);

const changeOutput = () =>{
  let dueChange = Math.ceil((parseFloat(cashInput.value) - price) * 100); 
  let cidTotal = cidReverse.reduce((acc,el)=>acc+el[1],0);
  console.log("CID Total: " , cidTotal); //TEST
  console.log("Due change: ", dueChange); //TEST
  changeDue.innerText = "";

  if(cidTotal < dueChange){
    changeDue.innerText = "Status: INSUFFICIENT_FUNDS";
    return;
  }else if(cidTotal === dueChange){
    changeDue.innerText = `Status: CLOSED
    `;
  }else if(cidTotal > dueChange){
    changeDue.innerText += `Status: OPEN
    `;
  } 
    
  for(let i =0; i < cidReverse.length; i++){
    let count = 0;
    while(cidReverse[i][1] > 0){
      let tempChangeWorth = changeWorthArr[i] * 100;
      if(dueChange >= tempChangeWorth){
        dueChange = dueChange - tempChangeWorth;
        console.log(`cidReverse[${i}][1] before: ` ,cidReverse[i][1]); //TEST
        cidReverse[i][1] = cidReverse[i][1] - tempChangeWorth;
        //console.log(`cidReverse[${i}][1] after: ` ,cidReverse[i][1]);  //TEST
        count = count + tempChangeWorth;
        console.log("change: " + cidReverse[i][0] + " | element: " + i + " | change due:", count);
        console.log(`cidReverse[${i}][1] after: ` ,cidReverse[i][1]);  //TEST
        console.log("");
      }else{
        break;
      }
    }
    if(count > 0){
      changeDue.innerText += `${cidReverse[i][0]}: $${count/100}
      `;
    }
  }
  // if(dueChange > 0){
  //   changeDue.innerText = "Status: INSUFFICIENT_FUNDS";
  //   updateCID(cidReverse, cid);
  // }
};

const checkCashInput = () =>{
  if(parseFloat(cashInput.value) < price){
    alert("Customer does not have enough money to purchase the item");
    checker = false;
  }else if(parseFloat(cashInput.value) === price){
    changeDue.textContent = "No change due - customer paid with exact cash";
    checker = false;
  }
};
 
const changeInDrawer = () =>{
  crScreen.innerHTML = `
  <p class="cid-p"><b>Change in drawer:</b></p>
  <p class="cid-p">Pennies: $${(cid[0][1]/100).toFixed(2)}</p>
  <p class="cid-p">Nickles: $${(cid[1][1]/100).toFixed(2)}</p>
  <p class="cid-p">Dimes: $${(cid[2][1]/100).toFixed(2)}</p>
  <p class="cid-p">Quarters: $${cid[3][1]/100}</p>
  <p class="cid-p">Ones: $${cid[4][1]/100}</p>
  <p class="cid-p">Fives: $${cid[5][1]/100}</p>
  <p class="cid-p">Tens: $${cid[6][1]/100}</p>
  <p class="cid-p">Twenties: $${cid[7][1]/100}</p>
  <p class="cid-p">Hundreds: $${cid[8][1]/100}</p>
  `;
};
changeInDrawer();

const updateCID = (updateArr,updatedArrValues) =>{
  let i = 0;
  let j = updatedArrValues.length - 1;
  while(i < updateArr.length && j >=0){
    updateArr[i][1] = updatedArrValues[j][1];
    i++;
    j--;
  }
   console.log("udateArr result: " , updateArr);
  changeInDrawer();
};

purchaseBtn.addEventListener("click", ()=>{
  checkCashInput();
  if(checker){
    changeOutput();
  }else{
    checker = true;
  }
  // updateCID();
  updateCID(cid, cidReverse);
});

have you tried without the console.logs?

1 Like

Yes, and it worked thank you. But I have encountered a problem.

As I ran the tests, some tests were telling me that I did not pass them, but I copied their price, cid, put the cash amount it specified, and I got the exact result it wanted but it still said I failed it.

TEST #6
cashRegisterHelp_01

TEST #7
cashRegisterHelp_03

JS Code

// let price = 1.87;   //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]
// ];

//TEST CASE 1
  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]
];

// TEST CASE 2 
//   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]
// ];
 
//TEST CASE 3 
// let price = 19.5;
//    let cid = [
//   ["PENNY", 0.01],
//   ["NICKEL", 0],
//   ["DIME", 0],
//   ["QUARTER", 0],
//   ["ONE", 0],
//   ["FIVE", 0],
//   ["TEN", 0],
//   ["TWENTY", 0],
//   ["ONE HUNDRED", 0]
// ];

//TEST CASE 4
// let price = 19.5;
// let cid = [
//   ["PENNY", 0.01],
//   ["NICKEL", 0],
//   ["DIME", 0],
//   ["QUARTER", 0],
//   ["ONE", 1],
//   ["FIVE", 0],
//   ["TEN", 0],
//   ["TWENTY", 0],
//   ["ONE HUNDRED", 0]
// ];

//TEST CASE 5
// let price = 19.5;
// let cid = [
//   ["PENNY", 0.5],
//   ["NICKEL", 0],
//   ["DIME", 0],
//   ["QUARTER", 0],
//   ["ONE", 0],
//   ["FIVE", 0],
//   ["TEN", 0],
//   ["TWENTY", 0],
//   ["ONE HUNDRED", 0]
// ];

// const test = document.getElementById("test");
const purchaseBtn = document.getElementById("purchase-btn");
const priceTotal = document.querySelector(".cr-total-rect-3");
const changeDue = document.getElementById("change-due");
const cashInput = document.getElementById("cash");
const crScreen = document.querySelector(".cr-screen");
let changeWorthArr = [100, 20, 10, 5, 1, .25, .1, .05, .01];
let checker = true;

priceTotal.textContent = `Total: $${price}`;

  
// const cidReversed = cid.slice().reverse();
// console.log("cid reversed:", cidReversed);
let cidReverse = [...cid].reverse(); //used to be const
cidReverse.forEach((el)=>{
  el[1] = Math.ceil(el[1] * 100);
})
// let tempCidReverse = [...cidReverse];
// console.log("tempCidReverse Before: ", tempCidReverse);

//  console.log("cid reversed:", cidReverse);

const changeOutput = () =>{
  let dueChange = Math.round((parseFloat(cashInput.value) - price) * 100); 
  let cidTotal = cidReverse.reduce((acc,el)=>acc+el[1],0);
  let tempCidReverse = [...cidReverse];
  // console.log("tempCidReverse Before: ", tempCidReverse);//TEST
  console.log("CID Total: " , cidTotal); //TEST
  console.log("Due change: ", dueChange); //TEST
  changeDue.innerHTML = "";

  if(cidTotal < dueChange){
    changeDue.innerHTML = `<p>Status: INSUFFICIENT_FUNDS</p>`;
    // console.log("Insufficient funds 1 check");
    return;
  }else if(cidTotal === dueChange){
    changeDue.innerHTML = `<p>Status: CLOSED</p>`;
  }else if(cidTotal > dueChange){
    changeDue.innerHTML = `<p>Status: OPEN</p>`;
  } 
    
  for(let i =0; i < cidReverse.length; i++){
    let count = 0;
    while(cidReverse[i][1] > 0){
      let tempChangeWorth = changeWorthArr[i] * 100;
      if(dueChange >= tempChangeWorth){
        dueChange = dueChange - tempChangeWorth;
        // console.log(`cidReverse[${i}][1] before: ` ,cidReverse[i][1]); //TEST
        cidReverse[i][1] = cidReverse[i][1] - tempChangeWorth;
        //console.log(`cidReverse[${i}][1] after: ` ,cidReverse[i][1]);  //TEST
        count = count + tempChangeWorth;
        // console.log("change: " + cidReverse[i][0] + " | element: " + i + " | change due:", count);
        // console.log(`cidReverse[${i}][1] after: ` ,cidReverse[i][1]);  //TEST
        // console.log("");
      }else{
        break;
      }
    }
    if(count > 0){
      changeDue.innerHTML += `<p>${cidReverse[i][0]}: $${count/100}</p>`;
    }
  }
  console.log("Due change: ",dueChange); //TEST
  if(dueChange > 0){
    changeDue.innerHTML = `<p>Status: INSUFFICIENT_FUNDS</p>`;
    console.log("Insufficient funds 2 check");
    // updateCID(cidReverse, cid);
    // console.log("tempCidReverse After: ", tempCidReverse); //TEST
    cidReverse = [...tempCidReverse];
    // console.log("cidReverse Updated: ", cidReverse); //TEST
  }
};

const checkCashInput = () =>{
  if(parseFloat(cashInput.value) < price){
    alert("Customer does not have enough money to purchase the item");
    checker = false;
  }else if(parseFloat(cashInput.value) === price){
    changeDue.textContent = "No change due - customer paid with exact cash";
    checker = false;
  }
};
  
const changeInDrawer = () =>{ 
  crScreen.innerHTML = `
  <p class="cid-p"><b>Change in drawer:</b></p>
  <p class="cid-p">Pennies: $${(cid[0][1]/100).toFixed(2)}</p>
  <p class="cid-p">Nickles: $${(cid[1][1]/100).toFixed(2)}</p>
  <p class="cid-p">Dimes: $${(cid[2][1]/100).toFixed(2)}</p>
  <p class="cid-p">Quarters: $${cid[3][1]/100}</p>
  <p class="cid-p">Ones: $${cid[4][1]/100}</p>
  <p class="cid-p">Fives: $${cid[5][1]/100}</p>
  <p class="cid-p">Tens: $${cid[6][1]/100}</p>
  <p class="cid-p">Twenties: $${cid[7][1]/100}</p>
  <p class="cid-p">Hundreds: $${cid[8][1]/100}</p>
  `;
};
changeInDrawer();

const updateCID = (updateArr,updatedArrValues) =>{
  let i = 0;
  let j = updatedArrValues.length - 1;
  while(i < updateArr.length && j >=0){
    // updateArr[i][1] = Math.ceil(updatedArrValues[j][1]/100);
    // updateArr[i][1] = updatedArrValues[j][1]/100;
    updateArr[i][1] = updatedArrValues[j][1];
    i++;
    j--;
  }
   console.log("updateArr result: " , updateArr);
   changeInDrawer();
};

// updateCID(cid, cidReverse);
// changeInDrawer();
 
purchaseBtn.addEventListener("click", ()=>{
  checkCashInput();
  if(checker){
    changeOutput();
  }else{
    checker = true;
  }
  // updateCID();
  updateCID(cid, cidReverse);
  
});

Should I make a new post about my recent reply post? I don’t know if I can because it’s the same project, but I have a different problem and question about it.

There’s one caveat regarding testing manually. Changing the values with which cid and price are declared is not exactly reproducing the state during test. More accurate is reassigning cid and price at the bottom of the code (while keeping the initial declaration). That what happens in test, initial declaration is not modified, but cid and price are reassigned later.

Regardless of the initial values, code should be able to get the expected result in such case.

1 Like

Ok, but I still get the test result as a fail but I don’t know why though if everything seems to work fine. But I am assuming it has to do with cid values having to be left in a float rather than integer values.

With latest code that you shared I’m not able to reproduce failing #6 or #7 tests…

1 Like

Wait, so you got passing results for all of them?

I ran it again, and now it’s saying that I got the last three failed.

Not all of them, but these pointed out by you latest are passing. Which means somebody is here looking at the outdated code…

1 Like

Here is my recent code just in case.

let price = 1.87;   //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]
];

//TEST CASE 1
//   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]
// ];

// TEST CASE 2 
//   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]
// ];
 
//TEST CASE 3 
// let price = 19.5;
//    let cid = [
//   ["PENNY", 0.01],
//   ["NICKEL", 0],
//   ["DIME", 0],
//   ["QUARTER", 0],
//   ["ONE", 0],
//   ["FIVE", 0],
//   ["TEN", 0],
//   ["TWENTY", 0],
//   ["ONE HUNDRED", 0]
// ];

//TEST CASE 4
// let price = 19.5;
// let cid = [
//   ["PENNY", 0.01],
//   ["NICKEL", 0],
//   ["DIME", 0],
//   ["QUARTER", 0],
//   ["ONE", 1],
//   ["FIVE", 0],
//   ["TEN", 0],
//   ["TWENTY", 0],
//   ["ONE HUNDRED", 0]
// ];

//TEST CASE 5
// let price = 19.5;
// let cid = [
//   ["PENNY", 0.5],
//   ["NICKEL", 0],
//   ["DIME", 0],
//   ["QUARTER", 0],
//   ["ONE", 0],
//   ["FIVE", 0],
//   ["TEN", 0],
//   ["TWENTY", 0],
//   ["ONE HUNDRED", 0]
// ];

// const test = document.getElementById("test");
const purchaseBtn = document.getElementById("purchase-btn");
const priceTotal = document.querySelector(".cr-total-rect-3");
const changeDue = document.getElementById("change-due");
const cashInput = document.getElementById("cash");
const crScreen = document.querySelector(".cr-screen");
let changeWorthArr = [100, 20, 10, 5, 1, .25, .1, .05, .01];
let checker = true;

priceTotal.textContent = `Total: $${price}`;

  
// const cidReversed = cid.slice().reverse();
// console.log("cid reversed:", cidReversed);
let cidReverse = [...cid].reverse(); //used to be const
cidReverse.forEach((el)=>{
  el[1] = Math.ceil(el[1] * 100);
})
// let tempCidReverse = [...cidReverse];
// console.log("tempCidReverse Before: ", tempCidReverse);

//  console.log("cid reversed:", cidReverse);

const changeOutput = () =>{
  let dueChange = Math.round((parseFloat(cashInput.value) - price) * 100); 
  let cidTotal = cidReverse.reduce((acc,el)=>acc+el[1],0);
  let tempCidReverse = [...cidReverse];
  // console.log("tempCidReverse Before: ", tempCidReverse);//TEST
  console.log("CID Total: " , cidTotal); //TEST
  console.log("Due change: ", dueChange); //TEST
  changeDue.innerHTML = "";

  if(cidTotal < dueChange){
    changeDue.innerHTML = `<p>Status: INSUFFICIENT_FUNDS</p>`;
    // console.log("Insufficient funds 1 check");
    return;
  }else if(cidTotal === dueChange){
    changeDue.innerHTML = `<p>Status: CLOSED</p>`;
  }else if(cidTotal > dueChange){
    changeDue.innerHTML = `<p>Status: OPEN</p>`;
  } 
    
  for(let i =0; i < cidReverse.length; i++){
    let count = 0;
    while(cidReverse[i][1] > 0){
      let tempChangeWorth = changeWorthArr[i] * 100;
      if(dueChange >= tempChangeWorth){
        dueChange = dueChange - tempChangeWorth;
        // console.log(`cidReverse[${i}][1] before: ` ,cidReverse[i][1]); //TEST
        cidReverse[i][1] = cidReverse[i][1] - tempChangeWorth;
        //console.log(`cidReverse[${i}][1] after: ` ,cidReverse[i][1]);  //TEST
        count = count + tempChangeWorth;
        // console.log("change: " + cidReverse[i][0] + " | element: " + i + " | change due:", count);
        // console.log(`cidReverse[${i}][1] after: ` ,cidReverse[i][1]);  //TEST
        // console.log("");
      }else{
        break;
      }
    }
    if(count > 0){
      changeDue.innerHTML += `<p>${cidReverse[i][0]}: $${count/100}</p>`;
    }
  }
  console.log("Due change: ",dueChange); //TEST
  if(dueChange > 0){
    changeDue.innerHTML = `<p>Status: INSUFFICIENT_FUNDS</p>`;
    console.log("Insufficient funds 2 check");
    // updateCID(cidReverse, cid);
    // console.log("tempCidReverse After: ", tempCidReverse); //TEST
    cidReverse = [...tempCidReverse];
    // console.log("cidReverse Updated: ", cidReverse); //TEST
  }
};

const checkCashInput = () =>{
  if(parseFloat(cashInput.value) < price){
    alert("Customer does not have enough money to purchase the item");
    checker = false;
  }else if(parseFloat(cashInput.value) === price){
    changeDue.textContent = "No change due - customer paid with exact cash";
    checker = false;
  }
};
  
const changeInDrawer = () =>{ 
  crScreen.innerHTML = `
  <p class="cid-p"><b>Change in drawer:</b></p>
  <p class="cid-p">Pennies: $${(cid[0][1]/100).toFixed(2)}</p>
  <p class="cid-p">Nickles: $${(cid[1][1]/100).toFixed(2)}</p>
  <p class="cid-p">Dimes: $${(cid[2][1]/100).toFixed(2)}</p>
  <p class="cid-p">Quarters: $${cid[3][1]/100}</p>
  <p class="cid-p">Ones: $${cid[4][1]/100}</p>
  <p class="cid-p">Fives: $${cid[5][1]/100}</p>
  <p class="cid-p">Tens: $${cid[6][1]/100}</p>
  <p class="cid-p">Twenties: $${cid[7][1]/100}</p>
  <p class="cid-p">Hundreds: $${cid[8][1]/100}</p>
  `;
};
changeInDrawer();

const updateCID = (updateArr,updatedArrValues) =>{
  let i = 0;
  let j = updatedArrValues.length - 1;
  while(i < updateArr.length && j >=0){
    // updateArr[i][1] = Math.ceil(updatedArrValues[j][1]/100);
    // updateArr[i][1] = updatedArrValues[j][1]/100;
    updateArr[i][1] = updatedArrValues[j][1];
    i++;
    j--;
  }
   console.log("updateArr result: " , updateArr);
   changeInDrawer();
};

// updateCID(cid, cidReverse);
// changeInDrawer();
 
purchaseBtn.addEventListener("click", ()=>{
  checkCashInput();
  if(checker){
    changeOutput();
  }else{
    checker = true;
  }
  // updateCID();
  updateCID(cid, cidReverse);
  
});

I noticed when I change my updateCID() function’s code, from
updateArr[i][1] = updatedArrValues[j][1];

to

updateArr[i][1] = updatedArrValues[j][1]/100;

the tests 6,7 and 8,9 interchange from pass to fail and vice versa when using one or the other. I am assuming it has to do with cid array having to be float values rather than integer values. (ex. [PENNY , 1.01] and not [PENNY, 101])