Build a Cash Register Project - Build a Cash Register

JavaScript
1

Tell us what’s happening:

Code seems to satisfy the test conditions, but fCC does not pass the tests.
Please help. This is very frustrating.
Thanks.

Your code so far

<!-- file: index.html -->
<!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'>
  </head>
  <body>
    <div id="price-item"></div>
    <div id="change-due"></div>
    <label for="cash">Enter Cash
    <input id="cash" value="cash" type="number"></input></label>
    <button id="purchase-btn">Purchase</button>
    
    <div id="cash-in-drawer"></div>
    <script src='script.js'></script>
  </body>
</html>

/* 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 customerCash = document.getElementById("cash");
const purchaseBtn = document.getElementById("purchase-btn");
const changeDue = document.getElementById("change-due");
const cashInDrawer = document.getElementById("cash-in-drawer");
const priceItem = document.getElementById("price-item");

const pricePenny = Math.round(price*100);
const cidPenny = cid.map(cur=>[cur[0],Math.round(cur[1]*100)]);
const custChange = cid.map(cur=>[cur[0],0]);
const curPenny = [1,5,10,25,100,500,1000,2000,10000];

priceItem.innerHTML = `<div>Price: ${price}</div><br>`

const updateCID = () => {
  cashInDrawer.innerHTML = `<br><div><b>Cash in Drawer:</b></div><br>`;
  cid.forEach((cur)=>{
    cashInDrawer.innerHTML += `
    <div>${cur[0]}: ${cur[1]}</div>`;
  });
}

const updateStatus = (changeRem) => { 
  if(changeRem === 0) {
    if(cid.every((el)=>el===0)) {
      changeDue.innerHTML = `Status: CLOSED<br>`
    } else { changeDue.innerHTML = `Status: OPEN<br>`
}
    for(let i=custChange.length-1; i>=0; i--) {
      cid[i][1] = cidPenny[i][1]/100;
      if(custChange[i][1]>0) {changeDue.innerHTML += `${custChange[i][0]}: $${custChange[i][1]*(curPenny[i]/100)}<br>`;} 
  } 
} else { 
    changeDue.innerHTML = `Status: INSUFFICIENT FUNDS<br>`;
    for(let i=cid.length-1; i>=0; i--) {
      cidPenny[i][1] = cid[i][1]*100;}
  }

}

updateCID();

const checkInput = () => {
  const custCashPenny = Number(customerCash.value*100);
  const custCash = Number(customerCash.value);
  let changePenny = custCashPenny - pricePenny;
  if(custCash < price) {
    alert("Customer does not have enough money to purchase the item");
  } else if(custCash === price) {
    changeDue.innerHTML = `<br>No change due - customer paid with exact cash<br>`;
  } else { 
    for(let i=cid.length-1; i>=0; i--) {
      custChange[i][1] =0;
      if(changePenny >= curPenny[i]) {
        custChange[i][1] = Math.floor(changePenny/curPenny[i]);
        if(custChange[i][1]*curPenny[i] <= cidPenny[i][1]) {
          changePenny = changePenny%curPenny[i];
          cidPenny[i][1] -= custChange[i][1]*curPenny[i];
        } else {
          custChange[i][1] = Math.floor(cidPenny[i][1]/curPenny[i]);
          changePenny -= cidPenny[i][1];
          cidPenny[i][1] = 0;  
        }  

      }
      
    } 
    
    updateStatus(changePenny);
    updateCID(); 
  } 
  customerCash.value = "";
}
 
purchaseBtn.addEventListener("click",checkInput);

customerCash.addEventListener("keydown",(e)=>{
  if(e.key=== "Enter") {
    checkInput();
  };
})

/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.3.1 Safari/605.1.15

Challenge Information:

Build a Cash Register Project - Build a Cash Register

2

you should not have all those global variables

to see what the tests do with your code and what they see, you can add this code below yours, it’s pretty much equivalent to what the tests do:

console.log("\nTest #9");
price = 11.95;
document.querySelector("#cash").value = 11.95;
document.querySelector("#purchase-btn").click();
console.log("actual", document.querySelector("#change-due").innerText);
console.log("expected", "No change due - customer paid with exact cash");

console.log("\nTest #11");
price = 19.5;
document.querySelector("#cash").value = 20;
cid = [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]];
document.querySelector("#purchase-btn").click();
console.log("actual", document.querySelector("#change-due").innerText);
console.log("expected", "Status: OPEN QUARTER: $0.5");

console.log("\nTest #12");
price = 3.26;
document.querySelector("#cash").value = 100;
cid = [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]];
document.querySelector("#purchase-btn").click();
console.log("actual", document.querySelector("#change-due").innerText);
console.log("expected", "Status: OPEN TWENTY: $60 TEN: $20 FIVE: $15 ONE: $1 QUARTER: $0.5 DIME: $0.2 PENNY: $0.04");

console.log("\nTest #14");
price = 19.5;
document.querySelector("#cash").value = 20;
cid = [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]];
document.querySelector("#purchase-btn").click();
console.log("actual", document.querySelector("#change-due").innerText);
console.log("expected", "Status: INSUFFICIENT_FUNDS");

console.log("\nTest #16");
price = 19.5;
document.querySelector("#cash").value = 20;
cid = [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 1], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]];
document.querySelector("#purchase-btn").click();
console.log("actual", document.querySelector("#change-due").innerText);
console.log("expected", "Status: INSUFFICIENT_FUNDS");

console.log("\nTest #18");
price = 19.5;
document.querySelector("#cash").value = 20;
cid = [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]];
document.querySelector("#purchase-btn").click();
console.log("actual", document.querySelector("#change-due").innerText);
console.log("expected", "Status: CLOSED PENNY: $0.5");
3

Hey. Thanks for the prompt reply.
I still don’t understand what was wrong.
May be some decimal calculations.

However I rewrote the code, removed as many global variables and now solution has passed. Thanks :slight_smile: