Tell us what’s happening:
Copy pasted from visual studio code. Works fine there but javascript not running in here.
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();
});
type or paste code here
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 (X11; CrOS x86_64 13729.45.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.82 Safari/537.36
Challenge Information:
Build a Cash Register Project - Build a Cash Register