Build a cash register project

JavaScript
1

Hello can someone help me please, i dont understand why this particular test doesnt pass although the code works perfectly on the page output with any price or cid input when the conditions are met and also works similarly as on the page FCC provided as an example.
The test is
When price is less than the value in the #cash element, total cash in drawer cid is equal to change due, and the #purchase-btn element is clicked, the value in the #change-due element should be "Status: CLOSED" with change due in coins and bills sorted in highest to lowest order.

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Cash Register</title>
  <link rel="stylesheet" href="styles.css" />
</head>
  </head>
  <body>
    <h1>CASH REGISTER</h1>
    <p id="change-due"></p>
    <label for="#cash"> Enter customer cash:</label>
    <input type="number" id="cash"></input>
    <button id="purchase-btn" type="button">Purchase</button>
    <div class="total" id="productPrice"></div>
    <div class="neck"></div>
    <div class="cash-register">
      <p style="color: orangered; font-size: 1.2rem;text-decoration: underline; margin-bottom: 5px;">CHANGE IN DRAWER:</p>
      <p>Pennies: $<span id="pennies">1.01</span></p>
      <p>Nickels: $<span id="nickels">2.05</span></p>
      <p>Dimes: $<span id="dimes">3.1</span></p>
      <p >Quarters: $<span id="quarters">4.25</span></p>
      <p>Ones: $<span id="ones">90</span></p>
      <p>Fives: $<span id="fives">55</span></p>
      <p>Tens: $<span id="tens">20</span></p>
      <p>Twenties: $<span id="twenties">60</span></p>
      <p>Hundreds: $<span id="hundreds">100</span></p>
    </div>
    <script src="script.js"></script>
  </body>
</html>

*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #0a0a23;
color: floralwhite;
font-weight: bold;
font-family: verdana;
}
h1 {
text-align: center;
margin-top: 40px;
}
input {
display: block;
margin: auto;
height: 35px;
width: 30%;
margin-top: 20px;
border: 2px solid silver;
background-color: darkgreen;
color: floralwhite;
font-size: 1.1rem;
text-align: center;
}
label {
display: block;
margin: auto;
text-align: center;
margin-top: 30px;
font-size: 1.2rem;
}
button {
margin: auto;
margin-top: 20px;
display: block;
width: 90px;
height: 30px;
background-color: darkslateblue;
color: floralwhite;
font-size: 1.1rem;
border: 2px solid orangered;
border-radius: 10%;
}
button:hover {
background-color: floralwhite;
color: darkslateblue;
}
.total {
margin: auto;
display: block;
width: 25%;
border: 5px solid deepskyblue;
margin-top: 25px;
height: 35px;
text-align: center;
font-size: 1.1rem;
}
.neck {
display: block;
margin: auto;
margin-top: 0;
width: 30px;
height: 40px;
background-color: deepskyblue;
}
.cash-register {
display: block;
margin: auto;
margin-top: 0;
border: 5px solid deepskyblue;
width: 50%;
height: 230px;
border-radius: 25px 25px 0 0;
padding-left: 15px;
padding-top: 10px;
}
#change-due {
margin: auto;
display: block;
margin-top: 20px;
width: 40%;
text-align: center;
}

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 button = document.getElementById("purchase-btn");
const input = document.getElementById("cash");
const changeMsg = document.getElementById("change-due");
const quarter = document.getElementById("quarters");
const penny = document.getElementById("pennies");
const nickel = document.getElementById("nickels");
const dime = document.getElementById("dimes");
const one = document.getElementById("ones");
const five = document.getElementById("fives");
const ten = document.getElementById("tens");
const twenty = document.getElementById("twenties");
const hundred = document.getElementById("hundreds");
const totalPrice = document.getElementById("productPrice");
let totalCid = (cid[0][1]+ cid[1][1]+cid[2][1]+cid[3][1]+cid[4][1]+cid[5][1]+cid[6][1]+cid[7][1]+cid[8][1]).toFixed(2);
totalPrice.innerHTML = `Total: $${price}`;
penny.textContent = cid[0][1];
nickel.textContent = cid[1][1];
dime.textContent = cid[2][1];
quarter.textContent = cid[3][1];
one.textContent = cid[4][1];
five.textContent = cid[5][1];
ten.textContent = cid[6][1];
twenty.textContent = cid[6][1];
hundred.textContent = cid[7][1];
button.addEventListener("click", () => {
  let change = (input.value-price).toFixed(2);
  if (input.value < price) {
    alert("Customer does not have enough money to purchase the item");
  } else if (input.value == price) {
    changeMsg.textContent = "No change due - customer paid with exact cash"; 
  } else if (input.value>price && change == totalCid) {
    let message = [];
      for (let i=cid.length-1; i>=0; i--) {
    if (cid[i][1]>0) {
      message.push(`${cid[i][0]}: $${cid[i][1]}`);
      changeMsg.innerHTML = `Status: CLOSED<br> ${message.join("<br>")}`;
    }
  }
  }
})
2

Please take a look at this post:

https://forum.freecodecamp.org/t/build-a-cash-register-project-build-a-cash-register/739636

3

Thank you it worked when i changed totalCid from global variable inside the event listener, i thought the global variables always work in any scenario.

4

In general, you should not hide data in global variables. It makes it harder to trace your logic and it’s easy to have stale data between function calls.

5

Ok thanks , now its much clearer so global variables should mainly be used for connecting with html elements and not for storing data?

6

Generally, yes. I would stick to things that don’t really mutate for global variables, like references to parts of the DOM. You probably want all of your globals to be ‘const’.

7

Ok thank you, just one more question please, does this counts as incorrect code having in mind that it gave the correct output in a real scenario, so if we accidently make a mistake like this would it be counted as an error and would it potentially give a wrong output in a more complex code.

8

Yes, it counts as incorrect. A function needs to be able to be used multiple times.