Build a Cash Register Project - Build a Cash Register

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 http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cash Register</title>
</head>
<body>
    <label for="cash">Enter Cash Amount:</label>
    <input type="number" id="cash">
    <button id="purchase-btn">Purchase</button>
    <div id="change-due"></div>

    <script src="script.js"></script>
</body>
</html>

/* file: styles.css */

/* file: script.js */
const purchaseButton = document.getElementById('purchase-btn');
const cashInput = document.getElementById('cash');
const changeDueDiv = document.getElementById('change-due');

let price = 19.5;
let cid = [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]];

const checkCashRegister = () => {
    if (Number(cashInput.value) < price) {
        alert('Customer does not have enough money to purchase the item');
        cashInput.value = '';
        return;
    }

    if (Number(cashInput.value) === price) {
        changeDueDiv.innerHTML = 'No change due - customer paid with exact cash';
        cashInput.value = '';
        return;
    }

    let changeDue = (Number(cashInput.value) - price).toFixed(2);
    let change = calculateChange(changeDue, cid);

    if (change.status === "INSUFFICIENT_FUNDS") {
        changeDueDiv.innerHTML = 'Status: INSUFFICIENT_FUNDS';
    } else {
        changeDueDiv.innerHTML = `Status: ${change.status} ${change.change.map(c => `${c[0]}: $${c[1].toFixed(2)}`).join(' ')}`;
    }

    cashInput.value = '';
}

purchaseButton.addEventListener('click', checkCashRegister);

const calculateChange = (changeDue, cid) => {
    const currencyUnit = {
        "ONE HUNDRED": 100,
        "TWENTY": 20,
        "TEN": 10,
        "FIVE": 5,
        "ONE": 1,
        "QUARTER": 0.25,
        "DIME": 0.1,
        "NICKEL": 0.05,
        "PENNY": 0.01
    };

    let totalCID = cid.reduce((sum, elem) => sum + elem[1], 0);
    totalCID = parseFloat(totalCID.toFixed(2));

    if (totalCID < changeDue) {
        return { status: "INSUFFICIENT_FUNDS", change: [] };
    }

    let changeArr = [];
    let reversedCid = [...cid].reverse();

    for (let [denom, amount] of reversedCid) {
        let value = currencyUnit[denom];
        let amountOfDenom = 0;

        while (changeDue >= value && amount > 0) {
            amount -= value;
            changeDue = (changeDue - value).toFixed(2);
            amountOfDenom += value;
        }

        if (amountOfDenom > 0) {
            changeArr.push([denom, amountOfDenom]);
        }
    }

    if (Math.abs(changeDue) > 0.005) {
        return { status: "INSUFFICIENT_FUNDS", change: [] };
    }

    let changeTotal = changeArr.reduce((sum, elem) => sum + elem[1], 0);
    if (changeTotal < totalCID) {
        return { status: "OPEN", change: changeArr };
    }

    // Specific format for 'CLOSED' status
    return {
        status: "CLOSED",
        change: "CLOSED " + Object.keys(currencyUnit)
            .map(denom => {
                let amount = changeArr.find(elem => elem[0] === denom)?.[1] || 0;
                return `${denom}: $${amount.toFixed(2)}`;
            }).join(' ')
    };
};

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Challenge Information:

Build a Cash Register Project - Build a Cash Register

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.