Build a Cash Register Project - Build a Cash Register

Tell us what’s happening:

Failing tests 7 and 10 despite getting the seemingly correct results when manually changing the cid and price values to match the test inputs. Unsure why everything else passes but not these. Any insights appreciated!

Your code so far

<!-- file: index.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 Project</title>
  </head>

  <body>
    <section id='heading-section'>
      <div id='heading-container'>
        <h1>Cash Register Project</h1>
      </div>
    </section>

    <section id='register-section'>
      <div id='register-head-container'>
        <img id='logo' src='https://downindunwall.github.io/image-host/logo-img.jpeg' alt='Snows Foxdeer Logo' />
        <div id='input-container'>
         <label for='cash'>Cash from customer:</label>
          <input id='cash' name='cash' type='number' />
        </div>
        <button id='purchase-btn'>Purchase</button>
      </div>
      <div id='register-middle-container'>
        <div id='cid'>
          <h3><strong>Change In Drawer:</strong></h3>
        </div>
        <div id='change-due'>
        </div>
      </div>
      <div id='register-lower-container'>
        <div id='price-container'>
        </div>
      </div>
    </section>
  </body>
  <script src='script.js'></script>
</html>
/* file: styles.css */

/* file: script.js */
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 denominations = ["PENNIES", "NICKELS", "DIMES", "QUARTERS", "ONES", "FIVES", "TENS", "TWENTIES", "HUNDREDS"];
const denomValues = [0.01,0.05,0.10,0.25,1,5,10,20,100]
const priceContainer = document.getElementById('price-container');
const userInput = document.getElementById('cash');
const purchaseBtn = document.getElementById('purchase-btn');
const changeDue = document.getElementById('change-due');
const drawer = document.getElementById('cid');
let drawerAmount = 0;

priceContainer.innerHTML = `<p>Total: $${price}</p>`
cid.forEach((el, index) => {
  drawer.innerHTML += `<p>${denominations[index]}: $${parseFloat(el[1]).toFixed(2)}</p>`;
});

const workOutChange = (change) => {
  const reversedCID = cid.map(el => el).reverse();
  const reversedDenomVals = denomValues.reverse();
  let changeArr = [["PENNY", 0], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]].reverse();
  let multiplier = 0;
  let neededAmount = 0;
  let count = 0;
  let availableChange = 0;

  reversedDenomVals.forEach((el,index) => {
    if (el <= change) {
      availableChange += reversedCID[index][1]
    }
  })

  if (availableChange < change) {
    changeDue.innerHTML = `<p>Status: INSUFFICIENT_FUNDS</p>`
  } else {
    while (change > 0) {
      if (reversedDenomVals[count] <= change && reversedCID[count][1] >= reversedDenomVals[count]) {
        multiplier = Math.floor(change / reversedDenomVals[count]);
        neededAmount = reversedDenomVals[count] * multiplier;
        if (reversedCID[count][1] >= neededAmount) {
          reversedCID[count][1] -= neededAmount;
          change = Number((change - neededAmount).toFixed(2));
          changeArr[count][1] += neededAmount;
        } else if (reversedCID[count][1] > 0) {
          change = Number((change - reversedCID[count][1]).toFixed(2));
          changeArr[count][1] += reversedCID[count][1];
          reversedCID[count][1] = 0;
        }
      }
      count++;
    }
    drawer.innerHTML = `<h3><strong>Change In Drawer:</strong></h3>`
    cid.forEach((el,index) => drawer.innerHTML += `<p>${denominations[index]}: $${el[1]}</p>`)

    drawerAmount = calculateDrawerAmount();
      if (drawerAmount > 0) {
        changeArr.unshift(['Status', 'OPEN'])
      } else {
        changeArr.unshift(['Status', 'CLOSED'])
      };
      changeArr.forEach(el => {
        if (el[1] == 'OPEN' || el[1] == 'CLOSED') {
          changeDue.innerHTML += `<p>${el[0]}: ${el[1]}</p>`
        } else if (el[1] > 0) {
          changeDue.innerHTML += `<p>${el[0]}: $${el[1]}</p>`
        }
      })
  }

    
}

const checkAmount = () => {
  const change = userInput.value - price;
  if (change === 0) {
    changeDue.innerHTML = `<p>No change due - customer paid with exact cash</p>`
  } else if (drawerAmount < change) {
    changeDue.innerHTML = `<p>Status: INSUFFICIENT_FUNDS</p>`
  } else {
    workOutChange(change)
  }
};

const calculateDrawerAmount = () => {
  const total = cid.map((el) => el[1]).reduce((acc,el) => acc+el, 0);
  return total.toFixed(2)
};

purchaseBtn.addEventListener('click', () => {
  drawerAmount = calculateDrawerAmount();
  changeDue.innerHTML = ``
  if (Number(userInput.value) < price) {
    alert('Customer does not have enough money to purchase the item');
  } else {
    checkAmount()
  }
});

Your browser information:

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

Challenge Information:

Build a Cash Register Project - Build a Cash Register

Your code depends on variables and calculations made in global scope. When changing code manually, preview will be reloaded resulting in executing all code. On the other hand, when tests are running, code from global scope will be executed only once.

1 Like

The above comment is correct, but it’s still difficult to poinpoint because the issue is with something that you expect to be a static global constant, denomValues.

Update your workoutChange function to have these two console log statements, and look at all of the logged results in the console after running the tests. Is that what you expect?

const workOutChange = (change) => {
  const reversedCID = cid.map(el => el).reverse();
  const reversedDenomVals = denomValues.reverse();
  console.log(`reversedCID: ${reversedCID}`);
  console.log(`reversedDenomVals: ${reversedDenomVals}`);
  ...
1 Like

Ah yes! Seems very obvious now that it’s been pointed out but you are 100% right, this wasn’t the behaviour I expected. All tests passed after I changed denomValues to a local variable. Thank you for the tip!

1 Like