Build a Cash Register Project

JavaScript
1

I always fails the last two tests :frowning: Where did i make mistakes ? Pls helpp
Here is my code:
HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <title>Cash Register</title>
        <link rel="stylesheet" href="styles.css"/>
    </head>

    <body>
        <h1>Cash Register Project</h1>
        <span id="change-due"></span>
        <label for="cash">Enter cash from customer:</label>
        <input type="number" id="cash"/>
        <button id="purchase-btn">Purchase</button>
        <p> 
            <span></span>
            <strong>Change in drawer:</strong>
            <div>Pennies: <span id="penny"></span></div>
            <div>Nickels: <span id="nickel"></span></div>
            <div>Dimes: <span id="dime"></span></div>
            <div>Quarters: <span id="quarter"></span></div>
            <div>Ones: <span id="one"></span></div>
            <div>Fives: <span id="five"></span></div>
            <div>Tens: <span id="ten"></span></div>
            <div>Twenties: <span id="twenty"></span></div>
            <div>Hundreds: <span id="hundred"></span></div>
        </p>

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

CSS:

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Roboto', sans-serif;
    color: #dfdfe2;
    background-color: #0a0a23;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

h1 {
    font-size: 2.8rem;
}

#change-due, label, #cash {
    text-align: center;
    font-size: 1.3rem;
    white-space: pre-line;
}

#cash {
    padding: 0 5px;
}

#purchase-btn {
    font-size: 1.2rem;
    padding: 5px 10px;
    background-color: #febd40;
}

#purchase-btn:active {
    background-color: #fea601;
}

p {
    white-space: pre-line;
    font-size: 1.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

p > span {
    line-height: 3;
    font-size: 1.4rem;
}

p strong {
    margin-top: 10px;
}

Javascript:

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 cash = document.getElementById("cash");
const purchaseBtn = document.getElementById("purchase-btn");
const changeDue = document.getElementById("change-due");

const currency = {
    "PENNY": 0.01,
    "NICKEL": 0.05,
    "DIME": 0.1,
    "QUARTER": 0.25,
    "ONE": 1,
    "FIVE": 5,
    "TEN": 10,
    "TWENTY": 20,
    "ONE HUNDRED": 100
};

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

document.querySelector("p span").textContent = `Total: $${price}`;

for (const cash of cid) {
    const currencyId = cash[0] === "ONE HUNDRED" ? "hundred" : cash[0].toLowerCase();
    document.getElementById(currencyId).textContent = `$${cash[1]}`;
}

purchaseBtn.addEventListener("click", () => {
    changeDue.textContent = "";
    let changeDueText = "";
    let change = parseFloat((parseFloat(cash.value) - price).toFixed(2));

    if (change < 0) {
        alert("Customer does not have enough money to purchase the item");
        return;
    }

    if (change === 0) {
        changeDue.textContent = "No change due - customer paid with exact cash";
        return;
    }

    if (cashInDrawer === change) {
        changeDue.textContent = "Status: CLOSED\n";
    } else if (cashInDrawer > change) {
        changeDue.textContent = "Status: OPEN\n";
    }

    for (let i = cid.length - 1; i >= 0; i--) {
        const temp = cid[i][1];
        
        while (cid[i][1] > 0 && change >= currency[cid[i][0]]) {
            change = parseFloat((change - currency[cid[i][0]]).toFixed(2));
            cid[i][1] = parseFloat((cid[i][1] - currency[cid[i][0]]).toFixed(2));
            cashInDrawer = parseFloat((cashInDrawer - currency[cid[i][0]]).toFixed(2));
        }

        if (temp !== cid[i][1]) {
            changeDueText += `${cid[i][0]}: $${parseFloat((temp - cid[i][1]).toFixed(2))}\n`;
        }
    }

    if (change < currency["PENNY"]) {
        changeDue.textContent += changeDueText;
        return;
    }

    changeDue.textContent = "Status: INSUFFICIENT_FUNDS";
});

Thanks for any help.

2

You should not have computations like this out in the global scope. That spoils the reusability of your code

3

Omg thank you so muchh, you made my day. I stuck here for a few days. Have a nice day, sir :smile: