Tell us what’s happening:
I dont understand how the program should work. On the user stories, on number 6 it says if the price is 19.5 and the value in the cash element is 20 the cid wont change.
On number 8 it says if the price is 19.5 and the value in the cash element is 20 the cid should change in what it says on the user stories.
Also on number 9 and 10 the price is the same and the value in the cash element is the same but the results are supposed to be different. Maybe i missed something but its confusing me.
Can someone explain me how i should calculate the change when the cash element value is larger than price. Also should cid change when the user pays or should it stay the same?
Your code so far
/* file: index.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">
<link rel="stylesheet" href="styles.css">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
</head>
<body>
<div id="container">
<h1 id="title">Cash Register</h1>
<label id="input-text">Enter amount</label>
<input id="cash" type="number">
<button id="purchase-btn">Purchase</button>
<div id="change-due">
</div>
<div id="break"></div>
<div id="cash-in-drawer">
</div>
</div>
<script src="script.js"></script>
</body>
</html>
/* file: script.js */
let cash = document.getElementById("cash");
let btn = document.getElementById("purchase-btn");
let change = document.getElementById("change-due");
let drawer = document.getElementById("cash-in-drawer");
let price = 1.87;
let cid = [
// 101
['PENNY', 1.01],
// 41
['NICKEL', 2.05],
// 31
['DIME', 3.1],
// 17
['QUARTER', 4.25],
// 90
['ONE', 90],
// 11
['FIVE', 55],
// 2
['TEN', 20],
// 3
['TWENTY', 60],
// 1
['ONE HUNDRED', 100]
];
function displayDrawer() {
for(let i = 0; i < cid.length; i++) {
let el = document.createElement('p');
el.textContent = `${cid[i][0]}: ${cid[i][1]}`;
drawer.appendChild(el)
}
}
btn.addEventListener("click", () => {
if(cash.value < price){
alert("Customer does not have enough money to purchase the item");
}else if(cash.value == price) {
change.textContent = "No change due - customer paid with exact cash";
cash.value = "";
}else if(cash.value > price) {
for(let i = cid.length; i >= 0; i--){
for(let j = 0; j < 2; j++){
}
}
}
})
displayDrawer();
/* file: styles.css */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
body {
background-color: #222831;
display: flex;
flex-direction: row;
justify-content: center;
align-content: center;
flex-wrap: wrap;
}
#container {
display: flex;
flex-direction: column;
align-items: center;
}
#title {
color: #EEEEEE;
font-family: Poppins;
font-size: 36px;
transition: 0.3s;
}
#input-text {
color: white;
font-family: Poppins;
font-size: 18px;
transition: 0.3s;
}
#cash {
background-color: #EEEEEE;
border: none;
width: 230px;
height: 48px;
border-radius: 13px;
margin: 10px 0 10px 0;
font-size: 20px;
text-align: center;
font-family: Poppins;
color: #393E46;
font-weight: 550 ;
transition: 0.3s;
}
#purchase-btn {
background-color: #EEEEEE;
border: none;
height: 25px;
width: 100px;
border-radius: 5px;
margin: 10px 0 10px 0;
font-family: Poppins;
font-weight: bold;
transition: 0.3s;
}
#change-due {
font-family: Poppins;
color: #EEEEEE;
font-size: 16px;
}
#break {
width: 340px;
height: 3px;
background-color: #EEEEEE;
border-radius: 25px;
margin: 20px 0 20px 0;
transition: 0.3s;
}
#cash-in-drawer {
display: flex;
flex-wrap: nowrap;
align-items: center;
flex-direction: column;
}
#cash-in-drawer > p {
color: white;
font-family: Poppins;
margin: 2px;
}
/* Responsive */
#cash:hover, #cash:focus {
border-radius: 30px;
outline: none;
}
#purchase-btn:hover {
background-color: #393E46;
border-radius: 13px;
color: white;
}
#break {
width: 340px;
height: 3px;
background-color: #EEEEEE;
border-radius: 25px;
margin: 20px 0 20px 0;
transition: 0.3s;
}
@media screen and (max-width: 355px) {
#title {
font-size: 30px;
}
#input-text {
font-size: 16px;
}
#cash {
width: 210px;
height: 44px;
}
#purchase-btn {
height: 23px;
width: 95px;
font-size: 12.5px
}
#break {
width: 280px;
height: 3px;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36
Challenge Information:
Build a Cash Register Project - Build a Cash Register
