Build a Cash Register Project - Build a Cash Register

JavaScript
1

Tell us what’s happening:

Hello Everyone.

The last few tests for my cash register project keeps falling. I’m not sure what is wrong. When I tried the same test manually it passed. Please help. Thanks

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">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <section>
        <h1>Cash Register</h1>
        <form id="input">
            <label for="text-input">Enter cash from customer </label>
            <input type="number" id="cash" placeholder="Enter Cash" required />
        </form>
        <button id="purchase-btn">Purchase</button>
        <h3>Customer Change</h3>
        <p id="change-due"></p>
    </section>
    <section>
        <div>
            <p>Price: <span id="price">0</span></p>
        </div>
        <h3>Cash in Drawer</h3>
        <div id="cid">
            <!-- <p id="cid"></p> -->
        </div>
    </section>
    <script src="./script.js"></script>
</body>
</html>

/* file: script.js */
let price = 19.5;
// let cid = [
//   ['PENNY', 0.5],
//   ['NICKEL', 0],
//   ['DIME', 0],
//   ['QUARTER', 0],
//   ['ONE', 0],
//   ['FIVE', 0],
//   ['TEN', 0],
//   ['TWENTY', 0],
//   ['ONE HUNDRED', 0]
// ];
const purchaseBtn = document.getElementById("purchase-btn");
const input = document.getElementById("cash");
const changeDue = document.getElementById("change-due");
const priceEle = document.getElementById("price");
const cidEle = document.getElementById("cid");

//let price = 1.87;
priceEle.textContent = price;
const changes = {};
let sum = 0;
//console.log(input.value);

const cid = [
  ["Pennies", 1.01],
  ["Nickels", 2.05],
  ["Dimes", 3.1],
  ["Quarters", 4.25],
  ["Ones", 90],
  ["Fives", 55],
  ["Tens", 20],
  ["Twenty", 60],
  ["One Hundred", 100],
];

const changeObj = [
  { Key: "ONE HUNDRED", Value: 100 },
  { Key: "TWENTY", Value: 20 },
  { Key: "TEN", Value: 10 },
  { Key: "FIVE", Value: 5 },
  { Key: "ONE", Value: 1 },
  { Key: "QUARTER", Value: 0.25 },
  { Key: "DIME", Value: 0.1 },
  { Key: "NICKEL", Value: 0.05 },
  { Key: "PENNY", Value: 0.01 },
];

const updateUI = function () {
  let cidContent = "";

  cid.forEach((el) => {
    cidContent += `<p>${el[0]}: ${el[1]}</p>`;
  });

  cidEle.innerHTML = cidContent;
};

updateUI();

const getChangeObj = function (input) {
  for (const [i, { Key, Value }] of changeObj.entries()) {
    let result = "";
    let cidNewLength = cid.length - i - 1;

    while (input >= Value) {
      if(cid[cidNewLength][1] <= 0) break;
      cid[cidNewLength][1] = parseFloat((cid[cidNewLength][1] - Value).toFixed(2));
      changes[Key] = changes[Key] ? changes[Key] + Value : Value;
      input = Math.round((input - Value) * 100) / 100;
    }
  }
  return changes;
};

const getChange = function() {
  let change = ""
  for(const [key, value] of Object.entries(changes)) {
    change += ` ${key}: $${parseFloat(value.toFixed(2))}`
  }
  return change;
}

const checkValue = function () {
  const cash = parseFloat(input.value)
  let cusChange = cash - price;
  if (cash < price) {
    alert("Customer does not have enough money to purchase the item");
    return;
  } else if (cash === price) {
    changeDue.textContent = "No change due - customer paid with exact cash";
  } else if (cash > price) {
    returnChange(cusChange);
  }
};

const returnChange = function (input) {
  let result = "Status:";
  cid.forEach(el => {
    return sum = Math.round((sum + el[1]) * 100) / 100
  })
  console.log(sum);
  if (sum < input) {
    result += "INSUFFICIENT_FUNDS";
  } else if (sum >= input) {
    let changeOwned = getChangeObj(input);
    let results = getChange(changeOwned)
    result += sum === input ? ` CLOSED ${results}` : ` OPEN ${results}`
  }

  changeDue.textContent = result;

  
};
// returnChange()

purchaseBtn.addEventListener("click", () => {
  checkValue()
  updateUI()
})

/* 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/131.0.0.0 Safari/537.36

Challenge Information:

Build a Cash Register Project - Build a Cash Register

2

Your code contains global variables that are changed each time the function is run. This means that after each function call completes, subsequent function calls start with the previous value. To fix this, make sure your function doesn’t change any global variables, and declare/assign variables within the function if they need to be changed.

Example:

var myGlobal = [1];
function returnGlobal(arg) {
  myGlobal.push(arg);
  return myGlobal;
} // unreliable - array gets longer each time the function is run

function returnLocal(arg) {
  var myLocal = [1];
  myLocal.push(arg);
  return myLocal;
} // reliable - always returns an array of length 2
1 Like
3

I moved the change and sum variable to their function and I passed more test. I still failed 2 of the test but I think I know what’s wrong. Thank you