Build a Cash Register Project

Programming JavaScript
1

Disclaimer, I am still learning javascript so this code for this project took me quite a longggggg time to solve. I know the code is inefficient and I’m sure there is a short way to implement the project’s code. As of right now my goal was to make sure the project code worked and after passing the project, take a look at it again later to see what I can improve.

On to the issue. I put 2 codes below which are the same but with slight modifications (most specifically to the cid values). So, I was able to pass all the tests in the project. I did them manually and each one checked off. This was in terms of the 2nd code. But the 1st code that I’m showing below was the one that I thought was correct because I did each test manually and it gave the correct output. The 1st code was what I had initially but I couldn’t pass the tests. When I made the cid values for one test, it would pass that test and not the others. When I input the values for cid for those “others” it would not pass the test for the ones that already did so it would be back and forth. I was thinking the reverse method on cid was what made the passing of the tests and not others wonky. So I changed all the array elements of cid starting from [8][1] (pennies) to mess around and see what I get as shown in code 2 and it passed. But when I inputted the values manually, it would not show the output that the tests wanted yet it passed it. For code 1, When I correct the array elements starting from [0][1] (hundreds) to downwards, it would not pass the tests even though I tested each one manually.

1st Code that passed all the tests without pressing “Run the Tests…” and manually checked each test by inputting the values for cid.

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

 
const csh = document.getElementById("cash");
const changeDue = document.getElementById("change-due");
const purchase = document.getElementById("purchase-btn");
const regLcd = document.getElementById("regLcd");
const mainScr = document.getElementById("mainScreen");
const revCid = cid.reverse();
let sumOfCurrsArr = [];
let cshVal = 0;
let total = 0;


regLcd.innerHTML = `
<div>TOTAL: $${price}</div>
`;

mainScreen.innerHTML = '';
  for(let arr of cid){
  mainScreen.innerHTML += `<div> ${arr[0]}: $${arr[1]} </div>`
}

  //function
  const dollToCent = (dollars) => `${Math.round(dollars * 100)}`;


  //function
  const addUpChange = () => {
    total = 0
    sumOfCurrsArr = [];
    let hundreds = 0;
    let twenties = 0;
    let tens = 0;
    let fives = 0;
    let ones = 0;
    let quarts = 0;
    let dimes = 0;
    let nicks = 0;
    let pens = 0;
    let cshVal = dollToCent(csh.value - price);
    
    //100s
if(!(total == cshVal) && cid[0][1] != 0){
  console.log("cid[08][1] = ", cid[0])
  console.log("total = ", total);
    console.log("cshVal = ", cshVal)
      while(!(total == (cshVal - (cshVal % 10000)))){ 
      if(cid[0][1] > 0 && !(hundreds == (cid[0][1] * 100))){
        total += 10000;
        hundreds += 10000; 
        }else{
          break; 
        }
      }
      sumOfCurrsArr.push(hundreds / 10000);
    }else{
      sumOfCurrsArr.push(0)
    }
    
    //20s 
    if(!(total == cshVal) && cid[1][1] != 0){
     while(!(total == (cshVal - (cshVal % 2000)))){  
      if(cid[1][1] > 0 && !(twenties == (cid[1][1] * 100))){
        total += 2000;  
        twenties += 2000;
        }else{
          break; 
        }    
      }  
      sumOfCurrsArr.push(twenties / 2000);
    }else{
      sumOfCurrsArr.push(0) 
    }
    //10s  
    if(!(total == cshVal) && cid[2][1] != 0){
      while(!(total == (cshVal - (cshVal % 1000)))){
      if(cid[2][1] > 0 && !(tens == (cid[2][1] * 100))){
        total += 1000;
        tens += 1000;
        }else{ 
          break; 
        } 
      }
      sumOfCurrsArr.push(tens / 1000);
    }else{
      sumOfCurrsArr.push(0)
    }
       
    //5s
    if(!(total == cshVal) && cid[3][1] != 0){
      while(!(total == (cshVal - (cshVal % 500)))){
      if(cid[3][1] > 0 && !(fives == (cid[3][1] * 100))){
        total += 500;
        fives += 500;
        }else{
          break;  
        }
      } 
      sumOfCurrsArr.push(fives / 500);
    }else{
      sumOfCurrsArr.push(0)
    } 
    //1s
    if(!(total == cshVal) && cid[4][1] != 0){ // TRUE && TRUE
      while(!(total == (cshVal - (cshVal % 100)))){
      if(cid[4][1] > 0 && !(ones == (cid[4][1] * 100))){
        total += 100;
        ones += 100;
        }else{
          break; 
        }  
      }   
      sumOfCurrsArr.push(ones / 100);
    }else{
      sumOfCurrsArr.push(0)
    }
    //0.25s    
    if(!(total == cshVal) && cid[5][1] != 0){
      while(!(total == (cshVal - (cshVal % 25)))){ 
      if(cid[5][1] > 0 && !(quarts == (cid[5][1] * 100))){
        total += 25; 
        quarts += 25;
        }else{
          break; 
        }
      }
      sumOfCurrsArr.push(quarts / 25);
    }else{
      sumOfCurrsArr.push(0)
    }
    //0.10s 
    if(!(total == cshVal) && cid[6][1] != 0){
      while(!(total == (cshVal - (cshVal % 10)))){  // 485490 
      if(cid[6][1] > 0 && !(dimes == (cid[6][1] * 100))){
        total += 10;
        dimes += 10; 
        }else{
          break; 
        }
      }
      sumOfCurrsArr.push(dimes / 10);
    }else{
      sumOfCurrsArr.push(0) 
    }
    //0.05s
    if(!(total == cshVal) && cid[7][1] != 0){
      while(!(total == (cshVal - (cshVal % 5)))){ 
      if(cid[7][1] > 0 && !(nicks == (cid[7][1] * 100))){
        total += 5;
        nicks += 5;   //45.36
        }else{
          break;  
        }        
      }
      sumOfCurrsArr.push(nicks / 5);
    }else{
      sumOfCurrsArr.push(0);
    }
    //0.01s
    if(!(total == cshVal) && cid[8][1] != 0){ //
      while(!(total == (cshVal - (cshVal % 1)))){ 
      if(cid[8][1] > 0 && !(pens == (cid[8][1] * 100))){
        total += 1;
        pens += 1;
        }else{ 
          break;
        }
      }
      sumOfCurrsArr.push(pens / 1);
    }else{
      sumOfCurrsArr.push(0)
    }


    if(total != cshVal){
      total = 0;
      return total;
    }
  return total / 100;
  } //end of addUpChange function

    
  //function
const updateMain = () => {
  changeDue.innerHTML = "";
if((total / 100) < currentCid() && !((total / 100) == 0)){
  changeDue.innerHTML += `Status: OPEN`
  changeDue.innerHTML += "";
}else if(((total / 100) > currentCid()) || (total / 100) == 0){
      changeDue.innerHTML += `Status: INSUFFICIENT_FUNDS`
      return;
}else if((total / 100) == currentCid()){
  changeDue.innerHTML += `Status: CLOSED`
  changeDue.innerHTML += "";
} 

    
  if(sumOfCurrsArr[0] != 0){
    changeDue.innerHTML += ` ONE HUNDRED: $${sumOfCurrsArr[0] * 100} `
  }
  if(sumOfCurrsArr[1] != 0){
    changeDue.innerHTML += ` TWENTY: $${sumOfCurrsArr[1] * 20}`  
  }
  if(sumOfCurrsArr[2] != 0){
    changeDue.innerHTML += ` TEN: $${sumOfCurrsArr[2] * 10}`;
  }
  if(sumOfCurrsArr[3] != 0){
    changeDue.innerHTML += ` FIVE: $${sumOfCurrsArr[3] * 5}`
  }
  if(sumOfCurrsArr[4] != 0){
    changeDue.innerHTML += ` ONE: $${sumOfCurrsArr[4] * 1}`
  }
  if(sumOfCurrsArr[5] != 0){
    changeDue.innerHTML += ` QUARTER: $${sumOfCurrsArr[5] * 0.25}`
  }
  if(sumOfCurrsArr[6] != 0){
    changeDue.innerHTML += ` DIME: $${sumOfCurrsArr[6] * 0.10}`
  }
  if(sumOfCurrsArr[7] != 0){
    changeDue.innerHTML += ` NICKEL: $${sumOfCurrsArr[7] * 0.05}` 
  }
  if(sumOfCurrsArr[8] != 0){
    changeDue.innerHTML += ` PENNY: $${sumOfCurrsArr[8] * 0.01}`
  } 
  
}
 
const currentCid = () => {
  let total = 0;
  for(let el of cid){
    total += el[1];
  }
  return total.toFixed(2);
}

purchase.addEventListener('click', () => {
  console.log("price = ", price);
  console.log("csh.value = ", csh.value);
  console.log("cid = ", cid)
  console.log("#change-due = ", changeDue.innerHTML)
  if(csh.value < price){
      alert("Customer does not have enough money to purchase the item");
      return
    }else if(csh.value == price){
      changeDue.style.display = "flex";
      changeDue.innerHTML = `No change due - customer paid with exact cash`;
      csh.value = "";
      return;
    }

  changeDue.style.display = "flex";
  addUpChange()
  updateMain()
  csh.value = "";
})

2nd code that didn’t pass all the tests when I press “Run the tests…”

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

 
const csh = document.getElementById("cash");
const changeDue = document.getElementById("change-due");
const purchase = document.getElementById("purchase-btn");
const regLcd = document.getElementById("regLcd");
const mainScr = document.getElementById("mainScreen");
const revCid = cid.reverse();
let sumOfCurrsArr = [];
let cshVal = 0;
let total = 0;


regLcd.innerHTML = `
<div>TOTAL: $${price}</div>
`;

mainScreen.innerHTML = '';
  for(let arr of cid){
  mainScreen.innerHTML += `<div> ${arr[0]}: $${arr[1]} </div>`
}

  //function
  const dollToCent = (dollars) => `${Math.round(dollars * 100)}`;


  //function
  const addUpChange = () => {
    total = 0
    sumOfCurrsArr = [];
    let hundreds = 0;
    let twenties = 0;
    let tens = 0;
    let fives = 0; 
    let ones = 0;
    let quarts = 0;
    let dimes = 0;
    let nicks = 0;
    let pens = 0;
    let cshVal = dollToCent(csh.value - price);
    
    //100s
if(!(total == cshVal) && cid[0][1] != 0){
  console.log("cid[8][1] = ", cid[0])
  console.log("total = ", total);
    console.log("cshVal = ", cshVal)
      while(!(total == (cshVal - (cshVal % 10000)))){ 
      if(cid[0][1] > 0 && !(hundreds == (cid[0][1] * 100))){
        total += 10000;
        hundreds += 10000; 
        }else{
          break; 
        }
      }
      sumOfCurrsArr.push(hundreds / 10000);
    }else{
      sumOfCurrsArr.push(0)
    }
    
    //20s 
    if(!(total == cshVal) && cid[1][1] != 0){
     while(!(total == (cshVal - (cshVal % 2000)))){  
      if(cid[1][1] > 0 && !(twenties == (cid[1][1] * 100))){
        total += 2000;  
        twenties += 2000;
        }else{
          break; 
        }    
      }  
      sumOfCurrsArr.push(twenties / 2000);
    }else{
      sumOfCurrsArr.push(0) 
    }
    //10s  
    if(!(total == cshVal) && cid[2][1] != 0){
      while(!(total == (cshVal - (cshVal % 1000)))){
      if(cid[2][1] > 0 && !(tens == (cid[2][1] * 100))){
        total += 1000;
        tens += 1000;
        }else{
          break; 
        } 
      }
      sumOfCurrsArr.push(tens / 1000);
    }else{
      sumOfCurrsArr.push(0)
    }
       
    //5s
    if(!(total == cshVal) && cid[3][1] != 0){
      while(!(total == (cshVal - (cshVal % 500)))){
      if(cid[3][1] > 0 && !(fives == (cid[3][1] * 100))){
        total += 500;
        fives += 500;
        }else{
          break;  
        }
      } 
      sumOfCurrsArr.push(fives / 500);
    }else{
      sumOfCurrsArr.push(0)
    } 
    //1s
    if(!(total == cshVal) && cid[4][1] != 0){ // TRUE && TRUE
      while(!(total == (cshVal - (cshVal % 100)))){
      if(cid[4][1] > 0 && !(ones == (cid[4][1] * 100))){
        total += 100;
        ones += 100;
        }else{
          break; 
        }  
      }   
      sumOfCurrsArr.push(ones / 100);
    }else{
      sumOfCurrsArr.push(0)
    }
    //0.25s    
    if(!(total == cshVal) && cid[5][1] != 0){
      while(!(total == (cshVal - (cshVal % 25)))){ 
      if(cid[5][1] > 0 && !(quarts == (cid[5][1] * 100))){
        total += 25; 
        quarts += 25;
        }else{
          break; 
        }
      }
      sumOfCurrsArr.push(quarts / 25);
    }else{
      sumOfCurrsArr.push(0)
    }
    //0.10s 
    console.log("0.10s: total = ", total)
    console.log("0.10s: cid[6][1] = ", cid[6][1])
    if(!(total == cshVal) && cid[6][1] != 0){ 
      while(!(total == (cshVal - (cshVal % 10)))){  // 9674 - 4 = 9670
      if(cid[6][1] > 0 && !(dimes == (cid[6][1] * 100))){ // 0 == 310
        total += 10;
        dimes += 10; 
        }else{
          break; 
        }
      }
      sumOfCurrsArr.push(dimes / 10);
    }else{
      sumOfCurrsArr.push(0) 
    }
    //0.05s
    if(!(total == cshVal) && cid[7][1] != 0){
      while(!(total == (cshVal - (cshVal % 5)))){ 
      if(cid[7][1] > 0 && !(nicks == (cid[7][1] * 100))){
        total += 5;
        nicks += 5;   //45.36
        }else{
          break;  
        }        
      }
      sumOfCurrsArr.push(nicks / 5);
    }else{
      sumOfCurrsArr.push(0);
    }
    //0.01s
    if(!(total == cshVal) && cid[8][1] != 0){ //
      while(!(total == (cshVal - (cshVal % 1)))){ 
      if(cid[8][1] > 0 && !(pens == (cid[8][1] * 100))){
        total += 1;
        pens += 1;
        }else{ 
          break;
        }
      }
      sumOfCurrsArr.push(pens / 1);
    }else{
      sumOfCurrsArr.push(0)
    }


    if(total != cshVal){
      total = 0;
      return total;
    }
  return total / 100;
  } //end of addUpChange function

    
  //function
const updateMain = () => {
  changeDue.innerHTML = "";
if((total / 100) < currentCid() && !((total / 100) == 0)){
  changeDue.innerHTML += `Status: OPEN`
  changeDue.innerHTML += "";
}else if(((total / 100) > currentCid()) || (total / 100) == 0){
      changeDue.innerHTML += `Status: INSUFFICIENT_FUNDS`
      return;
}else if((total / 100) == currentCid()){
  changeDue.innerHTML += `Status: CLOSED`
  changeDue.innerHTML += "";
} 

    
  if(sumOfCurrsArr[0] != 0){
    changeDue.innerHTML += ` ONE HUNDRED: $${sumOfCurrsArr[0] * 100} `
  }
  if(sumOfCurrsArr[1] != 0){
    changeDue.innerHTML += ` TWENTY: $${sumOfCurrsArr[1] * 20}`  
  }
  if(sumOfCurrsArr[2] != 0){
    changeDue.innerHTML += ` TEN: $${sumOfCurrsArr[2] * 10}`;
  }
  if(sumOfCurrsArr[3] != 0){
    changeDue.innerHTML += ` FIVE: $${sumOfCurrsArr[3] * 5}`
  }
  if(sumOfCurrsArr[4] != 0){
    changeDue.innerHTML += ` ONE: $${sumOfCurrsArr[4] * 1}`
  }
  if(sumOfCurrsArr[5] != 0){
    changeDue.innerHTML += ` QUARTER: $${sumOfCurrsArr[5] * 0.25}`
  }
  if(sumOfCurrsArr[6] != 0){
    changeDue.innerHTML += ` DIME: $${sumOfCurrsArr[6] * 0.10}`
  }
  if(sumOfCurrsArr[7] != 0){
    changeDue.innerHTML += ` NICKEL: $${sumOfCurrsArr[7] * 0.05}` 
  }
  if(sumOfCurrsArr[8] != 0){
    changeDue.innerHTML += ` PENNY: $${sumOfCurrsArr[8] * 0.01}`
  } 
  
}
 
const currentCid = () => {
  let total = 0;
  for(let el of cid){
    total += el[1];
  }
  return total.toFixed(2);
}

purchase.addEventListener('click', () => {
  console.log("price = ", price);
  console.log("csh.value = ", csh.value);
  console.log("cid = ", cid)
  console.log("#change-due = ", changeDue.innerHTML)
  if(csh.value < price){
      alert("Customer does not have enough money to purchase the item");
      return
    }else if(csh.value == price){
      changeDue.style.display = "flex";
      changeDue.innerHTML = `No change due - customer paid with exact cash`;
      csh.value = "";
      return;
    }

  changeDue.style.display = "flex";
  addUpChange()
  updateMain()
  csh.value = "";
})
2

It’s hard to say for sure without having HTML part.

There’s slight caveat regarding testing manually. Changing cid and price at the top of code - where they are declared is not reproducing how it will work during test. More accurate is reassigning cid and price at the bottom of code, as that’s basically what test is doing. Regardless of the values with which cid and price are declared, code should be able to get the expected result, when they are reassigned that way.

4

Sorry I forgot to include that but here, I hope it makes the code more understandable.

<!DOCTYPE html>
<html>
  <head>
    <meta charset = "UTF-8"/>
    <meta name = "viewport" content = "width = device-width, initial-scale = 1.0"/>
    <title>Cash Register Project</title>
    <link href = "styles.css" rel = "stylesheet"/>
  </head>
  <body>
    <div id="change-due"></div>
    <input type="number"  id="cash" />
    <button id="purchase-btn">PURCHASE</button>
    <div id = "container">
      <div id = "regLcd" class="grid-col-span-2"></div>
      <div id = "regButtons">
        <div class = "regBtn">1</div>
        <div class = "regBtn">2</div>
        <div class = "regBtn">3</div>
        <div class = "regBtn">4</div>
        <div class = "regBtn">5</div>
        <div class = "regBtn">6</div>
        <div class = "regBtn">7</div>
        <div class = "regBtn">8</div>
        <div class = "regBtn">9</div>
        <div class = "regBtn">0</div>
      </div>
      <div id = "mainScreen"></div>
    </div>


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

try to add a different value for cid and price at the bottom of the javascript, and verify if your code still works

6

Thank you! I was able to fix it. I put the console.logs at the bottom as you mentioned and then I saw what cid was doing and just changed the cid values on the code to address the tests and get the right outputs.

7

Yup! That’s what I did and I was able to fix it. Thank you!