Build a Cash Register Project - Build a Cash Register

Tell us what’s happening:

Hi everyone,
My code seems to be working but for some reason I cannot pass this challenge. Am I going wrong about the logic? Or is there an error that i cannot see? Or maybe both haha. Any help is welcome. Thanks :slight_smile:

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">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="styles.css">
    <title>Cash Register</title>
</head>
</head>
<body>
    <div class="container-fluid main-container text-center">
        <h1 class="text-primary">Cash Register</h1>
        <div class="main-container">
            <label for="cash"><span class="fs-3">Input here the amount received</span></label><br>
            <input type="number" id="cash" class="form-control">
            <div class="fs-5" id="change-due"></div>
            <button class="btn btn-primary" id="purchase-btn">Purchase</button>
            <h4 id="status">Status: OPEN</h4>
            <div class="row">
                <!-- Cash-in-drawer Column -->
                <div class="col-md-6">
                    <span class="text-center"><h3>Cash-in-drawer</h3></span>
                    <div id="cid"></div>
                </div>
                <!-- Cash-Out Column -->
                <div class="col-md-6">
                    <div id="cod">
                        <h4 id="cod-header">Cash Out</h4>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="script.js"></script>
</body>
</html>
/* file: script.js */
const cash = document.getElementById("cash");  
const purchaseBtn = document.getElementById("purchase-btn");
const changeDueContainer = document.getElementById("change-due");
const cidContainer = document.getElementById("cid");
const codContainer = document.getElementById("cod");
const codHeader = document.getElementById("cod-header");
const cidStatusDom = document.getElementById("status");

let price = 5.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 isCashEnough = () => {
    const cashFixed = cash.value; 
    const priceFixed = price;
    if (Number(cashFixed) === Number(priceFixed)) {
        alert("No change due - customer paid with exact cash");
        return true; 
    } else if (Number(cashFixed) > Number(priceFixed)) {
        return true;
    } else {
        alert("Customer does not have enough money to purchase the item");
        return false;
    }
};

const changeDue = (cash, price) => parseFloat((cash.value - price).toFixed(2));

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

const breakChange = () => { 
    let change = changeDue(cash, price);
    let subtrahends = [];
    const tempCid = cid.map(([denomination, amount]) => [denomination, amount]); // Copy of cid
    
    convertMap.forEach(money => {
        let denomAmount = tempCid.find(([denom]) => denom === money.string)[1];
        
        
        while (change >= money.value && denomAmount > 0) {
            subtrahends.push({key: money.string, value: money.value});
            change = parseFloat((change -= money.value).toFixed(2));
            denomAmount = parseFloat((denomAmount -= money.value).toFixed(2));
        }
    }); 
    
    if (change > 0) {
        alert("Status: INSUFFICIENT_FUNDS");
        return []; // Return an empty array to indicate failure
    }
    
    return subtrahends;   
};

const updateCid = () => {
    const subtrahends = breakChange();
    let cidStatus = "Status: OPEN";

    if (subtrahends.length === 0) {
        cidStatus = "Status: INSUFFICIENT_FUNDS";
        cidStatusDom.innerText = cidStatus;
        return cid; // Stop updating cid
    }

    subtrahends.forEach(subtrahend => {
        const moneyDrawer = cid.find(money => money[0] === subtrahend.key);

        if (moneyDrawer && moneyDrawer[1] >= subtrahend.value) {
            moneyDrawer[1] = parseFloat((moneyDrawer[1] - subtrahend.value).toFixed(2));
            cidStatus = "Status: OPEN";
        }
    });
    
    cidStatusDom.innerText = cidStatus;
    return cid;
};

const displayCid = () => {
    const updatedCid = updateCid();
    cidContainer.innerHTML = '';  
    updatedCid.forEach(array => {      
        cidContainer.innerHTML += `${array[0]} : ${array[1].toFixed(2)}<br>`;         
    });
    };

displayCid();

purchaseBtn.addEventListener("click", () => {
    changeDueContainer.innerHTML = "";
    codContainer.innerHTML = "";
    cidContainer.innerHTML = "";

    if (isCashEnough()) {
        const change = changeDue(cash, price);
        const givenCash = parseFloat(cash.value).toFixed(2);
        const subtrahends = breakChange();
        const repeatedSubtrahends = {};

        subtrahends.map(subtrahend => {
            if (repeatedSubtrahends[subtrahend.key]) {
                repeatedSubtrahends[subtrahend.key] += subtrahend.value;
            } else {
                repeatedSubtrahends[subtrahend.key] = subtrahend.value;
            }
        });

        console.log(repeatedSubtrahends);

        changeDueContainer.innerHTML = `
        Cash: <span class="positive">$ ${givenCash}</span><br>
        Price: <span class="negative">$ ${price.toFixed(2)}</span><br>
        <span class="fw-bold">Change: <span class="positive">$ ${change}</span></span>
        `;
        codContainer.innerHTML = `
        <h4 class="text-center"><span class="negative">Cash-Out</span></h4>
        `;
        for (const [key, value] of Object.entries(repeatedSubtrahends)) {
            codContainer.innerHTML += `
            <p class="text-center fs-6">${key}<br><span class="negative">-${value.toFixed(2)}</span></p>`;
        }
        
        displayCid();
        cash.value = "";
        
        /*-------------------- jQuery styling------------------------------*/
        $(".positive").css("color", "green"); 
        $(".negative").css("color", "red");
        /*-------------------- jQuery styling------------------------------*/ 
    } else {
        displayCid();
        cash.value = "";
    }
});
/* file: styles.css */
#cid {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.main-container * {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

#purchase-btn {
    border-radius: 5%;
}

#cash {
    width: 200px;
    
}

Your browser information:

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

Challenge Information:

Build a Cash Register Project - Build a Cash Register

hi there,

this is a lovely looking app if I may first start by saying that.

The problem (at least initially) is that it is such a lovely app that it has ignored some of the requirements of the project! :slight_smile:

For eg. the first failing testcase says this:

When price is 19.5 , the value in the #cash element is 20 , cid is [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]] , and the #purchase-btn element is clicked, the value in the #change-due element should be "Status: OPEN QUARTER: $0.5" .

When we try this testcase manually and inspect the resulting html to check the #change-due element we see this:

       <div class="fs-5" id="change-due">
        Cash: <span class="positive" style="color: green;">$ 20.00</span><br>
        Price: <span class="negative" style="color: red;">$ 19.50</span><br>
        <span class="fw-bold">Change: <span class="positive" style="color: green;">$ 0.5</span></span>
        </div>

Obviously then the value in #change-due is NOT equal to Status: OPEN QUARTER: $0.5
More like it is equal to : Cash: $20.00 Price: $19.50 Change: $0.5

So hopefully you can see that you will need to re-do this aspect and work on meeting the specific requirements of the testcases.

1 Like

Thanks!!! I got it! You are right i focused on making the app look nice and functional but forgot about following specifically the test requirements. blush:

1 Like