Build a Cash Register Project - Build a Cash Register

Tell us what’s happening:

I am unable to get my code to pass despite it passing all test cases. it simply refuses to acknowledge that I either set the status to open or closed despite passing every test case given requiring those things.

Your code so far

<!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>
    <h1 class="title">Cash Register Simulator</h1>
    <div class="change-due" id="change-due"></div>
    <div class="input-div">
      <p>Enter cash from customer:</p>
      <input type="number" id="cash" step=".01"></input>
      <button id="purchase-btn" type="button">Purcahse</button>
    </div>
    
    <div class="cash-register">
      <div class="total-screen">
        <p class="total-price" id="price">$3.04</p>
      </div>
      <div class="post"></div>
      <div class="body">
        <div class="button-holder">
          <button class="btn" type="button">1</button>
          <button class="btn" type="button">2</button>
          <button class="btn" type="button">3</button>
          <button class="btn" type="button">4</button>
          <button class="btn" type="button">5</button>
          <button class="btn" type="button">6</button>
          <button class="btn" type="button">7</button>
          <button class="btn" type="button">8</button>
          <button class="btn" type="button">9</button>
          <button class="btn" type="button">0</button>
          <button class="btn" type="button">.</button>
          <button class="btn" type="button">bkspc</button>
        </div>
        <div class="cash-drawer-display" id="cash-drawer">
          <p><strong>Change in drawer:</strong></p>
          <p>Pennies: $0.97</p>
          <p>Nickels: $2.05</p>
          <p>Dimes: $2.9</p>
          <p>Quarters: $3.75</p>
          <p>Ones: $87</p>
          <p>Fives: $50</p>
          <p>Tens: $20</p>
          <p>Twenties: $60</p>
          <p>Hundreds: $100</p>
        </div>
      </div>
      <div class="drawer">
        <div class="handle"></div>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

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 cashKey = {
  "PENNY": .01,
  "NICKLE": .05,
  "DIME": .1,
  "QUARTER": .25,
  "ONE": 1.00,
  "FIVE": 5.00,
  "TEN": 10.00,
  "TWENTY": 20.00,
  "ONE HUNDRED": 100.00
};
const total = document.getElementById("price");
const input = document.getElementById("cash");
const purchaseBtn = document.getElementById("purchase-btn");
const keypad = document.getElementsByClassName("btn");
const cashOnHand = document.getElementById("cash-drawer");
const changeDue = document.getElementById("change-due");
total.innerHTML = `$${price}`;
let totalCOH = 0;
let enoughCurrency = true;
/*  TODO
  Logic to take input display changeDue and change Cid numbers
*/
// function to update totalCOH variable
const updateTotalCOH = () => {
  let currCOH = 0;
  cid.forEach((denom) => {
    currCOH += denom[1];
  });
  totalCOH = currCOH;
  console.log(totalCOH);
};
// Determines if the cash on hand is more than the cash given minus the price
const totalLessThanCOH = (inputValue) => {
  updateTotalCOH();
  if(inputValue - price > totalCOH){
    return false
  }else if(inputValue - price === 0){
    return 0;
  }else{
    return true;
  }
};
const subtractLargest = (inputValue) => {
  let changeObj = {};
  let tempCid = cid;
  let changeValueArr = [];
  // Sets a change value equal to the cash given minus the price
  let change = inputValue - price;
  //checks if the change is less than the cash on hand
  if(totalLessThanCOH(inputValue)){
    
    // running loop starting at the end of the cashKey array and subtracting the value of that key from the change until the cid value is 0
    for(let i = cid.length -1; i >= 0; i--){
      let key = Object.keys(cashKey);
      // while loop continues to subtract current value at position i from change until change is less than current value 
      
      while(change >= cashKey[key[i]]){
        // checks if the Cid value will be brought below zero and breaks from while loop if that is the case to move on to next highest value       
        if(tempCid[i][1] - cashKey[key[i]] >= 0){
          change -= cashKey[key[i]];
          tempCid[i][1] -= cashKey[key[i]];
          if(change > 0 && change < .01){
          tempCid[i][1] = Math.ceil(tempCid[i][1] * 100) / 100;
          change = Math.ceil(change * 100) / 100;
        }   
          // checks if the change object has the subtracted value key. adds it if not. incraments it if it does
          if(changeObj.hasOwnProperty(key[i])){
            changeObj[key[i]] += cashKey[key[i]];

          }else{
            changeObj[key[i]] = cashKey[key[i]];
          }
        }else{
          break
        }
        
      }
      if(changeObj[key[i]]){
      changeObj[key[i]] = Math.floor(changeObj[key[i]] * 100) / 100;
      }
    }
  }
  //returns object containing values subtracted from largest to smallest and updates totalCOH
  //checks if the value of the change in changeObj is equal to the
  changeValueArr = Object.values(changeObj)
  let changeTotal = 0;
  changeValueArr.forEach((num) => changeTotal += num);
  if(Math.floor(changeTotal * 100) / 100 === inputValue - price){
    cid = tempCid;
    updateTotalCOH();
    enoughCurrency = true;
    return changeObj;
  }else{
    enoughCurrency = false;
    return changeObj;
  }
};

const updateDisplay = (inputValue) =>{
  let changeObj = {};
  let changeName = [];
  let changeValue = [];
  let count = 0;
  changeObj = subtractLargest(inputValue);
  if(inputValue > price && enoughCurrency){
    changeName = Object.keys(changeObj);
    changeValue = Object.values(changeObj);
    console.log(totalCOH + " Cash on hand")
    if(totalCOH === 0){
      changeDue.style.display = "block";
      changeDue.innerHTML = `<p>Status: CLOSED</p>`;
      changeName.forEach((name) => {
        changeDue.innerHTML += `<p>${name}: $${changeValue[count]}</p>`;
        count++;
      });
    }else{
      changeDue.style.display = "block";
      changeDue.innerHTML = `</p>Status: OPEN</p>`;
      changeName.forEach((name) => {
        changeDue.innerHTML += `<p>${name}: $${changeValue[count]}</p>`;
        count++;
      });
    }
  }else if(inputValue === price){
    changeDue.style.display = "block";
    changeDue.innerHTML = `No change due - customer paid with exact cash`;
  }else if(inputValue < price){
    alert("Customer does not have enough money to purchase the item");
  }else{
    changeDue.style.display = "block";
    changeDue.innerHTML = `<p>Status: INSUFFICIENT_FUNDS</p>`;
  }
};



//sets the behavior of the "Purchase" button
purchaseBtn.addEventListener("click", () => {
  const value = Math.ceil(input.value * 100) / 100;
  updateDisplay(value);
})





// Sets the behavior onClick for each button based on their value to allow for keypad entry into input. unable to do .X numbers for some odd reason
Object.keys(keypad).forEach((elem) => {
  keypad[elem].addEventListener("click", () => {
    let count = Number(elem);
    if(elem < 9){
      input.value += count + 1;
    }else if (elem === "9"){
      input.value += 0;
    }else if (elem === "10"){
      input.value += ".0";
    }else{
      let inputString = Number(input.value.toString().slice(0, -1));
      input.value = inputString;
      if(input.value === "0"){
        input.value = "";
      }
    // bug in code disallows removal of numbers after decimal while retaining decimal. unable to fix at this time.
    }
  });
});

Your browser information:

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

Challenge Information:

Build a Cash Register Project - Build a Cash Register

I like the way you set up your code, you went a different route than I did on this project.

I think the issue might be the way you’re outputting your result. Right now, for the status part, you’re outputting it in its own <p> element, and then doing another <p> element for the change being issued. I had tried to do this as well originally, and what I came to suspect is that their test programming was looking for a single string (without p tags) to be fed to that changeDue.innerText property, and that seemed to work for me.

Try it with the p tags removed, and assign your output to changeDue.innerText instead of changeDue.innerHTML.

1 Like

Well I got through it. I bug fixed a bunch of stuff and eventually settled on my Math.floor/Math.ceil being a problem so i just converted most of them over to .toFixed(2) and parsed the int. this seems to make it work 1/3 times. I have literally no clue what could possibly be making it fail 2/3 of the time as every number i’ve tried works out just fine. in the end it was the Status: closed ones giving me the hardest time and what i suspect was failing 2/3 times. but without proper feedback as to which tests were exactly failing I had no test cases to debug with. but I passed and will move on from this god forsaken cash register. thank you for your input

1 Like