Here is my HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale = 1.0">
<link rel="stylesheet" href="styles.css">
<title>Cash Register</title>
</head>
<body>
<h1>Cash Register</h1>
<div id="input-result-box">
<input type="number" id="cash" placeholder="Enter Amount of Cash"/>
<div class="button-wrap"><button id="purchase-btn">Purchase</button>
</div>
<div id="change-due">
<!--Results go her-->
</div>
</div>
<div class="register">
<h3>Total: <span id="total-amount">0</span></h3>
<oi>
<li>Penny: $<span class="money-display" id="penny-remain"></span></li>
<li>Nickel: $<span class="money-display" id="nickel-remain"></span></li>
<li>Dime: $<span class="money-display" id="dime-remain"></span></li>
<li>Quarter: $<span class="money-display" id="quarter-remain"></span></li>
<li>Dollar: $<span id="dollar-remain" class="money-display"></span></li>
<li>Fives: $<span id="fives-remain" class="money-display"></span></li>
<li>Tens: $<span id="tens-remain" class="money-display"></span></li>
<li>Twenties: $<span id="twenties-remain" class="money-display"></span></li>
<li>Hundreds: $<span id="hundreds-remain" class="money-display"></span></li>
</oi>
</div>
<div class="drawer">
<div class="circle"></div>
</div>
</body>
<script src="script.js"></script>
</html>
Here is my whole Javscript
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]
];
/*Program Notes:
1. Try put old status code from chatGPT to see if that fixes the issue.
2. The status does not update
3.Even when status is inefficient the money is still be dedacted and text showing up. It should just be inefficient funds status (But the when not enough exchange is in fact working).
*/
const cashAmount = document.getElementById("cash");
const changeDisplay = document.getElementById("change-due");
const purchaseBtn = document.getElementById("purchase-btn");
const total = document.getElementById("total-amount");
const penny= document.getElementById("penny-remain");
const nickel = document.getElementById("nickel-remain");
const dime = document.getElementById("dime-remain");
const quarter = document.getElementById("quarter-remain");
const dollar = document.getElementById("dollar-remain");
const fives = document.getElementById("fives-remain");
const tens = document.getElementById("tens-remain");
const twenties= document.getElementById("twenties-remain");
const hundreds = document.getElementById("hundreds-remain");
let statusType = "";
//Set intial text
total.textContent = `${price}`;
penny.textContent = `${cid[0][1]}`
nickel.textContent = `${cid[1][1]}`;
dime.textContent = `${cid[2][1]}`;
quarter.textContent = `${cid[3][1]}`;
dollar.textContent = `${cid[4][1]}`;
fives.textContent = `${cid[5][1]}`;
tens.textContent = `${cid[6][1]}`;
twenties.textContent = `${cid[7][1]}`;
hundreds.textContent = `${cid[8][1]}`;
const updateRemain = () => {
penny.textContent = `${cid[0][1]}`
nickel.textContent = `${cid[1][1]}`;
dime.textContent = `${cid[2][1]}`;
quarter.textContent = `${cid[3][1]}`;
dollar.textContent = `${cid[4][1]}`;
fives.textContent = `${cid[5][1]}`;
tens.textContent = `${cid[6][1]}`;
twenties.textContent = `${cid[7][1]}`;
hundreds.textContent = `${cid[8][1]}`;
}
purchaseBtn.addEventListener("click", () => {
changeDisplay.innerHTML = ``;
checkEnoughCash();
});
const checkEnoughCash = () => {
if(cashAmount.value < price) {
alert("Customer does not have enough money to purchase the item");
} else if(cashAmount.value == price) {
changeDisplay.innerHTML = `<p>No change due - customer paid with exact cash</p>`;
} else {
checkStatus();
calculateChange(price, cashAmount.value, cid);
updateRemain();
}
}
const checkStatus = () => {
//Gotta figure out how to check if exchange change can be returned.
let change = Math.round((cashAmount.value - price) * 100);
const reversedCid = [...cid]
.reverse()
.map(([denominationName, amount]) => [
denominationName,
Math.round(amount * 100)
]);
const totalCID = reversedCid.reduce((prev, [_, amount]) => prev + amount, 0);
console.log(totalCID);
if (totalCID < change) {
statusType = "INSUFFICIENT_FUNDS";
}
if (totalCID == change) {
statusType = "CLOSED";
}
if (totalCID > change) {
statusType = "OPEN";
}
changeDisplay.innerHTML += `<p>Status: ${statusType}</p>`;
}
const calculateChange = (price, cash, cid) => {
let numHundreds = 0;
let numTwenties = 0;
let numTens = 0;
let numFives = 0;
let numDollar = 0;
let numQuarter = 0;
let numDime = 0;
let numNickel = 0;
let numPenny = 0;
let change = Math.round((cash - price) * 100);
console.log(change);
while (change >= 10000 && cid[8][1] >= 100) { // 10000 cents = $100
change -= 10000;
cid[8][1] -= 100;
numHundreds++;
}
while (change >= 2000 && cid[7][1] >= 20) { // 2000 cents = $20
change -= 2000;
cid[7][1] -= 20;
numTwenties++;
}
while (change >= 1000 && cid[6][1] >= 10) { // 1000 cents = $10
change -= 1000;
cid[6][1] -= 10;
numTens++;
}
while (change >= 500 && cid[5][1] >= 5) { // 500 cents = $5
change -= 500;
cid[5][1] -= 5;
numFives++;
}
while (change >= 100 && cid[4][1] >= 1) { // 100 cents = $1
change -= 100;
cid[4][1] -= 1;
numDollar++;
}
while (change >= 25 && cid[3][1] >= 0.25) { // 25 cents
change -= 25;
cid[3][1] -= 0.25;
numQuarter++;
}
while (change >= 10 && cid[2][1] >= 0.1) { // 10 cents
change -= 10;
cid[2][1] -= 0.1;
numDime++;
}
while (change >= 5 && cid[1][1] >= 0.05) { // 5 cents
change -= 5;
cid[1][1] -= 0.05;
numNickel++;
}
while (change >= 1 && cid[0][1] >= 0.01) { // 1 cent
change -= 1;
cid[0][1] -= 0.01;
numPenny++;
}
showDisplay(numPenny, numNickel, numDime, numQuarter, numDollar, numFives, numTens, numTwenties, numHundreds);
}
const showDisplay = (numPenny, numNickel, numDime, numQuarter, numDollar, numFive, numTen, numTwenty, numHundred) => {
/* Make a if everything added in drawer is less than then insufficient, if equal then closed, and if more than open. Assign a empty String to Status type. And for change make if the numCount is greater than 0 then display num times the value*/
let pennyChange = 0;
let nickelChange = 0;
let dimeChange = 0;
let quarterChange = 0;
let dollarChange = 0;
let fiveChange = 0;
let tenChange = 0;
let twentyChange = 0;
let hundredChange = 0;
if (numHundred >= 1) {
hundredChange = numHundred * 20;
changeDisplay.innerHTML += `<p>${cid[8][0]}: $${hundredChange}</p>`
}
if (numTwenty >= 1) {
twentyChange = numTwenty * 20;
changeDisplay.innerHTML += `<p class="result-text">${cid[7][0]}: $${twentyChange}</p>`;
}
if (numTen >= 1) {
tenChange = numTen * 10;
changeDisplay.innerHTML += `<p class="result-text">${cid[6][0]}: $${tenChange}</p>`;
}
if (numFive >= 1) {
fiveChange = numFive * 5;
changeDisplay.innerHTML += `<p class="result-text">${cid[5][0]}: $${fiveChange}</p>`;
}
if (numDollar >= 1) {
dollarChange = numDollar * 1;
changeDisplay.innerHTML += `<p class="result-text">${cid[4][0]}: $${dollarChange}</p>`;
}
if (numQuarter >= 1) {
quarterChange = numQuarter * 0.25;
changeDisplay.innerHTML += `<p class="result-text">${cid[3][0]}: $${quarterChange}</p>`;
}
if (numDime >= 1) {
dimeChange = numDime * 0.1;
changeDisplay.innerHTML += `<p class="result-text">${cid[2][0]}: $${dimeChange}</p>`;
}
if (numNickel >= 1) {
nickelChange = numNickel * 0.05;
changeDisplay.innerHTML += `<p class="result-text">${cid[1][0]}: $${nickelChange}</p>`;
}
if (numPenny >= 1) {
pennyChange = numPenny * 0.01;
changeDisplay.innerHTML += `<p class="result-text">${cid[0][0]}: $${pennyChange}</p>`;
}
}
