Build a Cash Register Project - Build a Cash Register

JavaScript
1

Tell us what’s happening:

Hello,

I’m encountering an issue with the last two user stories. Although the output I’m generating matches the expected results, the test cases are still failing. I’ve experimented with different spacing and formatting, but to no avail. While the output appears to be correct, it’s not being accepted by the test cases.

Screenshot 2024-07-18 225324
Screenshot 2024-07-18 2253241902×710 120 KB

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content = "width=device-width, initialscale-1.0">
    <title>Cash Register</title>
    <link rel="stylesheet" href="styles.css">
  </head>

  <body>
    <div id="main">
      <h1 id="title">Cash Register</h1>
      <div id="user-input">
        <form>
          <label for="cash">Enter cash given by customer</label>
          <input type="number" id="cash">
          <button id="purchase-btn">Purchase</button>
          
        </form>
        
      </div>
      <div id="info">
      <div id="change-av"></div>
      <div id="change-due"></div>
      </div>
    </div>
  </body>
  <script src="script.js"></script>
</html>

/* file: styles.css */
:root{
  --color1: #317873;
  --color2: #D9D9B1;
}
body{
  background-color: var(--color1);
  color: var(--color1);
  font-family: sans-serif;
}

#title{
  color: var(--color2);
}
#main{
  height: 80%;
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: space-around;
}
form{
  width: 80%;
  margin: 0 auto;
  padding: 20px 10px;
  border-radius: 15px;
  background-color: var(--color2);
  display: flex;
  flex-direction: column;
  align-items: center;


}
input, label, button{
  display: block;
  width: 30%;
  margin: 5px;
}
button{
 border: none;
 background-color: var(--color1);
 color: var(--color2);
 padding: 6px 0;
 font-weight: 600;
 border-radius: 10px;
}
button:hover{
  background: linear-gradient(180deg, var(--color1), black);
  cursor: pointer;
}
#info{
  margin-top: 10px;
  display: flex;
  justify-content: space-around;
}
#change-av, #change-due{
  background-color: var(--color2);
  height: auto;
  width: 30%;
  border-radius: 15px;
  padding: 10px;
  padding-left: 20px;
}
#change-av p{
  text-align: left;
  margin: 0;
}
#change-due{
  overflow-wrap: break-word;
}

/* file: script.js */
let price = 1.87;
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 cidValues = [0.01, 0.05, 0.1, 0.25, 1, 5, 10, 20, 100]

const input = document.getElementById('cash');
const purchaseBtn = document.getElementById('purchase-btn');
const ca = document.getElementById('change-av');
const cd = document.getElementById('change-due')



document.querySelector('#title').innerText += ` \nPrice: $${price}`;

ca.innerHTML = '<h3>Change in Drawer</h3>';
cid.forEach((c)=>{
  ca.innerHTML += `<p>${c[0]}: ${c[1]}</p>`
})

const getTotal = (arr) => {
  let total = 0;
  arr.forEach((c)=> {
    total += c[1]
  });
  return total.toFixed(2);
}

let totalChangeAvailable = getTotal(cid);

const runRegister = () => {
  if (input.value === ""){
    return;
  }

  const cash = parseFloat(input.value).toFixed(2);

  if (cash < price){
    alert("Customer does not have enough money to purchase the item");
    return ;
  }

  if(cash == price){
    cd.innerText = "No change due - customer paid with exact cash";
    return;
  }

  const difference = Number(cash-price);
  if (difference > totalChangeAvailable){
    cd.innerText = "Status: INSUFFICIENT_FUNDS"
    return;
  }
  

  let change = [
  ['PENNY', 0],
  ['NICKEL', 0],
  ['DIME', 0],
  ['QUARTER', 0],
  ['ONE', 0],
  ['FIVE', 0],
  ['TEN', 0],
  ['TWENTY', 0],
  ['ONE HUNDRED', 0]
];
  
  
  let i = cidValues.length -1;
  let changeDue = difference;
  while (i >= 0){
    if(changeDue >= cidValues[i] && cid[i][1] >= cidValues[i]){
      let x = cidValues[i]
      change[i][1] = x + change[i][1];
      changeDue = (changeDue - x).toFixed(2);
      cid[i][1] = (cid[i][1] - x).toFixed(2);
      
    }
    else{
      i--;
    }
  }

  change = change
  .filter((c) => c[1] > 0)
  .map((d) => [d[0], d[1].toFixed(2)]);

  if(changeDue > 0 ){
    cd.innerText = "Status: INSUFFICIENT_FUNDS"
    return;
  }

  totalChangeAvailable = (totalChangeAvailable - difference).toFixed(2);


  if (totalChangeAvailable == 0.00 ){
    cd.innerText = "Status: CLOSED";
  }
  else{ cd.innerText = "Status: OPEN"; }

  
  change.reverse().forEach((c)=>{
      cd.innerText += ` ${c[0]}: $${Number(c[1])}`;
    })

}

purchaseBtn.addEventListener('click', runRegister);

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

2

Hi there and welcome to our community!

Could you share your full code with us please, rather than a screenshot?
Edit your post and paste the code between the sets of triple backticks (`) as indicated.

4

Tell us what’s happening:

Hello,

I am having trouble passing the last 2 test cases in the cash register project. I have been at this for hours, and still haven’t figured out the issue. Even though I am getting the same output as the one described in the test case, my code still fails that test case. I have read many other posts about this, but nothing has helped. Thank you .

Your code so far

/* file: script.js */
let price = 0;
let cid = [];

price = 1.87;
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 cidValues = [0.01, 0.05, 0.1, 0.25, 1, 5, 10, 20, 100]

const input = document.getElementById('cash');
const purchaseBtn = document.getElementById('purchase-btn');
const ca = document.getElementById('change-av');
const cd = document.getElementById('change-due')






const updateDrawer = ()=>{
ca.innerHTML = '<h3>Change in Drawer</h3>';
cid.forEach((c)=>{
  ca.innerHTML += `<p>${c[0]}: $${c[1]}</p>`
})
}


const getTotal = (arr) => {
  let total = 0;
  arr.forEach((c)=> {
    total += c[1]
  });
  return total.toFixed(2);
}

let totalChangeAvailable = 0;


document.querySelector('#title').innerText = `Cash Register \nPrice: $${price}`;
updateDrawer();
totalChangeAvailable = getTotal(cid);


const runRegister = () => {
  


  if (input.value === ""){
    return;
  }
  const cash = parseFloat(input.value).toFixed(2);

  if (cash < price){
    alert("Customer does not have enough money to purchase the item");
    return ;
  }

  if(cash == price){
    cd.innerText = "No change due - customer paid with exact cash";
    return;
  }

  const difference = Number(cash-price);

  if (difference > totalChangeAvailable){
    cd.innerText = "Status: INSUFFICIENT_FUNDS"
    return;
  }

  let change = [
  ['PENNY', 0],
  ['NICKEL', 0],
  ['DIME', 0],
  ['QUARTER', 0],
  ['ONE', 0],
  ['FIVE', 0],
  ['TEN', 0],
  ['TWENTY', 0],
  ['ONE HUNDRED', 0]
];
  
  
  let i = cidValues.length -1;
  let changeDue = difference;
  while (i >= 0){
    if(changeDue >= cidValues[i] && cid[i][1] >= cidValues[i]){
      let x = cidValues[i]
      change[i][1] = x + change[i][1];
      changeDue = (changeDue - x).toFixed(2);
      cid[i][1] = (cid[i][1] - x).toFixed(2);
      
    }
    else{
      i--;
    }
  }

  

  if(changeDue > 0 ){
    cd.innerText = "Status: INSUFFICIENT_FUNDS"
    return;
  }

  totalChangeAvailable = (totalChangeAvailable - difference).toFixed(2);

  //console.log(totalChangeAvailable);

  if (totalChangeAvailable < 0.01 ){
    cd.innerText = "Status: CLOSED";

  }
  else{ cd.innerText = "Status: OPEN"; }

change = change
  .filter((c) => c[1] > 0)
  .map((d) => [d[0], d[1].toFixed(2)]);
  
  change.reverse().forEach((c)=>{
      cd.innerText += ` ${c[0]}: $${Number(c[1])}`;
    });

    updateDrawer();

}

purchaseBtn.addEventListener('click', runRegister);

price = 19.5;
cid = [
  ['PENNY', 1.01],
  ['NICKEL', 2.05],
  ['DIME', 3.1],
  ['QUARTER', 4.25],
  ['ONE', 90],
  ['FIVE', 55],
  ['TEN', 20],
  ['TWENTY', 60],
  ['ONE HUNDRED', 100]
];

Challenge Information:

Build a Cash Register Project - Build a Cash Register

5

Please do not create duplicate topics for the same challenge/project question(s). This duplicate topic has been unlisted.

Thank you.

6

hi there,

To be honest, your code is hard to read because it is not well-indented. However, I went ahead and made a copy to look at and it seems that you have a lot of code that is in the global scope. You want to put almost all the code that does anything useful inside a function that is triggered by the button click because anything in the global scope is going to have the wrong values for cid and price due to the way the tests run without stopping and the way that they reset the price and cid in between each test without reloading the entire code.

here’s my version of your code with a little better indentation so we can see it better.
I will split out the sections that I think may need to move to a function instead of staying in the global scope.

let cidValues = [0.01, 0.05, 0.1, 0.25, 1, 5, 10, 20, 100]

const input = document.getElementById('cash');
const purchaseBtn = document.getElementById('purchase-btn');
const ca = document.getElementById('change-av');
const cd = document.getElementById('change-due');

const updateDrawer = () => {
  ca.innerHTML = '<h3>Change in Drawer</h3>';
  cid.forEach((c)=>{
    ca.innerHTML += `<p>${c[0]}: $${c[1]}</p>`
  });
}

const getTotal = (arr) => {
  let total = 0;
  arr.forEach((c)=> {
    total += c[1]
  });
  return total.toFixed(2);
}

this part just below is globally scoped code that needs to go into a function triggered by clicking

let totalChangeAvailable = 0;

document.querySelector('#title').innerText = `Cash Register \nPrice: $${price}`;
updateDrawer();
totalChangeAvailable = getTotal(cid);

const runRegister = () => {
  if (input.value === ""){
    return;
  }
  const cash = parseFloat(input.value).toFixed(2);

  if (cash < price) {
    alert("Customer does not have enough money to purchase the item");
    return ;
  }

  if (cash == price) {
    cd.innerText = "No change due - customer paid with exact cash";
    return;
  }

  const difference = Number(cash-price);

  if (difference > totalChangeAvailable) {
    cd.innerText = "Status: INSUFFICIENT_FUNDS"
    return;
  }

  let change = [
  ['PENNY', 0],
  ['NICKEL', 0],
  ['DIME', 0],
  ['QUARTER', 0],
  ['ONE', 0],
  ['FIVE', 0],
  ['TEN', 0],
  ['TWENTY', 0],
  ['ONE HUNDRED', 0]
  ];
  
  let i = cidValues.length -1;
  let changeDue = difference;
  while (i >= 0) {
    if (changeDue >= cidValues[i] && cid[i][1] >= cidValues[i]) {
      let x = cidValues[i]
      change[i][1] = x + change[i][1];
      changeDue = (changeDue - x).toFixed(2);
      cid[i][1] = (cid[i][1] - x).toFixed(2);
      
    }
    else{
      i--;
    }
  }

  

  if(changeDue > 0 ){
    cd.innerText = "Status: INSUFFICIENT_FUNDS"
    return;
  }

  totalChangeAvailable = (totalChangeAvailable - difference).toFixed(2);

  //console.log(totalChangeAvailable);

  if (totalChangeAvailable < 0.01 ){
    cd.innerText = "Status: CLOSED";

  }
  else { cd.innerText = "Status: OPEN"; }

change = change
  .filter((c) => c[1] > 0)
  .map((d) => [d[0], d[1].toFixed(2)]);
  
  change.reverse().forEach((c)=>{
      cd.innerText += ` ${c[0]}: $${Number(c[1])}`;
    });

    updateDrawer();

}

purchaseBtn.addEventListener('click', runRegister);

price = 19.5;
cid = [
  ['PENNY', 1.01],
  ['NICKEL', 2.05],
  ['DIME', 3.1],
  ['QUARTER', 4.25],
  ['ONE', 90],
  ['FIVE', 55],
  ['TEN', 20],
  ['TWENTY', 60],
  ['ONE HUNDRED', 100]
];
7

Hello, finally solved it. What worked for me was changing everything to be in terms of cents and then dealing with them as integers instead of floating point.

1 Like