Tell us what’s happening:
I can’t get my code checked because the programme doesn’t read my global variables.
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 rel="stylesheet" href="styles.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<script type="module" src="script.js"></script>
</head>
<body>
<h1>Cash Register</h1>
<p>Enter cash from customer</p>
<form action="">
<input type="number" id="cash">
<button id="purchase-btn">Purchase</button>
</form>
<p id="change-due"></p>
<p id="total"></p>
</body>
</html>
/* file: script.js */
let price = 1;
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]
];
const cash = document.getElementById("cash");
const purchaseBtn = document.getElementById("purchase-btn")
const changeDue = document.getElementById("change-due")
const total = document.getElementById("total")
total.textContent = `Total: $${price}`
purchaseBtn.onclick = e => {
e.preventDefault()
const change = (cash.value * 100 - price * 100)
if (price > cash.value) {
alert("Customer does not have enough money to purchase the item")
} else if (price == cash.value) {
alert("No change due - customer paid with exact cash")
} else {
calculateChange(cid, change)
}
}
const calculateChange = (cid, change) => {
const denominations = [
['ONE HUNDRED', 10000],
['TWENTY', 2000],
['TEN', 1000],
['FIVE', 500],
['ONE', 100],
['QUARTER', 25],
['DIME', 10],
['NICKEL', 5],
['PENNY', 1]
];
let totalCid = 0
let cidInPennies = cid.map(([name, amount]) => [name, Math.round(amount * 100)]);
cidInPennies.forEach(value => totalCid += value[1]);
if (change > totalCid) {
return changeDue.textContent = "Status: INSUFFICIENT_FUNDS"
}
let changeArray = []
for (let [name, value] of denominations) {
let amountInDrawer = cidInPennies.find(item => item[0] === name)[1]
let amountToGive = 0;
while (change >= value && amountInDrawer > 0) {
change -= value
amountInDrawer -= value
amountToGive += value
}
if (amountToGive > 0) {
changeArray.push([name, amountToGive / 100]);
let originalIndex = cid.findIndex(item => item[0] === name);
cid[originalIndex][1] -= amountToGive / 100;
}
}
if (change === totalCid) {
changeDue.textContent = "Status: CLOSED"
}
else {
changeDue.innerHTML = `Status: OPEN ${changeArray.map(item => `${item[0]}: $${item[1]}`).toReversed().join(' ')}`;
}
}
/* 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/127.0.0.0 Safari/537.36
Challenge Information:
Build a Cash Register Project - Build a Cash Register