Tell us what’s happening:
I tested my program and it works correctly but half test fail, i don’t know how, test my code
Your code so far
START OF HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Cash Register</title>
</head>
<body>
<h1>Cash Register</h1>
<div class="container">
<label for="cash"id="cash-label">
Enter the price from customer:</label><input type="number" id="cash">
<button type="button" id="purchase-btn">Purchase</button>
<div id="change-due"></div>
<div id="price-div"></div>
<div id="drawer">
<b>changes in cid:</b>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
/* file: script.js */
START OF CSS
html{
font-family:sans-serif;
letter-spacing:1.5px;
word-wrap:break-word;
}
h1,h5{
text-align:center;
}
body{
background:wheat;
}
.container{
position:absolute;
border:4px outset yellow;
width:500px;
height:700px;
box-shadow:0 0 10px 0;
margin-left:0;
background:grey;
color:white;
top:150px;
animation:shadow_shine 2s linear infinite;
}
#cash{
position:absolute;
padding:5px;
top:2px;
border:5px outset yellow;
background:blue;
color:white;
left:280px;
}
#drawer{
position:absolute;
bottom:0px;
right:0px;
left:0px;
height:200px;
background:white;
border-top:yellow 5px solid;
color:black;
}
#purchase-btn{
position:absolute;
top:50px;
width:200px;
height:50px;
font-size:20px;
left:150px;
}
#purchase-btn:hover{
cursor:pointer;
}
#cash-label{
position:absolute;
top:10px;
}
#change-due{
height:320px;
position:absolute;
left:10;
right:10;
top:120px;
}
#price-div{
position:absolute;
bottom:200px;
padding:5px;
left:190px;
text-align:center;
border:3px yellow outset;
background:black;
color:red;
}
@keyframes shadow_shine{
0%{
box-shadow:0 0 0 0 black;
}
25%{
box-shadow:0 0 25px 3px yellow;
}
50%{
box-shadow:0 0 50px 6px red;
}
75%{
box-shadow:0 0 25px 3px yellow;
}
100%{
box-shadow:0 0 0 0 black;
}
}
START OF JAVASCRIPT
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]
];
cid.forEach(arr => drawer.innerHTML += `<br>${arr[0]}: $${arr[1]}`)
let reversedCid = cid.slice().reverse();
const purchaseBtn = document.getElementById('purchase-btn');
//to log anything to console easier using log();
const log = arg => console.log(arg);
const priceDiv = document.getElementById('price-div');
let changeDue = document.getElementById('change-due');
const fix = arg => parseFloat((arg).toFixed(2));
const cashEl = document.getElementById('cash');
log(fix(2.1 * 100))
priceDiv.textContent = `price : $${price}`
function checkCashRegister(){
let cash = parseFloat(document.getElementById('cash').value);
if(cash < price){
alert("Customer does not have enough money to purchase the item");
}else if(cash == price){
changeDue.textContent = "No change due - customer paid with exact cash";
}else{
let x = JSON.parse(JSON.stringify(reversedCid));
const amount =[100,20,10,5,1,0.25,0.1,0.05,0.01];
let fixedCash = fix(cash - price);
let due = [ ["ONE HUNDRED", 0],
["TWENTY", 0],
["TEN", 0],
["FIVE", 0],
["ONE", 0],
["QUARTER", 0],
["DIME", 0],
["NICKEL", 0],
["PENNY", 0]
];
amount.forEach((num, index) => {
while (fixedCash >= num && reversedCid[index][1] >= num) {
fixedCash = fix(fixedCash - num);
due[index][1] = fix(due[index][1] + num);
reversedCid[index][1] = fix(reversedCid[index][1] - num);
}
});
if (fixedCash !== 0) {
log(cid)
reversedCid = x;
fixedCash = fix(cash - price);
changeDue.textContent = "Status: INSUFFICIENT_FUNDS";
} else {
cid = [["PENNY", reversedCid[8][1]],
["NICKEL", reversedCid[7][1]],
["DIME", reversedCid[6][1]],
["QUARTER", reversedCid[5][1]],
["ONE", reversedCid[4][1]],
["FIVE", reversedCid[3][1]],
["TEN", reversedCid[2][1]],
["TWENTY", reversedCid[1][1]],
["ONE HUNDRED", reversedCid[0][1]
]];
let cidSum = 0;
cid.forEach(num => cidSum += num[1])
drawer.innerHTML = '<b>changes in cid:</b>';
cid.forEach(arr => drawer.innerHTML += `<br>${arr[0]}: $${arr[1]}`)
due = due.filter(num => num[1] !== 0)
changeDue.textContent = cidSum !== 0 ? "Status: OPEN" : "Status: CLOSED";
due.forEach(arr => changeDue.innerHTML += `<br>${arr[0]}: $${arr[1]}`)
}
}
}
purchaseBtn.addEventListener('click',checkCashRegister)
cashEl.addEventListener('keydown',k=>{
if(k.key === 'Enter'){
checkCashRegister();
}
})
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:128.0) Gecko/20100101 Firefox/128.0
Challenge Information:
Build a Cash Register Project - Build a Cash Register
