Step 18 is working on my own local server as well as on project’s preview
cash.value = 20; price = 19.5;
// Answer = Status: CLOSED PENNY: $0.5
cid = [[“PENNY”, 0.5], [“NICKEL”, 0], [“DIME”, 0], [“QUARTER”, 0], [“ONE”, 0], [“FIVE”, 0], [“TEN”, 0], [“TWENTY”, 0], [“ONE HUNDRED”, 0]];
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">
</head>
<body>
<main>
<h1>Cash Register</h1>
<div id="change-due"></div>
<div class="input-div">
<label for="cash">Enter cash from customer: </label>
<input type="number" id="cash" value="" required>
</div>
<button id="purchase-btn" class="btn">Purchase</button>
</main>
<section class="drawer">
<p>Total Price: $<span id="price-screen"></span></p>
<p>Change in drawer</p>
<ul>
<li>Pennies: $<span id="pennys"></span></li>
<li>Nickels: $<span id="nickels"></span></li>
<li>Dimes: $<span id="dimes"></span></li>
<li>Quarters: $<span id="quarters"></span></li>
<li>Ones: $<span id="ones"></span></li>
<li>Fives: $<span id="fives"></span></li>
<li>Tens: $<span id="tens"></span></li>
<li>Twenties: $<span id="twenties"></span></li>
<li>Hundreds: $<span id="hundreds"></span></li>
</ul>
</section>
<script src="script.js"></script>
</body>
</html>
/* file: script.js */
let price = 1.87;
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 displayChangeDue = document.getElementById("change-due");
const cash = document.getElementById("cash");
const purchaseBtn = document.getElementById("purchase-btn");
const priceScreen = document.getElementById("price-screen");
const cashDrawerDisplay = document.getElementById("cash-drawer-display");
// -------------------------------------------------------------------
// cash.value = 20; price = 19.5;
// 11: cash 20 price 19.5 open quarter 0.5
// cid = [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]];
// cash.value = 100; price = 3.26;
// 12: price is 3.26, cash is 100,
// "Status: OPEN TWENTY: $60 TEN: $20 FIVE: $15 ONE: $1 QUARTER: $0.5 DIME: $0.2 PENNY: $0.04".
// cid = [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]];
// cash.value = 20; price = 19.5;
// 14: cash 20 price 19.5 insufficient funds
// cid = [ ["PENNY", 0.01],["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0],["FIVE", 0], ["TEN", 0], ["TWENTY", 0],["ONE HUNDRED", 0], ];
// 16: cash 20 price 19.5 insufficient funds since exact changes are not available
// cid = [ ["PENNY", 0.01],["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 1],["FIVE", 0], ["TEN", 0], ["TWENTY", 0],["ONE HUNDRED", 0], ];
cash.value = 20; price = 19.5;
// 18: cash 20 price 19.5 closed penny 0.5
cid = [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]];
// cash.value = 50; price = 38.61;
// Cash: 50 Price: 38.61 Due: 11.39 TotalCashInDrawer: 11.39 :: due == total done
// cid = [ [ 'PENNY', 0.39 ],[ 'NICKEL', 0.05 ],[ 'DIME', 0.7 ],[ 'QUARTER', 0.25 ],[ 'ONE', 10 ],[ 'FIVE', 0 ],[ 'TEN', 0 ],[ 'TWENTY', 0 ],[ 'ONE HUNDRED', 0 ] ];
// Cash: 70 Price: 55.66 Due: 14.340000000000003 TotalCashInDrawer: 733.32 :: changes aren't available done
// cid = [ [ 'PENNY', 0.07 ],[ 'NICKEL', 0 ],[ 'DIME', 0 ],[ 'QUARTER', 0.25 ],[ 'ONE', 13 ],[ 'FIVE', 50 ],[ 'TEN', 110 ],[ 'TWENTY', 260 ],[ 'ONE HUNDRED', 300 ] ];
// Cash: 20 Price: 19.5 Due: 0.5 TotalCashInDrawer: 1.01 :: changes aren't available done
// cid = [ [ 'PENNY', 0.01 ],[ 'NICKEL', 0 ],[ 'DIME', 0 ], [ 'QUARTER', 0 ],[ 'ONE', 1 ],[ 'FIVE', 0 ],[ 'TEN', 0 ],[ 'TWENTY', 0 ],[ 'ONE HUNDRED', 0 ] ];
// Cash: 80 Price: 70.01 Due: 9.989999999999995 TotalCashInDrawer: 6.29 :: due > cid done
// cid = [ [ 'PENNY', 0.14 ],[ 'NICKEL', 0.45 ],[ 'DIME', 0.7 ],[ 'QUARTER', 1 ],[ 'ONE', 4 ],[ 'FIVE', 0 ],[ 'TEN', 0 ],[ 'TWENTY', 0 ],[ 'ONE HUNDRED', 0 ] ];
// Cash: 80 Price: 61.54 Due: 18.46 TotalCashInDrawer: 1580.97 done true
// cid = [ [ 'PENNY', 0.87 ],[ 'NICKEL', 0.1 ],[ 'DIME', 0 ],[ 'QUARTER', 1 ],[ 'ONE', 4 ],[ 'FIVE', 25 ],[ 'TEN', 150 ],[ 'TWENTY', 0 ],[ 'ONE HUNDRED', 1400 ] ];
// Cash: 50 Price: 22.33 Due: 27.67 done
// cid = [ [ 'PENNY', 0.12 ], [ 'NICKEL', 0.1 ],[ 'DIME', 0.4 ],[ 'QUARTER', 3.25 ],[ 'ONE', 13 ],[ 'FIVE', 0 ],[ 'TEN', 10 ],[ 'TWENTY', 0 ],[ 'ONE HUNDRED', 0 ] ];
// Cash: 100 Price: 85.8 Due: 14.200000000000003 done
// cid = [ [ 'PENNY', 0.04 ],[ 'NICKEL', 0.1 ],[ 'DIME', 0 ],[ 'QUARTER', 0.25 ],[ 'ONE', 9 ],[ 'FIVE', 15 ],[ 'TEN', 110 ],[ 'TWENTY', 240 ],[ 'ONE HUNDRED', 800 ] ];
// Cash: 20 Price: 19.5 Due: 0.5 done
// cid = [ [ 'PENNY', 0.5 ],[ 'NICKEL', 0 ],[ 'DIME', 0 ],[ 'QUARTER', 0 ],[ 'ONE', 0 ],[ 'FIVE', 0 ],[ 'TEN', 0 ],[ 'TWENTY', 0 ],[ 'ONE HUNDRED', 0 ] ];
// Cash: 60 Price: 54.5 Due: 5.5 done
// cid = [ [ 'PENNY', 0.75 ],[ 'NICKEL', 2.65 ],[ 'DIME', 0.6 ],[ 'QUARTER', 1.5 ],[ 'ONE', 0 ],[ 'FIVE', 0 ],[ 'TEN', 0 ],[ 'TWENTY', 0 ],[ 'ONE HUNDRED', 0 ] ];
// cash: 50 price: 22.11 due: 27.89 done
// cid = [ [ 'PENNY', 0.75 ], [ 'NICKEL', 0.4 ],[ 'DIME', 0.4 ],[ 'QUARTER', 3.25 ],[ 'ONE', 10 ],[ 'FIVE', 40 ],[ 'TEN', 90 ],[ 'TWENTY', 60 ],[ 'ONE HUNDRED', 700 ] ];
// cash.value = 100; price = 84.93;
// cash 100 price: 84.93 due: 15.06
// cid = [ [ 'PENNY', 0.55 ], [ 'NICKEL', 0.2 ], [ 'DIME', 1.3 ], [ 'QUARTER', 0.75 ], [ 'ONE', 15 ],[ 'FIVE', 60 ],[ 'TEN', 120 ],[ 'TWENTY', 200 ],[ 'ONE HUNDRED', 100 ] ];
// -------------------------------------------------------------------
priceScreen.innerText = price;
let penny = document.getElementById("pennys");
let nickel = document.getElementById("nickels");
let dime = document.getElementById("dimes");
let quarter = document.getElementById("quarters");
let one = document.getElementById("ones");
let five = document.getElementById("fives");
let ten = document.getElementById("tens");
let twenty = document.getElementById("twenties");
let hundred = document.getElementById("hundreds");
let result = [];
const dollarReference = [
["PENNY", 0.01],
["NICKEL", 0.05],
["DIME", 0.1],
["QUARTER", 0.25],
["ONE", 1],
["FIVE", 5],
["TEN", 10],
["TWENTY", 20],
["ONE HUNDRED", 100],
];
let countObj = {};
// document.addEventListener("keydown", (event) => {
// console.log(event, event.key)
// if (event.key == "Enter") {
// cashDrawer()
// }
// })
window.addEventListener("load", updateCashInDrawer);
purchaseBtn.addEventListener("click", cashDrawer);
function cashDrawer() {
if (cash.value < price) {
alert("Customer does not have enough money to purchase the item");
cash.value = "";
}
else if (cash.value == price) { displayChangeDue.innerHTML = "<h2>No change due - customer paid with exact cash</h2>"; }
else if (cash.value > price) {
let dueToCustomer = Number((parseFloat(cash.value) - parseFloat(price)).toFixed(2));
console.log("Cash: ", cash.value, "Price: ", price, "Due: ", dueToCustomer);
let totalCashInDrawer = 0;
cid.map((item) => { totalCashInDrawer += Number(item[1]) });
totalCashInDrawer = Number((totalCashInDrawer).toFixed(2));
console.log("CID: ", cid);
console.log("TotalCashInDrawer: ", totalCashInDrawer, typeof(totalCashInDrawer), dueToCustomer);
if (dueToCustomer > totalCashInDrawer) { displayChangeDue.innerHTML = "<h2>Status: INSUFFICIENT_FUNDS</h2>"; }
else if (dueToCustomer <= totalCashInDrawer) {
console.log("dueToCustomer <= totalCashInDrawer", dueToCustomer <= totalCashInDrawer);
if (dueToCustomer == totalCashInDrawer) {
logic();
console.log("if due == TotalCashInDrawer");
console.log("DTC== 0: ", dueToCustomer == 0, "DUE: ",dueToCustomer);
if (dueToCustomer == 0) {
displayChangeDue.innerHTML = "<h2>Status: CLOSED</h2>";
updateDisplay();
return;
} else {
displayChangeDue.innerHTML = "<h2>Status: INSUFFICIENT_FUNDS</h2>";
}
} else {
logic();
console.log("else due < TotalCashInDrawer");
console.log("else DTC== 0: ", dueToCustomer == 0, "DUE: ",dueToCustomer);
// console.log(result);
if (dueToCustomer == 0) {
displayChangeDue.innerHTML = "<h2>Status: OPEN</h2>";
updateDisplay();
} else {
displayChangeDue.innerHTML = "<h2>Status: INSUFFICIENT_FUNDS</h2>";
}
}
}
function logic() {
for (let i = 8; i >= 0; i--) {
let currentValue = dollarReference[i][1];
if (currentValue <= dueToCustomer && currentValue > 0) {
console.log("Due: ", dueToCustomer, "CurrentValue: ", currentValue);
while (
dueToCustomer != 0 &&
currentValue <= dueToCustomer &&
cid[i][1] > 0
) {
cid[i][1] -= currentValue;
dueToCustomer -= currentValue;
totalCashInDrawer -= currentValue;
cid[i][1] = Number((cid[i][1]).toFixed(2));
dueToCustomer = Number((dueToCustomer).toFixed(2));
result.push(dollarReference[i][0]);
}
}
}
return result;
}
function updateDisplay() {
result.forEach((item, index) => {
countObj[result[index]] = (countObj[item] || 0) + 1;
});
// console.log(countObj);
for (let key in countObj) {
for (let item in dollarReference) {
if (key == dollarReference[item][0]) {
countObj[key] = countObj[key] * dollarReference[item][1];
}
}
let value = countObj[key];
displayChangeDue.innerHTML += `<p>${key}: $${value}</p>`;
}
updateCashInDrawer();
cash.value = "";
dueToCustomer = cash.value - price;
result = [];
countObj = {};
totalCashInDrawer = 0;
}
}
}
function updateCashInDrawer() {
cid.map((item, index) => {
// console.log(index, item[1]);
switch (index) {
case 0:
penny.innerText = item[1];
break;
case 1:
nickel.innerText = item[1];
break;
case 2:
dime.innerText = item[1];
break;
case 3:
quarter.innerText = item[1];
break;
case 4:
one.innerText = item[1];
break;
case 5:
five.innerText = item[1];
break;
case 6:
ten.innerText = item[1];
break;
case 7:
twenty.innerText = item[1];
break;
case 8:
hundred.innerText = item[1];
break;
}
});
};
/* 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