Tell us what’s happening:
All the tests except tests 12, 13, 18, and 19 are passing even though the output is as per the project’s requirements. I can’t figure out what’s wrong in my code.
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 Register Project</title>
</head>
<body>
<header>
<h1>Cash Register Project</h1>
</header>
<main>
<div id="change-due" class="container change-due-container">
</div>
<div class="container cash-input-container">
<label>Enter cash from customer: </label>
<input type="number" id="cash">
<button type="button" id="purchase-btn">Purchase</button>
</div>
<div class="container price-display-container">
<p>Total: $<span id="price-span"></span></p>
</div>
<div class="container cid-container">
<p id="cid-heading">Change in drawer:</p>
<ul id="cid-list">
<li><p>Pennies: <span></span></p></li>
<li><p>Nickels: <span></span></p></li>
<li><p>Dimes: <span></span></p></li>
<li><p>Quarters: <span></span></p></li>
<li><p>Ones: <span></span></p></li>
<li><p>Fives: <span></span></p></li>
<li><p>Tens: <span></span></p></li>
<li><p>Twenties: <span></span></p></li>
<li><p>Hundreds: <span></span></p></li>
</ul>
</div>
</main>
<footer></footer>
<script src="./script.js"></script>
</body>
</html>
/* file: script.js */
let price = 19.5;
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 cidDue = [
['PENNY', 0],
['NICKEL', 0],
['DIME', 0],
['QUARTER', 0],
['ONE', 0],
['FIVE', 0],
['TEN', 0],
['TWENTY', 0],
['ONE HUNDRED', 0]
];
const denominations = [0.01, 0.05, 0.10, 0.25, 1, 5, 10, 20, 100];
const priceSpan = document.getElementById("price-span");
const purchaseBtn = document.getElementById("purchase-btn");
const changeDueDisplay = document.getElementById("change-due");
const statusDisplay = document.getElementById("status");
const cashInput = document.getElementById("cash");
const cidList = document.querySelectorAll("#cid-list li p span");
const cidListArr = [...cidList];
let cash;
let changeDue;
priceSpan.textContent = `${price}`;
let cashInDrawer;
const calcCID = () => {
cashInDrawer = cid.reduce((accumulator, item) => {
return accumulator + item[1];
}, 0).toFixed(2);
};
const displayCIDListArr = () => {
cidListArr.forEach((elem, index) => {
elem.textContent = `$${cid[index][1].toFixed(2)}`;
});
};
const appendCIDDue = () => {
const reversedCidDue = [...cidDue].reverse(); // Shallow copy to avoid permanently reversing the original array
reversedCidDue.forEach((elem) => {
if (elem[1] > 0) {
if (elem[1] >= 1) {
changeDueDisplay.innerHTML += `<p>${elem[0]}: $${elem[1].toFixed(0)}</p>`;
}
else if (elem[1] < 1 && elem[1] >= 0.1) {
changeDueDisplay.innerHTML += `<p>${elem[0]}: $${elem[1].toFixed(1)}</p>`;
}
else if (elem[1] < 0.1) {
changeDueDisplay.innerHTML += `<p>${elem[0]}: $${elem[1].toFixed(2)}</p>`;
}
}
});
}
const purchaseFunction = () => {
cash = parseFloat(cashInput.value);
cashInDrawer = parseFloat(cid.reduce((accumulator, item) => {
return accumulator + item[1];
}, 0).toFixed(2));
changeDue = parseFloat((cash - price).toFixed(2));
if (changeDue > cashInDrawer) {
changeDueDisplay.innerHTML = `<p>Status: INSUFFICIENT_FUNDS</p>`;
return;
}
if (changeDue < 0) {
alert("Customer does not have enough money to purchase the item");
}
else if (changeDue === 0) {
changeDueDisplay.innerHTML = `<p>No change due - customer paid with exact cash</p>`;
}
else {
calculateChangeCurrencyUnits(changeDue);
}
};
const EPSILON = 0.001;
const calculateChangeCurrencyUnits = (changeDue) => {
for (let i = denominations.length - 1; i >= 0; i--) {
while (changeDue >= denominations[i] && cid[i][1] > 0) {
changeDue = parseFloat((changeDue - denominations[i]).toFixed(2));
cid[i][1] = parseFloat((cid[i][1] - denominations[i]).toFixed(2));
cidDue[i][1] = parseFloat((cidDue[i][1] + denominations[i]).toFixed(2));
if (changeDue < denominations[i] || cid[i][1] < denominations[i]) {
break;
}
}
}
if (Math.abs(changeDue) < EPSILON) {
cashInDrawer = parseFloat(cid.reduce((acc, item) => acc + item[1], 0).toFixed(2));
calcCID();
displayCIDListArr();
if (cashInDrawer < EPSILON) {
changeDueDisplay.innerHTML = `<p>Status: CLOSED</p>`;
appendCIDDue();
} else {
changeDueDisplay.innerHTML = `<p>Status: OPEN</p>`;
appendCIDDue();
}
} else {
changeDueDisplay.innerHTML = `<p>Status: INSUFFICIENT_FUNDS</p>`;
}
};
displayCIDListArr();
calcCID();
purchaseBtn.addEventListener("click", () => {
purchaseFunction();
});
cashInput.addEventListener("keypress", (event) => {
if (event.key === "Enter") {
purchaseFunction();
}
});
/* file: styles.css */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.logo {
display: block;
margin: 0 auto;
text-align: center;
}
h1 {
text-align: center;
}
.container {
border: 1px solid black;
margin: 10px auto;
width: 30%;
}
.price-display-container p {
text-align: center;
}
.cash-input-container label,
.cash-input-container input,
.cash-input-container button {
display: block;
margin: 0 auto;
text-align: center;
}
.change-due-container {
min-height: 60px;
height: auto;
}
.change-due-container p {
text-align: center;
}
#change-due {
text-align: center;
}
.change-container > ul,
.cid-container > ul {
list-style-type: none;
}
Your browser information:
User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36
Challenge Information:
Build a Cash Register Project - Build a Cash Register