Tell us what’s happening:
Even though my code is giving the expected results, the last two tests are failing. please help
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>
<header>
<h2>Cash register</h2>
<table>
<tr>
<td><p>Price of the product: </p></td>
<td><span id="price"></span></td>
</tr>
<tr>
<td><label for="cash">Cash from customer: </label></td>
<td><input id="cash" name="cash" placeholder="Enter the Cash from customer" type="number"></td>
</tr>
<tr><td colspan="2"><button id="purchase-btn">Make Purchase</button></td></tr>
<tr>
<td><label for="change-due">Change to Customer:</label></td>
<td><div name="change-due" id="change-due"></div></td>
</tr>
</table>
</header>
<main>
<h3>Change in drawer:</h3>
<table>
<thead>
<td><p>Currency</p></td>
<td><p>Units</p></td>
<td><p>Value in $</p></td>
</thead>
<tbody id="drawer"></tbody>
<tfoot>
<td>Total: </td>
<td colspan="2"><span id="drawer-total"></span></td>
</tfoot>
</table>
</main>
<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]
];
price = 19.5;
cid=[["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]];
const priceElement = document.getElementById('price');
const cashElement = document.getElementById('cash');
const purchaseButton = document.getElementById('purchase-btn');
const changeDue = document.getElementById('change-due');
const drawerBreakup = document.getElementById('drawer');
const totalBalance = document.getElementById('drawer-total');
const currencyBreakup = {
'ONE HUNDRED': 100,
'TWENTY': 20,
'TEN': 10,
'FIVE': 5,
'ONE': 1,
'QUARTER': 0.25,
'DIME': 0.1,
'NICKEL': 0.05,
'PENNY': 0.01,
};
let cashInDrawer = cid.reverse().reduce((obj, [key, value]) => {
obj[key] = value;
return obj;
}, {});
let cash;
let total = 0;
let statue = '';
let changeBreakup = {};
let totalChange = 0;
function drawerStatus() {
console.log(totalChange);
console.log(total);
if(totalChange > total || totalChange != cash-price) {
return "Status: INSUFFICIENT_FUNDS";
} else if (totalChange == total) {
return "Status: CLOSED";
} else {
return "Status: OPEN";
}
}
function resetStats() {
changeDue.innerHTML = '';
drawerBreakup.innerHTML = '';
statue = '';
changeBreakup = {};
totalChange = 0;
cashInDrawer = cid.reduce((obj, [key, value]) => {
obj[key] = value;
return obj;
}, {});
}
function calculateChange() {
let change = parseFloat((cash - price).toFixed(2));
let temp = 0;
changeBreakup = {};
for(var key in currencyBreakup) {
if(change >= currencyBreakup[key] && cashInDrawer[key] > 0) {
temp = Math.floor(change / currencyBreakup[key]);
if(temp <= Math.ceil(cashInDrawer[key] / currencyBreakup[key])) {
changeBreakup[key] = temp;
} else {
changeBreakup[key] = Math.ceil(cashInDrawer[key] / currencyBreakup[key]);
}
change -= (changeBreakup[key] * currencyBreakup[key]);
change = parseFloat(change.toFixed(2));
totalChange += changeBreakup[key] * currencyBreakup[key];
}
}
totalChange = parseFloat(totalChange.toFixed(2));
}
function validCash() {
if(cash > price) {
return true;
} else if (cash === price) {
statue = "No change due - customer paid with exact cash";
return false;
} else {
alert("Customer does not have enough money to purchase the item");
return false;
}
}
function updateStats() {
cash = parseFloat(cashElement.value);
cashElement.removeAttribute('type');
cashElement.style.textAlign = "right";
cashElement.value = `${'$' + cash.toFixed(2)}`;
resetStats();
if(validCash()){
calculateChange();
statue = drawerStatus();
changeDue.innerHTML = `${statue}`;
if(statue != "Status: INSUFFICIENT_FUNDS") {
for(var key in changeBreakup) {
changeDue.innerHTML += `<p>${key}: $${(changeBreakup[key] * currencyBreakup[key])}</p>`
cashInDrawer[key] -= changeBreakup[key] * currencyBreakup[key];
}
}
} else {
changeDue.textContent = statue;
}
preStats();
}
function preStats() {
priceElement.innerText = '$' + price;
let temp = 0;
for(var key in cashInDrawer) {
drawerBreakup.innerHTML += `<tr><td>${key}</td><td>${Math.ceil(cashInDrawer[key]/currencyBreakup[key])}</td><td>${cashInDrawer[key].toFixed(2)}</td></tr>`;
temp += cashInDrawer[key];
}
total = parseFloat(temp.toFixed(2));
totalBalance.innerText = `${'$' + total.toFixed(2)}`;
}
preStats();
purchaseButton.addEventListener('click', updateStats);
/* file: styles.css */
*, *::after, *::before {
margin: 0;
padding: 0;
font-family: sans-serif;
}
body {
background-color: rgb(5, 5, 75);
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
text-align: center;
}
p {
font-size: small;
}
main, header {
height: auto;
margin-top: 100px;
padding: 20px;
border-radius: 5px;
}
header {
background-color:beige;
color:black;
width: auto;
}
main {
background-color: bisque;
color: black;
width: auto;
}
table {
margin: 20px;
border-collapse: collapse;
width: 350px;
font-size: small;
color: black;
}
td {
border: 2px solid rgb(182, 181, 181);
padding: 3px;
text-align: right;
}
input, button {
width: 100%;
border: none;
background: beige;
outline: none;
}
input:hover, button:hover {
cursor: pointer;
background-color: rgb(95, 93, 93);
color: beige;
border-radius: 2px;
}
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
