Build a Cash Register Project - Build a Cash Register

amrit3 · February 23, 2025, 7:50pm

Tell us what’s happening:

So I feel like my project runs as intended, but tests don’t pass.

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'>
<link rel='stylesheet' href='styles.css'>
</head>

<body>
<img src='https://i.pcmag.com/imagery/reviews/01tPXClg2WjLamQzScplH3y-15.fit_lim.size_1050x591.v1627670281.png'></img>

<h1>Cash Register Project</h1>
<div id='change-due'><p>Change that is due will show here</p></div>
<p>Enter Cash From Customer:</p>
<input id='cash' type='text'></input>
<br>
<button id="purchase-btn">Purchase</button>

<div class='container'>
<div id='register-top'>
<p id='price'>Total is $1.87</p>
</div>

<div id="connector-part-register">
  
</div>

<div id="middle-register">
  <div id='mlr'>
    <button id='btn-1'></button>
    <button id='btn-2'></button>
    <button id='btn-3'></button>
    <button id='btn-4'></button>
    <button id='btn-5'></button>
    <button id='btn-6'></button>
    <button id='btn-7'></button>
    <button id='btn-8'></button>
    <button id='btn-9'></button>
  </div>
  <div id='mrr'><div id='txtArea'><b>Cash in drawer:</b></div></div>
</div>

<div id="bottom-register">
  <div id='keyslot'></div>
  </div>
</div>
<script src='script.js'></script>
</body>


</html>

/* file: script.js */
let price = 19.5;

let cid = [
  ['PENNY', 0.01],
  ['NICKEL', 0],
  ['DIME', 0],
  ['QUARTER', 0],
  ['ONE', 0],
  ['FIVE', 0],
  ['TEN', 0],
  ['TWENTY', 0],
  ['ONE HUNDRED', 0]
];

let total = document.getElementById('price')
total.textContent = `Total is $${price.toFixed(2)}`
let purchaseBtn = document.getElementById('purchase-btn');
let cashInput = document.getElementById('cash')
let cash;
let drawer = document.getElementById('txtArea')
let changeDue = document.getElementById('change-due');
let change;
let back = {}
let sstatus;

purchaseBtn.addEventListener('click',()=>{
  cash = cashInput.value
  if(!cash){
    alert('Enter A Value!')
  }else if(cash < price){
    displayChangeDue();
    alert('Customer does not have enough money to purchase the item')
  }else{
    //console.log((cash<price)+ 'cash is '+cash+' price is '+price)
    figureOutChange()
    calculate()
    displayChangeDue();
  }
})

const displayChangeInDrawer = ()=>{
  drawer.innerHTML =''
  cid.forEach((el)=>{
    drawer.innerHTML += `<p>${el[0]}: $${el[1].toFixed(2)}</p>`
  })
}

displayChangeInDrawer()

const displayChangeDue = ()=> {
  if(cash==price){
    changeDue.innerHTML = 'No change due - customer paid with exact cash';
  }else if(cash<price){
    changeDue.innerHTML=''
  }
  else if(sstatus =="INSUFFICIENT_FUNDS"){
    changeDue.innerHTML =`"Status: ${sstatus}"`
  }
  else { 
  changeDue.innerHTML =`"Status: ${sstatus} ${backObjToShow()}"`
}
}

const backObjToShow = () => {
  let string =''
  for (var el in back){
   // console.log('el is '+el);
    if(back[el] > 0){
      string += `<p>${el}: $${back[el]}</p>`
    }
  }
  return string;
}

const figureOutChange = ()=>{
  change = cash - price
  console.log('the change is exactly '+change)
  
  return change
}

const isThereEnough = () =>{
  let sum =0;
for(let i=8; i>=0; i--){
  sum +=cid[i][1]
}
  if(sum>change){
    sstatus = 'OPEN';
    return true;
  }else if(sum==change.toFixed(2)){
      sstatus='CLOSED'
      return true;
    }else if (change>sum){
    sstatus = 'INSUFFICIENT_FUNDS';
    return false;
  }
}

const calculate = () =>{
  for(let i=8; i>=0; i--){
    if(change === 0)break;
    
    //console.log('checking if enough: '+isThereEnough());
    if(isThereEnough()){
    switch(cid[i][0]){

      case 'ONE HUNDRED':
        back['ONE HUNDRED'] = 0;
        while((change-100>=0) && (cid[i][1]>0)){
          cid[i][1] -=100;
          displayChangeInDrawer();
          back['ONE HUNDRED'] += 100;
          change -=100
        }
        break;

        case 'TWENTY':
        back['TWENTY'] = 0;
        while((change-20>=0) && (cid[i][1]>0)){
          cid[i][1] -=20;
          displayChangeInDrawer();
          back['TWENTY'] += 20;
          change -=20
        }
        break;

        case 'TEN':
        back['TEN'] = 0;
        while((change-10>=0) && (cid[i][1]>0)){
          cid[i][1] -=10;
          displayChangeInDrawer();
          back['TEN'] += 10;
          change -=10;
        }
        break;

        case 'FIVE':
        back['FIVE'] = 0;
        while((change-5>=0) && (cid[i][1]>0) ){
          cid[i][1] -=5;
          displayChangeInDrawer();
          back['FIVE'] += 5;
          change -=5
        }
        break;

        case 'ONE':
        back['ONE'] = 0;
        while((change-1>=0) && (cid[i][1]>0) ){
          cid[i][1] -=1;
          displayChangeInDrawer();
          back['ONE'] += 1;
          change -=1
        }
        break;

        case 'QUARTER':
        back['QUARTER']=0;
        while((change-0.25>=0) && (cid[i][1]>0)){
          cid[i][1] -=0.25;
          displayChangeInDrawer();
          back['QUARTER'] += 0.25;
          change -=0.25
        }
        break;

        case 'DIME':
        back['DIME'] = 0;
        while((change-0.1>=0) && (cid[i][1]>0)){
          cid[i][1] -=0.1;
          displayChangeInDrawer();
          back['DIME'] += 0.1;
          change -=0.1
        }
        break;

        case 'NICKEL':
        back['NICKEL'] = 0;
        while((change-0.05>=0) && (cid[i][1]>0)){
          cid[i][1] -=0.05;
          displayChangeInDrawer();
          back['NICKEL'] += 0.05;
          change -=0.05
        }
        break;

        case 'PENNY':
        back['PENNY'] = 0;
        while((change.toFixed(2)-0.01>=0) && (cid[i][1]>0)){
          cid[i][1] -=0.01;
          displayChangeInDrawer();
          back['PENNY'] += 0.01;
          change -=0.01
          
        }
        back['PENNY'] = back['PENNY'].toFixed(2);
        console.log('checking if enough: '+isThereEnough());
        console.log(cid[i][1]>0)
        break;
    
    
    }
    }
    }
    
    
  

  console.log(back);
  console.log(change.toFixed(5));
}

/* file: styles.css */
body{
  background-color: black;
  text-align: center;
  color: white;
}

img{
  max-width:200px;

}

.container{
  display:flex;
  flex-direction: column;
  align-items:center;
}

#register-top{
  border: solid skyblue;
  border-width: 10px;
  margin-top:1em;
  

}

#register-top p{
  margin:0 5px 0 5px;
  
  
}

#connector-part-register{
  background-color: skyblue;
  height:40px;
  width: 30px;
  margin-left:-20px;
  
}

#middle-register{
  height: 200px;
  width:300px;
  background-color: skyblue;
  border-top-right-radius: 25px;
  border-top-left-radius: 25px;
  position: relative;
}

#bottom-register{
  height: 30px;
  width: 300px;
  background-color: skyblue;
  margin-top:5px;
}

#change-due p{
  margin:0;
}

#mlr{
  
  height: 100px;
  width: 100px;
  float: left;
  margin: 10px;
  display: grid;
  grid-template-columns: auto auto auto;

z-index:999
}

#mlr button{
  height: 20px;
  width: 20px;
  margin: auto;
}

#mrr{
  background:white;
  height: 180px;
  width: 160px;
  float: right;
  margin: 10px;
  position:relative;
}

#keyslot{
  background: black;
  border-radius: 80px;
  height: 15px;
  width: 15px;
  margin: auto;
  margin-top: 5px;
}

#txtArea{
  z-index:999;
  margin:auto;
  color: black; 
  display:flex;
  flex-direction:column;
  align-items:start;
}

#txtArea p{
  margin: 0;
  font-size: 14px;
  
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36

Challenge Information:

Build a Cash Register Project - Build a Cash Register

ILM · February 23, 2025, 8:10pm

what tests do not pass? what have you tried to debug it?

amrit3 · February 23, 2025, 9:04pm

To debug I just tried to follow the logic and see if I get the desired output.

ILM · February 23, 2025, 9:17pm

Your code contains global variables that are changed each time the function is run. This means that after each function call completes, subsequent function calls start with the previous value. To fix this, make sure your function doesn’t change any global variables, and declare/assign variables within the function if they need to be changed.

Example:

var myGlobal = [1];
function returnGlobal(arg) {
  myGlobal.push(arg);
  return myGlobal;
} // unreliable - array gets longer each time the function is run

function returnLocal(arg) {
  var myLocal = [1];
  myLocal.push(arg);
  return myLocal;
} // reliable - always returns an array of length 2

Topic		Replies	Views
Build a Cash Register Project - Build a Cash Register JavaScript	4	278	July 21, 2024
Build a Cash Register Project - Build a Cash Register JavaScript	6	170	September 5, 2024
Build a Cash Register Project - Build a Cash Register JavaScript	2	24	January 16, 2025
Build a Cash Register Project - Build a Cash Register JavaScript	3	146	September 11, 2024
Build a Cash Register Project - Build a Cash Register JavaScript	19	96	March 10, 2025

Build a Cash Register Project - Build a Cash Register

Tell us what’s happening:

Your code so far

Your browser information:

Challenge Information:

Related topics