Build a Cash Register Project - Build a Cash Register

Tell us what’s happening:

My output matches the required output for the last test case but it still says I haven’t passed it. Is there still a bug? I thought it was resolved.

Your code so far

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

let changeAmount = [
  ["PENNY", 0],
  ["NICKEL", 0],
  ["DIME", 0],
  ["QUARTER", 0],
  ["ONE", 0],
  ["FIVE", 0],
  ["TEN", 0],
  ["TWENTY", 0],
  ["ONE HUNDRED", 0]
];

const cash = document.getElementById("cash");
const purchaseBtn = document.getElementById("purchase-btn");
const changeDue = document.getElementById("change-due");

const pennies = document.getElementById("pennies");
const nickels = document.getElementById("nickels");
const dimes = document.getElementById("dimes");
const quarters = document.getElementById("quarters");
const ones = document.getElementById("ones");
const fives = document.getElementById("fives");
const tens = document.getElementById("tens");
const twenties = document.getElementById("twenties");
const hundreds = document.getElementById("hundreds");

const checkBalance = () => {
  if (cash.value < price) {
    alert("Customer does not have enough money to purchase the item");
  } else if (parseFloat(cash.value) === price) {
    changeDue.classList.remove("hidden");
    changeDue.innerHTML = `<p>No change due - customer paid with exact cash</p>`;
  } else {
    changeDue.classList.remove("hidden");
    calculateBalance();
  }
}

const calculateBalance = () => {
  let change = (cash.value - price).toFixed(2);
  changeDue.innerHTML += `<p>Status: OPEN</p>`;
  while (change > 0) {
    if (change >= 100 && cid[8][1] >= 100) {
      change -= 100;
      cid[8][1] -= 100;
      changeAmount[8][1] += 100;
      hundreds.textContent = cid[8][1];   
    } else if (change >= 20 && cid[7][1] >= 20) {
      change -= 20;
      cid[7][1] -= 20;
      changeAmount[7][1] += 20;
      twenties.textContent = cid[7][1];
    } else if (change >= 10 && cid[6][1] >= 10) {
      change -= 10;
      cid[6][1] -= 10;
      changeAmount[6][1] += 10;
      tens.textContent = cid[6][1];
    } else if (change >= 5 && cid[5][1] >= 5) {
      change -= 5;
      cid[5][1] -= 5;
      changeAmount[5][1] += 5;
      fives.textContent = cid[5][1];
    } else if (change >= 1 && cid[4][1] >= 1) {
      change -= 1;
      cid[4][1] -= 1;
      changeAmount[4][1] += 1;
      ones.textContent = cid[4][1];
    } else if (change >= 0.25 && cid[3][1] >= 0.25) {
      change -= 0.25;
      change = change.toFixed(2);
      cid[3][1] -= 0.25;
      changeAmount[3][1] += 0.25;
      quarters.textContent = cid[3][1];
    } else if (change >= 0.1 && cid[2][1] >= 0.1) {
      change -= 0.1;
      change = change.toFixed(2);
      cid[2][1] -= 0.1;
      changeAmount[2][1] += 0.1;
      dimes.textContent = cid[2][1];
    } else if (change >= 0.05 && cid[1][1] >= 0.05) {
      change -= 0.05;
      change = change.toFixed(2);
      cid[1][1] -= 0.05;
      changeAmount[1][1] += 0.05;
      nickels.textContent = cid[1][1];
    } else if (change >= 0.01 && cid[0][1] >= 0.01) {
      change -= 0.01;
      change = change.toFixed(2);
      cid[0][1] -= 0.01;
      cid[0][1] = cid[0][1].toFixed(2);
      changeAmount[0][1] += 0.01;
      pennies.textContent = cid[0][1];
    } else {
      changeDue.innerHTML = `<p>Status: INSUFFICIENT_FUNDS</p>`;
      return;
    }
  }

  let emptyCashDrawer = true;
  for (let i = 0; i < cid.length; i++) {
    if (cid[i][1] > 0) {
      emptyCashDrawer = false;
      break;
    }
  }

  if (emptyCashDrawer && change == 0.00) {
    changeDue.innerHTML = `<p>Status: CLOSED</p>`
    for (let i = changeAmount.length - 1; i >= 0 ; i--) {
      if (cid[i][1] !== 0) {
        changeDue.innerHTML += `<p>${changeAmount[i][0]}: $${changeAmount[i][1].toFixed(1)}`;
      }  
    }
  } else {
    for (let i = changeAmount.length - 1; i >= 0 ; i--) {
    if (changeAmount[i][1] !== 0) {
      changeDue.innerHTML += `<p>${changeAmount[i][0]}: $${changeAmount[i][1]}`;
    } 
    }
  } 
}

purchaseBtn.addEventListener("click", checkBalance);

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cash Register Project</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>
      Cash Register Project
    </h1>
    <div id="change-due" class="hidden"></div>
    <label for="cash">Enter cash from customer:</label>
    <input id="cash" type="number">
    <button id="purchase-btn">Purchase</button>
    <div id="cash-register">
      <div id="cash-register-screen">
        <p id="total-price">
          Total: $19.5
        </p>
      </div>
      <div id="connector"></div>
      <div id="top-register">
        <div id="register-buttons">
          <button class="btn"></button>
          <button class="btn"></button>
          <button class="btn"></button>

          <button class="btn"></button>
          <button class="btn"></button>
          <button class="btn"></button>
          <button class="btn"></button>
          <button class="btn"></button>
          <button class="btn"></button>
        </div>
        <div id="cash-drawer-display">
          <p><strong>Change in drawer</strong>
          </p>
          <p>
            Pennies: $<span id="pennies">0.5</span>
          </p>
          <p>
            Nickels: $<span id="nickels">0</span>
          </p>
          <p>
            Dimes: $<span id="dimes">0</span>
          </p>
          <p>
            Quarters: $<span id="quarters">0</span>
          </p>
          <p>
            Ones: $<span id="ones">0</span>
          </p>
          <p>
            Fives: $<span id="fives">0</span>
          </p>
          <p>
            Tens: $<span id="tens">0</span>
          </p>
          <p>
            Twenties: $<span id="twenties">0</span>
          </p>
          <p>
            Hundreds: $<span id="hundreds">0</span>
          </p>
        </div>
      </div>
      <div id="bottom-register">
        <div id="circle"></div>
      </div>
    </div>
    <script src="./script.js"></script>
  </body>
</html>

Challenge Information:

Build a Cash Register Project - Build a Cash Register

I added couple console.log() prints to the code. When running tests, for the last one code returned:

Status: CLOSED

PENNY: $0.6

Because when run manually the result is correct, this suggests that the last test result is affected by previous tests. Which means there’s some unexpected side-effect that shouldn’t happen. Any ideas how that might be happening?

Thanks for finding the error. I figured it out. I had to round down to one decimal place. Previously, I was rounding up.

Uhm, but rounding is not the origin of issue, just the last sign of it…