Build a Cash Register Project - Build a Cash Register

Tell us what’s happening:

My screen output is same as in test but the test aren’t accepting it as correct

Your code so far

const customerCash = document.getElementById("cash");
const result = document.getElementById("change-due");
const changeAmount = document.getElementById("change-value");
const purchaseBtn = document.getElementById("purchase-btn");

let cid =[
    ["PENNY", 0.5],
    ["NICKEL", 0],
    ["DIME", 0],
    ["QUARTER", 0],
    ["ONE", 0],
    ["FIVE", 0],
    ["TEN", 0],
    ["TWENTY", 0],
    ["ONE HUNDRED", 0]]

const values = [100, 20, 10, 5, 1, 0.25, 0.1, 0.05, 0.01];
const price = 19.5;
cid.reverse().forEach((item) => { changeAmount.innerHTML += `<p id="${item[0]}" class="changes" >${item[0]}: $${item[1]}
</p>`})
const checkStatus = () => {
    let money = parseFloat(customerCash.value);
    let amount = parseFloat(cid.reduce((total, item) => total + parseFloat(item[1]), 0).toFixed(2));

    if (money < price) {
        alert("Customer does not have enough money to purchase the item");
    } else if (money === price) {
        result.innerText = "No change due - customer paid with exact cash";
    }
    else if(checkSufficient(money) === 0){
        result.innerText = "Status: INSUFFICIENT_FUNDS";
    }
    else if ((amount - ((money-price).toFixed(2))) === 0 || amount === 0) {
        result.innerText = "Status: CLOSED";
        let change = (money - price).toFixed(2);
        let startPoint = startingValue(change);
        calcChange(startPoint, change);
    } else {
        result.innerText = "Status: OPEN ";
        let change = (money - price).toFixed(2);
        let startPoint = startingValue(change);
        calcChange(startPoint, change);
    }
    console.log(result.innerText) 
};
const calcChangeAvailable = (amountAvailable) => {
    return amountAvailable.reduce((total, item) => total + parseFloat(item[1]), 0);
};
const startingValue = (total) => {
    for (let i = 0; i < values.length; i++) {
        if (total >= values[i]) return i;
    }
};

const calcChange = (start, change) => {
    let counter = 0;
    const ci = cid;
    for (let i = start; i < values.length; i++) {
        while (change >= values[i] && (counter + 1) * values[i] <= ci[i][1]) {
            change = (change - values[i]).toFixed(2);
            counter++;
        }
        if (change >= 0 && counter > 0) {
            result.innerText += `${ci[i][0]}: $${counter * values[i]}\n`;
            ci[i][1] = (ci[i][1] - counter * values[i]).toFixed(2);
            update(ci);
        }
        counter = 0;
    }
};
 const checkSufficient = (money) => {
    let counter = 0;
    let ci = cid;
    let change = (money - price).toFixed(2);
    for(let i=0;i< values.length; i++){
        while (change >= values[i] && (counter + 1) * values[i] <= ci[i][1]) {
            change = (change - values[i]).toFixed(2);
            counter ++;
        }
    }
    return counter-1;
 }
const update = (ci) => {
    changeAmount.innerHTML = '<p><b>Change in drawer:<b></p>';
    ci.forEach((item) => {
        changeAmount.innerHTML += `<p id="${item[0]}" class="changes" >${item[0]} $${item[1]}</p>`;
    });
};
purchaseBtn.addEventListener("click", checkStatus);

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

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

When running tests, there’s a couple errors displayed in console. Have you seen them?

I haven’t seen any error’s appear when I run the program. Would you mind sending a screenshot? Thanks in advance.

Please also provide your HTML.

<!DOCTYPE html>
<html lang = "en">
<head>
<title>Cash Register</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main>
<h2>Cash Register project</h2>
<div class="input-el">
    <div id="change-due">
    <p id="change-due" ></p>
    </div>
    <h3>Enter cash from customer</h3>
    <input type="number" id="cash" />
    <button id="purchase-btn">Purchase</button>
</div>
<div class="total">
<p>Total: $3.26</p>
</div>
<div class="connector"></div>
<div class="cash-register" id="cash-register">
<div class="buttons">
 <ul>
    <li></li>
    <li></li>
    <li></li>
 </ul>
 <ul>
    <li></li>
    <li></li>
    <li></li>
 </ul>
 <ul>
    <li></li>
    <li></li>
    <li></li>
 </ul>
</div>
<div id="change-value">
    <p><b>Change in drawer: </b></p>
</div>
</div>
<div class="bottom">
    <div class="circle"></div>
</div>
</main>
</body>
<script src="./script.js"></script>
</html>

I’m aware that I need to update the ‘total’ to display the variable price instead of the fixed $3.26, but I haven’t gotten around to making those changes yet.

Status: OPENQUARTER: $0.5

isn’t

Status: OPEN QUARTER: $0.5

image
This is how I see output so I’ll check what you mean. Thank you for your time.

image

For some reason i see it as in my previous screenshot.
Even when i do it like this result.innerText = "Status: OPEN\u00A0"; it’s still the same even though It looks good on my end

You should be adding zero special characters or newlines

Your values and cid are ordered opposite of each other.

The main problem was the display of ‘Change in drawer’. Reversing the displayed value fixed that issue, but it created new ones, which were later resolved.

Thanks for the help and your time. I managed to fix the issue. Hope you have a great day

1 Like