Tell us what’s happening:
The 18th test is not being passed though it is showing exactly what is being demanded from the project instruction.
The statement of the condition is:
When price is 19.5, the value in the #cash element is 20, cid is [[“PENNY”, 0.5], [“NICKEL”, 0], [“DIME”, 0], [“QUARTER”, 0], [“ONE”, 0], [“FIVE”, 0], [“TEN”, 0], [“TWENTY”, 0], [“ONE HUNDRED”, 0]], and the #purchase-btn element is clicked, the value in the #change-due element should be “Status: CLOSED PENNY: $0.5”.
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>
<div class="whole-page">
<h1>A Simple Cash Register</h1>
<div id="change-due" class="span-div"></div>
<div class="input-section">
<p id="total">Total: $ </p>
<fieldset>
<legend>Enter Cash from Customer:</legend>
<input type="number" id="cash">
</fieldset>
<button id="purchase-btn">Purchase</button>
</div>
<div class="status-section">
<p style="text-align: center;">Change in drawer</p>
<p id="change-in-drawer" class="span-div"></p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
/* file: script.js */
// Acquiring all essential elements
const changeDue = document.getElementById(`change-due`);
const total = document.getElementById(`total`);
const cashInput = document.getElementById(`cash`);
const purchaseBtn = document.getElementById(`purchase-btn`);
const changeInDrawer = document.getElementById(`change-in-drawer`);
// Variables
let price = 9.5;
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]
];
/* let cid = [
['PENNY', 0.5],
['NICKEL', 0],
['DIME', 0],
['QUARTER', 0],
['ONE', 0],
['FIVE', 0],
['TEN', 0],
['TWENTY', 0],
['ONE HUNDRED', 0]
]; */
let cidForValue = [0.01, 0.05, 0.1, 0.25, 1, 5, 10, 20, 100];
let cfc = [
['PENNY', 0],
['NICKEL', 0],
['DIME', 0],
['QUARTER', 0],
['ONE', 0],
['FIVE', 0],
['TEN', 0],
['TWENTY', 0],
['ONE HUNDRED', 0]
];
// Preloaded Things
total.textContent += price;
cid.forEach(change => changeInDrawer.innerHTML += `
<p class="space-between"><span>${change[0]}:</span> <span>$ ${change[1]}</span></p>
`);
// Functions
const updateDrawer = () => {
changeInDrawer.innerHTML = ``;
cid.forEach(change => changeInDrawer.innerHTML += `<p class="space-between"><span>${change[0]}:</span> <span>$ ${change[1]}</span></p>`);
};
const calculateAvlChange = () => Math.round(cid.reduce((a, b) => a + b[1], 0) * 100) / 100;
const showCustomerStatus = (status) => {
changeDue.innerHTML = `<p>Status: ${status}</p>`;
for(let i = cfc.length - 1; i >= 0; i--) {
if(cfc[i][1]) {
changeDue.innerHTML += `<p>${cfc[i][0]}: $${cfc[i][1]}</p>`;
}
}
cfc.forEach(el => el[1] = 0);
}
const calculateChange = change => {
change = Math.round(change * 100) / 100;
while(change >= 0.01) {
let sufficient = false;
for(let i = cid.length - 1; i >=0; i--) {
let value = cidForValue[i];
if(change >= value && cid[i][1] >= value) {
change = Math.round((change - value) * 100) / 100;
cid[i][1] = Math.round((cid[i][1] - value) * 100) / 100;
cfc[i][1] = Math.round((cfc[i][1] + value) * 100) / 100;
sufficient = true;
break;
}
}
if(!sufficient) { return `INSUFFICIENT_FUNDS`; }
}
return calculateAvlChange() < 0.01 ? `CLOSED` : `OPEN`;
};
const checkInput = input => {
input = parseFloat(input);
input = Math.round(input * 100) / 100;
if(input === price) {
changeDue.style.textAlign = "center";
changeDue.style.padding = "0";
changeDue.innerText = `No change due - customer paid with exact cash`;
cashInput.value = ``;
return;
}
else if(input > price) {
let status = calculateChange(input - price);
if(status !== `INSUFFICIENT_FUNDS`) {
updateDrawer();
showCustomerStatus(status);
cashInput.value = ``;
return;
}
changeDue.innerHTML = `
<p>Status: ${status}</p>
`;
cashInput.value = ``;
return;
}
alert("Customer does not have enough money to purchase the item");
cashInput.value = ``;
return;
};
// Actions
purchaseBtn.addEventListener('click', () => checkInput(cashInput.value.trim()));
cashInput.addEventListener('keypress', pressed => {
if(pressed.key === "Enter") { checkInput(cashInput.value.trim()); }
})
/* file: styles.css */
* {
margin: 0;
box-sizing: border-box;
/* border: 1px solid; */
}
.whole-page {
width: 70%;
margin: auto;
padding-top: 2rem;
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: .7rem;
}
h1 {
background-color: greenyellow;
grid-column: 1 / -1;
text-align: center;
font-size: 3rem;
}
.span-div {
display: flex;
flex-direction: column;
font-size: 1.1rem;
}
.span-div:first-of-type {
padding-left: 33%;
font-size: 1rem;
}
.span-div:first-of-type > p {
font-size: 1.2rem;
}
.span-div:last-of-type {
padding: 10px 50px 10px 50px;
}
#change-due {
margin-top: 1.2rem;
margin-bottom: 1.2rem;
background-color: aqua;
grid-column: 1 / -1;
font-size: 1.5rem;
}
.input-section {
min-width: 50%;
background-color: beige;
grid-column: 1 / 2;
}
#total {
margin: auto;
margin-bottom: 1rem;
text-align: center;
width: 50%;
background-color: azure;
font-size: 1.5rem;
}
fieldset {
width: 90%;
margin: auto;
margin-bottom: 1rem;
display: flex;
justify-content: center;
}
legend {
font-size: 1.2rem;
text-align: center;
}
#cash {
text-align: center;
font-size: 1.2rem;
}
#purchase-btn {
width: 50%;
margin-left: 25%;
font-family: monospace;
font-size: 1.2rem;
}
#purchase-btn:onclick {
filter: brightness(0.7);
}
.status-section {
min-width: 50%;
background-color: rgba(137, 43, 226, 0.486);
font-size: 1.5rem;
}
.space-between {
display: flex;
justify-content: space-between;
}
@media(max-width: 780px) {
.whole-page {
width: 80%;
margin: auto;
padding-top: 2rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100%, max-content));
row-gap: .4rem;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:133.0) Gecko/20100101 Firefox/133.0
Challenge Information:
Build a Cash Register Project - Build a Cash Register