Build a Cash Register Project - Build a Cash Register

Tell us what’s happening:

After doing it in visual studio code and then pasting it into here, my JS does not load for some reason, and I have no idea why. It works perfectly fine in VSC. I had the same problem with other projects but it fixed when I removed "defer"attribute and added the script line to the end.

I apologise if you’ve noticed that I’ve made several of the same posts, but there were issues that made it unable for others to help, but I could not find a way to edit/delete my post.

Your code so far

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Document</title>
</head>
<body>
    <div id="container">
        <h1>Cash Register Project</h1>
        <div id="change-due"></div>
        <input id="cash">
        <label for="purchase-btn">Enter cash from customer:</label>
        <button id="purchase-btn">Purchase</button>
        <h4>Total: <span id="total-price"></span></h4>
        <h3>Change in drawer:</h3>
        <div id="change-in-drawer"></div>
    </div>
</body>
</html>
<script src="script.js"></script>
body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
#container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
button{
    cursor: pointer;
}
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 price = 3.5
const cash = document.getElementById("cash")
let status = "OPEN"
const totalPrice = document.getElementById("total-price")
const button = document.getElementById("purchase-btn")
const changeDue = document.getElementById("change-due")
const changeInDrawer = document.getElementById("change-in-drawer")
totalPrice.textContent = price
let change
let isDrawerEmpty = 0
let changeAvailable
let statusDisplay

const changeDueObj = {
    HUNDRED: 0,
    TWENTY: 0,
    TEN: 0,
    FIVE: 0,
    ONE: 0,
    QUARTER: 0,
    DIME: 0,
    NICKEL: 0,
    PENNY: 0,
}

const updateStatusFunction = () =>{
    statusDisplay = document.createElement("p")
    statusDisplay.textContent = `Status: ${status}`
    changeDue.appendChild(statusDisplay)
}

updateChangeDisplay = () =>{
    let objKeys = Object.keys(changeDueObj)
    objKeys.forEach((key)=>{
        if (changeDueObj[key] !== 0){
            let changeDisplay = document.createElement("p")
            changeDisplay.textContent = `${key}: $${changeDueObj[key]}`
            changeDue.appendChild(changeDisplay)
        }
    })
}

const updateStatus = () =>{
        change = Number(cash.value) - price; 
        changeAvailable = cid.map(item => item[1]);
        totalChange = changeAvailable.reduce((total, change)=>total+change, 0)
        if(totalChange === change){
            status = "CLOSED"
            updateStatusFunction()
            updateChangeDue()
        } else if(totalChange < change){
            status = "INSUFFICIENT_FUNDS"
            changeDue.innerHTML = ""
            updateStatusFunction()
            
        } else{
            status = "OPEN"
            updateStatusFunction()
            updateChangeDue()
        }
        
    }
const updateChangeDue = () =>{  
    if (change >= 100 && cid[8][1] > 0){
        while (change >= 100 && cid[8][1] > 0){
            change-=100
            cid[8][1]-=100
            changeDueObj.HUNDRED ? changeDueObj.HUNDRED+=100 : changeDueObj.HUNDRED = 100
        }
    }
    if (change >= 20 && cid[7][1] > 0){
        while (change >= 20 && cid[7][1] > 0){
            change-=20
            cid[7][1]-=20
            changeDueObj.TWENTY ? changeDueObj.TWENTY+=20 : changeDueObj.TWENTY = 20
        }
    }
    if (change >= 10 && cid[6][1] > 0){
        while (change >= 10 && cid[6][1] > 0){
            change-=10
            cid[6][1]-=10
            changeDueObj.TEN ? changeDueObj.TEN+=10 : changeDueObj.TEN = 10
        }
    }
    if (change >= 5 && cid[5][1] > 0){
        while (change >= 5 && cid[5][1] > 0){
            change-=5
            cid[5][1]-=5
            changeDueObj.FIVE ? changeDueObj.FIVE+=5 : changeDueObj.FIVE = 5
        }
    }
    if (change >= 1 && cid[4][1] > 0){
        while (change >= 1 && cid[4][1] > 0){
            change-=1
            cid[4][1]-=1
            changeDueObj.ONE ? changeDueObj.ONE++ : changeDueObj.ONE = 1
        }
    }
    if (change >= 0.25 && cid[3][1] > 0){
        while (change >= 0.25 && cid[3][1] > 0){
            change-=0.25
            cid[3][1]-=0.25
            changeDueObj.QUARTER ? changeDueObj.QUARTER+=0.25 : changeDueObj.QUARTER = 0.25
        }
    }
    if (change >= 0.1 && cid[2][1] > 0){
        while (change >= 0.1 && cid[2][1] > 0){
            change-=0.1
            cid[2][1]-=0.1
            changeDueObj.DIME ? changeDueObj.DIME+=0.1 : changeDueObj.DIME = 0.1
        }
    }
    if (change >= 0.05 && cid[1][1] > 0){
        while (change >= 0.05 && cid[1][1] > 0){
            change-=0.05
            cid[1][1]-=0.05
            changeDueObj.NICKEL ? changeDueObj.NICKEL+=0.05 : changeDueObj.NICKEL = 0.05
        }
    }
    if (change >= 0.01 && cid[0][1] > 0){
        while (change >= 0.01 && cid[0][1] > 0){
            change-=0.01
            cid[0][1]-=0.01
            changeDueObj.PENNY ? changeDueObj.PENNY+=0.01 : changeDueObj.PENNY = 0.01
        }
    }
    updateChangeDisplay()
}

const updateChangeInDrawer = () => {
    changeInDrawer.innerHTML=`
        <p>Pennies: $${Number(cid[0][1])}
        <p>Nickels: $${Number(cid[1][1])}
        <p>Dimes: $${Number(cid[2][1])}
        <p>Quarters: $${Number(cid[3][1])}
        <p>Ones: $${Number(cid[4][1])}
        <p>Fives: $${Number(cid[5][1])}
        <p>Tens: $${Number(cid[6][1])}
        <p>Twenties: $${Number(cid[7][1])}
        <p>Hundreds: $${Number(cid[8][1])}
    `
}

updateChangeInDrawer()

const changeUncertainty = () =>{
    if (cash.value == price){
        changeDue.innerHTML = "No change due - customer paid with exact cash"
    } else if (Number(cash.value) < Number(price)){
        alert("Customer does not have enough money to purchase the item")
    } else{
        updateStatus();
    }

}

button.addEventListener("click", () => {
    changeDue.innerHTML = ""
    change = Number(cash.value) - price; 
    changeUncertainty();
    updateChangeInDrawer();
});

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/120.0.0.0 Safari/537.36 Edg/120.0.0.0

Challenge Information:

Build a Cash Register Project - Build a Cash Register

Hello!

I noticed your JavaScript link is outside the body. It has to go in there to work.
Try and let me know if it that was it!

That wasn’t it, I actually figured it out. The problem was that I didn’t declare some functions, but it still worked in VS xd

1 Like