Tell us what’s happening:
The project seem working fine, but few test cases are failing, I’ve check with all the video tutorials in the youtube & with chatGPT, still few testCases failed.
can anyone help me solve this problem?
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang = "em">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href = "styles.css" rel = "stylesheet">
<title>Title of the document</title>
</head>
<main>
<img id="freecodecamp-logo"src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt=" freeCodeCamp logo">
<h1>Cash Register Project</h1>
<div id="change-due"></div>
<div class="input container">
<label for="cash" id="cash-label">Enter cash from customer:
</label>
<input type="number" name="cash" id="cash"></input>
<button id="purchase-btn">Purchase</button>
</div>
<div class="container">
<div class="body-1 register">
<p id="total-cash"></p>
</div>
<div class="body-2 register"></div>
<div class=" body-3 register">
<div class="register">
<button class='btn'></button>
<button class='btn'></button>
<button class='btn'></button>
<button class='btn'></button>
<button class='btn'></button>
<button class='btn'></button>
<button class='btn'></button>
<button class='btn'></button>
<button class='btn'></button>
</div>
<div id="cid">
<p><b>Change in drawer:</b>
Pennies: $1.01
Nickels: $2.05
Dimes: $3.1
Quarters: $4.25
Ones: $90
Fives: $55
Tens: $20
Twenties: $60
Hundreds: $100</p>
</div>
</div>
<div class=" body-4 register">
<div id="circle"></div>
</div>
</div>
</main>
<script src="script.js"></script>
</html>
/* file: script.js */
const change = document.getElementById("change-due");
const cash = document.getElementById("cash");
const sale = document.getElementById("purchase-btn");
const total = document.getElementById("total-cash");
let price = 19.5;
total.textContent = `Total: $${price}`;
let cid = [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]];
let currencyUnits = [
['Penny', 0.01],
['Nickel', 0.05],
['Dime', 0.1],
['Quarter', 0.25],
['One', 1],
['Five', 5],
['Ten', 10],
['Twenty', 20],
['One Hundred', 100]
];
sale.addEventListener("click", () => {
const cashValue = parseFloat(cash.value);
const changeDue = cashValue - price;
if (cashValue < price) {
alert("Customer does not have enough money to purchase the item");
return;
}
if (cashValue === price) {
change.innerText = "No change due - customer paid with exact cash";
return;
}
const changeResult = getChange(changeDue, cid);
if (changeResult.status === "INSUFFICIENT_FUNDS" || changeResult.status === "CLOSED") {
change.innerText = `Status: ${changeResult.status} ${formatChange(changeResult.change)}`;
} else {
let changeText = `Status: OPEN ${formatChange(changeResult.change)}`;
change.innerText = changeText.trim();
}
});
const getChange = (changeDue, cid) => {
let totalCid = parseFloat(cid.reduce((sum, [, amount]) => sum + amount, 0).toFixed(2));
if (totalCid < changeDue) {
return { status: "INSUFFICIENT_FUNDS", change: [] };
}
let changeArray = [];
let remainingChange = changeDue;
for (let i = currencyUnits.length - 1; i >= 0; i--) {
let unit = currencyUnits[i][0];
let unitValue = currencyUnits[i][1];
let unitInDrawer = cid[i][1];
if (unitValue <= remainingChange && unitInDrawer > 0) {
let amountFromUnit = 0;
while (remainingChange >= unitValue && unitInDrawer > 0) {
remainingChange = (remainingChange - unitValue).toFixed(2);
unitInDrawer -= unitValue;
amountFromUnit += unitValue;
}
if (amountFromUnit > 0) {
changeArray.push([unit, amountFromUnit]);
}
}
}
if (remainingChange > 0) {
return { status: "INSUFFICIENT_FUNDS", change: [] };
}
if (changeDue === totalCid) {
return { status: "CLOSED", change: cid };
}
return { status: "OPEN", change: changeArray };
};
const formatChange = changeArray => changeArray.map(([unit, amount]) => `${unit}: $${amount.toFixed(2)}`).join(" ");
/* file: styles.css */
*{
box-sizing : border-box;
margin:0;
padding:0;
}
:root{
--light-gray: #dfdfe2;
--dark-blue: #0a0a23;
--dark-orange: #feac32;
--light-orange:#fecc4c;
--sky-blue:#99c9ff;
--white : #ffffff;
}
body{
background-color: var(--dark-blue);
color: var(--light-gray);
}
main{
display: flex;
flex-direction: column;
flex-wrap: wrap;
text-align:center;
align-content: center;
}
#freecodecamp-logo{
width: auto;
height: 30px;
margin: 40px 0px;
}
h1{
font-size: 2.5rem;
text-align: center;
}
#change-due{
height: auto;
width: auto;
text-align: center;
margin: auto;
margin-top: 10px;
font-size: 1.2rem;
}
.container{
width: 470px;
height: auto;
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: center;
margin: 10px 0px ;
}
#cash-label{
font-size: 1.1em;
}
#cash{
width: 180px;
height: 29px;
margin: 10 0px;
}
#purchase-btn{
width: 100px;
height: 30px;
margin: 10 auto;
font-size: 1.1em;
font-weight: 700;
background-color: Var(--dark-orange);
background-image: linear-gradient(var(--light-orange), Var(--dark-orange));
border-color: var(--dark-orange);
}
.register{
border: 10px solid var(--sky-blue);
}
.btn{
background-color: var(--dark-blue);
width: 20px;
height: 20px;
border: none;
border-radius: 2px;
}
.body-1{
width: 200px;
height: 50px;
padding: 3px;
font-size: 1.2em;
text-align: center;
margin: auto;
margin-left: 40px;
}
.body-2{
width: 50px;
margin-left: 60px;
height: 35px;
background-color: var(--sky-blue);
}
.body-3{
width: 320px;
height: 270px;
border-radius: 30px 30px 0 0;
display: grid;
grid-template-columns: 90px auto;
grid-gap: 30px;
background-color: var(--sky-blue);
padding: 5px;
}
#cid p{
background-color: var(--white);
color: #000;
text-align: left;
font-size: 1.1em;
white-space: pre
}
#cid{
background-color: var(--white);
color: #000;
text-align: left;font-size: 1.1em;
padding: 10px;
}
.body-4{
margin: auto;
margin-top: 10px;
width : 320px;
height: 50px;
display: flex;
justify-content: center;
background-color: var(--sky-blue);
}
#circle{
border: 2px solid var(--dark-blue);
border-radius: 100%;
background-color: var(--dark-blue);
width: 20px;
height: 20px;
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36
Challenge Information:
Build a Cash Register Project - Build a Cash Register