Tell us what’s happening:
Describe your issue in detail here.
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>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Cash Register</h1>
<div id="change-due"></div>
<form action="#">
<label for="cash">Enter cash from cutomer</label>
<input type="number" id="cash" placeholder="Cash">
<button id="purchase-btn">Purchase</button>
</form>
<div id="cash-drawer">
<div id="upper-container">
<div id="price-screen"></div>
<div id="between-head-body"></div>
</div>
<div id="body-cash-drawer">
<div id="left-side">
<div id="btn-container">
<span class="btn">1</span>
<span class="btn">2</span>
<span class="btn">3</span>
<span class="btn">4</span>
<span class="btn">5</span>
<span class="btn">6</span>
<span class="btn">7</span>
<span class="btn">8</span>
<span class="btn">9</span>
</div>
</div>
<div id="right-side">
</div>
</div>
<div id="footer-cash-drawer">
<div id="circle"></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
/* file: styles.css */
/* file: script.js */
const cash = document.getElementById("cash");
const total = document.getElementById("price-screen");
const purchaseBtn = document.getElementById("purchase-btn");
const changeDue = document.getElementById("change-due");
const displayCurrency = document.getElementById("right-side");
let price = 3.26;
total.textContent =`Total: $${price}`;
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]
];
let currencyValue = [100,20,10,5,1,0.25,0.1,0.05,0.01];
const reversedCid =[...cid].reverse();
reversedCid.map((el)=>{
displayCurrency.innerHTML += `<p>${el[0]}: ${el[1]}</p>`;
})
const checkChangeDue = () => {
let totalCid = parseFloat(cid.map(el => el[1]).reduce((acc, el) => acc + el).toFixed(2));
let newCash = parseFloat(cash.value);
let change = Number(newCash) - price;
const newChangeArr = [];
let totalfr = 0;
changeDue.innerHTML = ``;
if (price === Number(newCash)) {
changeDue.innerHTML = '<p>No change due - customer paid with exact cash</p>';
return;
} else if (price > Number(newCash)) {
return alert("Customer does not have enough money to purchase the item");
}
if (change > totalCid) {
return (changeDue.innerHTML = '<p>Status: INSUFFICIENT_FUNDS</p>');
}
let i = 0;
reversedCid.map((el) => {
let totalAmountToReturn = 0;
while (change >= currencyValue[i] && el[1] > 0) {
totalAmountToReturn++;
totalfr++;
change -= currencyValue[i];
change = change.toFixed(2);
el[1] -= currencyValue[i];
}
if (totalAmountToReturn > 0) {
newChangeArr.push([el[0], currencyValue[i] * totalAmountToReturn.toFixed(2)]);
totalCid -= currencyValue[i] * totalAmountToReturn.toFixed(2);
}
i++;
});
if (totalfr === 0 || change > 0) {
changeDue.innerHTML = `<p>Status: INSUFFICIENT_FUNDS</p>`;
return;
} else if (totalfr > 0 && totalCid === 0) {
changeDue.innerHTML = `<p>Status: CLOSED </p>`;
newChangeArr.map(el => {
changeDue.innerHTML += `<p>${el[0]}: $${el[1]}</p>`;
return;
});
} else {
changeDue.innerHTML = `<p>Status: OPEN</p>`;
newChangeArr.map(el => {
changeDue.innerHTML += `<p>${el[0]}: $${el[1]}<p>`;
return;
});
}
};
purchaseBtn.addEventListener("click",checkChangeDue)
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36
Challenge Information:
Build a Cash Register Project - Build a Cash Register
https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8/build-a-cash-register-project/build-a-cash-register`Preformatted text`