Build a Cash Register Project - Build a Cash Register

JavaScript
1

Tell us what’s happening:

im trying to build the project and my code runs correctly but it doesnt work on freeCodeCamp

Your code so far

const cash = document.getElementById("cash");
const total = document.getElementById("price-screen");
const purchaseBtn = document.getElementById("purchase-btn");
const changeDue = document.getElementById("change-due");
const displayCurrency = document.getElementById("right-side");

let price =19.5;
total.textContent =`Total: $${price}`;
let cid = [
  ['PENNY',0.01 ,0.01],
  ['NICKEL',0.05, 0],
  ['DIME', 0.1,0],
  ['QUARTER',0.25, 0],
  ['ONE',1, 1],
  ['FIVE',5, 0],
  ['TEN',10, 0],
  ['TWENTY',20, 0],
  ['ONE HUNDRED',100,0]
];
const reversedCid =[...cid].reverse();
reversedCid.map((el)=>{
  displayCurrency.innerHTML += `<p>${el[0]}: ${el[2]}</p>`;
})

const checkChangeDue = () =>{
  let totalCid = parseFloat(cid.map(el=>el[2]).reduce((acc,el)=>acc+el).toFixed(2));
  console.log(totalCid);
  let newCash = cash.value;
  let change = parseFloat(Number(newCash)- price);
  console.log(change);
  const newChangeArr = [];
  let totalfr=0;
  changeDue.innerHTML =``;
  
  if(price === Number(newCash)){
    changeDue.innerHTML = '<p>No change due - customer paid with exact cash</p>'
    return;
  }
  else if(price>Number(newCash)){
    return alert("Customer does not have enough money to purchase the item");
    }
  
  if(change > totalCid){
    return (changeDue.innerHTML = '<p>Status: INSUFFICIENT_FUNDS</p>')
  }
  reversedCid.map((el)=>{
    let totalAmountToReturn = 0;
    while(change >= el[1] && el[2] > 0){
      totalAmountToReturn++;
      totalfr++;
      change -= el[1];
      change = change.toFixed(2);
      el[2] -= el[1];
      }
    if(totalAmountToReturn > 0){
      newChangeArr.push([el[0],el[1]*totalAmountToReturn.toFixed(2)]);
      totalCid -= el[1]*totalAmountToReturn.toFixed(2);
    }
  })
  if(totalfr===0 || change > 0){
    changeDue.innerHTML = `<p>Status: INSUFFICIENT_FUNDS</p>`;
    changeDue.innerHTML =``;
    return;
  }
  else if(totalfr>0 && totalCid === 0){
    changeDue.innerHTML = `<p>Status: CLOSED </p>`;
    newChangeArr.map(el=>{
      changeDue.innerHTML +=`<p>${el[0]}: $${el[1]}</p>`;
      return;
    })
  }
  else{
    changeDue.innerHTML = `<p>Status: OPEN</p>`;
    newChangeArr.map(el=>{
      changeDue.innerHTML +=`<p>${el[0]}: $${el[1]}<p>`;
      return;
    })
  }
  console.log(change);
}


purchaseBtn.addEventListener("click",checkChangeDue)

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

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

Challenge Information:

Build a Cash Register Project - Build a Cash Register

2

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

3

can you also provide your html? it is needed for debugging

4 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Cash Register</h1>
  <div id="change-due"></div>
  <form action="#">
    <label for="cash">Enter cash from cutomer</label>
    <input type="number" id="cash" placeholder="Cash">
    <button id="purchase-btn">Purchase</button>
  </form>
  <div id="cash-drawer">
    <div id="upper-container">
    <div id="price-screen"></div>
    <div id="between-head-body"></div>
  </div>
    <div id="body-cash-drawer">
      <div id="left-side">
        <div id="btn-container">
        <span class="btn">1</span>
        <span class="btn">2</span>
        <span class="btn">3</span>
        <span class="btn">4</span>
        <span class="btn">5</span>
        <span class="btn">6</span>
        <span class="btn">7</span>
        <span class="btn">8</span>
        <span class="btn">9</span>
      </div>
      </div>
      <div id="right-side">
       
      </div>
    </div>
    <div id="footer-cash-drawer">
      <div id="circle"></div>
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>
5

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

6 
const cash = document.getElementById("cash");
const total = document.getElementById("price-screen");
const purchaseBtn = document.getElementById("purchase-btn");
const changeDue = document.getElementById("change-due");
const displayCurrency = document.getElementById("right-side");

let price =19.5;
total.textContent =`Total: $${price}`;
let cid = [
  ['PENNY',0.01 ,1.01],
  ['NICKEL',0.05, 2.05],
  ['DIME', 0.1,3.1],
  ['QUARTER',0.25, 4.25],
  ['ONE',1, 90],
  ['FIVE',5, 0],
  ['TEN',10, 0],
  ['TWENTY',20, 0],
  ['ONE HUNDRED',100,0]
];
const reversedCid =[...cid].reverse();
reversedCid.map((el)=>{
  displayCurrency.innerHTML += `<p>${el[0]}: ${el[2]}</p>`;
})

const checkChangeDue = () =>{
  let totalCid = parseFloat(cid.map(el=>el[2]).reduce((acc,el)=>acc+el).toFixed(2));
  console.log(totalCid);
  let newCash = cash.value;
  let change = parseFloat(Number(newCash)- price);
  console.log(change);
  const newChangeArr = [];
  let totalfr=0;
  changeDue.innerHTML =``;
  
  if(price === Number(newCash)){
    changeDue.innerHTML = '<p>No change due - customer paid with exact cash</p>'
    return;
  }
  else if(price>Number(newCash)){
    return alert("Customer does not have enough money to purchase the item");
    }
  
  if(change > totalCid){
    return (changeDue.innerHTML = '<p>Status: INSUFFICIENT_FUNDS</p>')
  }
  reversedCid.map((el)=>{
    let totalAmountToReturn = 0;
    while(change >= el[1] && el[2] > 0){
      totalAmountToReturn++;
      totalfr++;
      change -= el[1];
      change = change.toFixed(2);
      el[2] -= el[1];
      }
    if(totalAmountToReturn > 0){
      newChangeArr.push([el[0],el[1]*totalAmountToReturn.toFixed(2)]);
      totalCid -= el[1]*totalAmountToReturn.toFixed(2);
    }
  })
  if(totalfr===0 || change > 0){
    changeDue.innerHTML = `<p>Status: INSUFFICIENT_FUNDS</p>`;
    return;
  }
  else if(totalfr>0 && totalCid === 0){
    changeDue.innerHTML = `<p>Status: CLOSED </p>`;
    newChangeArr.map(el=>{
      changeDue.innerHTML +=`<p>${el[0]}: $${el[1]}</p>`;
      return;
    })
  }
  else{
    changeDue.innerHTML = `<p>Status: OPEN</p>`;
    newChangeArr.map(el=>{
      changeDue.innerHTML +=`<p>${el[0]}: $${el[1]}<p>`;
      return;
    })
  }
  console.log(change);
}


purchaseBtn.addEventListener("click",checkChangeDue);

it only work if i put the same cid as the testcase why it dosnt work ? should i use function to take a prameter to take the cid array ?
i mean the code works what i should do to get accepted

7

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

8

the test cases change the global cid, so check that your program allows for everything to work even when the cid is changed

9

Your cid and the code that uses it should work with the arrays as they are shown in the tests. The nested arrays do not have 3 elements, only two (Currency Unit and Amount).

10

i have updated it and it also didnt get accepted for the last 2 testcases but it work if i changed the cid in my project tho

const cash = document.getElementById("cash");
const total = document.getElementById("price-screen");
const purchaseBtn = document.getElementById("purchase-btn");
const changeDue = document.getElementById("change-due");
const displayCurrency = document.getElementById("right-side");


let price = 3.26;
total.textContent =`Total: $${price}`;
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 currencyValue = [100,20,10,5,1,0.25,0.1,0.05,0.01];
const reversedCid =[...cid].reverse();
reversedCid.map((el)=>{
  displayCurrency.innerHTML += `<p>${el[0]}: ${el[1]}</p>`;
})

const checkChangeDue = () =>{
  let totalCid = parseFloat(cid.map(el=>el[1]).reduce((acc,el)=>acc+el).toFixed(2));
  console.log(totalCid);
  let newCash = cash.value;
  let change = Number(newCash)- price;
  console.log(change);
  const newChangeArr = [];
  let totalfr=0;
  changeDue.innerHTML =``;
  
  if(price === Number(newCash)){
    changeDue.innerHTML = '<p>No change due - customer paid with exact cash</p>'
    return;
  }
  else if(price>Number(newCash)){
    return alert("Customer does not have enough money to purchase the item");
    }
  
  if(change > totalCid){
    return (changeDue.innerHTML = '<p>Status: INSUFFICIENT_FUNDS</p>')
  }
  let i =0;
  reversedCid.map((el)=>{
    let totalAmountToReturn = 0;
    while(change >= currencyValue[i] && el[1] > 0){
      totalAmountToReturn++;
      totalfr++;
      change -= currencyValue[i];
      change = change.toFixed(2);
      el[1] -= currencyValue[i];
      }
    if(totalAmountToReturn > 0){
      newChangeArr.push([el[0],currencyValue[i]*totalAmountToReturn.toFixed(2)]);
      totalCid -= currencyValue[i]*totalAmountToReturn.toFixed(2);
    }
    i++;
  })
  if(totalfr===0 || change > 0){
    changeDue.innerHTML = `<p>Status: INSUFFICIENT_FUNDS</p>`;
    return;
  }
  else if(totalfr>0 && totalCid === 0 ){
    changeDue.innerHTML = `<p>Status: CLOSED </p>`;
    newChangeArr.map(el=>{
      changeDue.innerHTML +=`<p>${el[0]}: $${el[1]}</p>`;
      return;
    })
  }
  else{
    changeDue.innerHTML = `<p>Status: OPEN</p>`;
    newChangeArr.map(el=>{
      changeDue.innerHTML +=`<p>${el[0]}: $${el[1]}<p>`;
      return;
    })
  }
  console.log(change);
}


purchaseBtn.addEventListener("click",checkChangeDue)
11

Tell us what’s happening:

my code runs correctly i think because i have tried a lot of testcases and it is work but whenever i put my code on freeCodeCamp it get rejected by the last 2 testcases

Your code so far

let price = 19.5;
let cid = [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 1], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]
const total = document.getElementById("price-screen");
const purchaseBtn = document.getElementById("purchase-btn");
const changeDue = document.getElementById("change-due");
const displayCurrency = document.getElementById("right-side");



total.textContent =`Total: $${price}`;

let currencyValue = [100,20,10,5,1,0.25,0.1,0.05,0.01];
const reversedCid =[...cid].reverse();
reversedCid.map((el)=>{
  displayCurrency.innerHTML += `<p>${el[0]}: ${el[1]}</p>`;
})

const checkChangeDue = () =>{
  let totalCid = parseFloat(cid.map(el=>el[1]).reduce((acc,el)=>acc+el).toFixed(2));
  console.log(totalCid);
  let newCash = cash.value;
  let change = Number(newCash)- price;
  console.log(change);
  const newChangeArr = [];
  let totalfr=0;
  changeDue.innerHTML =``;
  
  if(price === Number(newCash)){
    changeDue.innerHTML = '<p>No change due - customer paid with exact cash</p>'
    return;
  }
  else if(price>Number(newCash)){
    return alert("Customer does not have enough money to purchase the item");
    }
  
  if(change > totalCid){
    return (changeDue.innerHTML = '<p>Status: INSUFFICIENT_FUNDS</p>')
  }
  let i =0;
  reversedCid.map((el)=>{
    let totalAmountToReturn = 0;
    while(change >= currencyValue[i] && el[1] > 0){
      totalAmountToReturn++;
      totalfr++;
      change -= currencyValue[i];
      change = change.toFixed(2);
      el[1] -= currencyValue[i];
      }
    if(totalAmountToReturn > 0){
      newChangeArr.push([el[0],currencyValue[i]*totalAmountToReturn.toFixed(2)]);
      totalCid -= currencyValue[i]*totalAmountToReturn.toFixed(2);
    }
    i++;
  })
  if(totalfr===0 || change > 0){
    changeDue.innerHTML = `<p>Status: INSUFFICIENT_FUNDS</p>`;
    return;
  }
  else if(totalfr>0 && totalCid === 0 ){
    changeDue.innerHTML = `<p>Status: CLOSED </p>`;
    newChangeArr.map(el=>{
      changeDue.innerHTML +=`<p> ${el[0]}: $${el[1]}</p>`;
      return;
    })
  }
  else{
    changeDue.innerHTML = `<p>Status: OPEN</p>`;
    newChangeArr.map(el=>{
      changeDue.innerHTML +=`<p>     ${el[0]}: $${el[1]}<p>`;
      return;
    })
  }
  console.log(change);
}


purchaseBtn.addEventListener("click",checkChangeDue)

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

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

Challenge Information:

Build a Cash Register Project - Build a Cash Register

12

here’s my html file too

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Cash Register</h1>
  <div id="change-due"></div>
  <form action="#">
    <label for="cash">Enter cash from cutomer</label>
    <input type="number" id="cash" placeholder="Cash">
    <button id="purchase-btn">Purchase</button>
  </form>
  <div id="cash-drawer">
    <div id="upper-container">
    <div id="price-screen"></div>
    <div id="between-head-body"></div>
  </div>
    <div id="body-cash-drawer">
      <div id="left-side">
        <div id="btn-container">
        <span class="btn">1</span>
        <span class="btn">2</span>
        <span class="btn">3</span>
        <span class="btn">4</span>
        <span class="btn">5</span>
        <span class="btn">6</span>
        <span class="btn">7</span>
        <span class="btn">8</span>
        <span class="btn">9</span>
      </div>
      </div>
      <div id="right-side">
       
      </div>
    </div>
    <div id="footer-cash-drawer">
      <div id="circle"></div>
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>
13

Welcome to the forum @abdalkareemnegm

When I enter a cash amount and press the Purchase button, on each subsequently press, the amount changes. From that I gather that the cid is updating, enough though the cash amount does not change.

Also, the input element does not seem to accept decimal numbers.

Happy coding

14

Hi @abdalkareemnegm

Just replied to your other post.

I still cannot enter decimal numbers.
This time I cannot make any purchases.

15

i have fix it its very simple i just added “step” attribute to the input tag

<input type="number" id="cash" step=".01" placeholder="Cash">

and still getting rejected tho

16

When checked manually - by changing values in code - preview will be reloaded, effectively executing the whole code again. On the other hand tests run one-by-one, without reload.

Correct results when checking manually, but failing when tests are run, suggests function calculating answer depends on some external action (variable), other than the cid, price and #cash element. When tests are run, it is not updated, creating unexpected side-effect.

17

i mean why should i change the cash value ? i didnt get it
i have updated the cid direclty ig

  cid[i][1] -= currencyValue[i];

and still getting the same

18

Take a look at the checkChangeDue function. What external variables it depends on?

19

I’ve merged your threads together, please do not open multiple topics to ask for help with the same project

21

reversedCid and currencyValue but should i use iteration on them ?