Tell us what’s happening:
When
price
is
19.5
, the value in the
#cash
element is
20
,
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
. When
price
is
3.26
, the value in the
#cash
element is
100
,
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
. 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
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 total = document.getElementById("price-screen");
const purchaseBtn = document.getElementById("purchase-btn");
const changeDue = document.getElementById("change-due");
const displayCurrency = document.getElementById("right-side");
const cash = document.getElementById("cash");
total.textContent = `Total: $${price}`;
let currencyValue = [100, 20, 10, 5, 1, 0.25, 0.1, 0.05, 0.01];
cid = [...cid].reverse();
cid.map((el) => {
displayCurrency.innerHTML += `<p>${el[0]}: ${el[1]}</p>`;
});
const checkChangeDue = () => {
if (!cash.value) {
alert("Please enter the cash amount.");
return;
}
let totalCid = parseFloat(cid.map(el => el[1]).reduce((acc, el) => acc + el).toFixed(2));
let newCash = parseFloat(cash.value);
let change = newCash - price;
const newChangeArr = [];
let totalfr = 0;
changeDue.style.display = "block";
changeDue.innerHTML = ``;
if (price === newCash) {
changeDue.innerHTML = '<p>No change due - customer paid with exact cash</p>';
return;
} else if (price > newCash) {
alert("Customer does not have enough money to purchase the item");
return;
}
for (let i = cid.length - 1; i >= 0; i--) {
let totalAmountToReturn = 0;
while (change >= currencyValue[i] && cid[i][1] > 0) {
totalAmountToReturn++;
totalfr++;
change -= currencyValue[i];
change = change.toFixed(2);
cid[i][1] -= currencyValue[i];
}
if (totalAmountToReturn > 0) {
newChangeArr.push([cid[i][0], (currencyValue[i] * totalAmountToReturn).toFixed(2)]);
totalCid -= currencyValue[i] * totalAmountToReturn.toFixed(2);
}
}
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);
WARNING
The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.
You will need to take an additional step here so the code you wrote presents in an easy to read format.
Please copy/paste all the editor code showing in the challenge from where you just linked.
Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36
Challenge Information:
Build a Cash Register Project - Build a Cash Register