Tell us what’s happening:
I’m failing the following test cases:
When price is 19.5, the value in the #cash element is 20, cid is [[“PENNY”, 0.01], [“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: INSUFFICIENT_FUNDS” When price is less than the value in the #cash element, total cash in drawer cid is equal to change due, and the #purchase-btn element
However, when I actually run it the criteria is fulfilled.
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Cash Register Project</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel='stylesheet' href='styles.css'>
</head>
<body>
<header>
<h1>Cash Register Project</h1>
</header>
<section id="user-collection">
<div class="div">
<p id = "total">Total: </p>
<br>
<div>
<p>Enter Cash Below:</p>
<input id="cash" type="number">
</div>
<br>
<button id="purchase-btn">Purchase</button>
</div>
<div id="cash-drawer" class="div">
<b><p>Cash in drawer:</p></b>
</div>
</section>
<div id ="change-display">
<b><h4>Change: </h4></b>
<div id="change-due">
</div>
</div>
</body>
<script src="script.js"></script>
</html>
/* file: script.js */
let price = 19.5;
let cid = [["PENNY", 0.01], ["NICKEL", 0.05], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]
const drawer = document.getElementById('cash-drawer');
const changeDue = document.getElementById('change-due');
const purchaseBtn = document.getElementById('purchase-btn');
const cash = document.getElementById('cash');
let coinVals = [0.01,0.05,0.1,0.25,1,5,10,20,100]
let status = ""
let changeToGive = []
const createUIL = () =>{
drawer.innerHTML=""
cid.forEach((el)=>{
drawer.innerHTML+=`<p>${el[0]}: ${el[1]}</p> `
})
document.getElementById("total").textContent=price
}
document.addEventListener("DOMContentLoaded",()=>{
createUIL();
})
const checkRegister = () => {
let cashValue = parseFloat(cash.value);
if (cashValue < price || isNaN(cashValue)) {
alert("Customer does not have enough money to purchase the item");
return;
} else if (cashValue === price) {
changeDue.innerHTML = "No change due - customer paid with exact cash";
return;
} else {
checkCid();
}
console.log(`checkRegister status : ${status}`)
}
const checkCid = () => {
let cashValue = parseFloat(cash.value).toFixed(2);
let change = parseFloat((cashValue - price).toFixed(2))
let CIDsum = parseFloat((cid.reduce((acc, el) => acc + el[1], 0)).toFixed(2));
console.log(CIDsum)
console.log(change)
if (CIDsum < change) {
status = "INSUFFICIENT_FUNDS";
} else if (CIDsum === change) {
status = "CLOSED";
calcChange(change);
} else {
status = "OPEN";
calcChange(change);
}
updateChangeUIL()
}
const calcChange = (change) =>{
changeToGive=[]
for (let i = cid.length-1; i>=0; i--){
if (change>=coinVals[i]){
let changeNeeded = cid[i][1]
let changeFromCoin = 0
while (changeNeeded>0 && change>=coinVals[i]){
changeFromCoin+=coinVals[i];
changeNeeded-=coinVals[i]
change-=coinVals[i]
change=parseFloat(change.toFixed(2))
}
if (changeFromCoin>0){
changeToGive.push(`${cid[i][0]}: $${changeFromCoin}`)
}
}
}
if (change>0){
status="INSUFFICIENT_FUNDS"
changeToGive=[]
}
console.log(`calcChange status : ${status}`)
}
const updateCID = ()=>{
changeToGive.forEach((el)=>{
let [before,after]= el.split(":")
after = Number(String(parseFloat((after.slice(2))).toFixed(2)))
cid.forEach(val=> {
if (val[0]===before){
val[1]= parseFloat((val[1]-after).toFixed(2))
}
})
})
drawer.innerHTML=""
cid.forEach((el)=>{
drawer.innerHTML+=`<p>${el[0]}: ${el[1]}</p> `
})
}
const updateChangeUIL= ()=>{
changeDue.innerHTML=`<p>Status: ${status}</p>`
changeToGive.forEach((el)=>{
changeDue.innerHTML+=`<p>${el}</p>`
})
updateCID();
}
purchaseBtn.addEventListener('click',()=>{
checkRegister();
console.log(`change due: ${changeDue.textContent}`)
})
/* file: styles.css */
body{
background-color: #e6e1c5;
}
header{
background-color: black;
color: #e6e1c5;
width: 100%;
margin: 0;
padding: 10px 0px;
}
h1{
width: 21%;
margin: auto;
}
#user-collection{
margin: auto;
margin-top: 60px;
width: 60%;
padding: 40px;
background-color: #395c6b;
border: 2px solid black;
border-radius: 20px;
display: flex;
justify-content: space-between;
}
p{
color:white;
}
.div{
width: 45%;
}
#purchase-btn{
background-color: #ee6c4d;
margin-left: 30px;
padding: 7px;
}
#change-display{
margin:auto;
margin-top: 40px;
padding:40px;
background-color: #5a352a;
width: 60%;
border-radius: 40px;
color: #e6e1c5;
}
h4{
margin-top: -40;
width: 10%;
margin:auto;
}
.p{
margin:auto;
width: 40%
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) 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