Tell us what’s happening:
My project works perfectly when i manually test it, but fails the website tests. I’ve seen other people with this issue, but I can’t seem to understand how to apply the solutions to my case. I tried debugging, googling, checking my code with AI, but nothing has given me a satistactory fix to my issue. I’m seriously at my wit’s end.
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">
<title>Cash Register</title>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<main>
<h1>Cash Register</h1>
<input type="number" id="cash">
<div id="change-due"></div>
<button id="purchase-btn">Purchase</button>
<p><strong>Change in drawer:</strong></p>
<p id="cash-register-p"></p>
</main>
<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]
];
class Register {
constructor(name) {
this.name = name;
this.coins = {
value: {
PENNY: 0.01,
NICKEL: 0.05,
DIME: 0.1,
QUARTER: 0.25,
ONE: 1,
FIVE: 5,
TEN: 10,
TWENTY: 20,
'ONE HUNDRED': 100,
},
count: {},
change: {},
};
}
totalCash() {
return cid.reduce((amount, coin) => amount + coin[1], 0);
}
change() {
return parseFloat(cashInput.value) - price;
}
countCoins() {
Object.keys(this.coins.value).forEach(coin => {
const cashInRegister = cid.find(item => item[0] === coin)[1];
this.coins.count[coin] = Math.floor(cashInRegister / this.coins.value[coin]);
})
}
changeInCoins() {
let change = this.change();
for (let i = Object.keys(this.coins.value).length - 1; i >= 0; i--) {
const coinsInRegisterCount = this.coins.count[cid[i][0]];
const coinValue = this.coins.value[cid[i][0]];
const maxNumOfCoins = Math.floor(change / coinValue);
if (maxNumOfCoins <= coinsInRegisterCount) {
this.coins.change[cid[i][0]] = maxNumOfCoins;
this.coins.count[cid[i][0]] -= maxNumOfCoins;
//{change = change % coinValue} with due adjustments to avoid float calc errors
change = Math.round((change * 100) % (coinValue * 100)) / 100;
} else {
this.coins.change[cid[i][0]] = coinsInRegisterCount;
this.coins.count[cid[i][0]] -= coinsInRegisterCount;
change = (change * 100 - cid[i][1] * 100) / 100;
}
}
}
availableChangeInCoins() {
this.changeInCoins();
let result = 0;
for (const key in this.coins.change) {
result += this.coins.change[key] * this.coins.value[key];
}
return result;
}
displayChange() {
for (let i = Object.keys(this.coins.change).length - 1; i >= 0; i--) {
const countChangeCoins = this.coins.change[cid[i][0]];
const coinKey = cid[i][0];
const coinValue = this.coins.value[cid[i][0]];
if (countChangeCoins > 0) {
changeContainer.innerHTML += `${coinKey}: $${countChangeCoins * coinValue}<br>`;
}
}
}
handleEdgeCases() {
if (!parseFloat(cashInput.value)) {
alert('Please enter a valid number');
return false;
} else if (parseFloat(cashInput.value) < price) {
alert('Customer does not have enough money to purchase the item');
return false;
} else if (parseFloat(cashInput.value) === price) {
changeContainer.innerText = "No change due - customer paid with exact cash";
return false;
} else if (this.change() > this.totalCash()) {
changeContainer.innerHTML = `Status: INSUFFICIENT_FUNDS<br>`;
return false;
} else if (this.change() <= this.totalCash() && this.change() > this.availableChangeInCoins()) {
changeContainer.innerHTML = `Status: INSUFFICIENT_FUNDS<br>`;
return false;
}
return true;
}
}
//document objects
const cashInput = document.getElementById('cash');
const purchaseBtn = document.getElementById('purchase-btn');
const changeContainer = document.getElementById('change-due');
const cashRegister = document.getElementById('cash-register-p');
const register = new Register;
const updateCashRegister = (obj) => {
cashRegister.innerHTML = `Pennies: $${obj['PENNY'] * register.coins.value['PENNY']}<br>
Nickels: $${obj['NICKEL'] * register.coins.value['NICKEL']}<br>
Dimes: $${obj['DIME'] * register.coins.value['DIME']}<br>
Quarters: $${obj['QUARTER'] * register.coins.value['QUARTER']}<br>
Ones: $${obj['ONE'] * register.coins.value['ONE']}<br>
Fives: $${obj['FIVE'] * register.coins.value['FIVE']}<br>
Tens: $${obj['TEN'] * register.coins.value['TEN']}<br>
Twenties $${obj['TWENTY'] * register.coins.value['TWENTY']}<br>
Hundreds $${obj['ONE HUNDRED'] * register.coins.value['ONE HUNDRED']}<br>`
};
register.countCoins();
updateCashRegister(register.coins.count);
const eventListenerFun = () => {
if(register.handleEdgeCases()) {
changeContainer.innerHTML = `Status: OPEN<br>`;
updateCashRegister(register.coins.count);
if (Object.values(register.coins.count).every(value => value === 0)) {
changeContainer.innerHTML = `Status: CLOSED<br>`;
}
register.displayChange();
}
}
purchaseBtn.addEventListener('click', () => {
eventListenerFun();
});
cashInput.addEventListener('keydown', event => {
if (event.key === 'Enter') {
eventListenerFun();
}
});
/* file: styles.css */
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36
Challenge Information:
Build a Cash Register Project - Build a Cash Register
). However I’m still struggling to understand how to fix it. 