Tell us what’s happening:
Describe your issue in detail here.
//
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
//// the upper instruction is not passing inded the output is correct Status: CLOSED PENNY: $0.5,NICKEL: $0,DIME: $0,QUARTER: $0,ONE: $0,FIVE: $0,TEN: $0,TWENTY: $0,ONE HUNDRED: $0
Purchase
Your code so far
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))
{
let cidArray = cid.map(item => item[0] + “: $” + item[1])
result.textContent="Status: CLOSED "+ cidArray
}
else {
<!-- 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))
{
let cidArray = cid.map(item => item[0] + ": $" + item[1])
result.textContent="Status: CLOSED "+ cidArray
}
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