Build A Cash Register Project

Hi, I’m doing my fourth Javascript Course Project. Most of it seems to work fine, but I’m not sure what I’m doing wrong that makes my code fail this user story:
image
Any help on figuring out or suggesting what’s wrong with my code would be appreciated! I’m been stuck on this for weeks, even after going on to do the final project.
Here’s the code:

<!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</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
  </head>

  <body>
    
    <h1>Cash Register</h1>
    <h2>Enter cash recieved from customer:</h2>
    <input id="cash" type="number"></input>
    <button id = "purchase-btn">Purchase</button>
    

    <div id="price-display">

    <p>Total:
      <span></span></p>
<div id="change-due"></div>
    <img src="https://iili.io/JPwIKve.png" class="cashier-icon">

    </div>
    <div id="change-in-drawer">
      <h3>Change in drawer:</h3>
      <p id="pennies">Pennies:
      <span>$3.00</span></p>
      <p id="nickels">Nickels:
      <span>$3.00</span></p>
      <p id="dimes">Dimes:
      <span>$3.00</span></p>
      <p id="quarters">Quarters:
      <span>$3.00</span></p>
      <p id="ones">Ones:
      <span>$3.00</span></p>
      <p id="fives">Fives:
      <span>$3.00</span></p>
      <p id="tens">Tens:
      <span>$3.00</span></p>
      <p id="twenties">Twenties:
      <span>$3.00</span></p>
      <p id="hundreds">Hundreds:
      <span>$3.00</span></p>
    </div>

    <img src="https://iili.io/JPwIfyu.png" class="cashier-icon">

	<script src="script.js"></script>
  </body>

</html>
:root {
  --light1: #8EAC50;
  --dark1: #001524;
  --text: #092e26;
  --accent1: #005B41;
  --accent2: #ECFFC3;
}

.exo-2-font {
  font-family: "Exo 2", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

* {
  background-color: var(--light1);
  font-family: "Exo 2";
  overflow-x: hidden
}


#main-container * {
  background-color: var(--accent2)
}

h1 {
  font-size: 40px;
  color: var(--dark1);
  text-align: center;
  margin-top: 30px;
}

h2 {
  font-size: 25px;
  text-align: center;
  margin-top: 45px;
  font-weight: 500;
  margin-bottom: 5px
}

#cash {
  height: 40px;
  width: 70vw;
  max-width: 600px;
  margin: auto;
  display: block;
  background-color: var(--accent2);
  color: var(--accent1);
  font-size: 20px;
  padding-left: 15px;
  border: solid 3px var(--accent1)
}

#purchase-btn {
  margin: 15px auto;
  display: block;
  background-color: var(--accent1);
  border: solid 3px var(--dark1);
  border-radius: 40px;
  color: var(--accent2);
  font-size: 20px;
  padding: 5px 10px;
}

#purchase-btn:active {
  background-color: var(--text);
  color: var(--light1);
}

#price-display {
  margin: auto;
  width: 96vw;
}

#change-due {
  font-size: 25px;
  text-align: center;
  font-weight: 500;
  background-color: rgba(0, 0, 0, 0);
  padding: 5px;
  width: 47%;
  max-width: 300px;
  position: absolute;
  top: 620px;
  left: 42vw;
}

#price-display p {
  font-size: 35px;
  font-weight: 600;
  background: rgba(0, 0, 0, 0);
  position: absolute;
  left: 50vw;
}

#price-display span {
  background: rgba(0, 0, 0, 0)
}

@media (min-width:350px) {
  #change-due {
    top: 450px;
  }
}

@media (min-width:550px) {
  #change-due {
    top: 500px;
  }
}

@media (max-width:580px) {
  #price-display p {
    font-size: 6vw
  }
}

@media (max-width:650px) {
  #change-due {
    left: 40%;
    font-size: 4vw;
  }
}

@media (min-width:700px) {
  #change-due {
    top: 500px;
    left: 42%;
  }
}

@media (min-width:800px) {
  #change-due {
    left: 44%;
  }
}

@media (min-width: 1180px) {
  #change-due {
    left: 45.5%;
  }
}

.cashier-icon {
  width: 88vw;
  max-width: 600px;
  display: block;
  margin: auto;
}

#change-in-drawer, #change-in-drawer * {
  background-color: var(--accent2)
}

#change-in-drawer {
  padding: 4px 40px;
  margin: auto;
  width: 55vw;
  max-width: 425px;
  border: solid 6px var(--text);
  border-radius: 40px;
}

#change-in-drawer *{
  text-align: center;
}

#change-in-drawer h3 {
  margin-top: 10px;
}

#change-in-drawer p {
  font-weight: 600;
  margin: 0;
  padding-bottom: 5px
}

#change-in-drawer span {
  font-weight: 400;
}
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]
];
let cashValues = [
  ["ONE HUNDRED", 100],
  ["TWENTY", 20],
  ["TEN", 10],
  ["FIVE", 5],
  ["ONE", 1],
  ["QUARTER", 0.25],
  ["DIME", 0.1],
  ["NICKEL", 0.05],
  ["PENNY", 0.01]
];
let reversecid = cid.slice().reverse();

const cashInput = document.getElementById("cash");
const purchaseBtn = document.getElementById("purchase-btn");
const priceDisplay = document.querySelector("#price-display span");
const statusText = document.getElementById("change-due")
const changeSpans = document.querySelectorAll("#change-in-drawer span");

priceDisplay.textContent = "$" + price;



const updateChangeInDrawer = () => {
  for (let i = 0; i < changeSpans.length; i++) {
    changeSpans[i].textContent = "$" + cid[i][1];
  };
};

 updateChangeInDrawer();


const showResults = (state, changeArr) => {
  statusText.textContent = "Status: " + state;
  changeArr.forEach((element) => {
    statusText.textContent += " " + element[0] + ": $" + element[1]
  }
  )
}



const calculateChange = (paid, total) => {

  let changeNeeded = parseFloat((paid - total).toFixed(2));
  let change = [];
  let totalCID = parseFloat(cid.reduce((sum, money) => sum + money[1], 0).toFixed(2));

  if (totalCID < changeNeeded) {
    statusText.textContent = "Status: INSUFFICIENT_FUNDS";
    return;
  } else if (totalCID === changeNeeded) {
    statusText.textContent = "Status: CLOSED";
    cid.forEach(money => {
      if (money[1] > 0) {
        change.push([money[0], money[1]]);
      }
    });
    return showResults('CLOSED', change);
  } else {
    for (let i = 0; i < reversecid.length; i++) {
      let currencyName = reversecid[i][0];
      let currencyValue = cashValues.find(val => val[0] === currencyName)[1];
      let currencyAmount = reversecid[i][1];
      let currencyCount = 0;

      while (changeNeeded >= currencyValue && currencyAmount >= currencyValue) {
        changeNeeded = parseFloat((changeNeeded - currencyValue).toFixed(2));
        currencyAmount = parseFloat((currencyAmount - currencyValue).toFixed(2));
        currencyCount += currencyValue;
      }

      if (currencyCount > 0) {
        change.push([currencyName, currencyCount]);
        reversecid[i][1] = currencyAmount;
      }
    }

    if (changeNeeded > 0) {
      statusText.textContent = "Status: INSUFFICIENT_FUNDS";
      return;
    } else {
      statusText.textContent = "Status: OPEN";
      showResults('OPEN', change);
      return change;
    }
  }
}



purchaseBtn.addEventListener("click", () => {
  if (cashInput.value < price) {
    alert("Customer does not have enough money to purchase the item");
  } else if (cashInput.value == price) {
    statusText.textContent = "No change due - customer paid with exact cash";
  } else {
    calculateChange(cashInput.value, price);
    updateChangeInDrawer()
  }
})

cashInput.addEventListener("keydown", e => {
  if (e.key === 'Enter') {
    if (cashInput.value < price) {
    alert("Customer does not have enough money to purchase the item");
  } else if (cashInput.value == price) {
    statusText.textContent = "No change due - customer paid with exact cash";
  } else {
    calculateChange(cashInput.value, price);
    updateChangeInDrawer()
  }
  }
})

This variable should not be a global

1 Like

Thank you so much! I can’t believe I missed that. It works now.

1 Like