Build a Cash Register Project - Build a Cash Register

JavaScript
1

Tell us what’s happening:

I have tried resolve these two issus but cant get it (18 and 19).
can anyone help me out

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>Cash Register</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Cash Register</h1>
    <div class="container">
        <label for="cash">Cash:</label>
        <input type="number" id="cash" min="0" step="0.01" required>

        <button id="purchase-btn">Purchase</button>

        <div id="change-due"></div>
    </div>

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

/* file: script.js */
let price = 19.5;
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 cashInput = document.getElementById("cash");
const purchaseBtn = document.getElementById("purchase-btn");
const changeDueElement = document.getElementById("change-due");

purchaseBtn.addEventListener("click", () => {
    const cash = parseFloat(cashInput.value);
    const result = calculateChange(price, cash, cid);
    changeDueElement.textContent = result;
});

function calculateChange(price, cash, cid) {
    if (cash < price) {
        alert("Customer does not have enough money to purchase the item");
        return "Change Due: $0";
    }

    if (cash === price) {
        return "No change due - customer paid with exact cash";
    }

    let change = cash - price;
    let changeArray = [];
    let status = "OPEN";

    let totalCid = cid.reduce((acc, curr) => acc + curr[1], 0);
    totalCid = Math.round(totalCid * 100) / 100;

    if (change > totalCid) {
        return "Status: INSUFFICIENT_FUNDS";
    }

    if (change === totalCid) {
        return `Status: CLOSED ${cid.map(coin => `${coin[0]}: $${coin[1]}`).join(" ")}`;
    }

    for (let i = cid.length - 1; i >= 0; i--) {
        let coinName = cid[i][0];
        let coinTotal = cid[i][1];
        let coinValue = getCoinValue(coinName);
        let amount = 0;

        while (change >= coinValue && coinTotal > 0) {
            change -= coinValue;
            coinTotal -= coinValue;
            amount += coinValue;
            change = Math.round(change * 100) / 100;
        }

        if (amount > 0) {
            changeArray.push(`${coinName}: $${amount}`);
        }
    }

    if (change > 0) {
        return "Status: INSUFFICIENT_FUNDS";
    }

    return `Status: ${status} ${changeArray.join(" ")}`;
}

function getCoinValue(coinName) {
    switch (coinName) {
        case "PENNY": return 0.01;
        case "NICKEL": return 0.05;
        case "DIME": return 0.1;
        case "QUARTER": return 0.25;
        case "ONE": return 1;
        case "FIVE": return 5;
        case "TEN": return 10;
        case "TWENTY": return 20;
        case "ONE HUNDRED": return 100;
    }
}





/* file: styles.css */
body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            margin: 20px;
        }
        h1 {
            text-align: center;
        }
        .container {
            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            border-radius: 8px;
        }
        label, input, button {
            display: block;
            width: 100%;
            margin-bottom: 10px;
        }
        button {
            padding: 10px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
        #change-due {
            font-weight: bold;
            color: #333;
        }

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.5 Safari/605.1.15

Challenge Information:

Build a Cash Register Project - Build a Cash Register

2

what behaviour does your app have that is wrong?

3

also why there html in your css file?

4

sorry. i will again post if after deleting this.

5

hello, i have problem with these:
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" .
how to show this in java. as i have already added this.

6

have you tried to see what your app does with those values?

7

yes. it show like below one is missing:
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" .

8

but if you put those value in, what does your app do? ignore the tests for a moment, look at your app, does it behave correctly?

9

ok.if i enter 19.5 , it shows “No change due - customer paid with exact cash” .

10

yes it give the exact result.

11

that doesn’t look like the correct behaviour

12

I got the chance to test your code.
Did you try to test your code with the values from the test?

Because what I see is a lot of $0, you should not have the denominations if they are at 0