Build a Cash Register Project - Build a Cash Register

JavaScript
1

Tell us what’s happening:

My codes seem to fail/pass test depending on the cid and price values I have put. This seems weird and I can’t figure out why this is happening. Tested individually, by changing the cid and price manually, I pass all the tests.

Your code so far

<!-- <!DOCTYPE html>
<html lang="en">
  <head>
    <title>Cash Register</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="styles.css">
  </head>
  <body>
    <header>
      <img src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg"/>
      <h1>Cash Register Project</h1>
    </header>
    <main>
      <div id="change-due">
      </div>
      <div id="cash-form">
        <label for="cash">Enter cash from customer:</label>
        <input type="number" name="cash" id="cash">
      <button type="submit" id="purchase-btn">Purchase</button>
      </div>   
      <div id="container">
        <div id="total-container">
          <p id="total"></p>
          <div id="total-connector"></div>
        </div>
        <div id="cid-container">
          <div id="number-pads">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
          </div>
          <div id="cid">
            Change in drawer:
            <ul style="list-style-type:none;" id="cid-ul">
              <li>Pennies: $<span></span></li>
              <li>Nickels: $<span></span></li>
              <li>Dimes: $<span></span></li>
              <li>Quarters: $<span></span></li>
              <li>Ones: $<span></span></li>
              <li>Fives: $<span></span></li>
              <li>Tens: $<span></span></li>
              <li>Twenties: $<span></span></li>
              <li>Hundreds: $<span></span></li>
            </ul>
          </div>
        </div>
        <div id="drawer">
          <div id="drawer-knob"></div>
        </div>
      </div>
    </main>
    <script src="script.js"></script>
  </body>
</html>-->


/* const changeDue = document.getElementById("change-due");
const purchaseBtn = document.getElementById("purchase-btn");
const totalEl = document.getElementById("total");
const cidUlEl = document.getElementById("cid-ul");
const cidLiEls = document.querySelectorAll("#cid-ul span");

let price = 19.5;
let cid = [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]];

cid.forEach((el, index) => {
  cidLiEls[index].textContent = el[1];
})

totalEl.innerHTML = `
Total: $${price}
`;

class ChangeDrawer {
  constructor() {
    this.cid = cid;
    this.total = Number(cid.reduce((acc, curr) => acc + curr[1], 0).toFixed(2));
  }

  checkEnoughFund (price, cash) {
    let changeAmount = cash - price;
    return changeAmount < this.total;
  }

  checkExactFund (price, cash) {
    let changeAmount = cash - price;
    return changeAmount === this.total;
  }

  whenExactFund () {
    changeDue.innerHTML = `
    Status: CLOSED </br>
    `;
    this.cid.forEach((el, index) => {
      if (el[1] !== 0) {
        changeDue.innerHTML += `
        ${el[0]}: $${el[1]} </br>
        `
        this.cid[index][1] = 0;
      }
    })
    this.cid.forEach((el, index) => {
      cidLiEls[index].textContent = el[1];
    })
  }

  getNoteFund (noteName) {
    const corrEl = this.cid.find((el) => el[0] === noteName);
    const corrTotal = corrEl[1];
    return corrTotal;
  }

  computeChangeNotes(price, cash) {
    let changeAmount = cash - price;
    const notes = [100, 20, 10, 5, 1, 0.25, 0.1, 0.05, 0.01];
    let changeNotes = [];
    notes.forEach((el) => {
      if (el[1] !== 0) {
        if (changeAmount >= el) {
          const noteName = el === 100 ? 'ONE HUNDRED' : el === 20 ? "TWENTY" : el === 10 ? "TEN" : el === 5 ? "FIVE" : el === 1 ? "ONE" : el === 0.25 ? "QUARTER" : el === 0.1 ? "DIME" : el === 0.05 ? "NICKEL" : "PENNY";
          changeAmount = changeAmount.toFixed(2);
          if (this.getNoteFund(noteName) <= changeAmount) {
            changeNotes.push([noteName, this.getNoteFund(noteName)])
            changeAmount -= this.getNoteFund(noteName);
          } else {
            const numberOfNotes = Math.floor(changeAmount / el);
            changeAmount = changeAmount % el;
            changeNotes.push([noteName, numberOfNotes * el]);
          }
        }
      }
    })

    if (changeNotes.some((el) => el[1] !== 0)) {
      changeDue.innerHTML = `
      Status: OPEN </br>
      `;
      changeNotes.forEach((el) => {
        changeDue.innerHTML += `
        ${el[0]}: $${el[1]} </br>
        `
      })
    } else {
      changeDue.innerHTML = "Status: INSUFFICIENT_FUNDS";
    }
    
    return changeNotes;
  }

  computeChange(price, cash) {
    const changeNotes = this.computeChangeNotes(price, cash);
    changeNotes.forEach((el) => {
      this.cid.forEach((c) => {
        if (el[0] === c[0]) {
          c[1] -= el[1];
          return;
        }
      })
    })
    this.cid.forEach((el, index) => {
      cidLiEls[index].textContent = el[1];
    })
  }

  updateTotal (price, cash) {
    let changeAmount = cash - price;
    this.total -= changeAmount;
  }
}

const drawer = new ChangeDrawer();

purchaseBtn.addEventListener("click", () => {
  const cashValue = Number(document.getElementById("cash").value);
  if (price > cashValue) {
    alert("Customer does not have enough money to purchase the item")
  } else if (price === cashValue) {
    changeDue.innerHTML = "No change due - customer paid with exact cash";
  } else {
    if (drawer.checkEnoughFund(price, cashValue)) {
      drawer.computeChange(price, cashValue);
      drawer.updateTotal(price, cashValue);
    } else if (drawer.checkExactFund(price, cashValue)) {
      drawer.whenExactFund();
    }else {
      changeDue.innerHTML = "Status: INSUFFICIENT_FUNDS";
    }
  }
  document.getElementById("cash").value = '';
})
 */


/* f* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background-color: #003eaa;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

header {
  text-align: center;
}

img {
  width: 200px;
  margin-top: 60px;
}

h1 {
  margin-top: 10px;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 15px; 
}

#cash-form {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
}

#cash {
  height: 30px;
}

#purchase-btn {
  height: 30px;
  width: 80px; 
}

#container {
  margin-top: 15px;
}

#total-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#total {
  border: 5px solid yellow;
  padding: 10px 40px;
  background-color: black;
  width: 200px;
  text-align: center;
}

#total-connector {
  background-color: yellow;
  width: 40px;
  height: 40px;
  margin-right: 90px;
}

#cid-container {
  background-color: yellow;
  width: 400px;
  height: 400px;
  display: flex;
  justify-content: space-between;
  border-radius: 40px 40px 0 0;
}

#cid {
  background-color: white;
  color: black;
  margin: 30px;
  padding: 5px;
  width: 200px;
}

#number-pads {
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: 50px;
  margin: 30px;
  height: 50px;
}

#number-pads div {
  background-color: black;
  width: 20px; 
  height: 20px;
  margin: auto;
  border-radius: 8px; 
}

#drawer {
  margin: 10px 0;
  background-color: yellow;
  height: 40px; 
  width: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#drawer-knob {
  height: 20px; 
  width: 20px;
  background-color: black;
  border-radius: 100%;
}






 */

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:133.0) Gecko/20100101 Firefox/133.0

Challenge Information:

Build a Cash Register Project - Build a Cash Register

2

If you want to manually check some of the cases from tests, the cid and price should be set to the new values at the end of your JS. That’s more accurately how it’s done in tests.

Test re-assigns these values after your code is executed, it’s neither injecting them before, nor replacing the declarations.

1 Like
3

but wouldn’t the cid reference I have in the class take the first defined cid?

4

Yes, constructor in class would use the cid values that were at the time it’s instantiated. Next question would be - is that what should be happening and/or how it could be changed?