Build a Cash Register Project - Build a Cash Register

Davelove · June 26, 2025, 1:06pm

Tell us what’s happening:

Hi Guys, I have like 5 days working on this, but i still can not manage to make it work, it seems like there a lot of things i still don’t understand on this project. Now I want your help please , so i can finish this project.
I have issues started from step 11.

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">
    <title>Cash Register</title>
  </head>
  <body>
    <div class="container">
      <h1>Cash Register App</h1>
      <div class="change-details" id="change-due"></div>
      <form action="">
        <label for="cash">Enter cash from Customer:</label>
        <input id="cash" type="number" inputmode="decimal" >
        <button type="button" id="purchase-btn">Purchase</button>
      </form>
      <div class="total-price" id="total-price">
      </div>
      <div class="drawer">
        <div class="drawer-details" id="drawer-details">
          <h2>Change in drawer:</h2>

        </div>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

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


let currencyUnit = [
  ["PENNY", 0.01],
  ["NICKEL", 0.05],
  ['DIME', 0.1],
  ["QUARTER", 0.25],
  ["ONE", 1],
  ["FIVE", 5],
  ["TEN", 10],
  ["TWENTY", 20],
  ['HUNDRED', 100],
]

const purchaseBtn = document.getElementById("purchase-btn")
const drawerContainer = document.getElementById("drawer-details");
const changeDetails = document.getElementById("change-due");
const totalPrice = document.getElementById("total-price")



purchaseBtn.addEventListener("click", (event) =>{
  event.preventDefault();

  
  let total = 0;
  for(let el of cid){
    total += parseInt(el[1] * 100) / 100;
  }

  let statusItem = "";

  let cash = document.getElementById("cash").value;
  const changeDue = Number(cash.value*100 - price*100) / 100;

  if(parseFloat(cash) < price){
    alert("Customer does not have enough money to purchase the item");
    return;
  }
  if(parseFloat(cash) === price){
    changeDetails.innerText = "No change due - customer paid with exact cash"
    return;
  }

  if(cash > price){
    if(changeDue > total){
      statusItem = "INSUFFICIENT_FUNDS";
      changeDetails.innerText = `Status: ${statusItem}`;
    }else if(total === changeDue){
      statusItem = "CLOSED";
      changeDetails.innerText = `Status: ${statusItem}`;
    }else{
      statusItem = "OPEN";
      check_remaining_cash(cid, changeDue, currencyUnit);
    }
  }
});




const check_remaining_cash = (cid, amountDue, arr) =>{
    let status = "";

    let total = 0;
    for(let el of cid){
      total += parseInt(el[1] * 100) / 100;
    }

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

      let [itemName, amount] = cid[i];
      let itemValue = arr[itemName];
      let refundAmount = 0;

      while(amount >= itemValue && itemValue <= amountDue){
        amountDue = parseFloat((amountDue - itemValue).toFixed(2));

        amount = parseFloat((amount - itemValue).toFixed(2));
        refundAmount = parseFloat((refundAmount + itemValue).toFixed(2));
      };

      if(refundAmount > 0){
        newArr.push([itemName, refundAmount]);
      };
    };
    
    if(amountDue > 0){
      status = "INSUFFICIENT_FUNDS";
      changeDetails.innerText = `Status: ${status}`;
      return;
    }
    
    if(total === amountDue){
      status = "CLOSED";
      newArr = [...cid]
    }else{
      status = "OPEN";
    }

    const displayChange = newArr.map(([itemName, amount]) =>
    `${itemName}: $${amount.toFixed(2)}`).join(' ')

    changeDetails.innerText = `Status: ${status} ${displayChange}`;
  };
  
function update_drawer(arr){
  totalPrice.innerHTML += `<p>$${price}</p>`;
  for(let item of arr){

    drawerContainer.innerHTML += `<p>${item[0][0].toUpperCase() + item[0].slice(1).toLowerCase()} : $${item[1]}</p>`
  }
}

update_drawer(cid);

/* file: styles.css */
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
 background-color: #023047;
 color: white;
}

.container{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 50px auto;
  width: 50%;
  padding: 10px;
  text-align: center;
  justify-content: center;
  align-items: center;
}

.change-details{
  display: flex;
  flex-direction: column;
  margin: 15px auto;
  text-align: center;
  align-items: center;
}
form{
  display: flex;
  flex-direction: column;
  width: 50%;
  align-items: center;
  justify-content:center;
  text-align: center;
}

input{
  font-size: 15px;
  margin: 5px 0;
  height: 30px;
}

label{
  font-size: 19px;
  font-family: sans-serif;
  text-align:center;
}
button{
  padding: 8px 16px;
  background-color: #fb8500;
  color: white;
  font-size: 18px;
  font-family: sans-serif;
  border: 3px solid #ffb703;
  border-radius: 7px;
  text-align: center;
  margin: 10px auto;
  display: inline-block;
  cursor: pointer;
  transition: transform 0.3 ease;
  
}
button:active{
  transform: translateY(-3px);
}

.total-price{
  font-size: 20px;
  font-family: sans-serif;
  margin: 20px;
  background-color:#023047;
  padding: 5px 15px;
  border: 5px solid #fb8500;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align:center;
  width: 160px;
  max-width: 200px;
  height: auto;
}

.drawer{
  background-color:#219ebc;
  color: #444;
  width: 300px;
  height: auto;
  font-size: 18px;
  border-radius: 20px 20px 0 0;
}
.drawer-details{
  background-color:white;
  width: 50%;
  height: auto;
  margin: 12px auto;
  font-size: 16px;
  display:flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
}

h2{
  font-size:16px;
  text-align: center;
}
#equal-message{
  font-size: 21px;
}

@media (max-width: 500px){ 

  h1{
    font-size: 18px;
  }
  
  form{
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  justify-content:center;
  text-align: center;
}
label{
  font-size: 15px;
}
.container{
  width: 70%;
}
button{
  padding: 4px 8px;
  background-color: #fb8500;
  color: white;
  font-size: 18px;
  font-family: sans-serif;
  border: 3px solid #ffb703;
  border-radius: 7px;
  text-align: center;
  margin: 5px auto;
  display: inline-block;
  cursor: pointer;
  transition: transform 0.3 ease;
  box-shadow: 0 4px 9px 0;
}

}

Your browser information:

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

Challenge Information:

Build a Cash Register Project - Build a Cash Register

JeremyLT · June 26, 2025, 1:10pm

What is test 11? How have you tried to debug why your code isn’t doing what you expect?

Davelove · June 26, 2025, 1:15pm

When i click the purchase button, it just said Status OPEN and I have tried to print the newArr array i have create i see nothing happens because after entering the purchase amount and i clicked the purchase button the newArr i have create is still empty.

fcc4b6d10c4-b540-4e2 · June 26, 2025, 1:35pm

Do you have a variable displayChange? Is this meant to be a recursive function? Start here.

Davelove · June 26, 2025, 1:50pm

Yes. Thank and i have fixed some other bugs as well. But I’m still working on it.

Davelove · June 26, 2025, 1:53pm

What’s happening is the following. I loop through the newArr list and then join the variable and then saved them inside this variable.
It is not a recursion. Because there are inside the same function . It is not one inside the other.

Davelove · June 26, 2025, 1:53pm

Check to see and let me know.

fcc4b6d10c4-b540-4e2 · June 26, 2025, 2:03pm

Right. Console.log() displayChange inside that function to debug your code, please.

Davelove · June 26, 2025, 2:35pm

I believe one of the main issue of my code here:

if(refundAmount > 0){
newArr.push([item, refundAmount]);
};

Davelove · June 26, 2025, 2:39pm

When i console the refundAmount even after the while loop is done it always 0 so the newArr doesn’t get updated.

fcc4b6d10c4-b540-4e2 · June 26, 2025, 5:49pm

Please post your updated code if you’d like more help with this.

Davelove · June 26, 2025, 6:59pm

This is my code.

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]
];


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

const purchaseBtn = document.getElementById("purchase-btn")
const drawerContainer = document.getElementById("drawer-details");
const changeDetails = document.getElementById("change-due");
const totalPrice = document.getElementById("total-price")



purchaseBtn.addEventListener("click", (event) =>{
  event.preventDefault();

  
  let total = 0;
  for(let el of cid){
    total += parseInt(el[1] * 100) / 100;
  }

  let statusItem = "";

  let cash = document.getElementById("cash").value;
  let changeDue = Number(cash.value*100 - price*100) / 100;

  if(parseFloat(cash) < price){
    alert("Customer does not have enough money to purchase the item");
    return;
  }
  if(parseFloat(cash) === price){
    changeDetails.innerText = "No change due - customer paid with exact cash"
    return;
  }

  if(cash > price){
    if(changeDue > total){
      statusItem = "INSUFFICIENT_FUNDS";
      changeDetails.innerText = `Status: ${statusItem}`;
    }else if(total === changeDue){
      statusItem = "CLOSED";
      changeDetails.innerText = `Status: ${statusItem}`;
    }else{
      statusItem = "OPEN";
      check_remaining_cash(cid, changeDue, currencyUnit);
    }
  }
});




const check_remaining_cash = (cid, amountDue, arr) =>{
    let status = "";

    let total = 0;
    for(let el of cid){
      total += parseInt(el[1] * 100) / 100;
    }

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

      let [item, amount] = cid[i];
      console.log(item, amount)
      let itemValue = arr[item];
      console.log(itemValue)
      let refundAmount = 0;
      
      while(amount >= itemValue && itemValue <= amountDue){
        amountDue = parseFloat((amountDue - itemValue).toFixed(2));

        amount = parseFloat((amount - itemValue).toFixed(2));
        refundAmount = parseFloat((refundAmount + itemValue).toFixed(2));
      };
      
      if(refundAmount > 0){
        newArr.push([item, refundAmount]);
      };
    };
    
    if(amountDue > 0){
      status = "INSUFFICIENT_FUNDS";
      changeDetails.innerText = `Status: ${status}`;
      return;
    }
    
    if(total === amountDue){
      status = "CLOSED";
      newArr = [...cid]
    }else{
      status = "OPEN";
    }

    const displayChange = newArr.map(([item, amount]) =>
    `${item}: $${amount.toFixed(2)}`).join(' ')

    changeDetails.innerText = `Status: ${status} ${displayChange}`;
  };
  
function update_drawer(arr){
  totalPrice.innerHTML += `<p>$${price}</p>`;
  for(let item of arr){

    drawerContainer.innerHTML += `<p>${item[0][0].toUpperCase() + item[0].slice(1).toLowerCase()} : $${item[1]}</p>`
  }
}

update_drawer(cid);
````Preformatted text`

Davelove · June 26, 2025, 7:04pm

i see the issue might be here, but i have tried to fix it i still get the same result.

if(refundAmount > 0){
        newArr.push([item, refundAmount]);
      };

Even after the loop has been completed the refundAmount still remain zero(0)
and the newArr is still empty.

fcc4b6d10c4-b540-4e2 · June 26, 2025, 7:53pm

You can debug your code by using console.log() statements to step through it so you won’t have to guess about where the issue might be.

Please debug this.

Davelove · June 26, 2025, 10:28pm

Thank you that works.
But I’m still working on the last two steps.

Davelove · June 26, 2025, 10:35pm

This is my new code now, I’m still struggling with the last two steps.
I have multiplied the values by 100 and divided by 100 and convert them to number to get that fix but it doesn’t work.

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]
];


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

const purchaseBtn = document.getElementById("purchase-btn")
const drawerContainer = document.getElementById("drawer-details");
const changeDetails = document.getElementById("change-due");
const totalPrice = document.getElementById("total-price")



purchaseBtn.addEventListener("click", (event) =>{
  event.preventDefault();

  
  let total = 0;
  for(let el of cid){
    total += Number(el[1] * 100) / 100;
  }

  let statusItem = "";

  let cash = Number(document.getElementById("cash").value);
  let changeDue = Number(cash*100 - price*100) /100
  
  if(parseFloat(cash) < price){
    alert("Customer does not have enough money to purchase the item");
    return;
  }
  if(parseFloat(cash) === price){
    changeDetails.innerText = "No change due - customer paid with exact cash"
    return;
  }

  if(cash > price){
    if(changeDue > total){
      statusItem = "INSUFFICIENT_FUNDS";
      changeDetails.innerText = `Status: ${statusItem}`;
    }else if(total === changeDue){
      statusItem = "CLOSED";
      changeDetails.innerText = `Status: ${statusItem}`;
    }else{
      statusItem = "OPEN";
      check_remaining_cash(cid, changeDue, currencyUnit);
    }
  }
});




const check_remaining_cash = (cid, amountDue, arr) =>{
    let status = "";

    let total = 0;
    for(let el of cid){
      total += parseInt(el[1] * 100) / 100;
    }

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

      let [item, amount] = cid[i];
      console.log(item, amount)
      let itemValue = arr[item];
      console.log(itemValue)
      let refundAmount = 0;
      
      while(amount >= itemValue && itemValue <= amountDue){
        amountDue = parseFloat((amountDue - itemValue).toFixed(2));

        amount = parseFloat((amount - itemValue).toFixed(2));
        refundAmount = parseFloat((refundAmount + itemValue).toFixed(2));
      };
      
      if(refundAmount > 0){
        newArr.push([item, refundAmount]);
      };
    };
    
    if(amountDue > 0){
      status = "INSUFFICIENT_FUNDS";
      changeDetails.innerText = `Status: ${status}`;
      return;
    }
    
    if(total === amountDue){
      status = "CLOSED";
      newArr = [...cid]
    }else{
      status = "OPEN";
    }

    const displayChange = newArr.map(([item, amount]) =>
    `${item}: $${amount.toFixed(2)}`).join(' ')

    changeDetails.innerText = `Status: ${status} ${displayChange}`;
  };
  
function update_drawer(arr){
  totalPrice.innerHTML += `<p>$${price}</p>`;
  for(let item of arr){

    drawerContainer.innerHTML += `<p>${item[0][0].toUpperCase() + item[0].slice(1).toLowerCase()} : $${item[1]}</p>`
  }
}

update_drawer(cid);
````Preformatted text`
````Preformatted text`


```Preformatted text

Davelove · June 27, 2025, 12:07am

I have tried when the price is 19.5 and the cash is 20 and the purchase button is clicked it should say Status CLOSED Penny $0.5. That is when the cid is as requested.
In my case when i click the purchase button it’s just give me CLOSED. And then Nothing else.

Davelove · June 27, 2025, 12:23am

Base on what i understand the issue might be between these two lines of codes:

this one is inside the event listener**

else if(total === changeDue){
      statusItem = "CLOSED";
      changeDetails.innerText = `Status: ${statusItem}`;
    }

**********this one is inside the function ********************

if(total === amountDue){
      status = "CLOSED";
      newArr = [...cid]
    }

Could you please take a look to see?

frokhman · June 27, 2025, 4:25am

I think the problem is here.
if your total case in cid is the same with change due, it will automatically close and nothing happens. you don’t update cid

}else if(total === changeDue){
      statusItem = "CLOSED";
      changeDetails.innerText = `Status: ${statusItem}`;
    }else{

this code evaluate to true outside the function, the function check_remaining_cash is never called.

I suggest you are working with integer instead. Like working with cents for all the number and only convert to float for displaying only.


let price = 1950; // $19.50 in cents
let cid = [
  ['PENNY', 50],         // 50 cents
  ['NICKEL', 0],
  ['DIME', 0],
  ['QUARTER', 0],
  ['ONE', 0],
  ['FIVE', 0],
  ['TEN', 0],
  ['TWENTY', 0],
  ['ONE HUNDRED', 0]
];

for the input you can do something like this.

let cash = Math.round(Number(document.getElementById("cash").value) * 100);
let changeDue = cash - price;

Davelove · June 27, 2025, 7:42pm

Hi thank you. But this is not working;
Even when i update my code accordingly still the same thing.

let price = 1950;
let cid = [
[‘PENNY’, 50],
[‘NICKEL’, 0],
[‘DIME’, 0],
[‘QUARTER’, 0],
[‘ONE’, 0],
[‘FIVE’, 0],
[‘TEN’, 0],
[‘TWENTY’, 0],
[‘ONE HUNDRED’, 0]
];

let cash = Math.round(Number(document.getElementById(“cash”).value) * 100);
let changeDue = cash - price;

Topic		Replies	Views
Build a Cash Register Project - Build a Cash Register JavaScript	4	44	June 13, 2025
Build a Cash Register Project - Build a Cash Register JavaScript	3	29	July 17, 2025
Build a Cash Register Project - Build a Cash Register JavaScript	12	89	January 8, 2025
Build a Cash Register Project - Build a Cash Register JavaScript	4	31	February 9, 2025
Build a Cash Register Project - Build a Cash Register JavaScript	6	185	September 5, 2024

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