Tell us what’s happening:
In VSCode all the answers are fine, but the tests always fail and I don’t know what to do to fix it it
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>
<div id="container">
<h1>Cash Register</h1>
<p id="instruction">Enter cash</p>
<div id="change-due"></div>
<input type="number" id="cash">
<button id="purchase-btn">Purchase</button>
</div>
<script src="script.js"></script>
</body>
</html>
const cash = document.getElementById("cash")
const purchaseBtn = document.getElementById("purchase-btn")
const changeDue = document.getElementById("change-due")
let price = 19.5
let cid = [
["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 1], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]
]
let reverseCid = cid.reverse()
const unitValues = {
PENNY: 0.01,
NICKEL: 0.05,
DIME: 0.10,
QUARTER: 0.25,
ONE: 1,
FIVE: 5,
TEN: 10,
TWENTY: 20,
'ONE HUNDRED': 100
}
const cashDetails = cid.slice().reverse().reduce((acc, [unit, amount]) => {
acc[unit] = {
amount: unitValues[unit],
quantity: Math.round(amount / unitValues[unit])
};
return acc;
}, {});
const formatResults = (status, change) => {
changeDue.innerHTML = `<p>Status: ${status}</p>`;
changeDue.innerHTML += change
.map(
([denominationName, amount]) => `<p>${denominationName}: $${amount}</p>`
)
.join('');
};
//console.log(`Initial value:\n${cid}`)
let changeReserve = calculateChangeLeft()
console.log(changeReserve)
purchaseBtn.addEventListener("click", () => {
changeDue.innerHTML = ""
const userCash =cash.value;
const initialChange = userCash - price;
let change = initialChange;
if (userCash < price){
alert("Customer does not have enough money to purchase the item")
cash.value = ""
}
else if(userCash == price){
changeDue.innerText = "No change due - customer paid with exact cash"
cash.value = ""
}
else {
let usedCurrency = [];
let result = 0
changeDue.innerHTML = ""
for (const [key, value] of reverseCid) {
let amountUsed = 0;
let index = reverseCid.findIndex(([unit]) => unit === key);
//let normalIndex = cid.findIndex(([unit]) => unit === key);
while (change >= cashDetails[key].amount && cashDetails[key].quantity > 0) {
change = Math.round((change - cashDetails[key].amount) * 100) / 100;
reverseCid[index][1] = Math.round((reverseCid[index][1] - cashDetails[key].amount) * 100) / 100;
//cid[normalIndex][1] = Math.round((cid[normalIndex][1] - cashDetails[key].amount) * 100) / 100;
result = Math.round((result + cashDetails[key].amount) * 100) / 100;
cashDetails[key].quantity--;
amountUsed = Math.round((amountUsed + cashDetails[key].amount) * 100) / 100;
}
if (amountUsed > 0) {
usedCurrency.push([key, Math.round(amountUsed * 100) / 100]);
}
}
if(result < initialChange || change > changeReserve){
changeDue.innerText = "Status: INSUFFICIENT_FUNDS"
console.log(result)
}
else{
const resultStatus = { status: 'OPEN', change: usedCurrency };
changeReserve = calculateChangeLeft()
if (changeReserve === 0){
result.status = 'CLOSED';
}
formatResults(resultStatus.status, resultStatus.change);
}
}
cash.value = ""
});
function calculateChangeLeft(){
let changeLeft = 0
for(const [key, value] of reverseCid){
changeLeft += value
}
console.log(changeLeft)
return changeLeft
}
body{
font-family: Arial, Helvetica, sans-serif;
justify-content: center;
align-items: center;
}
#container{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#purchase-btn{
margin-top: 10px;
cursor: pointer;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:132.0) Gecko/20100101 Firefox/132.0
Challenge Information:
Build a Cash Register Project - Build a Cash Register