Build a Cash Register Project - Build a Cash Register

JavaScript
1

Tell us what’s happening:

I have made anything correct but I dont understand why the last question is not solved.

  1. When price is less than the value in the #cash element, total cash in drawer cid is equal to change due, and the #purchase-btn element is clicked, the value in the #change-due element should be “Status: CLOSED” with change due in coins and bills sorted in highest to lowest order.

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="styles.css">
</head>
<body>
    <div class="container">
        <h1>Cash Register</h1>
        <label for="cash">Enter Cash Amount:</label>
        <input type="number" id="cash" min="0" step="0.01">
        <button id="purchase-btn">Purchase</button>
        <p id="change-due"></p>
    </div>
    <script src="script.js"></script>
</body>
</html>

/* file: styles.css */
body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f4f4;
    margin: 0;
}

.container {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

input {
    margin: 10px 0;
    padding: 8px;
    font-size: 16px;
}

button {
    padding: 10px 15px;
    font-size: 16px;
    background: #28a745;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
}

button:hover {
    background: #218838;
}

#change-due {
    margin-top: 10px;
    font-weight: bold;
}

/* file: script.js */
let price = 19.5; // Example price
    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]
    ];
document.getElementById("purchase-btn").addEventListener("click", function() {
    
    
    let cash = parseFloat(document.getElementById("cash").value);
    let changeDue = cash - price;
    
    if (cash < price) {
        alert("Customer does not have enough money to purchase the item");
        return;
    }
    
    if (cash === price) {
        document.getElementById("change-due").innerText = "No change due - customer paid with exact cash";
        return;
    }
    
    let totalCid = cid.reduce((sum, curr) => sum + curr[1], 0).toFixed(2);
    
    if (parseFloat(totalCid) < changeDue) {
        document.getElementById("change-due").innerText = "Status: INSUFFICIENT_FUNDS";
        return;
    }
    
    let currencyUnits = [
        ["ONE HUNDRED", 100],
        ["TWENTY", 20],
        ["TEN", 10],
        ["FIVE", 5],
        ["ONE", 1],
        ["QUARTER", 0.25],
        ["DIME", 0.1],
        ["NICKEL", 0.05],
        ["PENNY", 0.01]
    ];
    
    let changeArray = [];
    
    for (let [unit, value] of currencyUnits) {
        let drawerAmount = cid.find(item => item[0] === unit)[1];
        let amountToGive = 0;
        while (changeDue >= value && drawerAmount > 0) {
            changeDue -= value;
            changeDue = Math.round(changeDue * 100) / 100; // Fix floating point precision
            drawerAmount -= value;
            amountToGive += value;
        }
        if (amountToGive > 0) {
            changeArray.push([unit, amountToGive]);
        }
    }
    
    if (changeDue > 0) {
        document.getElementById("change-due").innerText = "Status: INSUFFICIENT_FUNDS";
        return;
    }
    
    if (parseFloat(totalCid) === cash - price) {
        document.getElementById("change-due").innerText = `Status: CLOSED ${changeArray.map(arr => `${arr[0]}: $${arr[1]}`).join(' ')}`;
        return;
    }
    
    document.getElementById("change-due").innerText = `Status: OPEN ${changeArray.map(arr => `${arr[0]}: $${arr[1]}`).join(' ')}`;
});

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36

Challenge Information:

Build a Cash Register Project - Build a Cash Register

2

“I have everything correct” is usually not a fruitful approach to debugging. Can you say what steps you’ve taken to verify that your output is correct for that test case?

3

All the other requests are marked correct and the app works correctly. Only the last one has not passed. I am sorry if I cant explain more specifically I am new at this thing. And thank you for your time I really appriciate it.

4

Have you tried anything to specifically investigate why this test has been failing? Have you manually run an example where

5

Thank you I did as you said tried to test this manually and found the solution thank you so so much :folded_hands:

1 Like