Build a Cash Register Project - Build a Cash Register

JavaScript
1

Tell us what’s happening:

Describe your issue in detail here.
is there any fomrula to do it ?

Your code so far

let price = 1.87;
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]
];

const cash = document.getElementById(“cash”);
const changeDue =document.getElementById(“change-due”);
const purchasebtn =document.getElementById(“purchase-btn”);

purchasebtn.addEventListener(‘click’,()=>{
if(cash.value < price){
alert(“Customer does not have enough money to purchase the item”)
}else if(price == cash.value)
{
changeDue.textContent=“No change due - customer paid with exact cash”;
}else {
}

});

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cash</title>
<link rel="stylesheet" href="./styles.css"></head>
<body>
<div class="header">
  <h1>Project</h1>
  <h3>Cash Register</h3>
</div>  
<div id="inputbtn">
  <p>Enter cash from customer</p>
  <input id="cash" type="number" placeholder="Cash">
  <div id="change-due"></div>
  <button id="purchase-btn" type="button">Purchase</button>
</div>
<div class="price">
  <h3>Price: 1.87</h3>
</div>
<script src="script.js"></script>
</body>
</html>  


/* file: styles.css */
body {
  margin:0;
  padding: 0;
  background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);
}
.header {
  text-align: center;
  justify-content: center;
  margin-top: 30px;
}
.header h1{
  font-family: fantasy;
  font-size: 50px;
}
.header h3{
  font-family: sans-serif;
}
#inputbtn {
  text-align: center;
  margin-top: 60px;
}
#inputbtn input {
  border-radius: 3px;
  border: #ffc8dd;
  height: 30px;
  font-size:20px;
  width: 180px
}
#inputbtn button {
  margin-top: 20px;
  padding: 5px;
  background-color: #f77f00
}
.price {
  text-align: center;
  margin-top: 30px;
  color: red;
  background-color: white;
  width: 120px;
  margin: 0 auto; 
}

/* file: script.js */
let price = 1.87;
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]
];

const cash = document.getElementById("cash");
const changeDue =document.getElementById("change-due");
const purchasebtn =document.getElementById("purchase-btn");
 
purchasebtn.addEventListener('click',()=>{
  if(cash.value < price){
    alert("Customer does not have enough money to purchase the item")
  }else if(price == cash.value)
  {
    changeDue.textContent="No change due - customer paid with exact cash";
  }else {
  }

});

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

Challenge Information:

Build a Cash Register Project - Build a Cash Register

2

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.