Tell us what’s happening:
Describe your issue in detail here.
I cant identify that code error in that out put shows lots of error
-
When the value in the
#cash
element is less thanprice
, an alert should appear with the text"Customer does not have enough money to purchase the item"
. -
Failed: When the value in the
#cash
element is equal toprice
, the value in the#change-due
element should be"No change due - customer paid with exact cash"
. -
Failed: When
price
is19.5
, the value in the#cash
element is20
,cid
is[["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]]
, and the#purchase-btn
element is clicked, the value in the#change-due
element should be"Status: OPEN QUARTER: $0.5"
. -
Failed: When
price
is3.26
, the value in the#cash
element is100
,cid
is[["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]]
, and the#purchase-btn
element is clicked, the value in the#change-due
element should be"Status: OPEN TWENTY: $60 TEN: $20 FIVE: $15 ONE: $1 QUARTER: $0.5 DIME: $0.2 PENNY: $0.04"
. -
Failed: When
price
is19.5
, the value in the#cash
element is20
,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"
-
Failed: When
price
is19.5
, the value in the#cash
element is20
,cid
is[["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 1], ["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"
.
Failed: 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 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 Register App</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<input type="number" id="cash" placeholder="Enter cash provided by customer">
<div id="change-due"></div>
<button id="purchase-btn">Purchase</button>
</div>
<script src="script.js"></script>
</body>
</html>
/* file: styles.css */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.container {
text-align: center;
}
#cash {
padding: 8px;
font-size: 16px;
}
#change-due {
margin-top: 20px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #fff;
}
#purchase-btn {
padding: 8px 16px;
font-size: 16px;
background-color: #4CAF50;
border: none;
color: white;
cursor: pointer;
margin-top: 20px;
}
#purchase-btn:hover {
background-color: #45a049;
}
/* file: script.js */
document.getElementById("purchase-btn").addEventListener("click", function() {
const price = 19.5;
const cashProvided = parseFloat(document.getElementById("cash").value);
if (cashProvided < price) {
alert("Customer does not have enough money to purchase the item");
return; // Stop execution if cash provided is less than price
}
if (cashProvided === price) {
document.getElementById("change-due").innerText = "No change due - customer paid with exact cash";
return; // Stop execution if cash provided is equal to price
}
const cid = [
["PENNY", 0.5],
["NICKEL", 0],
["DIME", 0],
["QUARTER", 0],
["ONE", 0],
["FIVE", 0],
["TEN", 0],
["TWENTY", 0],
["ONE HUNDRED", 0]
];
const changeDue = getChange(price, cashProvided, cid);
document.getElementById("change-due").innerText = changeDue;
});
function getChange(price, cashProvided, cid) {
const currencyValues = {
"ONE HUNDRED": 100,
"TWENTY": 20,
"TEN": 10,
"FIVE": 5,
"ONE": 1,
"QUARTER": 0.25,
"DIME": 0.1,
"NICKEL": 0.05,
"PENNY": 0.01
};
let change = cashProvided - price;
let availableCash = 0;
for (let [name, amount] of cid) {
availableCash += amount;
}
if (change > availableCash) {
return "Status: INSUFFICIENT_FUNDS";
}
if (change === availableCash) {
return "Status: CLOSED";
}
let changeArray = [];
for (let i = cid.length - 1; i >= 0; i--) {
const currencyName = cid[i][0];
const currencyValue = currencyValues[currencyName];
let currencyAmount = cid[i][1];
let currencyChange = 0;
while (currencyValue <= change && currencyAmount > 0) {
change -= currencyValue;
change = Math.round(change * 100) / 100;
currencyAmount -= currencyValue;
currencyChange += currencyValue;
}
if (currencyChange > 0) {
changeArray.push([currencyName, currencyChange]);
}
}
if (change > 0) {
return "Status: INSUFFICIENT_FUNDS";
}
return changeArray.map(currency => `${currency[0]}: $${currency[1]}`).join(" ");
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:124.0) Gecko/20100101 Firefox/124.0
Challenge Information:
Build a Cash Register Project - Build a Cash Register