Build a Cash Register Project - Build a Cash Register

JavaScript
1

Tell us what’s happening:

I have passed every step of this code except for step 13. When there is sufficient change, the changeDue element is showing the correct denominations in the correct order so I’m confused as to what this step is asking.

Your code so far


<!DOCTYPE html>
  <html lang="en">
    <head>
      <title>Cash Register</title>
      <meta charset="utf-8">
      <link rel="stylesheet" href="styles.css">
    </head>
    <body>
      <h1>Cash Register Project</h1>
      <div class="input-container">
        <div id="change-due"></div>
        <label for="customer-cash">Enter cash from customer:</label>
       <input id="cash" type="number" max="500" min="1" step="1">
        <button id="purchase-btn" type="button">Purchase</button>
      </div>
      <div id="total-box" class="box">
        <span id="total-span">Total: $</span>
      </div>
      <div id="change-drawer" class="box">
        <div id="change-box">
          <span class="change-span">Change in drawer:</span>
          <ul>
            <li class="currency">Pennies: $<span class="amount"><span></li>
            <li class="currency">Nickels: $<span class="amount"><span></li>
            <li class="currency">Dimes: $<span class="amount"><span></li>
            <li class="currency">Quarters: $<span class="amount"><span></li>
            <li class="currency">Ones: $<span class="amount"><span></li>
            <li class="currency">Fives: $<span class="amount"><span></li>
            <li class="currency">Tens: $<span class="amount"><span></li>
            <li class="currency">Twenties: $<span class="amount"><span></li>
          <li class="currency">Hundreds: $<span class="amount"><span></li>
          </ul>
        </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]
];

const cash = document.getElementById("cash"); 
const changeDue = document.getElementById("change-due");
const purchaseBtn = document.getElementById("purchase-btn");
const total = document.getElementById("total-span");
const currencies = document.getElementsByClassName("amount");

const updateChangeDrawer = () => {
  const spanArr = Array.from(currencies);
  spanArr.forEach((span, index) => span.textContent = cid[index][1]);
}

const changeOutput = (amount => {

  if (amount < price) {
    return alert("Customer does not have enough money to purchase the item")
  } else if (amount === price) {
    return changeDue.innerHTML = `<p>No change due - customer paid with exact cash</p>`;
  } else {
    calculateChange(amount);
  }
})

const changeDisplay = (arr => {
  arr.forEach(el => changeDue.innerHTML += `<p>${el[0]}: $${el[1]}</p>`);
});

// function to calculate change and display
const calculateChange = (amount => {
  let change = parseFloat((amount - price).toFixed(2)); 
  let cidTotal = parseFloat(cid.reduce((acc, el) => acc + el[1], 0).toFixed(2));
  let changeArr = [];

  if (cidTotal < change) {
    return changeDue.innerHTML = `<p>Status: INSUFFICIENT_FUNDS</p>`;
  }

  const currencyExchange = {
    "one hundred": 100,
    twenty: 20,
    ten: 10,
    five: 5,
    one: 1,
    quarter: 0.5,
    dime: 0.1,
    nickel: 0.05,
    penny: 0.01
  };

  for (const currency of Object.keys(currencyExchange)) {
    let currencyTotal = 0;
    let cidCurrency = cid.find(item => item[0] === currency.toUpperCase());

    while (change >= currencyExchange[currency] && cidCurrency[1] >= currencyExchange[currency]) {
      currencyTotal += currencyExchange[currency];
      currencyTotal = parseFloat(currencyTotal.toFixed(2));
      change -= (currencyExchange[currency]);
      change = parseFloat(change.toFixed(2));
      cidCurrency[1] -= currencyExchange[currency];
      cidCurrency[1] = parseFloat(cidCurrency[1].toFixed(2));
    }

    if (currencyTotal > 0) {
      changeArr.push([currency.toUpperCase(), currencyTotal]);
    }
  }

  const newCidTotal = parseFloat(cid.reduce((acc, el) => acc + el[1], 0).toFixed(2));


  if (change > 0) {
    return changeDue.innerHTML = `<p>Status: INSUFFICIENT_FUNDS</p>`;
  } else if (change === 0 && newCidTotal === 0) {
    changeDue.innerHTML = `<p>Status: CLOSED`;
    changeDisplay(changeArr);
    return;
  } else {
    changeDue.innerHTML = `<p>Status: OPEN</p>`;
    changeDisplay(changeArr);
    return;
  }
})

window.onload = updateChangeDrawer;

purchaseBtn.addEventListener("click", () => {
  changeDue.style.display = "block";
  changeOutput(Number(cash.value));
})


body {
  background-color: #1a1847;
  text-align: center;
  font-size: 1.25rem;
}

h1, label, #total-box, #change-due {
  color: #c9d1cc;
}

input {
  width: 20%;
  height: 20px;
}

button {
  width: 12%;
  height: 35px;
  font-weight: bold;
  font-size: 1.15rem;
  color: #1a1847;
  background: linear-gradient(#e08804, #f59b14);
}

ul, li {
  list-style-type: none;
  text-align: left;
}


.input-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.input-container > * {
  margin-bottom: 20px;
}

.change-span {
  font-weight: bold;
}

#total-box {
  height: 30px;
  width: 200px;
  margin: 0 auto 50px;
  background-color: black;
  padding-top: 5px;
  border: 5px solid #62dee3;
}

#change-drawer {
  background-color: #62dee3;
  width: 300px;
  height: 350px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
}

#change-box {
  height: 80%;
  width: 60%;
  background-color: white;
  text-align: left;
  padding-top: 10px;
  padding-left: 5px;
}

#change-due {
  display: none;
  height: 400px;
  width: 300px;
  color: #c9d1cc;
}

Your browser information:

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

Challenge Information:

Build a Cash Register Project - Build a Cash Register

2

your code passes for me, can you check again running the tests?