Build a Cash Register Project - Build a Cash Register

JavaScript
1

Tell us what’s happening:

Hello, I know my code is probably not very elegant, but after a couple of days of tries, failures and partial successes I believe I made my Cash Drawer App to work. But it doesn’t seem to pass the tests, even though when I do them manually, it works as intended (at least I think so). Can someone point me in the right direction as to why ? Thank you

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="stylesheet" href="styles.css">
    <title>Cash Drawer App</title></head>

<body>

  <h1>Cash Drawer App</h1>
  <div class="calculator">
    <p id="instructions">Price of the item:
      <b>$1.87</b>
    </p>
    <h3 id="instructions">Enter cash from customer:
    </h3>
    <input id="cash" type="number" /><button id="purchase-btn">Purchase</button>
  </div>
  <div class="calculator" id="change-due" style="display: none;" *></div>
  <div class="calculator">
    <h3>Change in drawer:</h3>
    <div id="cash-drawer-div"></div>
  </div>
</body>
<script src="script.js"></script>
  </html>


/* file: styles.css */
body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  background-color: #8aa29e;
  color: #3d5467;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.calculator {
  border: solid #022a2c 3px;
  border-radius: 5px;
  padding: 15px;
  margin: 15px;
  justify-content: center;
  padding-left: auto;
  padding-right: auto;
  max-width: 500px;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#result {
  margin-top: 10px;
  height: 30px;
  max-width: 500px;
  min-width: 300px;
}

#purchase-btn {
  width: 180px;
  height: 30px;
  font-size: 20px;
  border: solid #022a2c 3px;
  border-radius: 5px;
  background-color: #f1edee;
  color: #022a2c;
  margin-top: 10px;
}

#cash {
  width: 180px;
  height: 30px;
  font-size: 22px;
  border: solid #022a2c 3px;
  background-color: #f1edee;
  color: #022a2c;
  border-radius: 5px;
}

#cash-drawer-div {
  justify-content: left;
  width: 55%;
}

#hidden {
  display: none;
}


/* file: script.js */
const cash = document.getElementById("cash");
const change = document.getElementById("change-due");
const purchaseBtn = document.getElementById("purchase-btn");
const cashDrawer = document.getElementById("cash-drawer-div");

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 pricePennies = price*100;
let cidPennies = [
  ["PENNY", cid[0][1]*100],
  ["NICKEL", cid[1][1]*100],
  ["DIME", cid[2][1]*100],
  ["QUARTER", cid[3][1]*100],
  ["ONE", cid[4][1]*100],
  ["FIVE", cid[5][1]*100],
  ["TEN", cid[6][1]*100],
  ["TWENTY", cid[7][1]*100],
  ["ONE HUNDRED", cid[8][1]*100]
];



let cidSum = () => {
  var sum = 0;
  for (var i = 0; i < cidPennies.length; i++) {
    sum += cidPennies[i][1];
  }
  return sum;
};

cashDrawer.innerHTML = `
Pennies: $${cid[0][1]}
<br>Nickels: $${cid[1][1]}
<br>Dimes: $${cid[2][1]}
<br>Quarters: $${cid[3][1]}
<br>Ones: $${cid[4][1]}
<br>Fives: $${cid[5][1]}
<br>Tens: $${cid[6][1]}
<br>Twenties: $${cid[7][1]}
<br>Hundreds: $${cid[8][1]}
`;

let cashToReturn = [
  ["PENNY", 0, 1],
  ["NICKEL", 0, 5],
  ["DIME", 0, 10],
  ["QUARTER", 0, 25],
  ["ONE", 0, 100],
  ["FIVE", 0, 500],
  ["TEN", 0, 1000],
  ["TWENTY", 0, 2000],
  ["ONE HUNDRED", 0, 10000]
];

const returnCash = (customerCash) => {
  let sumToReturn = customerCash - pricePennies;
  for (var i = 8; i >= 0; i--) {
    if (sumToReturn === 0) {
      break;
    } else if (
      sumToReturn >= cashToReturn[i][2] &&
      cidPennies[i][1] > 0 &&
      sumToReturn > 0
    ) {
      let temp = Math.min(
        Math.floor(sumToReturn / cashToReturn[i][2]),
        cidPennies[i][1] / cashToReturn[i][2]
      );
      sumToReturn -= temp * cashToReturn[i][2];
      cidPennies[i][1] -= temp * cashToReturn[i][2];
      cashToReturn[i][1] += temp;
    }
  }
};

const resetCashToReturn = () => {
  cashToReturn = [
  ["PENNY", 0, 1],
  ["NICKEL", 0, 5],
  ["DIME", 0, 10],
  ["QUARTER", 0, 25],
  ["ONE", 0, 100],
  ["FIVE", 0, 500],
  ["TEN", 0, 1000],
  ["TWENTY", 0, 2000],
  ["ONE HUNDRED", 0, 10000]
]
};

const refreshDrawer = () => {
  cashDrawer.innerHTML = `
Pennies: $${(cidPennies[0][1] / 100).toFixed(2)}
<br>Nickels: $${(cidPennies[1][1] / 100).toFixed(2)}
<br>Dimes: $${(cidPennies[2][1] / 100).toFixed(2)}
<br>Quarters: $${(cidPennies[3][1] / 100).toFixed(2)}
<br>Ones: $${(cidPennies[4][1] / 100).toFixed(2)}
<br>Fives: $${(cidPennies[5][1] / 100).toFixed(2)}
<br>Tens: $${(cidPennies[6][1] / 100).toFixed(2)}
<br>Twenties: $${(cidPennies[7][1] / 100).toFixed(2)}
<br>Hundreds: $${(cidPennies[8][1] / 100).toFixed(2)}
`;
};

purchaseBtn.addEventListener("click", () => {
  const cashPennies = cash.value*100;
  const sumToReturn = cashPennies - pricePennies;
  change.style.display = "initial";
  resetCashToReturn();
  
  if (sumToReturn === 0) {
    alert("No change due - customer paid with exact cash");
    change.innerText = "Status: CLOSED";
  } else if (sumToReturn > cidSum()) {
    change.innerText = "Status: INSUFFICIENT_FUNDS";
  } else if (sumToReturn < 0) {
    alert("Customer does not have enough money to purchase the item");
    change.innerText = "Status: CLOSED";
  } else {
    returnCash(cashPennies);
    refreshDrawer();
    change.innerHTML = `
    <b>Status: OPEN</b>
<br>Pennies: $${(cashToReturn[0][1] * cashToReturn[0][2] / 100).toFixed(2)}
<br>Nickels: $${(cashToReturn[1][1] * cashToReturn[1][2] / 100).toFixed(2)}
<br>Dimes: $${(cashToReturn[2][1] * cashToReturn[2][2] / 100).toFixed(2)}
<br>Quarters: $${(cashToReturn[3][1] * cashToReturn[3][2] / 100).toFixed(2)}
<br>Ones: $${(cashToReturn[4][1] * cashToReturn[4][2] / 100).toFixed(2)}
<br>Fives: $${(cashToReturn[5][1] * cashToReturn[5][2] / 100).toFixed(2)}
<br>Tens: $${(cashToReturn[6][1] * cashToReturn[6][2] / 100).toFixed(2)}
<br>Twenties: $${(cashToReturn[7][1] * cashToReturn[7][2] / 100).toFixed(2)}
<br>Hundreds: $${(cashToReturn[8][1] * cashToReturn[8][2] / 100).toFixed(2)}
`;
  }
});

Your browser information:

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

Challenge Information:

Build a Cash Register Project - Build a Cash Register

2

don’t do any calculation in the global scope, the only things you need to have in the global scope are cid and price

3

these two variables will only run once even though the tests run in sequence one by one. This is because any code in the global scope will run only when the page is loaded (but the test doesn’t reload the page each time).

move any code in the global scope that relies on the cid/price or updates the change-due to run when the purchase button is triggered instead.

4

Thank you both for assistance, there were more issues than this it turned out, but in the end, I did it.

1 Like