Build a Cash Register Project - Build a Cash Register

jonathanchngyk · April 19, 2024, 2:22pm

Tell us what’s happening:

Hi! I cant seem to get my code working (last 2 tests).

If I pass in the code with my own code amended to the values of 20 for the price and the same cid provided (as per the last two tests), the test passes but i fail the other cases.

Similarly, when i use the price and CID from the other test cases, I pass those cases, but I fail the last two cases.

Could anybody help with this?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>My Cash Register</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Welcome to my Cash Register</h1>

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

    <div id="cash-given">
        <label for="cash">Enter cash from customer:</label>
        <input type="float" id="cash">
        <button type="submit" id="purchase-btn">Purchase</button>
    </div>

    <div id="cash-register">
        <div id="price">
        </div>
        <div id="random-block"></div>
        <div id="main-block">
            <div id="grid">
                <div class="grid-item"></div>
                <div class="grid-item"></div>
                <div class="grid-item"></div>
                <div class="grid-item"></div>
                <div class="grid-item"></div>
                <div class="grid-item"></div>
                <div class="grid-item"></div>
                <div class="grid-item"></div>
                <div class="grid-item"></div>
            </div>
            <div id="cash-in-drawer">
                <p class="change-left"><strong>Change in drawer:</strong></Change></p>
            </div>
        </div>
    </div>




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

/* file: styles.css */
body {
    background-color: #0a0a23;
    color: white;
}


h1 {
    text-align: center;
    margin-top: 50px;
}

.statuses {
    margin: 0 auto;
    width: 300px;
    max-height: 300px;
    
    text-align: left;
    margin-bottom: 2rem;
}

.statuses p {
    margin: 0;
}

#cash-given {
    
    max-width: 300px;
    text-align: center;
    margin: 0 auto;
    
}

#cash-given input {
    margin-top: 10px;
    width: 80%;
    margin-bottom: 10px;
    font-size: 1.5rem;
    text-align: center;
}

#cash-given button {
    background-color: orange;
    font-size: 1rem;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    padding: 5px;
}

#cash-register {
    background-color: #0a0a23;
    max-width: 400px;
    margin: 50px auto;
    max-height: 600px;
    overflow-x: hidden;
    
}

#price { 
    color: white;
    height: 30px;
    width: 100px;
    text-align: center;
    margin: auto;
    border: 10px solid lightblue;
    padding: 5px;
}

#price p {
    font-size: 1.1rem;
    margin-top: 5px;
}

#random-block {
    background-color: lightblue;
    width: 30px;
    height: 30px;
    margin: auto;
}

#main-block {
    background-color: lightblue;
    height: 300px;
    border-radius: 20px 20px 0 0;
    padding-bottom: 10px;
    
}

#main-block #grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Three columns with equal width */
    grid-gap: 5px; /* Gap between grid items */
    max-width: 50px; /* Optional: Adjust width as needed */
    padding-top: 30px;
    padding-left: 32px;
}

.grid-item {
    background-color: darkgray; /* Background color of grid items */
    padding: 20px; /* Optional: Adjust padding as needed */
}

#cash-in-drawer {
    background-color: white;;
    width: 47%;
    position: relative;
    left: 50%;
    bottom: 47%;
    max-height: 85%;
    color: black;
    padding-top: 5px;
    padding-bottom: 5px;
}

#cash-in-drawer p {
    padding-left: 3px;
    color: black;
    line-height: 0.5;
}

/* file: script.js */
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]];

let countOfChange = {};

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

cid.forEach(item => {
    countOfChange[item[0]] = Math.round(item[1] / values[item[0]]);
});

const priceTag = document.getElementById('price');
priceTag.innerHTML = `<p>Total: $${price}</p>`;


const receivedCash = document.getElementById('cash');
const calculateChange = document.getElementById('purchase-btn');
const statusOfRegister = document.getElementById('change-due');

const populateCID = () => {
    const cidTag = document.getElementById('cash-in-drawer');
    cidTag.innerHTML = "";
    
    cid.forEach((item) => {
        const div = document.createElement('div');
        div.innerHTML = `<p>${item[0]}: $${item[1].toFixed(2)}</p>`;
        cidTag.appendChild(div);
    });

};

const update = () => {
    receivedCash.value = "";
    populateCID(); 
}

populateCID();

const purchase = () => {
    let change = receivedCash.value - price;

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


    let changeAvailable = cid.reduce((total, item) => total + item[1], 0).toFixed(2);
    console.log(changeAvailable)
    statusOfRegister.innerHTML = "";

    if (change === 0) {
        let para = document.createElement("p");
        para.innerText = "No change due - customer paid with exact cash";
        
        statusOfRegister.append(para);
        update();
        return;
    }

    if (changeAvailable < change) {
        let para = document.createElement("p");
        para.innerText = "Status: INSUFFICIENT_FUNDS";
        statusOfRegister.appendChild(para);
        update();
        return

    } else if (changeAvailable === change) {
        let para = document.createElement("p");
        para.innerText = "Status: CLOSED";
        statusOfRegister.appendChild(para);
        update();
        return
    }

    
    const calculate = (remainingChange) => {

        if (remainingChange >= 100 && countOfChange["ONE HUNDRED"] !== 0) {
            if (Math.floor(remainingChange/100 > countOfChange["ONE HUNDRED"])) {
            changeToReturn["ONE HUNDRED"] = countOfChange["ONE HUNDRED"];
            remainingChange = remainingChange - (countOfChange["ONE HUNDRED"] * 100);
            countOfChange["ONE HUNDRED"] = 0;
            } else {
            countOfChange["ONE HUNDRED"] -= Math.floor(remainingChange / 100);
            changeToReturn["ONE HUNDRED"] = Math.floor(remainingChange / 100);
            remainingChange = remainingChange % 100;
            }
            calculate(remainingChange);
            return 
        }

        else if (remainingChange >= 20 && countOfChange["TWENTY"] !== 0) {
            if (Math.floor(remainingChange/20 > countOfChange["TWENTY"])) {
            changeToReturn["TWENTY"] = countOfChange["TWENTY"];
            remainingChange = remainingChange - (countOfChange["TWENTY"] * 20);
            countOfChange["TWENTY"] = 0;
            } else if (countOfChange["TWENTY"] !== 0){
            countOfChange["TWENTY"] -= Math.floor(remainingChange / 20);
            changeToReturn["TWENTY"] = Math.floor(remainingChange / 20);
            remainingChange = remainingChange % 20;
            }
            console.log(remainingChange.toFixed(2))
            calculate(remainingChange.toFixed(2));
            return 
        }

        else if (remainingChange >= 10 && countOfChange["TEN"] !== 0) {
            if (Math.floor(remainingChange/10 > countOfChange["TEN"])) {
            changeToReturn["TEN"] = countOfChange["TEN"];
            remainingChange = remainingChange - (countOfChange["TEN"] * 10);
            countOfChange["TEN"] = 0;
            console.log(remainingChange)
            } else {
            countOfChange["TEN"] -= Math.floor(remainingChange / 10);
            changeToReturn["TEN"] = Math.floor(remainingChange / 10);
            remainingChange = remainingChange % 10;
            console.log(remainingChange)
            }
            console.log(remainingChange)
            calculate(remainingChange.toFixed(2));
            return 
        }

        else if (remainingChange >= 5 && countOfChange["FIVE"] !== 0) {
            if (Math.floor(remainingChange/5 > countOfChange["FIVE"])) {
                changeToReturn["FIVE"] = countOfChange["FIVE"];
                remainingChange = remainingChange - (countOfChange["FIVE"] * 5);
                countOfChange["FIVE"] = 0;
            } else {
                countOfChange["FIVE"] -= Math.floor(remainingChange / 5);
                changeToReturn["FIVE"] = Math.floor(remainingChange / 5);
                remainingChange = remainingChange % 5;}
                console.log(remainingChange)
            calculate(remainingChange.toFixed(2));
            return 
        }

        if (remainingChange >= 1 && countOfChange["ONE"] !== 0) {
            if (Math.floor(remainingChange/1 > countOfChange["ONE"])) {
                changeToReturn["ONE"] = countOfChange["ONE"];
                remainingChange = remainingChange - (countOfChange["ONE"] * 1);
                countOfChange["ONE"] = 0;
            } else {
                countOfChange["ONE"] -= Math.floor(remainingChange / 1);
                changeToReturn["ONE"] = Math.floor(remainingChange / 1);
                remainingChange = remainingChange % 1;
            }
            console.log(remainingChange)
            calculate(remainingChange.toFixed(2));
            return 
        }

        else if (remainingChange >= 0.25 && countOfChange["QUARTER"] !== 0) {
            if (Math.floor(remainingChange/0.25 > countOfChange["QUARTER"])) {
            changeToReturn["QUARTER"] = countOfChange["QUARTER"];
            remainingChange = remainingChange - (countOfChange["QUARTER"] * 0.25);
            countOfChange["QUARTER"] = 0;
            } else {
            countOfChange["QUARTER"] -= Math.floor(remainingChange / 0.25);
            changeToReturn["QUARTER"] = Math.floor(remainingChange / 0.25);
            remainingChange = remainingChange % 0.25;
            }
            console.log(remainingChange)
        calculate(remainingChange.toFixed(2));
        return 
        }

        else if (remainingChange >= 0.1 && countOfChange["DIME"] !== 0) {
            if (Math.floor(remainingChange/0.1 > countOfChange["DIME"])) {
            changeToReturn["DIME"] = countOfChange["DIME"];
            remainingChange = remainingChange - (countOfChange["DIME"] * 0.1);
            countOfChange["DIME"] = 0;
            } else {
            countOfChange["DIME"] -= Math.floor(remainingChange / 0.1);
            changeToReturn["DIME"] = Math.floor(remainingChange / 0.1);
            remainingChange = remainingChange % 0.1;
            }
            calculate(remainingChange.toFixed(2));
            return 
        }

        else if (remainingChange >= 0.05 && countOfChange["NICKEL"] !== 0){
            
                if (Math.floor(remainingChange/0.05 > countOfChange["NICKEL"])) {
                changeToReturn["NICKEL"] = countOfChange["NICKEL"];
                remainingChange = remainingChange - (countOfChange["NICKEL"] * 0.05);
                countOfChange["NICKEL"] = 0;
                } else {
                countOfChange["NICKEL"] -= Math.floor(remainingChange / 0.05);
                changeToReturn["NICKEL"] = Math.floor(remainingChange / 0.05);
                remainingChange = remainingChange % 0.05;
                }
                console.log(remainingChange)
                calculate(remainingChange);
                return 
            }
        

        else if (remainingChange >= 0.01 && countOfChange["PENNY"] !== 0) {
            if (Math.floor(remainingChange/0.01 > countOfChange["PENNY"]) && countOfChange["PENNY"] !== 0) {
            changeToReturn["PENNY"] = countOfChange["PENNY"];
            remainingChange = remainingChange - (countOfChange["PENNY"] * 0.01);
            countOfChange["PENNY"] = 0;
            } else {
            countOfChange["PENNY"] -= Math.floor(remainingChange / 0.01);
            changeToReturn["PENNY"] = Math.floor(remainingChange / 0.01);
            remainingChange = remainingChange % 0.01;
            }
            console.log(remainingChange)
            calculate(remainingChange.toFixed(2));
            return 
        }

        return 
    }
        let unsplicedChangeToReturn ={}
        let changeToReturn = {...unsplicedChangeToReturn};
        
        calculate(change);
        console.log(changeToReturn);

        
        let changeToReturnValue = 0;
        for (let [key, value] of Object.entries(changeToReturn)) {
            changeToReturnValue += value * values[key];
        }

        if (changeToReturnValue.toFixed(2) - change === 0){
        console.log("OK")
        unsplicedChangeToReturn = changeToReturn
        cid = Object.entries(countOfChange).map(([key, value]) => [key, value * values[key]]);

        

        statusOfRegister.innerHTML = "";
        
        const allValuesZero = cid.every(item => item[1] === 0);
        if (allValuesZero) {
            let para = document.createElement("p");

            para.innerText = "Status: CLOSED ";
            statusOfRegister.appendChild(para);
            update(); }
        else { 
        let para = document.createElement("p");
        para.innerText = "Status: OPEN ";
        statusOfRegister.appendChild(para);}

        for (let key in changeToReturn) {
            if (changeToReturn[key] !== 0) {
                statusOfRegister.innerHTML += `<p>${key}: $${(changeToReturn[key] * values[key])}</p>`;
            
            }
        }
        update();
        } else {
            
            let para = document.createElement("p");
            para.innerText = "Status: INSUFFICIENT_FUNDS";
            statusOfRegister.appendChild(para);
            update();
            return
        }
        
        
    }




calculateChange.addEventListener('click', purchase);

Your browser information:

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

Challenge Information:

Build a Cash Register Project - Build a Cash Register

robheyays · April 19, 2024, 3:05pm

Hello, on your project page use the inspector to check your code it is giving a lot of errors but also some feed back.
I ran the code on code pen [Change] in HTML must be lower case.
In CSS you have a line with two semicolons.

kingusang09 · April 19, 2024, 3:28pm

Please be specific about the problem you are facing so we can help further.

jonathanchngyk · April 19, 2024, 4:06pm

Hi all! have managed to solve it. changed some of the let/const statements and also cleaned up the code.

Topic		Replies	Views
Build a Cash Register Project JavaScript	6	233	December 12, 2024
Build a Cash Register Project - Build a Cash Register JavaScript	3	85	January 8, 2025
Build a Cash Register Project - Build a Cash Register JavaScript	33	416	December 27, 2025
Build a Cash Register Project - Build a Cash Register JavaScript	7	131	January 8, 2025
Build a Cash Register Project - Build a Cash Register JavaScript	41	768	January 8, 2025

Build a Cash Register Project - Build a Cash Register

Tell us what’s happening:

Your code so far

Your browser information:

Challenge Information:

Related topics