Build a Cash Register Project - Build a Cash Register

JavaScript
1

Tell us what’s happening:

i have been unable to pass step 16-19 i really dont know what i’m doing wrong, i’m also having this error with the nickle when i’m returning change in the change due the nickle will have lots of decimal points i tried using toFixed but its not working, i was also hoping the innerContent.innerText will decrement with the cid when item is purchased but its not doing that i need help. Thanks in advance

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 Register</title>
    <link rel="stylesheet" href="./styles.css">
  </head>
  <body>
    <header>
      <h1 class="title">Cash Register Project</h1>
    </header>
    <main>
      <div id="change-due" class="change-due"></div>

      <label for="cash">Enter cash from customer:</label>
      <input id="cash" class="cash" type="number" /><br />
      <button id="purchase-btn" class="purchase-btn" type="button"><strong>Purchase</strong></button>
      <div class="border">
        <div id="total" class="total"></div>
      </div>
      <div class="connector" ></div>

      <div class="cid-container">
        <div id="cid-content" class="inner-container"></div>
      </div>

      <div class="rect">
        <div class="ball"></div>
      </div>
    </main>
    <script src="script.js"></script>
  </body>
</html>

/* file: script.js */
const changeDue = document.getElementById("change-due");
const input = document.getElementById("cash");
const purchaseBtn = document.getElementById("purchase-btn");
const cashInDrawer = document.querySelectorAll("cid");
const innerContent = document.getElementById("cid-content");
const total = document.getElementById("total");

let price = 3.26;
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
}

total.innerHTML = `<h2>Total: $${price}</h2>`;

innerContent.innerHTML = `<h3>Change in Drawer:</h3>
<div class="cid-content">Pennies: $${cid[0][1]}</div>
<div class="cid-content">Nickels: $${cid[1][1]}</div>
<div class="cid-content">Dimes: $${cid[2][1]}</div>
<div class="cid-content">Quarters: $${cid[3][1]}</div>
<div class="cid-content">Ones: $${cid[4][1]}</div>
<div class="cid-content">Fives: $${cid[5][1]}</div>
<div class="cid-content">Tens: $${cid[6][1]}</div>
<div class="cid-content">Twenties: $${cid[7][1]}</div>
<div class="cid-content">Hundreds: $${cid[8][1]}</div>`;

const calculateChange = (price, cash, cid) => {
  const totalCid = Number(cid.reduce((sum, el) => sum + el[1], 0).toFixed(2));
  let change = Number((cash - price).toFixed(2)); 

  if (totalCid < change) {
    changeDue.innerText = "Status: INSUFFICIENT_FUNDS";
  } else if (totalCid === change && price < cash) {
    changeDue.innerText = "Status: CLOSED " + cid;
  } else {
    let changeArr = [];
    cid.reverse().forEach((el) => {
      let coinName = el[0];
      let totalAmountInDrawer = Number(el[1]);
      let equivalentOfAmountInDrawer = Number(currencyUnit[coinName]);
      let availableAmount = Number((totalAmountInDrawer / equivalentOfAmountInDrawer).toFixed(2));

      let amountCollected = 0;
      while (change >= equivalentOfAmountInDrawer && availableAmount > 0) {
        change = Number((change - equivalentOfAmountInDrawer).toFixed(2));
        availableAmount--;
        amountCollected++;
      }

      if (amountCollected > 0) {
        changeArr.push(` ${coinName}:` + `$${amountCollected * equivalentOfAmountInDrawer}`);
      }
    });
   
  changeDue.innerText = "Status: OPEN " + changeArr;
  }
}

purchaseBtn.addEventListener("click", () => {
  let userInput = parseFloat(input.value);
  
  if (userInput < price) {
    alert("Customer does not have enough money to purchase the item");
    input.value = "";
    return;
  } else if (userInput === price) {
    changeDue.innerHTML = "No change due - customer paid with exact cash";
    input.value = "";
    return "";
  } else {
    calculateChange(price, userInput, cid);
    input.value = "";
  }
})

/* file: styles.css */

Your browser information:

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

Challenge Information:

Build a Cash Register Project - Build a Cash Register

2

Check out this video

you are setting the value when the app is loading the first time and then you do not have code to change it later, code will not do stuff you don’t tell it to do

An other issue you have is that your is not giving the correct denominations back

1 Like
3

I don’t quite understand you sir and i watched the video and tried dividing totalCid by 100 but that doesn’t seem to workout and i tried adding what i did in the first innerContent.innerText right after pushing the change collected into the changeArr but it didn’t work it just switch the currencies, it gave pennies the amount for hundred and hundred to twenty and so on… i know i’m doing something wrong i just don’t know what that is

4

Why not, what happened?

You need to console.log() some variables to find out what’s happening, then you can analyze and plan the next change to the program.

Try to fix one problem at a time, you mentioned 5 different problems in your OP.

You could focus on this one first:

When your functionality is good then it’s time to focus on the tests.

5

You are right i just needed to focus on one problem at a time and that seem to workout, i’ve fixed the floating point error all i was to do was break things down before pushing it to the changeArr i was supposed to create a variable that will handle the multiplication of amountCollected * equivalentOfAmountInDrawer and i can add toFixed to it but i was trying to do that inside the push earliar which can’t work with the toFixed

6

Now another problem i’m facing is when i purchase an item for the first time it return the change needed from highest denomination to lowest but when i try to purchase again the second time it return change almost close to the change needed but it starts from the lowest denomination to the highest, i dont understand whats causing that

7

I’m not sure I understand can you please show an example.

8

if i purchase an item worth $3.26 and i gave $10 the change returns Status: OPEN FIVE: $5, ONE: $1, QUARTER: $0.5, DIME: $0.2, PENNY: $0.04… if i purchase again the second time with same $10 bill it returns Status: OPEN PENNY: $1.01, NICKEL: $2.05, DIME: $3.1, QUARTER: $0.5

9

Please share your updated code.

10 
const changeDue = document.getElementById("change-due");
const input = document.getElementById("cash");
const purchaseBtn = document.getElementById("purchase-btn");
const cashInDrawer = document.querySelectorAll("cid");
const innerContent = document.getElementById("cid-content");
const total = document.getElementById("total");

let price = 3.26;
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
}

total.innerHTML = `<h2>Total: $${price}</h2>`;

innerContent.innerHTML = `<h3>Change in Drawer:</h3>
<div class="cid-content">Pennies: $${cid[0][1]}</div>
<div class="cid-content">Nickels: $${cid[1][1]}</div>
<div class="cid-content">Dimes: $${cid[2][1]}</div>
<div class="cid-content">Quarters: $${cid[3][1]}</div>
<div class="cid-content">Ones: $${cid[4][1]}</div>
<div class="cid-content">Fives: $${cid[5][1]}</div>
<div class="cid-content">Tens: $${cid[6][1]}</div>
<div class="cid-content">Twenties: $${cid[7][1]}</div>
<div class="cid-content">Hundreds: $${cid[8][1]}</div>`;

const calculateChange = (price, cash, cid) => {
  let totalCid = Number(cid.reduce((sum, el) => sum + el[1], 0).toFixed(2));
  let change = Number((cash - price).toFixed(2)); 
  if (totalCid < change) {
    changeDue.innerText = "Status: INSUFFICIENT_FUNDS";
  } else if (totalCid === change && price < cash) {
    changeDue.innerText = "Status: CLOSED " + cid;
  } else {
    let changeArr = [];
    cid.reverse().forEach((el) => {
      let coinName = el[0];
      let totalAmountInDrawer = Number(el[1]);
      let equivalentOfAmountInDrawer = Number(currencyUnit[coinName]);
      let availableAmount = Number((totalAmountInDrawer / equivalentOfAmountInDrawer).toFixed(2));
      let amountCollected = 0;
    
      while (change >= equivalentOfAmountInDrawer && availableAmount > 0) {
        change = Number((change - equivalentOfAmountInDrawer).toFixed(2));
        availableAmount--;
        amountCollected++;
      }

      if (amountCollected > 0) {
        const amount = Number((amountCollected * equivalentOfAmountInDrawer).toFixed(2));
        changeArr.push([` ${coinName}: ` + `$${amount}` ]);
        return changeArr;
      }
    });
   
  changeDue.innerText = "Status: OPEN " + changeArr;
  }
}

purchaseBtn.addEventListener("click", () => {
  let userInput = parseFloat(input.value);
  
  if (userInput < price) {
    alert("Customer does not have enough money to purchase the item");
    input.value = "";
    return;
  } else if (userInput === price) {
    changeDue.innerHTML = "No change due - customer paid with exact cash";
    input.value = "";
    return "";
  } else {
    calculateChange(price, userInput, cid);
    input.value = "";
  }
})
11

What happens if you try it a third time?

12

it does as expected, i just can’t figure out why it keeps doing that

13

What does it do? Not sure what’s expected here…

14

it returns Status: OPEN FIVE: $5, ONE: $1, QUARTER: $0.5, DIME: $0.2, PENNY: $0.04

15

Ah ok, it goes back to the original output. And what happens the fourth time?

16

it returns Status: OPEN PENNY: $1.01, NICKEL: $2.05, DIME: $3.1, QUARTER: $0.5… it keeps doing that from the original output to this output

17

So it keeps flipping between these two states? Does it ever stop or it just keeps going on and on forever?

Eventually your change in drawer should run out, right?

18

yes it keeps flipping btw this two state, well the change in drawer doesn’t run out, thats another problem

19

It doesn’t run out? Does it change at all?

To confirm is it a kind of magic drawer, or it’s to behave like a normal change drawer?

1 Like
20

it not a magic drawer :laughing: now i have to figure out why the drawer doesn’t run out