Tell us what’s happening:
I’ve been struggling with this project for a while now and afterm many attempts based on flawed logics, I was finally able to make the checkCashRegister function work, kind of. For now, whenever I call the function at the end of my code with the arguments given by the tests, the output of on the HTML preview seems to be correct almost every time save for the las two. The bigger problem is that, when instantiating the purchaseBtn functionality, even though I can make the alerts work and my code seems to be evaluating the cases when Insufficient Funds should be shown correctly, whenever I try to test for the cases where the status should be open, an error keeps popping on the console stating “TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator)”. For example, when the price is 3.26 and the input is 3.25 I get the appropriate alert, when it’s 3.26 I get the correct display on the changeDue element, but when the input is 3.27 the error pops. Given that by directly calling the function with the corresponding arguments I can get the function to do what it has to, I’m guessing the error has something to do with the instantiation of the input/button elements, or maybe with how I’m using a checkUserInput to evaluate if an alert should be given or if the function should be called when clicking the button. Does anybody have an idea of what’s going on here?
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cash Register</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Cash Register Project<h1>
<div id="change-due"></div>
<input id="cash">
<button id="purchase-btn">Purchase</button>
<div id="total">
Total:
</div id="change-in-drawer">
<div>Change in Drawer:
</div>
<script src="script.js"></script>
</body>
</html>
/* file: styles.css */
/* file: script.js */
// DOM ELEMENTS
const userInput = document.getElementById('cash');
const purchaseBtn = document.getElementById('purchase-btn');
const changeDue = document.getElementById('change-due');
// VARIABLES
let price = 3.26;
let cash = 100;
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]
];
// FUNCTIONS
function checkCashRegister(price, cash, cid) {
let change = cash * 100 - price * 100;
//console.log(change)
let cidTotal = 0;
for (let elem of cid) {
cidTotal += elem[1] * 100;
}
//console.log(cidTotal)
if (change > cidTotal) {
changeDue.innerText = 'Status: INSUFFICIENT_FUNDS';
} else if (change === cidTotal) {
changeDue.innerText = `Status: CLOSED ${cid}`;
} else {
let result = [];
cid = cid.reverse();
//console.log(cid)
let currencyUnit = {
'ONE HUNDRED': 10000,
'TWENTY': 2000,
'TEN': 1000,
'FIVE': 500,
'ONE': 100,
'QUARTER': 25,
'DIME': 10,
'NICKEL': 5,
'PENNY': 1,
}
for (let elem of cid) {
let tempMoney = [elem[0], 0];
//console.log(moneyHolder)
elem[1] = elem[1] * 100;
while (change >= currencyUnit[elem[0]] && elem[1] > 0) {
change -= currencyUnit[elem[0]];
//console.log(change)
elem[1] -= currencyUnit[elem[0]];
//console.log(elem[1])
//console.log(moneyHolder)
tempMoney[1] += currencyUnit[elem[0]] / 100;
//console.log(moneyHolder)
}
if (tempMoney[1] > 0) {
result.push(tempMoney);
//console.log(result)
}
}
/*
if (change > 0) {
changeDue.innerText = 'Status: INSUFFICIENT_FUNDS';
}
*/
let output = 'Status: OPEN '
result.forEach((elem) => {
output += `${elem[0]}: \$${elem[1]} `
});
changeDue.innerText = `${output}`
console.log(output)
}
}
function checkUserInput() {
cash = userInput.value
if (cash === '') {
alert('No input value')
} else if (cash < price) {
alert('Customer does not have enough money to purchase the item')
} else if (cash == price) {
changeDue.innerText = 'No change due - customer paid with exact cash'
} else {
checkCashRegister();
}
}
// EVENT LISTENER
purchaseBtn.addEventListener('click', checkUserInput)
// TEST
checkCashRegister(19.5, 20, [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]);
// Falta pasar las pruebas 9 (me sale OPEN cuando debería ser CLOSED) y 10 (hay que quitar los valores 0 del array)
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36
Challenge Information:
Build a Cash Register Project - Build a Cash Register