Build a Cash Register Project - Build a Cash Register

JavaScript
1

: Required output met but program still fails

I can’t seem to pass user story 6, 7, and 10, despite meeting the required output for said user stories. Can anyone provide some insight as to why? My current guess is that it could be a styling issue with the text. I haven’t started styling yet since I wanted to finish the logic part work first. Please and thank you.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="Build a Cash Register Project" />
        <title>Build a Cash Register Project</title>
        <link rel="stylesheet" href="./styles.css" />
    </head>
    <body>
        <header>
            <h1>Cash Register Project</h1>
        </header>
        <main>
                <div id="change-due"></div>
                <label for="cash">Enter cash from customer:</label>
                <input id="cash" type="number"/>
                
                <button id="purchase-btn" type="button" value>Purchase</button>
                <div id="cash-drawer"></div>
        </main>
        <script src="./script.js"></script>
    </body>
</html>

/* file: styles.css */


/* file: script.js */
const cashInput = document.getElementById("cash");
const changeDueText = document.getElementById("change-due");
const purchaseBtn = document.getElementById("purchase-btn");
const cashDrawerText = document.getElementById("cash-drawer");

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 denominationValues = {
    PENNY: 0.01,
    NICKEL: 0.05,
    DIME: 0.10,
    QUARTER: 0.25,
    ONE: 1,
    FIVE: 5,
    TEN: 10,
    TWENTY: 20,
    "ONE HUNDRED": 100
}

const cidReverse = cid.reverse();

const filterInput = (cashString) => cashString.match(/^\d+\.?\d*/g);

const getCID = () => parseFloat(cidReverse.reduce((accumulator, currVal) => accumulator + currVal[1], 0));

const updatechangeDueText = (customerChange) => {
    
    let text = `Status: ${getCID() ? "OPEN" : "CLOSED"}`;

    for(const prop in customerChange) {
        text += ` ${prop}: $${customerChange[prop]}`;
    }

    return text;
};


const processPayment = () => {
    const isValidString = filterInput(cashInput.value);

    if(!isValidString) {
        return;
    }

    const cash = parseFloat(cashInput.value);
    let changeDue = cash - price;

    if(cash < price) {
        alert("Customer does not have enough money to purchase the item");
        cashInput.value = "";
        return;
    } 
    
    else if(cash === price) {
        changeDueText.textContent = "No change due - customer paid with exact cash";
        cashInput.value = "";
        return;
    }

    const customerChange = {};

    for(const denomination of cidReverse) {
        while(changeDue >= denominationValues[denomination[0]] && denomination[1] >= denominationValues[denomination[0]]) {
            changeDue = parseFloat((changeDue - denominationValues[denomination[0]]).toFixed(2));
            denomination[1] = parseFloat((denomination[1] - denominationValues[denomination[0]]).toFixed(2));
            customerChange[denomination[0]] = customerChange[denomination[0]] ? parseFloat((parseFloat(customerChange[denomination[0]]) + denominationValues[denomination[0]]).toFixed(2)) : denominationValues[denomination[0]];
        }
        
    }
    
    changeDueText.textContent = changeDue ? "Status: INSUFFICIENT_FUNDS" : updatechangeDueText(customerChange);
    
    cashInput.value = "";
    return;
};

purchaseBtn.addEventListener("click", processPayment);
cashInput.addEventListener("keydown", (event) => {
    if(event.key === "Enter") {
        processPayment();
    }
})

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36

Challenge Information:

Build a Cash Register Project - Build a Cash Register

3

don’t do things in the global scope, the tests change the cid and price, so you need all the code based on those to execute when the button is clicked

1 Like
4

Hi, I appreciate the prompt response. For clarification, are you referring to the global reverse array I set up or does it include my functions as well? I assumed the tests were ran separately like refreshing the site with new values per case.

5

Code runs one time after that only events and function calls can run or re-run code. Users do not refresh pages between runs.

Say it was a calculator, you wouldn’t expect the user to refresh the page between calculations.

The setup for this challenge is a bit odd and it seems to be confusing people.

2 Likes
6

After your response, I immediately understood what you meant and proceeded to change the scope of my variables, realizing now how the tests are implemented is very helpful. Everything works as intended now, thank you.

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.