Build a Cash Register Project - Build a Cash Register

JavaScript
1

Tell us what’s happening:

When i test my code is working so far in every check, but the auto test is having issues with my code saying that my code is not passing the test but is actually doing it when i modify “price” and “cid” by myself, is working perfectly.

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" />
    <title>Build a Cash Register Project</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    
    
    <div class="input-container">
      <h1>Cash Register App</h1>
      <label for="cash">Cash from customer:</label>
      <input type="number" value="" name="decimal number input" id="cash" class="number-input"/>
      <button id="purchase-btn">Purchase</button>
    </div>
    <div class="cash-register" >
      <div class="total-due-screen">
        <div class="total-due">Total: $<span id="price-due">3.26</span></div>
      </div>
      <div class="neck"></div>
      <div class="body-up-container">
        <div class="small-square">
          <div id="line-receipt"></div>
        </div>
        <div class="numbers-container">
            <div class="number-square"></div>
            <div class="number-square"></div>
            <div class="number-square"></div>
            <div class="number-square"></div>
            <div class="number-square"></div>
            <div class="number-square"></div>
            <div class="number-square"></div>
            <div class="number-square"></div>
            <div class="number-square"></div>
          </div>
          
        </div>
        <div class="body-down-container">
        <div class="left-side"></div>
        <div class="center-side">
        <div class="change-container hidden">
          <span id="change-due"></span>
                         
        </div>  
        <div class="cash-in-drawer">
              <h3 class="title-cash">Change in drawer</h3>
              <p id="remaning-name">Pennies: $<span id="remaining-pennis"></span></p>
              <p id="remaning-name">Nickels: $<span id="remaining-nickels"></span></p>
              <p id="remaning-name">Dimes: $<span id="remaining-dimes"></span></p>
              <p id="remaning-name">Quarters: $<span id="remaining-quarters"></span></p>
              <p id="remaning-name">Ones: $<span id="remaining-ones"></span></p>
              <p id="remaning-name">Fives: $<span id="remaining-fives"></span></p>
              <p id="remaning-name">Tens: $<span id="remaining-tens"></span></p>
              <p id="remaning-name">Twenties: $<span id="remaining-twenties"></span></p>
              <p id="remaning-name">Hundreds: $<span id="remaining-hundreds"></span></p>                         
            </div>
          </div>
          <div class="right-side"></div>
        </div>
         <div class="cash-lid">
          <div class="cash-handle"></div>
        </div>
      </div>
           
         
    <script src="script.js"></script>
  </body>
</html>


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


 
let totalChange = 0;
let changeArr = [];
let outputMsg = "";
let change = 0;
let cidMaxToMin = [];

 
let cashInput = document.getElementById("cash");
let purchaseBtn = document.getElementById("purchase-btn");
const priceScreen = document.getElementById("price-due");
let outputSpan = document.getElementById("change-due");
let cashInDrawer = document.querySelectorAll(".cash-in-drawer span");


  
const updateRemainingCash = (arr, arr2) => {
  arr2.forEach((el, index) => {
    el.textContent = arr[index][1];  
    });
  return;
};

const updateTotalChange = (arr) => {
  let total = 0;
  arr.forEach((el) => {
    total += el[1];
  });
  return totalChange = parseFloat(total).toFixed(2);
}


const calculateChangeDue = (arr) => {
 
  for (const el of arr) {
   
    let changeCustomer = 0;
    let billValue = detectBill(el[0]);

    if (outputSpan.textContent === "Status: INSUFFICIENT_FUNDS") {
      continue;
    }
    
    if (change < billValue) {
     continue;
    }
     ;
    if (el[1] <= 0) {
     continue; 
    }
    
    while ( change >= billValue && el[1] > 0) {
     change = parseFloat(change - billValue).toFixed(2);
     el[1] = parseFloat(el[1] - billValue).toFixed(2);
     changeCustomer = Number((billValue + changeCustomer).toFixed(2));
      console.log(change);
      console.log(changeCustomer);
    }
     
      
    changeArr.push([el[0], changeCustomer]);
    
  };

  if (change > 0) {
      return outputSpan.textContent === "Status: INSUFFICIENT_FUNDS";
    }

  cid = arr.reverse();
  return change, arr, cid;

};

const detectBill = (category) => {
  let bill = 0;

  switch (category.toUpperCase()) {
    case "ONE HUNDRED":
      bill = 100;
      break;
    
    case "TWENTY":
      bill = 20;
      break;
    
    case "TEN":
      bill = 10;
      break;
    
    case "FIVE":
      bill = 5;
      break;

    case "ONE":
      bill = 1;
      break;
    
    case "QUARTER":
      bill = 0.25;
      break;
    
    case "DIME":
      bill = 0.10;
      break;
    
    case "NICKEL":
      bill = 0.05;
      break;
    
    default:
      bill = 0.01;

 
  }
    return bill;
  
};

function initStats() {
  priceScreen.textContent = price;
  updateTotalChange(cid);
  updateRemainingCash(cid, cashInDrawer);
 return;
};

const msgChange = (arr) => {  
  arr.forEach((el) => {
    outputMsg +=`<span id="result-screen">${el[0]}: $${el[1]}</span>
    `});
  return;
};




purchaseBtn.addEventListener("click", () => {
  outputSpan.textContent = "";
  changeArr = [];
  outputMsg = "";
  change = cashInput.value - price;
  cidMaxToMin = cid.reverse();
  
    
  

  if (change < 0) {
    alert("Customer does not have enough money to purchase the item", 500);
    return;
  }

  if(change === 0) {
    outputSpan.textContent = `No change due - customer paid with exact cash`;
    return;
  }

  if (change > totalChange) {
    outputSpan.textContent = `Status: INSUFFICIENT_FUNDS`;
    return;
  }
  
  calculateChangeDue(cidMaxToMin);
  if (outputSpan.textContent === `No change due - customer paid with exact cash`) {
    return;
  }
  
  updateTotalChange(cid);
  updateRemainingCash(cid, cashInDrawer);
  

  if (outputSpan.textContent === "") {
    let status = totalChange === change ? "CLOSED" : "OPEN";
    msgChange(changeArr);
    outputSpan.textContent = `Status: ${status}`;
    outputSpan.innerHTML += `${outputMsg}`;
    return;
  } else {
    return;
  }
   
   
});

 
price = 19.5 ;
cid = [
  ['PENNY', 1.01],
  ['NICKEL', 2.05],
  ['DIME', 3.1],
  ['QUARTER', 4.25],
  ['ONE', 90],
  ['FIVE', 55],
  ['TEN', 20],
  ['TWENTY', 60],
  ['ONE HUNDRED', 100]
];

initStats();




*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: #100139;
  margin: 0;
  text-align: center;
  color: #c5bc5d;
  font-family: cursive, sans serif;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  
}

h1 {
  font-size: 2rem;
  margin: 30px auto;
}

.input-container {
  width: 300px;
  margin: 20px auto;
  border: 2px solid white;
  border-radius: 8px;
  padding: 10px;
}

.input-container label  {
  display: block;
  font-size: 1.2rem;
}

.input-container input {
  display: block;
  margin: 10px auto;
  padding: 5px;
}

#purchase-btn {
  width: 100px;
  font-size: 1.2rem;
  background-color: green;
  color: white;
  border-radius: 8px;
  padding: 2px;
}

.cash-register {
  width: 600px;
  margin: 20px auto;
 

}

.total-due-screen {
  background-color: white;
  border-radius: 20px;
  display: block;
  width: 200px;
  padding: 10px;
  margin-left: 350px;   
  
}

.total-due {
  width: 150px;
  background-color: #100139;
  margin: 5px auto;
  padding: 5px;
  border-radius: 5px;  
  font-size: 1.2rem; 
}

.neck {
  width: 30px;
  height: 50px;
  background-color: white;
  display: block;
  margin-left: 435px; 
}

.body-up-container {
  background-color: white;
  width: 500px;
  height: 100px;
  display: flex;
  padding: 15px;
  margin: 0 auto;
  margin-bottom: 10px;
  text-align: center;
  border-radius: 5px 5px 0 0;
  justify-content: space-evenly;
  align-items: center;
}


.small-square {
  width: 275px;    
  padding: 10px;
  background-color: #100139;  
  
  
}

#line-receipt {
  width: 220px;
  height: 2px;  
  background-color: white;
  margin: 0px auto;
}

.numbers-container{
  
  width: 100px; 
  padding: 10px;  
  display: flex;
  flex-direction: row;  
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  justify-content: space-evenly;
 
  
}

.number-square {
  width: 20px;
  height: 20px;
  background-color: #100139;
  border-radius: 35%;

  

}

.body-down-container {
  display: flex;
  width: 550px;
  
  margin: 0 auto;
}

.left-side {
  display: inline;
  width: 0; 
  
  border-left:  25px solid transparent ;
  
  border-bottom: 275px solid white;
}

.center-side {
  width: 500px;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: space-evenly;

}

.change-container, .cash-in-drawer {  
  text-align: left;
  width: 200px;
  background-color: #100139 ;
  padding: 10px;
  border-radius: 10px;

}

#change-due{
  display: block;
  flex-wrap: wrap;
}

remaining-cash {
  display: flex;
  flex-wrap: wrap;
  
}

.right-side {
  display: inline;
  width: 0;   
  border-right:  23px solid transparent ;  
  border-bottom: 275px solid white;
}

.cash-lid {
  display: block;
  width: 550px;
  padding: 30px;
  background-color: white;
  margin: 10px auto; 
  border-radius: 10px;
  
}

.cash-handle {
  width: 25px;
  height: 25px;
  background-color: #c5bc5d;
  margin: auto auto;
  border: 5px solid #100139;
  border-radius: 50%;
}

#result-screen {
  display: block;
}

This is one of the test that i can’t pass:

Screenshot 2024-07-30 142733

Your browser information:

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

Challenge Information:

Build a Cash Register Project - Build a Cash Register

2

when i test by myself this is the answer from my code:

Screenshot 2024-07-30 142715
Screenshot 2024-07-30 142715978×700 37.5 KB

3

please don’t use global variables for values like this.
If any of these represent calculations that come from the cid or the price then they will not have the correct values when the tests run (the tests do not reload your page every time they run, they just trigger the button click on purchase and that’s it, so whatever is cached in your browser for these values will remain from the previous test and mess up the calculations you may be doing)

2 Likes