Build a Cash Register Project - Build a Cash Register

Tell us what’s happening:

I am having trouble with check 18. As my change-due is in fact showing status closed and penny is 0.5 dollars. So, everything seems to be displaying correctly, but when I run test check 18 and beyond does not got to good.

Your code so far

<!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="input-result-box">
      <input type="number" id="cash" placeholder="Enter Amount of Cash"/>
      <div class="button-wrap"><button id="purchase-btn">Purchase</button>
      </div>
    <div id="change-due">
        <!--Results go her-->
    </div>
    </div>
    <div class="register">
      <h3>Total: <span id="total-amount">0</span></h3>
      
      
      <oi>
        <li>Penny: $<span class="money-display" id="penny-remain"></span></li>
        <li>Nickel: $<span class="money-display" id="nickel-remain"></span></li>
        <li>Dime: $<span class="money-display" id="dime-remain"></span></li>
        <li>Quarter: $<span class="money-display" id="quarter-remain"></span></li>
        <li>Dollar: $<span id="dollar-remain" class="money-display"></span></li>
        <li>Fives: $<span id="fives-remain" class="money-display"></span></li>
        <li>Tens: $<span id="tens-remain" class="money-display"></span></li>
        <li>Twenties: $<span id="twenties-remain" class="money-display"></span></li>
        <li>Hundreds: $<span id="hundreds-remain" class="money-display"></span></li>
      </oi>
    </div>
    <div class="drawer">
      <div class="circle"></div>
    </div>
  </body>
  <script src="script.js"></script>
</html>

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]
];

/*Program Notes:
1. Having issue with getting 18 to pass even though correct
2.For 12 there is a issue in the while loop for the twenty. Even though only 6000 cents its someone going to 8000.
*/
const cashAmount = document.getElementById("cash");
const changeDisplay = document.getElementById("change-due");
const purchaseBtn = document.getElementById("purchase-btn");
const total = document.getElementById("total-amount");
const penny= document.getElementById("penny-remain");
const nickel = document.getElementById("nickel-remain");
const dime = document.getElementById("dime-remain");
const quarter = document.getElementById("quarter-remain");
const dollar = document.getElementById("dollar-remain");
const fives = document.getElementById("fives-remain");
const tens = document.getElementById("tens-remain");
const twenties= document.getElementById("twenties-remain");
const hundreds = document.getElementById("hundreds-remain");
let statusType = "";

//Set intial text
total.textContent = `${price}`;
penny.textContent = `${cid[0][1]}`
nickel.textContent = `${cid[1][1]}`;
dime.textContent = `${cid[2][1]}`;
quarter.textContent = `${cid[3][1]}`;
dollar.textContent = `${cid[4][1]}`;
fives.textContent = `${cid[5][1]}`;
tens.textContent = `${cid[6][1]}`;
twenties.textContent = `${cid[7][1]}`;
hundreds.textContent = `${cid[8][1]}`;

const updateRemain = () => {
  penny.textContent = `${cid[0][1]}`
  nickel.textContent = `${cid[1][1]}`;
  dime.textContent = `${cid[2][1]}`;
  quarter.textContent = `${cid[3][1]}`;
  dollar.textContent = `${cid[4][1]}`;
  fives.textContent = `${cid[5][1]}`;
  tens.textContent = `${cid[6][1]}`;
  twenties.textContent = `${cid[7][1]}`;
  hundreds.textContent = `${cid[8][1]}`;
}

purchaseBtn.addEventListener("click", () => {
  changeDisplay.innerHTML = ``;
  checkEnoughCash();
});

const checkEnoughCash = () => {
  if(cashAmount.value < price) {
    alert("Customer does not have enough money to purchase the item");
  } else if(cashAmount.value == price) {
    changeDisplay.innerHTML = `<p>No change due - customer paid with exact cash</p>`;
  } else {
    checkBalanceEnough();
    if (statusType === "INSUFFICIENT_FUNDS"){
      changeDisplay.innerHTML = `<p>Status: ${statusType}</p>`;
      console.log("check1");
      return;
    }
    checkStatus();
    if (statusType != "INSUFFICIENT_FUNDS")   {
      calculateChange(price, cashAmount.value, cid);
      updateRemain();
    }
  }
}

const checkBalanceEnough = () => {
    let localChange = Math.round((cashAmount.value - price) * 100);
    const moneyCents = [1, 5, 10, 25, 100, 500, 10000, 20000, 100000];
    for (let i = moneyCents.length - 1; i >= 0; i--) {
        if (cid[i] && Array.isArray(cid[i]) && cid[i].length > 1) {
            let availableCents = Math.round(cid[i][1] * 100);
            while (availableCents > 0 && moneyCents[i] <= localChange && localChange > 0) {
            localChange -= moneyCents[i];
            availableCents -= moneyCents[i];
          }
        }
    }
    if (localChange !== 0) {
        statusType = "INSUFFICIENT_FUNDS";
    }
};


const checkStatus = () => {
  //Gotta figure out how to check if exchange change can be returned.
  let change = Math.round((cashAmount.value - price) * 100);
  
  const reversedCid = [...cid]
    .reverse()
    .map(([denominationName, amount]) => [
      denominationName,
      Math.round(amount * 100)
  ]);
  const totalCID = reversedCid.reduce((prev, [_, amount]) => prev + amount, 0);
  
  if (totalCID < change) {
    statusType = "INSUFFICIENT_FUNDS";
    changeDisplay.innerHTML = `<p>Status: ${statusType}</p>`;
  } else if (totalCID == change) {
    statusType = "CLOSED";
    changeDisplay.innerHTML = `<p>Status: ${statusType}</p>`;
  } else if (totalCID > change) {
    statusType = "OPEN";
    changeDisplay.innerHTML = `<p>Status: ${statusType}</p>`;
  }
}

const calculateChange = (price, cash, cid) => {
  const reversedCid = [...cid]
    .map(([denominationName, amount]) => [
      denominationName,
      Math.round(amount * 100)
  ])

  let numHundreds = 0;
  let numTwenties = 0;
  let numTens = 0;
  let numFives = 0;
  let numDollar = 0;
  let numQuarter = 0;
  let numDime = 0;
  let numNickel = 0;
  let numPenny = 0;
  let change = Math.round((cash - price) * 100); 

 while (change >= 10000 && reversedCid[8][1] >= 10000) { // 10000 cents = $100
    change -= 10000;
    reversedCid[8][1] -= 10000;
    numHundreds++;
  }
  //Goes in as 6000 cents from reversedCid
  while (change >= 2000 && reversedCid[7][1] >= 2000) { // 2000 cents = $20
    change -= 2000;
    reversedCid[7][1] -= 2000;
    numTwenties++;
  }
  //numTwenties is 4 meaning 8000 cents has been run
  while (change >= 1000 && reversedCid[6][1] >= 1000) { // 1000 cents = $10
    change -= 1000;
    reversedCid[6][1] -= 1000;
    numTens++;
  }
  while (change >= 500 && reversedCid[5][1] >= 500) { // 500 cents = $5
    change -= 500;
    reversedCid[5][1] -= 500;
    numFives++;
  }
  while (change >= 100 && reversedCid[4][1] >= 100) { // 100 cents = $1
    change -= 100;
    reversedCid[4][1] -= 100;
    numDollar++;
  }
  while (change >= 25 && reversedCid[3][1] >= 25) { // 25 cents
    change -= 25;
    reversedCid[3][1] -= 25;
    numQuarter++;
  }
  while (change >= 10 && reversedCid[2][1] >= 10) { // 10 cents
    change -= 10;
    reversedCid[2][1] -= 10;
    numDime++;
  }
  while (change >= 5 && reversedCid[1][1] >= 5) { // 5 cents
    change -= 5;
    reversedCid[1][1] -= 5;
    numNickel++;
  }
  while (change >= 1 && reversedCid[0][1] >= 1) { // 1 cent
    change -= 1;
    reversedCid[0][1] -= 1;
    numPenny++;
  }

  cid.forEach((num) => { //Updates drawer values from cents to dollar
    num[1] = (reversedCid[0][1] != 0) ? Math.round(cid[0][1] / reversedCid[0][1]) : 0;
  })

  showDisplay(numPenny, numNickel, numDime, numQuarter, numDollar, numFives, numTens, numTwenties, numHundreds); 
} 

const showDisplay = (numPenny, numNickel, numDime, numQuarter, numDollar, numFive, numTen, numTwenty, numHundred) => {

  let pennyChange = 0;
  let nickelChange = 0;
  let dimeChange = 0;
  let quarterChange = 0;
  let dollarChange = 0;
  let fiveChange = 0;
  let tenChange = 0;
  let twentyChange = 0;
  let hundredChange = 0;

  if (numHundred >= 1) {
    hundredChange = numHundred * 20;
    changeDisplay.innerHTML += `<p>${cid[8][0]}: $${hundredChange}</p>`
  }
  if (numTwenty >= 1) {
    twentyChange = numTwenty * 20;
    changeDisplay.innerHTML += `<p class="result-text">${cid[7][0]}: $${twentyChange}</p>`;
  }
  if (numTen >= 1) {
    tenChange = numTen * 10;
    changeDisplay.innerHTML += `<p class="result-text">${cid[6][0]}: $${tenChange}</p>`;
  }
  if (numFive >= 1) {
    fiveChange = numFive * 5;
    changeDisplay.innerHTML += `<p class="result-text">${cid[5][0]}: $${fiveChange}</p>`;
  }
  if (numDollar >= 1) {
    dollarChange = numDollar * 1;
    changeDisplay.innerHTML += `<p class="result-text">${cid[4][0]}: $${dollarChange}</p>`;
  }
  if (numQuarter >= 1) {
    quarterChange = numQuarter * 0.25;
    changeDisplay.innerHTML += `<p class="result-text">${cid[3][0]}: $${quarterChange}</p>`;
  }
  if (numDime >= 1) {
    dimeChange = numDime * 0.1;
    changeDisplay.innerHTML += `<p class="result-text">${cid[2][0]}: $${dimeChange}</p>`;
  }
  if (numNickel >= 1) {
    nickelChange = numNickel * 0.05;
    changeDisplay.innerHTML += `<p class="result-text">${cid[1][0]}: $${nickelChange}</p>`;
  }
  if (numPenny >= 1) {
    pennyChange = numPenny * 0.01;
    changeDisplay.innerHTML += `<p class="result-text">${cid[0][0]}: $${pennyChange}</p>`;
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Challenge Information:

Build a Cash Register Project - Build a Cash Register

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

I created a seperate statusType which did result in check 18 and 19 being good. But when I made the edits within checkEnoughCash function in order to properly check INSUFFICIENT_FUNDS now check 19 is not passing.

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]
];

/*Program Notes:
1. Having issue with getting 18 to pass even though correct
2.For 12 there is a issue in the while loop for the twenty. Even though only 6000 cents its someone going to 8000.
*/
const cashAmount = document.getElementById("cash");
const changeDisplay = document.getElementById("change-due");
const purchaseBtn = document.getElementById("purchase-btn");
const total = document.getElementById("total-amount");
const penny= document.getElementById("penny-remain");
const nickel = document.getElementById("nickel-remain");
const dime = document.getElementById("dime-remain");
const quarter = document.getElementById("quarter-remain");
const dollar = document.getElementById("dollar-remain");
const fives = document.getElementById("fives-remain");
const tens = document.getElementById("tens-remain");
const twenties= document.getElementById("twenties-remain");
const hundreds = document.getElementById("hundreds-remain");


//Set intial text
total.textContent = `${price}`;
penny.textContent = `${cid[0][1]}`
nickel.textContent = `${cid[1][1]}`;
dime.textContent = `${cid[2][1]}`;
quarter.textContent = `${cid[3][1]}`;
dollar.textContent = `${cid[4][1]}`;
fives.textContent = `${cid[5][1]}`;
tens.textContent = `${cid[6][1]}`;
twenties.textContent = `${cid[7][1]}`;
hundreds.textContent = `${cid[8][1]}`;

const updateRemain = () => {
  penny.textContent = `${cid[0][1]}`
  nickel.textContent = `${cid[1][1]}`;
  dime.textContent = `${cid[2][1]}`;
  quarter.textContent = `${cid[3][1]}`;
  dollar.textContent = `${cid[4][1]}`;
  fives.textContent = `${cid[5][1]}`;
  tens.textContent = `${cid[6][1]}`;
  twenties.textContent = `${cid[7][1]}`;
  hundreds.textContent = `${cid[8][1]}`;
}

purchaseBtn.addEventListener("click", () => {
  changeDisplay.innerHTML = ``;
  checkEnoughCash();
});

const checkEnoughCash = () => {
  let statusType = "";

  if(cashAmount.value < price) {
    alert("Customer does not have enough money to purchase the item");
  } else if(cashAmount.value == price) {
    changeDisplay.innerHTML = `<p>No change due - customer paid with exact cash</p>`;
  } else {
  //===================
    if (checkBalanceEnough() === "INSUFFICIENT_FUNDS") {
      statusType = checkBalanceEnough();
      changeDisplay.innerHTML = `<p>Status: ${statusType}</p>`;
      return;
    }
    //=============
    checkStatus();
    if (statusType != "INSUFFICIENT_FUNDS")   {
      calculateChange(price, cashAmount.value, cid);
      updateRemain();
    }
  }
}

const checkBalanceEnough = () => {
    let statusType = "";
    let localChange = Math.round((cashAmount.value - price) * 100);
    const moneyCents = [1, 5, 10, 25, 100, 500, 10000, 20000, 100000];
    for (let i = moneyCents.length - 1; i >= 0; i--) {
        if (cid[i] && Array.isArray(cid[i]) && cid[i].length > 1) {
            let availableCents = Math.round(cid[i][1] * 100);
            while (availableCents > 0 && moneyCents[i] <= localChange && localChange > 0) {
            localChange -= moneyCents[i];
            availableCents -= moneyCents[i];
          }
        }
    }
    if (localChange !== 0) {
        statusType = "INSUFFICIENT_FUNDS";
        changeDisplay.innerHTMl = `<p>Status: ${statusType}</p>`;
        return statusType;
    }
  return statusType;
};


const checkStatus = () => {
  //Gotta figure out how to check if exchange change can be returned.
  let statusType = "";
  let change = Math.round((cashAmount.value - price) * 100);
  
  const reversedCid = [...cid]
    .reverse()
    .map(([denominationName, amount]) => [
      denominationName,
      Math.round(amount * 100)
  ]);
  const totalCID = reversedCid.reduce((prev, [_, amount]) => prev + amount, 0);
  
  if (totalCID < change) {
    statusType = "INSUFFICIENT_FUNDS";
    changeDisplay.innerHTML = `<p>Status: ${statusType}</p>`;
  } else if (totalCID == change) {
    statusType = "CLOSED";
    changeDisplay.innerHTML = `<p>Status: ${statusType}</p>`;
  } else if (totalCID > change) {
    statusType = "OPEN";
    changeDisplay.innerHTML = `<p>Status: ${statusType}</p>`;
  }
}

const calculateChange = (price, cash, cid) => {
  const reversedCid = [...cid]
    .map(([denominationName, amount]) => [
      denominationName,
      Math.round(amount * 100)
  ])

  let numHundreds = 0;
  let numTwenties = 0;
  let numTens = 0;
  let numFives = 0;
  let numDollar = 0;
  let numQuarter = 0;
  let numDime = 0;
  let numNickel = 0;
  let numPenny = 0;
  let change = Math.round((cash - price) * 100); 

 while (change >= 10000 && reversedCid[8][1] >= 10000) { // 10000 cents = $100
    change -= 10000;
    reversedCid[8][1] -= 10000;
    numHundreds++;
  }
  //Goes in as 6000 cents from reversedCid
  while (change >= 2000 && reversedCid[7][1] >= 2000) { // 2000 cents = $20
    change -= 2000;
    reversedCid[7][1] -= 2000;
    numTwenties++;
  }
  //numTwenties is 4 meaning 8000 cents has been run
  while (change >= 1000 && reversedCid[6][1] >= 1000) { // 1000 cents = $10
    change -= 1000;
    reversedCid[6][1] -= 1000;
    numTens++;
  }
  while (change >= 500 && reversedCid[5][1] >= 500) { // 500 cents = $5
    change -= 500;
    reversedCid[5][1] -= 500;
    numFives++;
  }
  while (change >= 100 && reversedCid[4][1] >= 100) { // 100 cents = $1
    change -= 100;
    reversedCid[4][1] -= 100;
    numDollar++;
  }
  while (change >= 25 && reversedCid[3][1] >= 25) { // 25 cents
    change -= 25;
    reversedCid[3][1] -= 25;
    numQuarter++;
  }
  while (change >= 10 && reversedCid[2][1] >= 10) { // 10 cents
    change -= 10;
    reversedCid[2][1] -= 10;
    numDime++;
  }
  while (change >= 5 && reversedCid[1][1] >= 5) { // 5 cents
    change -= 5;
    reversedCid[1][1] -= 5;
    numNickel++;
  }
  while (change >= 1 && reversedCid[0][1] >= 1) { // 1 cent
    change -= 1;
    reversedCid[0][1] -= 1;
    numPenny++;
  }

  cid.forEach((num) => { //Updates drawer values from cents to dollar
    num[1] = (reversedCid[0][1] != 0) ? Math.round(cid[0][1] / reversedCid[0][1]) : 0;
  })

  showDisplay(numPenny, numNickel, numDime, numQuarter, numDollar, numFives, numTens, numTwenties, numHundreds); 
} 

const showDisplay = (numPenny, numNickel, numDime, numQuarter, numDollar, numFive, numTen, numTwenty, numHundred) => {

  let pennyChange = 0;
  let nickelChange = 0;
  let dimeChange = 0;
  let quarterChange = 0;
  let dollarChange = 0;
  let fiveChange = 0;
  let tenChange = 0;
  let twentyChange = 0;
  let hundredChange = 0;

  if (numHundred >= 1) {
    hundredChange = numHundred * 20;
    changeDisplay.innerHTML += `<p>${cid[8][0]}: $${hundredChange}</p>`
  }
  if (numTwenty >= 1) {
    twentyChange = numTwenty * 20;
    changeDisplay.innerHTML += `<p class="result-text">${cid[7][0]}: $${twentyChange}</p>`;
  }
  if (numTen >= 1) {
    tenChange = numTen * 10;
    changeDisplay.innerHTML += `<p class="result-text">${cid[6][0]}: $${tenChange}</p>`;
  }
  if (numFive >= 1) {
    fiveChange = numFive * 5;
    changeDisplay.innerHTML += `<p class="result-text">${cid[5][0]}: $${fiveChange}</p>`;
  }
  if (numDollar >= 1) {
    dollarChange = numDollar * 1;
    changeDisplay.innerHTML += `<p class="result-text">${cid[4][0]}: $${dollarChange}</p>`;
  }
  if (numQuarter >= 1) {
    quarterChange = numQuarter * 0.25;
    changeDisplay.innerHTML += `<p class="result-text">${cid[3][0]}: $${quarterChange}</p>`;
  }
  if (numDime >= 1) {
    dimeChange = numDime * 0.1;
    changeDisplay.innerHTML += `<p class="result-text">${cid[2][0]}: $${dimeChange}</p>`;
  }
  if (numNickel >= 1) {
    nickelChange = numNickel * 0.05;
    changeDisplay.innerHTML += `<p class="result-text">${cid[1][0]}: $${nickelChange}</p>`;
  }
  if (numPenny >= 1) {
    pennyChange = numPenny * 0.01;
    changeDisplay.innerHTML += `<p class="result-text">${cid[0][0]}: $${pennyChange}</p>`;
  }
}

Your app fails for this values:

cid = 
   [ [ 'PENNY', 0.78 ],
     [ 'NICKEL', 2.9 ],
     [ 'DIME', 1 ],
     [ 'QUARTER', 0.75 ],
     [ 'ONE', 0 ],
     [ 'FIVE', 10 ],
     [ 'TEN', 10 ],
     [ 'TWENTY', 0 ],
     [ 'ONE HUNDRED', 0 ] ],
  price = 24.57

and a #cash of 50

you may want to figure out where it fails