Build a Cash Register Project - Build a Cash Register

JavaScript
1

Tell us what’s happening:

I am not passing the last two cases< 18 and 19. I was wondering if anyone could give me a hint to what needs to be fixed? I tested case 18 but although it comes back exactly what is asked it wont pass, am guessing format issue?

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'>
     <title>Cash Register Project freeCodeCamp</title>
     <link rel='stylesheet' href='styles.css'>
     
   </head>
   <body>
     <header>
        <h1>Cash Register Project</h1>
        <div id='change-due'>
        </div>
        <label for='cash' id='cash-label'>Enter cash from customer:</label>
        <input id='cash' type='number'></input>
        <button id='purchase-btn'>Purchase</button>
      </header>
      <div id='whole-register'>
        <div id='total-container'>
          <div id='total-box'>Total:</div>
        </div>
        <div id='neck'></div>
        <div id='register'>
          <div id='change'>
            <label><strong>Change in drawer:</strong></label>
              <p >Pennies: <span id='PENNY'></span></p>
              <p >Nickles: <span id='NICKEL'></span></p>
              <p >Dimes: <span id='DIME'></span></p>
              <p >Quarters: <span id="QUARTER"></span></p>
              <p >Ones: <span id='ONE'></span></p>
              <p >Fives: <span id='FIVE'></span></p>
              <p >Tens: <span id='TEN'></span></p>
              <p >Twenties: <span id='TWENTY'></span></p>
              <p >Hundreds: <span id='ONE HUNDRED'></span></p>
          </div>
        </div>
        <hr id='divider'></hr>
        <div id='register-drawer'>
          <div id='register-button'></div>
        </div>
      </div>
      
     <script src='script.js'></script>
   </body>
</html>

/* file: script.js */
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 wordsToMoney = {
  'ONE HUNDRED': 100,
  'TWENTY': 20,
  'TEN': 10,
  'FIVE': 5,
  'ONE': 1,
  'QUARTER': 0.25,
  'DIME': 0.1,
  'NICKEL': 0.05,
  'PENNY': 0.01
}

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

// let changeToGive = [
//   [0.01, 0],
//   [0.05, 0],
//   [0.1, 0],  
//   [0.25, 0],
//   [1, 0],
//   [5, 0], 
//   [10, 0],
//   [20, 0],
//   [100, 0]
// ]; 
const money = [0.01,0.05,0.1,0.25,1,5,10,20,100];


const cashInput = document.getElementById("cash");
const purchaseBtn = document.getElementById("purchase-btn");
const totalBox = document.getElementById("total-box");
const cidElements = document.querySelectorAll("#change p span")
const changeDue = document.getElementById("change-due");
let changeToGive = [];



const displayCID = () => {
  cidElements.forEach((element,index) => {
    element.innerText = ` $${cid[index][1]}`;
  })
}

const isCIDLessThanChange = (change,cid) => {
  if (change > cid){ 
    changeDue.innerHTML = '<p>Status: INSUFFICIENT_FUNDS</p>'
    return true
  }
  return 0
}

const isCIDEqualToChange = (change,cid) => {
  
  if (cid.toFixed(2) === change){
    changeDue.innerHTML = `<p>Status: CLOSED</p>`
    return true
  }
  return 0
}

const isCIDGreaterThanChange = (change,cid) => {
  if (cid > change){
    changeDue.innerHTML = `<p>Status: OPEN</p>`
    return true
  }
  return false
}

const calculateCID = () => {
  let total = 0.00;
  cidElements.forEach((element) => {
    total += parseFloat(element.innerText.substring(1));
  })
  return Math.round(total * 100) / 100;
}
 
const updateCID = (currency,amountToTake) => {


  const element = document.getElementById(currency);

  let currentAmount = parseFloat(element.innerText.substring(1));

  // if amountToTake > currentAmount
  if (amountToTake === currentAmount) {
    element.innerHTML = " $0"
  }
  else if (amountToTake > currentAmount){
    element.innerHTML = " $0";
  }
  else {
    currentAmount = currentAmount - amountToTake;
    if(currency === 'PENNY'){ 
      element.innerHTML = ` $${currentAmount.toFixed(2)}`;
      return
    }
    element.innerHTML = ` $${currentAmount}`;
  }
    //take currentAmount 
    //add cash to changeToGive
    //update change: change - cash
    //update innerText
  
  // else
      //currentAmount = currentAmount - amountToTake
      //add cash to changeToGive
      //update innerText
}

const updateChangeToGive = (currency, amountToSet) => {
  changeToGive.push([currency,amountToSet]);
}

const resetChangeToGive = () => {
  changeToGive = []
 
}

const displayChangeGiven = () => {
  changeToGive.sort(([a,b],[c,d]) => c - a);
  changeToGive.forEach((array) => {
      if(array[0] === 'PENNY'){
        changeDue.innerHTML += `<p>${array[0]}: $${Math.round(array[1] * 100) / 100}</p>`
      }
      else if (array[0] === 'NICKEL'){
        changeDue.innerHTML += `<p>${array[0]}: $${Math.round(array[1] * 100) / 100}</p>`
      }
      // else if (array[0] === 'DIME'){
      //   changeDue.innerHTML += `<p>${array[0]}: $${array[1].toFixed(2)}</p>`
      // }
      // else if (array[0] === 'QUARTER'){
      //   changeDue.innerHTML += `<p>${array[0]}: $${array[1].toFixed(2)}</p>`
      // }
      else{
        changeDue.innerHTML += `<p>${array[0]}: $${array[1]}</p>`
      }
     
  })
  changeDue.style.display = "block";
}

const calculateExactChange = (change) => {
  resetChangeToGive();
  //iterate through cid and divide by each currency
  for(let i = cid.length - 1; i >= 0 ; i--){
    let currency = cid[i][0];
    let amount = cid[i][1];
    
    // console.log(change);
    // console.log(`c${currency} : a${amount}\n`)
    
    let isDivisable = Math.floor(change / wordsToMoney[currency]);
    
    // console.log(`isDivisable: ${isDivisable}`);

    //if divisable, take cash from drawer *updateCID(currency, amountToTake)
    //add cash to changeToGive
    // update change: change - cash
    if (currency === 'PENNY'){
      isDivisable = (change / wordsToMoney[currency]);
    }

    if(isDivisable > 0 && amount > 0) {
      let requestedChange = (isDivisable * wordsToMoney[currency]);
      if(requestedChange > amount){
        requestedChange = amount;
        cid[i][1] = 0;
        updateCID(currency, requestedChange);
        updateChangeToGive(currency, requestedChange);
        change = (change - requestedChange).toFixed(2);
      }
      else{
        updateCID(currency, requestedChange);
        updateChangeToGive(currency, requestedChange);
        change = (change - requestedChange).toFixed(2);
      }
    }
  }
  return change;
  // if (changeToGive.length === 0){
  //   changeDue.innerHTML = 'Status: INSUFFICIENT_FUNDS'
  // }
      

}
window.addEventListener("load", function(){
    displayCID();
    totalBox.innerText = `Total: $${price}`;
    purchaseBtn.addEventListener("click", () => {
    // resetChangeGiven();
  let cash = Math.round(Number(cashInput.value) * 100) / 100
  let change = Number(cash - price).toFixed(2);
  let cid = Number(calculateCID());
  console.log(`${change}, ${cid}`);
  if (cash < price){
    alert("Customer does not have enough money to purchase the item");
    return
  }
  else if (cash === price){
    changeDue.innerHTML = `No change due - customer paid with exact cash`; 

  }
  else if(isCIDLessThanChange(change,cid) ){ 
    return
  }
  else if(isCIDEqualToChange(change,cid)){
    console.log(calculateExactChange(change));
    displayChangeGiven();
    return
  }
  else if( isCIDGreaterThanChange(change,cid)) {
   
    change = calculateExactChange(change);
    if (change > 0){
      changeDue.innerHTML = 'Status: INSUFFICIENT_FUNDS'
      return
    }
    displayChangeGiven();
    return
  }
  
    // changeDue.innerHTML = 'Status: INSUFFICIENT_FUNDS'
  
  })
});

/* file: styles.css */
:root {
  --light-black: #2a2a2a;
  --black: #222121;
  --white: #fafcfc;
  --electric-blue: #4cd1d6;
  --grey: #e5e4e3;
}

body {
  /* width: 100%;
  height: 100%; */
  background-color: var(--black);
  color: var(--white);
  box-sizing: border-box;
}

header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 18px;
  font-size: 24px;
}
#change-due {
  display: none;
  margin-bottom: 10px;
}

#change-due p {
  margin: 0px;
}

#total-container, #neck, #register, #register-drawer, #register-button {
  background-color: var(--electric-blue);
  margin-left: auto;
  margin-right: auto;
}

#cash, #cash-label {
  margin-bottom: 10px;
}

#cash {
  height: 25px;
  width: 250px;
}

#purchase-btn {
  height: 30px;
  width: 100px;
  font-weight: bold;
  border: 2px solid var(yellow);
}

#total-container {
  width: 250px;
  height: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#total-box {
  margin-left: auto;
  margin-right: auto;
  background-color: var(--light-black);
  width: 230px;
  height: 35px;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  font-size: 23px;
}

#neck {
  position: relative;
  width: 40px;
  height: 35px;
}

#register {
  width: 425px;
  height: 325px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

#change {
  width: 225px;
  height: 290px;
  background-color: var(--white);
  border-radius: 5px;
  position: relative;
  top: 18px;
  left: 175px;
  color: var(--black);
  padding-left: 5px;
}
#change label
{
  font-size: 20px;
}

#change p {
  margin: 0px;
  padding: 3px;
  font-size: 20px
}

#divider {
  height: 2px;
  border: none;
  background-color: var(--black);
}

#register-drawer {
  width: 425px;
  height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#register-button {
  height: 25px;
  width: 25px;
  background-color: var(--black);
  border-radius: 50%;
  
}

Your browser information:

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

Challenge Information:

Build a Cash Register Project - Build a Cash Register

2

Have you tried your app?
If I set up the values for test 18 with

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

the first time I click the button there is nothing shown in #change-due

3

I just updated my code. I seem to have uploaded code that I was messing with and not the final. I have tested my app and the result looks like the test case but am not getting the pass?

4

still not an output the first time I click the button.

You can also test adding this code at the end:

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");

Right now the console shows

Test #18
actual 
        
expected Status: CLOSED PENNY: $0.5

meaning no text comes from the #change-due element

5

Ok, it seems when I put everything in a addEventListener(“load”) and it seemed to have thrown things off. I added some functions to the beginning of the .click() eventListener and am now only failing the last case.
SECOND EDIT:
I ended up changing the way isCIDEqualToChange compares values as well. Run the code again and all cases passed!
Thanks for the help, testing the code with your example was able to show me where I was going wrong. seem to not fully understand how the test behaves, had to redesign my first attempt