Build a Cash Register Project - Build a Cash Register

JavaScript
1

Tell us what’s happening:

Please preview the JS code.
I don’t know why steps 18 and 19 are not passing.

Your code so far

<!-- file: index.html -->


/* file: script.js */


/* file: styles.css */

Your browser information:

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

Challenge Information:

Build a Cash Register Project - Build a Cash Register

2

Please post your code. Also, please say what 18 and 19 are and which parts of you code you believe satisfy those tests.

3

Tell us what’s happening:

Please preview the JS code.
I don’t know why steps 18 and 19 are not passing.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
    <title> Cash Register</title>
</head>
<body>
  <div class="section" id="header">
    <p>freeCodeCamp <span class="material-icons">local_fire_department</span> </p>
    <h1>Cash Register Project</h1>
  </div>
  <div class="section">
    <div class="input-container">
      <label for="cash">Enter cash from customer: <input type="number" id="cash"></label>
      <button id="purchase-btn">Purchase</button>
    </div>
  </div>
  <div class="section third-section">
    <div class="drawer-container">
      <div class="total-container">
        <p id="total">Total:</p>
      </div>
      <p class="drawer-change">Change in drawer:</p>
      <p class="unit penny">PENNYS: $</p>
      <p class="unit nickel">NICKELS: $</p>
      <p class="unit dime">DIMES: $</p>
      <p class="unit quarter">QUARTERS: $</p>
      <p class="unit one">ONES; $</p>
      <p class="unit five">FIVES: $</p>
      <p class="unit ten">TENS: $</p>
      <p class="unit twenty">TWENTIES: $</p>
      <p class="unit one-hundred">HUNDREDS: $</p>
    </div>
    <div id="change-due">OUTPUT WILL BE HERE</div>
  </div>

  <script src="./script.js"></script> 
</body>
</html>

/* file: script.js */
let price = 1.87;
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 change = document.getElementById("change-due");
const sale = document.getElementById("purchase-btn");
const total = document.getElementById("total");
const units = document.querySelectorAll(".unit");

const currencyUnits = [
    ["PENNY", 0.01],
    ["NICKEL", 0.05],
    ["DIME", 0.10],
    ["QUARTER", 0.25],
    ["ONE", 1],
    ["FIVE", 5],
    ["TEN", 10],
    ["TWENTY", 20],
    ["ONE HUNDRED", 100]
]

total.textContent += ` $${price}`;

units.forEach((unit, index) => {
    unit.textContent += cid[index][1];
  });

sale.addEventListener("click", () => {
  const cashValue = parseFloat(cash.value);
  const changeDue = cashValue - price;
  if (cashValue < price) {
    alert("Customer does not have enough money to purchase the item")
    return;
  }
  if (cashValue === price) {
    change.innerText = "No change due - customer paid with exact cash"
    return;
  }

  const changeResult = getChange(changeDue, cid);
  if (changeResult.status === "INSUFFICIENT_FUNDS" || changeResult.status === "CLOSED") {
    change.innerText = `Status: ${changeResult.status} ${formatChange(changeResult.change)}`
  } else {
    let changeText = `Status: OPEN ${formatChange(changeResult.change)}`;
    change.innerText = changeText.trim()
  }

});

const getChange = (changeDue, cid) => {
  let totalCid = parseFloat(cid.reduce((sum, [_, amount]) => sum + amount, 0).toFixed(2))
  if (totalCid < changeDue) {
    return { status: "INSUFFICIENT_FUNDS", change: []}
  }

  let changeArray = [];
  let remainingChange = changeDue;

  for (let i = currencyUnits.length -1; i >= 0; i--) {
    let unit = currencyUnits[i][0];
    let unitValue = currencyUnits[i][1];
    let unitInDrawer = cid[i][1];

    if (unitValue <= remainingChange && unitInDrawer > 0) {
      let amountFromUnit = 0;
      while (remainingChange >= unitValue && unitInDrawer > 0) {
        remainingChange = (remainingChange - unitValue).toFixed(2);
        unitInDrawer -= unitValue;
        amountFromUnit += unitValue
      }

      if (amountFromUnit > 0) {
        changeArray.push([unit, amountFromUnit])
      }
    }
  }//and of forloop

  if (remainingChange > 0) {
    return { status: "INSUFFICIENT_FUNDS", change: [] }
  }

  if (changeDue === totalCid) {
    return { status: "CLOSED", change: cid }
  }
  return { status: "OPEN", change: changeArray }
} //end of getChange

const formatChange = changeArray => changeArray.map(([unit, amount]) => `${unit}: $${amount.toFixed(2)}`).join(" ");

//console.log(formatChange([["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]))



/* file: styles.css */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --dark-grey: #1b1b32;
  --light-grey: #dfdfe2;
  --golden-yellow: #fecc4c;
  --yellow: #ffcc4c;
  --dark-orange: #f89808;
}

body {
  background-color: var(--dark-grey);
  color: var(--light-grey);
  display: flex;
  flex-direction: column;
}

.section {
  margin: 20px auto;
}

#header {
  text-align: center;
}

h1 {
  font-size: 2.5rem;
}

#header p {
  letter-spacing: 0.1em;
}

#header p span {
  vertical-align: middle;
}

.input-container {
  display: flex;
  flex-direction: column;
  text-align: center;
  font-size: 1.5rem;
}

input {
  display: block;
  margin: 10px 0;
  padding: 5px;
  line-height: 20px;
  letter-spacing: 0.2em;
  font-size: 1.5rem;
  outline: none;
}

button {
  background-color: var(--dark-orange);
  line-height: 20px;
  font-size: 1.5rem;
  padding: 5px;
}
button:hover {
  cursor: pointer;
  background-color: var(--golden-yellow);
}
.third-section {
  display: flex;
  flex-direction:row;
  width: 70%;
  margin: 10px auto;
  /*border: solid 2px red;*/
}

.drawer-container {
  width: 50%;
  text-align: center;
  padding: 20px;
  /*border: solid 2px green;*/
}
#total, .drawer-change {
  font-size: 1.3rem;
  font-weight: bold;
}

#change-due {
  /*display: none;*/
  width: 50%;
  padding: 20px;
  text-align: center;
  /*border: solid 2px blue;*/
}

Your browser information:

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

Challenge Information:

Build a Cash Register Project - Build a Cash Register

4

Please say what 18 and 19 mean and which parts of your code you think meet those requirements

5

  • 18. When price is 19.5, the value in the #cash element is 20, cid is [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]], and the #purchase-btn element is clicked, the value in the #change-due element should be "Status: CLOSED PENNY: $0.5".

  • Failed:19. When price is less than the value in the #cash element, total cash in drawer cid is equal to change due, and the #purchase-btn element is clicked, the value in the #change-due element should be "Status: CLOSED" with change due in coins and bills sorted in highest to lowest order.

6

Please say what parts of your code you think meet those requirements.

It really, really helps if you talk to us instead of only posting your code and failing tests.

1 Like