Tell us what’s happening:
For check number 12. Everything is correct except someone my twenty. Its running a extra time and even though the drawer only has $60 its going to $80 even though every other change is right, meaning that its only subtracting 6000 cents worth from the change.
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">
<link rel="stylesheet" href="styles.css">
<title>Cash Register</title>
</head>
<body>
<h1>Cash Register</h1>
<div id="input-result-box">
<input type="number" id="cash" placeholder="Enter Amount of Cash"/>
<div class="button-wrap"><button id="purchase-btn">Purchase</button>
</div>
<div id="change-due">
<!--Results go her-->
</div>
</div>
<div class="register">
<h3>Total: <span id="total-amount">0</span></h3>
<oi>
<li>Penny: $<span class="money-display" id="penny-remain"></span></li>
<li>Nickel: $<span class="money-display" id="nickel-remain"></span></li>
<li>Dime: $<span class="money-display" id="dime-remain"></span></li>
<li>Quarter: $<span class="money-display" id="quarter-remain"></span></li>
<li>Dollar: $<span id="dollar-remain" class="money-display"></span></li>
<li>Fives: $<span id="fives-remain" class="money-display"></span></li>
<li>Tens: $<span id="tens-remain" class="money-display"></span></li>
<li>Twenties: $<span id="twenties-remain" class="money-display"></span></li>
<li>Hundreds: $<span id="hundreds-remain" class="money-display"></span></li>
</oi>
</div>
<div class="drawer">
<div class="circle"></div>
</div>
</body>
<script src="script.js"></script>
</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]
];
/*Program Notes:
1. Having issue with getting 18 to pass even though correct
2.For 12 there is a issue in the while loop for the twenty. Even though only 6000 cents its someone going to 8000.
*/
const cashAmount = document.getElementById("cash");
const changeDisplay = document.getElementById("change-due");
const purchaseBtn = document.getElementById("purchase-btn");
const total = document.getElementById("total-amount");
const penny= document.getElementById("penny-remain");
const nickel = document.getElementById("nickel-remain");
const dime = document.getElementById("dime-remain");
const quarter = document.getElementById("quarter-remain");
const dollar = document.getElementById("dollar-remain");
const fives = document.getElementById("fives-remain");
const tens = document.getElementById("tens-remain");
const twenties= document.getElementById("twenties-remain");
const hundreds = document.getElementById("hundreds-remain");
let statusType = "";
//Set intial text
total.textContent = `${price}`;
penny.textContent = `${cid[0][1]}`
nickel.textContent = `${cid[1][1]}`;
dime.textContent = `${cid[2][1]}`;
quarter.textContent = `${cid[3][1]}`;
dollar.textContent = `${cid[4][1]}`;
fives.textContent = `${cid[5][1]}`;
tens.textContent = `${cid[6][1]}`;
twenties.textContent = `${cid[7][1]}`;
hundreds.textContent = `${cid[8][1]}`;
const updateRemain = () => {
penny.textContent = `${cid[0][1]}`
nickel.textContent = `${cid[1][1]}`;
dime.textContent = `${cid[2][1]}`;
quarter.textContent = `${cid[3][1]}`;
dollar.textContent = `${cid[4][1]}`;
fives.textContent = `${cid[5][1]}`;
tens.textContent = `${cid[6][1]}`;
twenties.textContent = `${cid[7][1]}`;
hundreds.textContent = `${cid[8][1]}`;
}
purchaseBtn.addEventListener("click", () => {
changeDisplay.innerHTML = ``;
checkEnoughCash();
});
const checkEnoughCash = () => {
if(cashAmount.value < price) {
alert("Customer does not have enough money to purchase the item");
} else if(cashAmount.value == price) {
changeDisplay.innerHTML = `<p>No change due - customer paid with exact cash</p>`;
} else {
checkBalanceEnough();
if (statusType === "INSUFFICIENT_FUNDS"){
changeDisplay.innerHTML = `<p>Status: ${statusType}</p>`;
return;
}
checkStatus();
if (statusType != "INSUFFICIENT_FUNDS") {
calculateChange(price, cashAmount.value, cid);
updateRemain();
}
}
}
const checkBalanceEnough = () => {
let localChange = Math.round((cashAmount.value - price) * 100);
const moneyCents = [1, 5, 10, 25, 100, 500, 10000, 20000, 100000];
for (let i = moneyCents.length - 1; i >= 0; i--) {
if (cid[i] && Array.isArray(cid[i]) && cid[i].length > 1) {
let availableCents = Math.round(cid[i][1] * 100);
while (availableCents > 0 && moneyCents[i] <= localChange && localChange > 0) {
localChange -= moneyCents[i];
availableCents -= moneyCents[i];
}
}
}
if (localChange !== 0) {
statusType = "INSUFFICIENT_FUNDS";
}
};
const checkStatus = () => {
//Gotta figure out how to check if exchange change can be returned.
let change = Math.round((cashAmount.value - price) * 100);
const reversedCid = [...cid]
.reverse()
.map(([denominationName, amount]) => [
denominationName,
Math.round(amount * 100)
]);
const totalCID = reversedCid.reduce((prev, [_, amount]) => prev + amount, 0);
if (totalCID < change) {
statusType = "INSUFFICIENT_FUNDS";
changeDisplay.innerHTML = `<p>Status: ${statusType}</p>`;
} else if (totalCID == change) {
statusType = "CLOSED";
changeDisplay.innerHTML = `<p>Status: ${statusType}</p>`;
} else if (totalCID > change) {
statusType = "OPEN";
changeDisplay.innerHTML = `<p>Status: ${statusType}</p>`;
}
}
const calculateChange = (price, cash, cid) => {
const reversedCid = [...cid]
.map(([denominationName, amount]) => [
denominationName,
Math.round(amount * 100)
])
let numHundreds = 0;
let numTwenties = 0;
let numTens = 0;
let numFives = 0;
let numDollar = 0;
let numQuarter = 0;
let numDime = 0;
let numNickel = 0;
let numPenny = 0;
let change = Math.round((cash - price) * 100);
while (change >= 10000 && cid[8][1] >= 100) { // 10000 cents = $100
change -= 10000;
reversedCid[8][1] -= 10000;
numHundreds++;
}
//Goes in as 6000 cents from reversedCid
while (change >= 2000 && cid[7][1] >= 20) { // 2000 cents = $20
change -= 2000;
reversedCid[7][1] -= 2000;
numTwenties++;
}
//numTwenties is 4 meaning 8000 cents has been run
while (change >= 1000 && cid[6][1] >= 10) { // 1000 cents = $10
change -= 1000;
reversedCid[6][1] -= 1000;
numTens++;
}
while (change >= 500 && cid[5][1] >= 5) { // 500 cents = $5
change -= 500;
reversedCid[5][1] -= 500;
numFives++;
}
while (change >= 100 && cid[4][1] >= 1) { // 100 cents = $1
change -= 100;
reversedCid[4][1] -= 100;
numDollar++;
}
while (change >= 25 && cid[3][1] >= 0.25) { // 25 cents
change -= 25;
reversedCid[3][1] -= 25;
numQuarter++;
}
while (change >= 10 && cid[2][1] >= 0.1) { // 10 cents
change -= 10;
reversedCid[2][1] -= 10;
numDime++;
}
while (change >= 5 && cid[1][1] >= 0.05) { // 5 cents
change -= 5;
reversedCid[1][1] -= 5;
numNickel++;
}
while (change >= 1 && cid[0][1] >= 0.01) { // 1 cent
change -= 1;
reversedCid[0][1] -= 1;
numPenny++;
}
cid.forEach((num) => { //Updates drawer values from cents to dollar
num[1] = (reversedCid[0][1] != 0) ? Math.round(cid[0][1] / reversedCid[0][1]) : 0;
})
showDisplay(numPenny, numNickel, numDime, numQuarter, numDollar, numFives, numTens, numTwenties, numHundreds);
}
const showDisplay = (numPenny, numNickel, numDime, numQuarter, numDollar, numFive, numTen, numTwenty, numHundred) => {
let pennyChange = 0;
let nickelChange = 0;
let dimeChange = 0;
let quarterChange = 0;
let dollarChange = 0;
let fiveChange = 0;
let tenChange = 0;
let twentyChange = 0;
let hundredChange = 0;
if (numHundred >= 1) {
hundredChange = numHundred * 20;
changeDisplay.innerHTML += `<p>${cid[8][0]}: $${hundredChange}</p>`
}
if (numTwenty >= 1) {
twentyChange = numTwenty * 20;
changeDisplay.innerHTML += `<p class="result-text">${cid[7][0]}: $${twentyChange}</p>`;
}
if (numTen >= 1) {
tenChange = numTen * 10;
changeDisplay.innerHTML += `<p class="result-text">${cid[6][0]}: $${tenChange}</p>`;
}
if (numFive >= 1) {
fiveChange = numFive * 5;
changeDisplay.innerHTML += `<p class="result-text">${cid[5][0]}: $${fiveChange}</p>`;
}
if (numDollar >= 1) {
dollarChange = numDollar * 1;
changeDisplay.innerHTML += `<p class="result-text">${cid[4][0]}: $${dollarChange}</p>`;
}
if (numQuarter >= 1) {
quarterChange = numQuarter * 0.25;
changeDisplay.innerHTML += `<p class="result-text">${cid[3][0]}: $${quarterChange}</p>`;
}
if (numDime >= 1) {
dimeChange = numDime * 0.01;;
changeDisplay.innerHTML += `<p class="result-text">${cid[2][0]}: $${dimeChange}</p>`;
}
if (numNickel >= 1) {
nickelChange = numNickel * 0.05;
changeDisplay.innerHTML += `<p class="result-text">${cid[1][0]}: $${nickelChange}</p>`;
}
if (numPenny >= 1) {
pennyChange = numPenny * 0.01;
changeDisplay.innerHTML += `<p class="result-text">${cid[0][0]}: $${pennyChange}</p>`;
}
}```
### Your browser information:
User Agent is: <code>Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36</code>
### Challenge Information:
Build a Cash Register Project - Build a Cash Register
https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8/build-a-cash-register-project/build-a-cash-register