This simple cash register is supposed to deduct cash input from price and then provide change to customer.
Before providing change to customer, if change to customer is greater than cash available in drawer - change status: "Insufficient Funds", if change to customer is less than cash available in drawer - change status: "Open".
Upon change status: "Open" the change provided to customer is supposed to be broken down into denominations available in drawer, from biggest to smallest, and then displayed in the UI along with the change status.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="">
</head>
<body>
<main>
<form>
<h1>Manny Cash Register</h1>
<div id="change-due" class="result-div"></div>
<div class="cash-input">
<label for="cash">Enter Cash From Customer:</label>
<input id="cash" type="number" />
<button type="submit" id="purchase-btn">Purchase</button>
</div>
<div class="total">Total: $3.26</div>
</form>
<div class="cid">
<h4>Change in Drawer</h4>
<div id="cid-display"></div>
</div>
</main>
<script>
const changeDue = document.getElementById("change-due");
const cash = document.getElementById("cash");
const purchaseBtn = document.getElementById("purchase-btn");
let price = 3.26;
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]
];
purchaseBtn.addEventListener("click", (e) => {
e.preventDefault();
// calculate change
let change = cash.value - price;
let changeStatus = "";
let changeArray = [];
if (cash.value < price) {
alert("Customer does not have enough money to purchase the item");
return;
}
if (cash.value == price) {
changeDue.textContent = "No change due - customer paid with exact cash";
return;
}
// sum of total cash in cid array or drawer
let totalCid = cid.reduce((acc, curr) => acc + curr[1], 0);
console.log(totalCid);
if (change > totalCid) {
changeStatus = "INSUFFICIENT_FUNDS";
} else {
changeStatus = "OPEN";
changeArray;
let remainingChange = change;
console.log(change)
// iterate through cid array, in reverse order, taking bigger denominations first
for (let i = cid.length - 1; i >= 0; i--) {
let denomination = cid[i][0];
let value = cid[i][1];
// calculate available denomination that are usable
let count = Math.min(Math.floor(remainingChange / value), value / 0.25);
// update change and drawer
remainingChange -= count * value;
remainingChange = parseFloat(remainingChange.toFixed(2));
cid[i][1] -= count * value;
// add denomination to change array
if (count > 0) {
changeArray.push([denomination, count * value]);
// console.log(changeArray);
}
}
// change left
if (remainingChange > 0.01) {
changeStatus = "INSUFFICIENT_FUNDS";
}
}
// for display
let changeString = changeArray.map(item => item[0] + ": $" + item[1]).join(", ");
changeDue.textContent = "Status: " + changeStatus + " " + changeString;
cash.value = "";
});
</script>
</body>
</html>In the above html and javascript code - expected the changeDue displayed in the UI to contain actual denominations iterated from biggest to smallest with respect to the total change due to customer. i.e. if a customer's changeDue is 8.25, the change breakdown will be as follows: "Status: Open, Five: $5 One: $3 Quarter: $0.25"