Build a Cash Register Project - Build a Cash Register

JavaScript
1

Tell us what’s happening:

Hi campers! I’m trying to complete this project for days and I’m not succeeding, my logic beats several requirements, however, the verification fails for a good part of them.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Cash Register</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <h1 class="title">Cash Register</h1>
    <div id="change-due"></div>
    <div class="input-display">
      <label for="cash" class="input-label">Enter cash from customer: </label>
      <input
        id="cash"
        class="input-cash"
        name="cash"
        type="text"
        placeholder="R$ 0,00"
      />
    </div>
    <button id="purchase-btn" class="purchase-btn">Purchase</button>
    <div class="drawer-box">
      <div id="total" class="drawer-total"></div>
      <div id="drawer" class="drawer-info"></div>
    </div>
    <script src="./script.js" type="module"></script>
  </body>
</html>

/* file: script.js */
let price = 19.5;
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 purchaseBtn = document.getElementById("purchase-btn");
const cash = document.getElementById("cash");
const total = document.getElementById("total");
const changeDue = document.getElementById("change-due");
const cashInDrawer = document.getElementById("drawer");

const reversedCid = [...cid].reverse().map((el) => el);
const cidValues = [100, 20, 10, 5, 1, 0.25, 0.1, 0.05, 0.01];
const cidDenominations = [
  "Pennies",
  "Nickels",
  "Dimes",
  "Quarters",
  "Ones",
  "Fives",
  "Tens",
  "Twenties",
  "Hundreds",
];

const renderDrawer = () => {
  total.innerText = `Total: R$ ${price}`;

  const formatQuantity = (value) =>
    Number.isInteger(value) ? value : value.toFixed(2);

  drawer.innerHTML = cidDenominations
    .map((el, index) => `<p>${el}: ${formatQuantity(cid[index][1])}</p>`)
    .join("");
};

const handleTransaction = () => {
  const cashValue = Number(cash.value.replace(",", "."));
  if (!cashValue) {
    cash.value = "";
    return;
  }

  if (cashValue < price) {
    alert("Customer does not have enough money to purchase the item");
    cash.value = "";
    return;
  }

  if (cashValue === price) {
    changeDue.textContent = "No change due - customer paid with exact cash";
    cash.value = "";
    return;
  }

  const totalValueCid = cid
    .map((cash) => cash[1])
    .reduce((acc, value) => acc + value, 0)
    .toFixed(2);

  let change = cashValue - price;

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

  calculateChange(change, totalValueCid);
};

const calculateChange = (change, totalValueCid) => {
  cidResult.change = [];

  cidValues.forEach((value, index) => {
    let quantity = parseInt((change / value).toFixed(2));
    let totalToSubtract = value * quantity;

    if (change <= totalValueCid && quantity > 0) {
      cidResult.change.push([reversedCid[index][0], totalToSubtract]);
      change -= totalToSubtract;
      updateCid(index, totalToSubtract);
      cash.value = "";
    }
  });

  showChangeDue();
  renderDrawer();
};

const updateCid = (index, totalToSubtract) => {
  cid.map((cash) => {
    if (cash[0] === reversedCid[index][0]) {
      cash[1] -= totalToSubtract;
    }
  });
};

let cidResult = { isOpen: true, change: [] };

const showChangeDue = () => {
  const statusHTML = `<p>Status: ${cidResult.isOpen ? "OPEN" : "CLOSED"}</p>`;
  const changeHTML = cidResult.change
    .map((changeEl) => `<p>${changeEl[0]}: ${changeEl[1]}</p>`)
    .join("");

  changeDue.innerHTML = statusHTML + changeHTML;
};

purchaseBtn.addEventListener("click", handleTransaction);

cash.addEventListener("keydown", (e) => {
  if (e.key === "Enter") {
    handleTransaction();
  }
});

renderDrawer();


/* file: styles.css */
* {
  margin: 0;
  padding: 0;
  list-style: none;
}

body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background-color: #020617;
  color: white;
  padding: 16px;
}

.title {
  color: #84cc16;
}

.input-display {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.input-label {
  font-size: 14px;
}

.input-cash {
  padding: 8px 8px;
  border-radius: 8px;
  border: none;
}

.input-cash:focus-visible {
  outline: 2px solid #84cc16;
}

.purchase-btn {
  background-color: #84cc16;
  color: white;
  border: none;
  padding: 8px 16px;
  font-size: 18px;
  font-weight: 600;
  border-radius: 8px;
  transition: background-color 300ms ease-in-out;
}

.purchase-btn:hover {
  background-color: red;
  cursor: pointer;
}

.drawer-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.drawer-total {
  font-size: 20px;
  font-weight: 600;
}

.drawer-info {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  gap: 4px;
}

Your browser information:

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

Challenge Information:

Build a Cash Register Project - Build a Cash Register

2

Welcome to the forum @emeraldknight-sp

Try removing the type attribute from the script element.

Happy coding

3

don’t do this in the global space, the tests change cid, but this doesn’t run again

4

Omg, It works! Why this happens? Remove the type attribute from the script element solves the problem with globals variables

5

the module makes it so that the JavaScript file can’t be used in the environment