Tell us what’s happening:
Describe your issue in detail here.
the last part is resolved or not as it is not working for please let me know if someone know about it
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 QUARTER: $0 DIME: $0 NICKEL: $0 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</title>
<link rel="stylesheet" href="./styles.css"></head>
<body>
<div class="header">
<h1>Project</h1>
<h3>Cash Register</h3>
</div>
<div id="inputbtn">
<p>Enter cash from customer</p>
<input id="cash" type="number" placeholder="Cash">
<div id="change-due"></div>
<button id="purchase-btn" type="button">Purchase</button>
</div>
<div class="price">
<h3>Price: 1.87</h3>
</div>
<script src="script.js"></script>
</body>
</html>
/* file: styles.css */
body {
margin:0;
padding: 0;
background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);
}
.header {
text-align: center;
justify-content: center;
margin-top: 30px;
}
.header h1{
font-family: fantasy;
font-size: 50px;
}
.header h3{
font-family: sans-serif;
}
#inputbtn {
text-align: center;
margin-top: 60px;
}
#inputbtn input {
border-radius: 3px;
border: #ffc8dd;
height: 30px;
font-size:20px;
width: 180px
}
#inputbtn button {
margin-top: 20px;
padding: 5px;
background-color: #f77f00
}
.price {
text-align: center;
margin-top: 30px;
color: red;
background-color: white;
width: 120px;
margin: 0 auto;
}
/* file: script.js */
let price = 19.5;
let cid = [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]];
const currencyUnit = {
"PENNY": 0.01,
"NICKEL": 0.05,
"DIME": 0.1,
"QUARTER": 0.25,
"ONE": 1,
"FIVE": 5,
"TEN": 10,
"TWENTY": 20,
"ONE HUNDRED": 100
};
let cash = document.getElementById("cash");
const result =document.getElementById("change-due");
const purchasebtn =document.getElementById("purchase-btn");
//purchase button
purchasebtn.addEventListener('click',()=>{
const cashValue =parseFloat(cash.value)
if(cashValue < price){
alert("Customer does not have enough money to purchase the item")
}else if(price == cashValue)
{
result.textContent="No change due - customer paid with exact cash";
}else {
check(cashValue,price,cid)
}
});
// btn function end
function check(cashValue,price,cid) {
let changecash = cashValue - price;
//total cash in drawer
let totalcid = Number(cid.reduce((sum,elem)=> sum + elem[1],0)).toFixed(2);
if(changecash > totalcid){
result.textContent="Status: INSUFFICIENT_FUNDS"
}else if (totalcid == changecash.toFixed(2))
{
result.textContent="Status: CLOSED "+ cid
}
else {
let changeArr=[];
for(let i=cid.length-1; i >=0 ;i--){
let currencyUnitName = cid[i][0];
let currencyTotal = cid[i][1];
let currencyValue = currencyUnit[currencyUnitName];
let valueByTotal = Number((currencyTotal/currencyValue).toFixed(0));
let returnUnit=0
while(changecash >= currencyValue && valueByTotal > 0){
changecash -= currencyValue;
changecash = Number(changecash.toFixed(2));
valueByTotal--
returnUnit++
}
if (returnUnit > 0){
changeArr.push([currencyUnitName, returnUnit * currencyValue])
}
}
if (changecash > 0){
return result.textContent="Status: INSUFFICIENT_FUNDS"
}else {
let changeArray = changeArr.map(item => item[0] + ": $" + item[1])
return result.textContent="Status: OPEN Change: "+changeArray
}
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36
Challenge Information:
Build a Cash Register Project - Build a Cash Register
