Build a Cash Register Project - Build a Cash Register

Tell us what’s happening:

Describe your issue in detail here.
the last part is resolved or not as it is not working for please let me know if someone know about it
When price is 19.5 , the value in the #cash element is 20 , cid is [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]] , and the #purchase-btn element is clicked, the value in the #change-due element should be Status: CLOSED QUARTER: $0 DIME: $0 NICKEL: $0 PENNY: $0.5 .

Your code so far

<!-- 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 = 19.5;
let cid = [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]];

const currencyUnit = {
  "PENNY": 0.01,
  "NICKEL": 0.05,
  "DIME": 0.1,
  "QUARTER": 0.25,
  "ONE": 1,
  "FIVE": 5,
  "TEN": 10,
  "TWENTY": 20,
  "ONE HUNDRED": 100
};

let cash = document.getElementById("cash");
const result =document.getElementById("change-due");
const purchasebtn =document.getElementById("purchase-btn");

 //purchase button
purchasebtn.addEventListener('click',()=>{
  const cashValue =parseFloat(cash.value)
  if(cashValue < price){
    alert("Customer does not have enough money to purchase the item")
  }else if(price == cashValue)
  {
    result.textContent="No change due - customer paid with exact cash";
  }else {
    check(cashValue,price,cid)
  }
});

// btn function end


function check(cashValue,price,cid) {

let changecash = cashValue - price;
//total cash in drawer
let totalcid = Number(cid.reduce((sum,elem)=> sum + elem[1],0)).toFixed(2);
    if(changecash > totalcid){
        result.textContent="Status:   INSUFFICIENT_FUNDS"
      }else if (totalcid == changecash.toFixed(2))
          {
            result.textContent="Status: CLOSED "+ cid
          } 
            else  {

    let changeArr=[];
    
       
    for(let i=cid.length-1; i >=0 ;i--){

      let currencyUnitName = cid[i][0];
      let currencyTotal = cid[i][1];
      let currencyValue = currencyUnit[currencyUnitName];
      let valueByTotal = Number((currencyTotal/currencyValue).toFixed(0));
      let returnUnit=0

        while(changecash >= currencyValue && valueByTotal > 0){
              changecash -= currencyValue;
              changecash = Number(changecash.toFixed(2));
              valueByTotal--
              returnUnit++
            }   

        if (returnUnit > 0){
            changeArr.push([currencyUnitName, returnUnit * currencyValue])
             }
      }
      if (changecash > 0){
              return result.textContent="Status:   INSUFFICIENT_FUNDS"
            }else {
              let changeArray = changeArr.map(item => item[0] + ": $" + item[1])
               return result.textContent="Status:  OPEN  Change: "+changeArray
            }      
    }
}

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

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.

  • you are not using “exact” phrasing in your “closing announcement”

Status: CLOSED QUARTER: $0 DIME: $0 NICKEL: $0 PENNY: $0.5

  • in your attempt you are showing them in different order and without “$” sign

i noticed in other use cases you used “$” in them but not for last test case!! may be addressing that would resolve it!!

happy coding :slight_smile:

tried many ways dont know what to do.

maybe share those snippets in turn and explain behind those attempts, maybe that way you will find an answer to that!!

given that if you again look into output string for: price 3.26 and cash 100 use case you will are getting correct output
Status: OPEN Change: TWENTY: $60,TEN: $20,FIVE: $15,ONE: $1,QUARTER: $0.5,DIME: $0.2,PENNY: $0.04

but for last use case you are returning this string instead!!
PENNY,0.5,NICKEL,0,DIME,0,QUARTER,0,ONE,0,FIVE,0,TEN,0,TWENTY,0,ONE HUNDRED,0

which is totally different!!

trace this back, and maybe look into logic where this is being constructed…

happy coding :slight_smile:

1 Like