Tell us what’s happening:
I have completed all the tests given in instructions. But i’m not capable to pass the last test:
When price is less than the value in the #cash element, total cash in drawer cid is equal to change due, and the #purchase-btn element is clicked, the value in the #change-due element should be “Status: CLOSED” with change due in coins and bills sorted in highest to lowest order.
I tried to create a new id statement to control the other CLOSE cause but it stills don’t pass. any help? TY! 
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cash Register</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
<h1>Cash Register Project</h1>
<div id="change-due"></div>
<div class="input-div">
<label for="cash">Enter cash from customer:</label>
<input type="number" id="cash" class="user-input" value="" />
<button class="check-btn-styles" id="purchase-btn">Purchase</button>
</div>
<div class="container">
<div class="top-display-screen-container">
<p id="price-screen" class="price-screen"></p>
<div class="connector"></div>
</div>
<div class="top-register">
<div class="btns-container">
<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="cash-drawer-display" class="cash-drawer-display"></div>
</div>
<div class="bottom-register">
<div class="circle"></div>
</div>
</div>
</main>
<script src="./script.js"></script>
</body>
</html>
/* file: script.js */
let price = 3.26;
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]];
const cashInput = document.getElementById("cash")
const change = document.getElementById("change-due")
const purchaseBtn = document.getElementById("purchase-btn");
const currencyUnits = [
['PENNY', .01],
['NICKEL', .05],
['DIME', .1],
['QUARTER', .25],
['ONE', 1],
['FIVE', 5],
['TEN', 10],
['TWENTY', 20],
['ONE HUNDRED', 100]
]
purchaseBtn.addEventListener("click", () => {
const cashValue = parseFloat(cashInput.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: [] }
//devolveremos un objeto con un texto STATUS y con el cambio, que sera un array como los otros modificado.
}
let changeArray = [];
let remainingChange = changeDue;
//Bucle para recorrer la tabla de currencyUnits (lo que vale cada moneda)
for (let i = currencyUnits.length -1; i >= 0; i--) {
let unit = currencyUnits[i][0] // accedemos a la moneda que es "HUNDRED/ONE/TWENTY..."
let unitValue = currencyUnits[i][1] // accedemos al valor de cada moneda 100/20/5..."
let unitInDrawer = cid[i][1]
if (unitValue <= remainingChange && unitInDrawer > 0) {
let amountFromUnit = 0;
//console.log(remainingChange, unitValue, unitInDrawer)
while (remainingChange >= unitValue && unitInDrawer >0) {
remainingChange = (remainingChange - unitValue).toFixed(2)
//console.log(remainingChange)
unitInDrawer -= unitValue;
amountFromUnit = parseFloat((amountFromUnit + unitValue).toFixed(2))
}
if (amountFromUnit > 0) {
changeArray.push([unit, amountFromUnit])
}
}
}// end of for loop
console.log(totalCid, changeDue)
if(changeDue === totalCid){
return { status: "CLOSED", change: changeArray }
}
else if(remainingChange > 0){
return { status: "INSUFFICIENT_FUNDS", change: [] }
}
return { status: "OPEN", change: changeArray }
}// end of getChange function
const formatChange = changeArray => changeArray.map(([unit, amount]) => `${unit}: $${amount.toFixed(2)}`).join(" ");
console.log(getChange(0.5, cid))
//console.log(formatChange([["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]))
//console.log(getChange(.5, cid))
/* file: styles.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--light-gray: #dfdfe2;
--dark-blue: #0a0a23;
}
body {
background-color: var(--dark-blue);
color: var(--light-gray);
}
main {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 40px 10px;
}
.freecodecamp-logo {
width: 100%;
height: 30px;
margin-bottom: 20px;
}
h1 {
font-size: 2.5rem;
margin: 20px 0;
text-align: center;
}
#change-due {
text-align: left;
font-size: 1.2rem;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.input-div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin: 10px 0 20px;
}
label {
font-size: 18px;
}
.user-input {
height: 30px;
padding: 10px;
margin: 10px;
font-size: 15px;
}
.price-screen {
border: 10px solid #99c9ff;
background-color: black;
height: 50px;
width: 200px;
margin-left: -40px;
color: white;
font-size: 1.2rem;
text-align: center;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
#price {
font-size: 1.5rem;
text-align: center;
}
.connector {
margin-left: -20px;
background-color: #99c9ff;
height: 30px;
width: 40px;
}
.top-register {
display: flex;
justify-content: space-around;
border-radius: 35px 35px 0 0;
padding-top: 20px;
background-color: #99c9ff;
height: 250px;
width: 325px;
}
.btns-container {
width: 25%;
}
.btn {
border-radius: 10%;
border: none;
width: 20px;
height: 20px;
background-color: black;
}
.check-btn-styles {
cursor: pointer;
width: 100px;
height: 30px;
margin: 10px;
color: #0a0a23;
font-size: 18px;
font-weight: bold;
background-color: #feac32;
background-image: linear-gradient(#fecc4c, #ffac33);
border-color: #feac32;
border-width: 3px;
}
.cash-drawer-display {
font-size: 1.1rem;
background-color: white;
width: 55%;
height: 95%;
color: black;
padding: 10px;
}
.bottom-register {
background-color: #99c9ff;
height: 50px;
width: 325px;
margin-top: 10px;
}
.circle {
margin: 15px auto;
border-radius: 50%;
width: 20px;
height: 20px;
background-color: black;
}
In other way, i have red in others posts that there was a bug in code that it is not pushed to production on freecode git. Has anybody know something about this?
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36
Challenge Information:
Build a Cash Register Project - Build a Cash Register