Tell us what’s happening:
Hi, I’ve tried to find solutions elsewhere but none are up to date or help me solve this one.
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">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main>
<input id="cash"></input>
<div id="change-due"></div>
<button id="purchase-btn"></button>
</main>
<script src="script.js"></script>
</body>
</html>
/* file: styles.css */
/* file: script.js */
let cashElement = document.querySelector('#cash');
let changeDueElement = document.querySelector('#change-due');
let purchaseBtnElement = document.querySelector('#purchase-btn');
purchaseBtnElement.addEventListener('click', () => {
let cash = parseFloat(cashElement.value);
array
let price = 19.5;
let cid = [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]; // replace this with your actual cid
let changeDue = cash - price;
if (cash < price) {
alert("Customer does not have enough money to purchase the item");
} else if (cash === price) {
changeDueElement.textContent = "No change due - customer paid with exact cash";
} else {
let changeDueStr = cid.reduce((str, [unit, amount]) => {
let unitCount = Math.floor(changeDue / amount);
changeDue -= unitCount * amount;
return str + (unitCount > 0 ? ` ${unit.toUpperCase()}: $${(unitCount * amount).toFixed(2)}` : '');
}, "Status: OPEN").trim();
changeDueElement.textContent = changeDueStr;
}
});
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36
Challenge Information:
Build a Cash Register Project - Build a Cash Register