Build a Cash Register Project - Build a Cash Register

JavaScript
1

Tell us what’s happening:

I tried to run test but I haven’t a clue where I’m wrong. Some of the pre-requisites needed to pass are already met and still can’t complete it.
“When price is less than the value in the #cash element, total cash in drawer cid is greater than the change due, individual denomination amounts allows for returning change due, and the #purchase-btn element is clicked, the value in the #change-due element should be "Status: OPEN" with required change due in coins and bills sorted in highest to lowest order.”
Need help

Your code so far

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="icon"
      type="image/png"
      href="https://cdn.freecodecamp.org/universal/favicons/favicon.ico"
    />
    <title>Cash Register</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <main>
      <img
        class="freecodecamp-logo"
        src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg"
        alt="freeCodeCamp Logo"
      />
      <h1>Cash Register Project</h1>
      <div id="change-due"></div>
      <div class="input-div">
        <label for="cash">Enter cash from customer:</label>
        <input type="number" id="cash" class="user-input" value="" />
        <button class="check-btn-styles" id="purchase-btn">Purchase</button>
      </div>
      <div class="container">
        <div class="top-display-screen-container">
          <p id="price-screen" class="price-screen"></p>
          <div class="connector"></div>
        </div>
        <div class="top-register">
          <div class="btns-container">
            <button class="btn"></button>
            <button class="btn"></button>
            <button class="btn"></button>
            <button class="btn"></button>
            <button class="btn"></button>
            <button class="btn"></button>
            <button class="btn"></button>
            <button class="btn"></button>
            <button class="btn"></button>
          </div>
          <div id="cash-drawer-display" class="cash-drawer-display"></div>
        </div>
        <div class="bottom-register">
          <div class="circle"></div>
        </div>
      </div>
    </main>
    <script src="./script.js"></script>
  </body>
</html>



let price = 2;
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 divChangeDue = document.getElementById("change-due");
const cashInput = document.getElementById("cash");
const purchaseBtn = document.getElementById("purchase-btn");
const cashDrawerDisplay = document.getElementById("cash-drawer-display");
const priceScreen = document.getElementById("price-screen");

let result = { status: "OPEN", change: [] };
let cashInDrawer = 0;
for (const value of cid) {
  cashInDrawer = parseFloat((cashInDrawer += value[1]).toFixed(2));
}
const moneyValueArray = [100, 20, 10, 5, 1, 0.25, 0.10, 0.05, 0.01];
const reverseCid = [...cid].reverse();
priceScreen.innerHTML = `Total: $${price}`;
const results = (status, change) => {
  divChangeDue.innerHTML = `<p>Status: ${status}</p>`;
  change.map(
    bill => (divChangeDue.innerHTML += `<p>${bill[0]}: $${bill[1].toFixed(2)}</p>`)
  );
  return;
};

const purchase = () => {

  let changeDue = Number(cashInput.value) - price;
  let changeArray = [0,0,0,0,0,0,0,0,0];

  if (Number(cashInput.value) < price) {
    alert("Customer does not have enough money to purchase the item");
  } 
  
  if (Number(cashInput.value) == price) {
     return divChangeDue.innerHTML = "<p>No change due - customer paid with exact cash</p>";
  }

  if (cashInDrawer < changeDue) {
    return (divChangeDue.innerHTML = "<p>Status: INSUFFICIENT_FUNDS</p>");
  }

  if (cashInDrawer == changeDue) {
    result.status = 'CLOSED';
  }

  for (let i = 0; i <= reverseCid.length; i++) {
    if (changeDue > 0 && changeDue >= moneyValueArray[i]) {
      while (reverseCid[i][1] > 0 && changeDue >= moneyValueArray[i]) {              
        reverseCid[i][1] = parseFloat((reverseCid[i][1] -= moneyValueArray[i]).toFixed(2));
        changeDue = parseFloat((changeDue -= moneyValueArray[i]).toFixed(2));
        cashInDrawer = parseFloat((cashInDrawer -= moneyValueArray[i]).toFixed(2));
        changeArray[i] = parseFloat((changeArray[i] += moneyValueArray[i]).toFixed(2));
      }
    }
    if (changeArray[i]) {
      result.change.push([reverseCid[i][0], changeArray[i]]);
    }
    console.log("next");
    console.log("cash in drawer $" + cashInDrawer);
    console.log("change due $" + changeDue);
    console.log(changeArray);
    console.log(result);
  }
  if (changeDue > 0) {
    return (divChangeDue.innerHTML = '<p>Status: INSUFFICIENT_FUNDS</p>');
  }
  results(result.status, result.change);
  update();
}

const check = () => {
  if (!cashInput.value) {
    return;
  }
  purchase();
};

const update = () => {
  cash.value = '';
  result = { status: 'OPEN', change: [] };
  priceScreen.textContent = `Total: $${price}`;
  cashDrawerDisplay.innerHTML = "<p>Change in drawer:</p>";
  cid.map(
      bill => (cashDrawerDisplay.innerHTML += `<p>${bill[0].toLowerCase()}: $${bill[1]}</p>`)
  );
};

purchaseBtn.addEventListener("click", check);

update();

// console.log(moneyArray);
// console.log(moneyValueArray);
// console.log(cashInDrawer);
// purchase(200);
// console.log(cid);


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

:root {
  --light-gray: #dfdfe2;
  --dark-blue: #0a0a23;
}

body {
  background-color: var(--dark-blue);
  color: var(--light-gray);
}

main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 40px 10px;
}

.freecodecamp-logo {
  width: 100%;
  height: 30px;
  margin-bottom: 20px;
}

h1 {
  font-size: 2.5rem;
  margin: 20px 0;
  text-align: center;
}

#change-due {
  text-align: left;
  font-size: 1.2rem;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.input-div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin: 10px 0 20px;
}

label {
  font-size: 18px;
}

.user-input {
  height: 30px;
  padding: 10px;
  margin: 10px;
  font-size: 15px;
}

.price-screen {
  border: 10px solid #99c9ff;
  background-color: black;
  height: 50px;
  width: 200px;
  margin-left: -40px;
  color: white;
  font-size: 1.2rem;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

#price {
  font-size: 1.5rem;
  text-align: center;
}

.connector {
  margin-left: -20px;
  background-color: #99c9ff;
  height: 30px;
  width: 40px;
}

.top-register {
  display: flex;
  justify-content: space-around;
  border-radius: 35px 35px 0 0;
  padding-top: 20px;
  background-color: #99c9ff;
  height: 250px;
  width: 325px;
}

.btns-container {
  width: 25%;
}

.btn {
  border-radius: 10%;
  border: none;
  width: 20px;
  height: 20px;
  background-color: black;
}

.check-btn-styles {
  cursor: pointer;
  width: 100px;
  height: 30px;
  margin: 10px;
  color: #0a0a23;
  font-size: 18px;
  font-weight: bold;
  background-color: #feac32;
  background-image: linear-gradient(#fecc4c, #ffac33);
  border-color: #feac32;
  border-width: 3px;
}

.cash-drawer-display {
  font-size: 1.1rem;
  background-color: white;
  width: 55%;
  height: 95%;
  color: black;
  padding: 10px;
}

.bottom-register {
  background-color: #99c9ff;
  height: 50px;
  width: 325px;
  margin-top: 10px;
}

.circle {
  margin: 15px auto;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  background-color: black;
}

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

you have too much code and variables in the global scope.
Try to reduce these down so that only the cid and price are in the global scope with all other functional code placed into functions that are triggered when the purchase button is clicked.

All code that exists in the global scope should not deal with any calculations that affect the results. So you can have all the getElementById lines in the global scope because they don’t affect the outcome of the purchase.
Also this line would be okay too:

but not this line:

So go through your code and find anything in the global scope that is relying on cid or price to do any work and move it so it runs inside the click handler for purchase (or from a function that is triggered by the click handler for purchase)

The tests run without reloading the browser, so all your global code will run once only, and then never again even as the tests continue to modify the cid and price and continue to trigger the purchase event.

3

Many thanks.
Really solved almost all the issues I had by just declaring the variables inside the function “purchase()”.

The only one left to complete seems to be bugged since the results meet the requirements but it still won’t let me pass.

here are the prints:

freecode1
freecode1491×791 22 KB

freecode2
freecode2471×790 23.5 KB

freecode3
freecode3672×749 63 KB

4

PS.: my reverseCid was a constant and I changed it to a variable.

5

You will need to post your new code if you need my help.

In the meantime, remember that the tests are running in sequence so try to look at the test that came just above the bad test. Run your code and test with something that causes the insufficient funds message then keep testing without reloading with other numbers to see if you can trigger the failure on your end.

7

found the solution. Many thanks

1 Like