Build a Cash Register Project - Build a Cash Register

JavaScript
1

Tell us what’s happening:

My code will not add text for quarters, nickels, dimes or pennies. As you can see, on my console.log that it is indeed putting those coins over in the the countMoney section from cid. But, it wont use the addText function properly. What is stopping the addText function from showing that values of my coins?

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>
    <main>
      <h1 id="main-title">Checkout</h1>
        <h2 id="price-title">Price:</h2>
        <label for="cash">Cash:</label>
          <input id="cash" class="user-input" name="cash-input">
          <button id="purchase-btn" onclick="click" for="cash">Purchase</button>
        <p id="change-due-title">Change Due: <p id="change-due"></p></p>
    </main>
    <script src="script.js"></script>
  </body>
</html>


let price = 1.87;
let cid = [
  ['PENNY', 1.01],/* 0 */
  ['NICKEL', 2.05],/* 1 */
  ['DIME', 3.1],/* 2 */
  ['QUARTER', 4.25],/* 3 */
  ['ONE', 90],/* 4 */
  ['FIVE', 55],/* 5 */
  ['TEN', 20],/* 6 */
  ['TWENTY', 60],/* 7 */
  ['ONE HUNDRED', 100]/* 8 */
];

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

const stopFloating = (num1) => {
  let num2 = num1.toFixed(2);
  let num3 = Number(num2);
  return num1 = num3;
};

const addText = (money, amount) => {
  if (amount >= 1) {
    return changeDue.textContent += ` ${money}: $${amount}`;
  }
};

const giveChange = () => {
  changeDue.textContent = '';

  const cashNumber = Number(cashInput.value);

  let change = cashNumber - price;
  change = stopFloating(change);
  console.log(change);

  let countMoney = [
    ['PENNY', 0],/* 0 */
    ['NICKEL', 0],/* 1 */
    ['DIME', 0],/* 2 */
    ['QUARTER', 0],/* 3 */
    ['ONE', 0],/* 4 */
    ['FIVE', 0],/* 5 */
    ['TEN', 0],/* 6 */
    ['TWENTY', 0],/* 7 */
    ['ONE HUNDRED', 0]/* 8 */
  ];

if (change < 0) {
    return alert(`"Customer does not have enough money to purchase the item"`);
  } else if (change === 0) {
    changeDue.textContent = `"No change due - customer paid with exact cash"`;
    return;
  } else {
    
    changeDue.textContent = `"Status: OPEN`;
    
    while (change >= 100) {
      change = stopFloating(change);
      if (cid[8][1] === 0) {
        break;
      }
      change -= 100;
      cid[8][1] -= 100;
      countMoney[8][1] += 100;
    }
    addText(countMoney[8][0], countMoney[8][1]);
    
    while (change >= 20) {
      change = stopFloating(change);
      if (cid[7][1] === 0) {
        break;
      }
      change -= 20;
      cid[7][1] -= 20;
      countMoney[7][1] += 20;
    }
    addText(countMoney[7][0], countMoney[7][1]);
    console.log(change);

    while (change >= 10) {
      change = stopFloating(change);
      if (cid[6][1] < 10) {
        break;
      }
      change -= 10;
      cid[6][1] -= 10;
      countMoney[6][1] += 10;
    }
    addText(countMoney[6][0], countMoney[6][1]);
    console.log(change);

    while (change >= 5) {
      change = stopFloating(change);
      if (cid[5][1] === 0) {
        break;
      }
      change -= 5;
      cid[5][1] -= 5;
      countMoney[5][1] += 5;
    }
    addText(countMoney[5][0], countMoney[5][1]);
    console.log(change);

    while (change >= 1) {
      change = stopFloating(change);
      if (cid[4][1] === 0) {
        break;
      }
      change -= 1;
      change = stopFloating(change);
      cid[4][1] -= 1;
      countMoney[4][1] += 1;
    }
    addText(countMoney[4][0], countMoney[4][1]);
    console.log(change);

    while (change >= 0.25) {
      change = stopFloating(change);
      if (cid[3][1] === 0.00) {
        break;
      }
      change -= 0.25;
      change = stopFloating(change);
      cid[3][1] -= 0.25;
      countMoney[3][1] += 0.25;
    }
    addText(countMoney[3][0], countMoney[3][1]);
    console.log(change);

    while (change >= 0.1) {
      change = stopFloating(change);
      if (cid[2][1] === 0.0) {
        break;
      }
      change -= 0.1;
      change = stopFloating(change);
      cid[2][1] -= 0.1;
      countMoney[2][1] += 0.1;
    }
    addText(countMoney[2][0], countMoney[2][1]);
    console.log(change);

    while (change >= 0.05) {
      change = stopFloating(change);
      if (cid[1][1] === 0.00) {
        break;
      }
      change -= 0.05;
      change = stopFloating(change);
      cid[1][1] -= 0.05;
      countMoney[1][1] += 0.05;
    }
    addText(countMoney[1][0], countMoney[1][1]);
    console.log(change);

    while (change >= 0.01) {
      change = stopFloating(change);
      if (cid[0][1] === 0.00) {
        break;
      }
      change -= 0.01;
      change = stopFloating(change);
      cid[0][1] -= 0.01;
      countMoney[0][1] += 0.01;
    }
    addText(countMoney[0][0], countMoney[0][1]);
    console.log(countMoney);
    changeDue.textContent += `"`;
  }
  return;
};

const showInput = () => {
  let ivalue = cashInput.value;
  console.log(ivalue);
};

purchaseBtn.addEventListener("click", showInput);

purchaseBtn.addEventListener("click", giveChange);

Your browser information:

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

Challenge Information:

Build a Cash Register Project - Build a Cash Register

2

Have you confirmed that addText is called for these denominations? If it is, then the issue should be present within the function. How addText is supposed to work?

3

You just made me realize my addText function requires my value be greater than 1… it should be 0! Ootherwise it wont add that text. Thank you, I stared at this for so long but sometimes someone else pulling my view back helps.

1 Like