<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link ref="stylesheet" href="styles.css">
</head>
<body>
<!--Heading-->
<h1 id="title">Cash Register Project</h1>
<!--Change-->
<div id="change-due">change due</div>
<!--Input-->
<section id="input">
<p>Enter Cash From Customer</p>
<input type="number" id="cash">
<button id="purchase-btn">Purchase</button>
</section>
<!--Register-->
<section id="register">
<div id="total">total</div>
<div id="cash-in-drawer"></div>
</section>
<script src="script.js"></script>
</body>
</html>
let price = 19.5;
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]
];
//creating money objects
const money = [
{
name : "PENNY",
value : 0.01,
amount : cid[0][1]
},
{
name : "NICKEL",
value : 0.05,
amount : cid[1][1],
},
{
name : "DIME",
value : 0.1,
amount : cid[2][1],
},
{
name : "QUARTER",
value : 0.25,
amount : cid[3][1],
},
{
name : "ONE",
value : 1,
amount : cid[4][1],
},
{
name : "FIVE",
value : 5,
amount : cid[5][1],
},
{
name : "TEN",
value : 10,
amount : cid[6][1],
},
{
name : "TWENTY",
value : 20,
amount : cid[7][1],
},
{
name : "ONE HUNDRED",
value : 100,
amount : cid[8][1],
}
]
const string = () =>{
let diff
let string = "Status: OPEN"
for (let i=8;i>=0;i--){
diff = cid[i][1] - money[i].amount
if (diff > 0){
string += " "+cid[i][0]+": $"+parseFloat(diff.toFixed(2))
}
}
return string
}
const stringC = () =>{
let diff
let string = "Status: CLOSED"
for (let i=8;i>=0;i--){
diff = cid[i][1] - money[i].amount
if (diff > 0){
string += " "+cid[i][0]+": $"+parseFloat(diff.toFixed(2))
}
}
return string
}
const update = () =>{
for (let i=0;i<=8;i++){
cid[i][1] = money[i].amount
}
}
// declaring html elements
let purchaseBtn = document.getElementById("purchase-btn")
let changeTxt = document.getElementById("change-due")
let input = document.getElementById("cash")
let register = document.getElementById("cash-in-drawer")
let total = document.getElementById("total")
//setting the price
total.textContent = "Total: $"+price
//button click
purchaseBtn.addEventListener('click',()=>{
let index=-1
let value=0
let cash = parseFloat(input.value)
let changeDue = parseFloat((cash - price).toFixed(2))
let text = ""
//checking if change can be added up
const sum = () => {
let add=0
for (let i=8;i>=0;i -= 1){
if (index < 0){
if (money[i].value < changeDue){
index = i
}
}
}
for (let i=index;i>=0;i--){
add += money[i].amount
}
return add
}
//if user inserted an iput value
if (cash){
if (cash < price){
alert("Customer does not have enough money to purchase the item")
}else if(cash === price){
changeTxt.textContent = "No change due - customer paid with exact cash"
}else{
update()
if(sum() >= changeDue){
if (sum() === changeDue){
while (value < changeDue){
for (let i=index;i>=0;i--){
let avail = 0
let difference = parseFloat((changeDue - value).toFixed(2))
while (money[i].value <= difference && difference > 0 && money[i].amount > 0){
money[i].amount -= money[i].value
value += money[i].value
avail += money[i].value
difference = parseFloat((changeDue - value).toFixed(2))
}
if (avail > 0){
changeTxt.textContent += "\n"+money[i].name+": $"+avail
}
if (money[0].amount === 0){
value = changeDue + 1
}
}
}
changeTxt.textContent = stringC()
}else{
changeTxt.textContent = "Status: OPEN "
while (value < changeDue){
for (let i=index;i>=0;i--){
let avail = 0
let difference = parseFloat((changeDue - value).toFixed(2))
while (money[i].value <= difference && difference > 0 && money[i].amount > 0){
money[i].amount -= money[i].value
value += money[i].value
avail += money[i].value
difference = parseFloat((changeDue - value).toFixed(2))
}
if (avail > 0){
changeTxt.textContent += "\n"+money[i].name+": $"+avail
}
if (money[0].amount === 0){
value = changeDue + 1
}
}
}
if (parseFloat((value).toFixed(2)) === parseFloat((changeDue).toFixed(2))){
changeTxt.textContent = string()
}else{
changeTxt.textContent = "Status: INSUFFICIENT_FUNDS"
}
}
}else{
changeTxt.textContent = "Status: INSUFFICIENT_FUNDS"
}
}
//if user did not insert an input value
}else{
alert("Please insert a cash amount")
}
})
i apologise for the messy code, it’s cause i have been trying to make it pass the test so i messed it up in the process