Build a Cash Register Project - Build a Cash Register

JavaScript
1

Tell us what’s happening:

Hi, my code works completely fine, but the website still has steps 11-19 marked wrong. I don’t quite know what’s happening, any and all help appreciated

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="stylsheet" href="styles.css">
  </head>
  <body>
    <h1 id="heading">Cash Register Project</h1>
    <div id="change-due"></div>
    <input type="number" id="cash">
    <button id="purchase-btn">Purchase</button>
    <div class = "cash-register">
      <div class="cash-output"><p id="cash-p">Total: <span id="price">$3.26</span></p></div>
      <div class="register-body">
        <div id="input-buttons">
          <div class="beep"></div>
          <div class="beep"></div>
          <div class="beep"></div>
          <div class="beep"></div>
          <div class="beep"></div>
          <div class="beep"></div>
          <div class="beep"></div>
          <div class="beep"></div>
          <div class="beep"></div>
        </div>
        <div class="c-i-d">
          <p id ="c-i-drawer">Change In Drawer:</p>
        <p class="change-text">Pennies: <span id="penny-span">$1.01</span></p>  
        <p class="change-text">Nickels: <span id="nickel-span">$2.05</span></p>  
        <p class="change-text">Dimes: <span id="dime-span">$3.1</span></p>  
        <p class="change-text">Quarters: <span id="quarter-span">$4.25</span></p>  
        <p class="change-text">Ones: <span id="one-span">$90</span></p>  
        <p class="change-text">Fives: <span id="five-span">$55</span></p>  
        <p class="change-text">Tens: <span id="ten-span">$20</span></p>  
        <p class="change-text">Twenties: <span id="twenty-span">$60</span></p>  
        <p class="change-text">Hundreds: <span id="onehundred-span">$100</span></p>  
        </div>            
        </div>
      </div>
    </div>
    <script src="script.js"></script>
        </body>  
</html>


/* file: script.js */
const changeDue = document.getElementById("change-due");
const cashInput = document.getElementById("cash");
const purchaseBtn = document.getElementById("purchase-btn");
const priceEl = document.getElementById("price");
 
let price = 3.26;
let cid = [
  ['PENNY', 0.01, 1.01],
  ['NICKEL', 0.05, 2.05],
  ['DIME', 0.1, 3.1],
  ['QUARTER', 0.25,4.25],
  ['ONE', 1,90],
  ['FIVE', 5,55],
  ['TEN', 10,20],
  ['TWENTY', 20,60],
  ['ONE HUNDRED', 100,100]
];
const closestFun = (input) =>{
  const filteredArr = cid.filter(el=>input>=el[1]);

  const newArr = filteredArr.map((el)=>{ 
     return input/el[1];
  })
  newArr.sort((a,b)=>a-b);
  return newArr.map((el)=>parseFloat((input/el).toFixed(2)))
}

purchaseBtn.addEventListener("click",()=>{


   let cash = parseFloat(cashInput.value);
   let remainder = parseFloat((cash-price).toFixed(2));
   if(price>cash){
   alert("Customer does not have enough money to purchase the item");
   return;
 }

   if(remainder>cid.reduce((acc,el)=>acc+el[2],0)){
      changeDue.style.display ="block";
  changeDue.innerHTML = `<p>Status: INSUFFICIENT_FUNDS</p>`;
  return;
}

 
 
 else if(price===cash){
    changeDue.style.display ="block";
   changeDue.innerHTML = `<p class="result">No change due - customer paid with exact cash</p>`;
   return;
 }
 else{
   let ogArr = cid.map((el) =>  [...el]);
   
   
   let changedArr = [];

   const newArr = closestFun(remainder);

   
   for(let i=0;i<newArr.length;i++){
     
   let reqIndex = cid.findIndex((el)=>el[1]===newArr[i]);
   let reqArr = cid[reqIndex];
  

   
   while((remainder-reqArr[1])>=0 && reqArr[2]>0){
     remainder = parseFloat((remainder - reqArr[1]).toFixed(2));
  
     reqArr[2] = parseFloat((reqArr[2]-reqArr[1]).toFixed(2));
     reqArr[0] = reqArr[0].toLowerCase().replace(/\s/g,"");
    
     document.getElementById(`${reqArr[0]}-span`).innerText = `$${reqArr[2]}`;
       changedArr = cid.map(el=>[...el]);
     
   }
   
  
   }
 
    

 
    
    
       changeDue.style.display = "flex";
         if(cid.every((el)=>el[2]===0)){
    changeDue.innerHTML = `<p>Status: CLOSED</p>`;
  } 
  else{
       changeDue.innerHTML = `<p>Status: OPEN</p>`;
  }
       let finalArr = ogArr.map((el,index)=>parseFloat((el[2]-changedArr[index][2]).toFixed(2)));
       let nonZeroIndices = finalArr.map((val,index)=>val!==0?index:-1).filter(index=>index!==-1).sort((a,b)=>b-a);
      
       
       for(let i =0; i<nonZeroIndices.length;i++){
         let currIndex = nonZeroIndices[i];
         changeDue.innerHTML += `<p>${cid[currIndex][0].toUpperCase()}: $${finalArr[currIndex]}</p>`
       }
      
     
     }
  
 }

 
)


/* file: styles.css */
*, :before, :after {

  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  background-color:  #CCC38A;
  display: flex;
  flex-direction: column;
  place-items: center;
  row-gap: 4vw
  }
  h1 {
    margin-top: 2.25rem;
    font-family: tahoma;
    font-size: 7vh
  }
  #change-due{
    display: none;
    flex-direction: column;
    place-items: center;
    font-size: 1.3rem;
  }
#purchase-btn {
  border: none;
  border-radius: 0.5rem;
  box-shadow: 0 0 5px 1px #D68A85;
  background-color: #D68A85;
  font-family: tahoma;
  font-size: 1.2rem;
  width: 7rem;
  padding: 0.2rem;
  font-weight: bold;

}
#purchase-btn:hover {
  cursor: pointer;
  transform: scale(1.12);
  background-color: #ffbab5;
  box-shadow: none;
  color: black;
  border: 0.1px solid black
}
#cash {
  width: 40vh;
  height: 5vh;
  font-size: 100%
}
.cash-register {
  display: flex;
  flex-direction: column;
  place-items: center
}
.register-body {
  background-color:  #A3C2C6;
  width: 70vh;
  height: 40vh;
  border-radius: 2rem 2rem 0.1rem 0.1rem;
  display: flex;
 
}
.cash-output {
   display: flex;
   flex-direction: column;
   place-items: center;
   width: 40vh;
   height: 0;
   border-left: 1.5rem solid transparent;
   border-right: 1.5rem solid transparent;
   border-bottom: 2.5rem solid  #A3C2C6
}
#cash-p {
  background-color: black;
  color: white;
  margin-top: 0.5rem;
  width: 70%;
  padding: 0.3rem

  }
  .c-i-d{
    background-color: white;
    width: 30vh;
    height: 35vh;
    font-size: clamp(0.5rem,3vh,2rem);
    transform: scale(0.9);
    margin-left: auto;
  align-self: center
      }
      #input-buttons {
        display: grid;
        grid-template-columns: 2.5vh 2.5vh 2.5vh;
        grid-template-rows: 3vh 3vh 3vh;
        column-gap: 1vh;
        row-gap: 1vh;
         align-self: center;
         margin-left: 4vh
      }
      .beep{
        width: 3vh;
        height: 3vh;
        background-color: black;
       
      }

Your browser information:

User Agent is: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Mobile Safari/537.36

Challenge Information:

Build a Cash Register Project - Build a Cash Register

2

Hi. Please don’t create duplicate posts for the same topic or challenge. I have deleted your first post.

3

add this code below yours in the JS file, then look at the console. There are errors you need to fix.

This code mimic exactly 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");
4

I apologize. I didn’t attach my code in the first post and couldn’t figure out how to delete my first post. My bad

5

I’m sorry but I really don’t get how this works or how this is supposed to help. Step 9 is actually correct when i run the tests. For the rest of the tests, it seem to pull the innerText method of the changeDue element and says that it’s value is wrong, while on the screen it’s exactly in accordance with what it asks. Looks like it wants Status: OPEN and the all the change elements to be in the same variable or smth? If you would be s kind as to check that my code does indeed work correctly and maybe offer some other solution or at least explain how my code fails to meet these tests, I’d greatly appreciate it.

6

Oh nevermind, I get what the problem is now. I changed the cid array and that’s what’s causing the errors. Much thanks for all the help