Build a cash register project

JavaScript
1

I get the expected result for all test cases, but some don’t pass. Also, when I change the let variables to suit the test cases, it changing which of them pass or fail.

Any idea if there is a bug? Or am I not sequencing things correctly? Structure bad for the test cases? Not sure.

HTML

<!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">
  </head>
  <body>
    <p id="price-text"></p>
    <label for="cash">What did customer pay?</label>
    <input type="number" id="cash">
    <div id="change-due">Display</div>
    <ul id="change-list">
      
    </ul>
    <ul id="drawer">
      
    </ul>
    <p id="drawer-total"></p>
    <button id="purchase-btn">Purchase</button>
    <script src="script.js"></script>
  </body>
</html>

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]
];

let currentTotal = 0;


let giveChange = [

];


let giveChangeArr = [
  
];

let statusText = "";

const drawer = document.getElementById("drawer");
const input = document.getElementById("cash");
const purchaseBtn = document.getElementById("purchase-btn");
const changeDueDiv = document.getElementById("change-due");
const drawerTotal = document.getElementById("drawer-total");
const priceText = document.getElementById("price-text");
const changeList = document.getElementById("change-list");
const cashChange = Object.entries(document.querySelectorAll(".cash-change"));


priceText.innerText = `Price: ${price}`;


function calculateTotal(cid) {
    let total = 0;
    for (let i = 0; i < cid.length; i++) {
        total += cid[i][1];
    }
    // Round to two decimal places
    console.log("here")
    console.log(typeof total);
    total = parseFloat(total.toFixed(2));
    currentTotal = total;
    return total;
}

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

const setStatus = () => {
 statusText = currentTotal > 0 ? "Status: OPEN" : "Status: CLOSED";
}

const tenderRegister = (cash, changeNeeded, i = 8) => {
  if (changeNeeded > 0 && i > -1) {
    let j = 0;
    while (changeNeeded / cashValues[i][1] >= 1 && cid[i][1] >= cashValues[i][1]) {
      j++;
      cid[i][1] = parseFloat((cid[i][1] - cashValues[i][1]).toFixed(2))
      changeNeeded = parseFloat((changeNeeded - cashValues[i][1]).toFixed(2));
    }
  if (j > 0) {
    giveChangeArr.push(`${cashValues[i][0]}: $${(j * cashValues[i][1]).toFixed(2)}`);
  }
  tenderRegister(cash, changeNeeded, i - 1)
  }
  if (changeNeeded > 0) {
    changeDueDiv.innerText = "Status: INSUFFICIENT_FUNDS";
  } else if (changeNeeded === 0 && cash === currentTotal) {
    changeDueDiv.innerText = "Status: CLOSED " + giveChangeArr.join(" ");
  }
  updateDisplays();
  console.log("return")
  return
}



const checkCash = {
  checkPrice: function() {
    if (parseFloat(input.value) < price) {
      alert("Customer does not have enough money to purchase the item");
      return true;
    }
    return false;
  },
  checkNoChange: function() {
    if (parseFloat(input.value) === price) {
      changeDueDiv.innerText = "No change due - customer paid with exact cash";
      return true;
    }
    return false;
  },
  checkTotal: function() {
    if (parseFloat(input.value - price) > currentTotal) {
      changeDueDiv.innerText = "Status: INSUFFICIENT_FUNDS";
      return true;
    }
    return false;
  }
};

purchaseBtn.addEventListener("click", () => {
  giveChangeArr = []
  const value = parseInt(input.value);
  const changeNeeded = input.value - price;
  if (Object.values(checkCash).some(func => func())) {
    console.log("At least one function evaluated to true");
  } else {
    tenderRegister(value, changeNeeded);
  }
})


const updateDisplays = () => {
  let changeArr = [];
  let giveArr = [];
  for (let i = 0; i < cid.length; i++) {
  changeArr.push(`<li>${cashValues[i][0]}: $${cid[i][1]}</li>`);
  };
  drawer.innerHTML = changeArr.join("");
  for (let i = 0; i < giveChange.length; i++) {
  giveArr.push(`<p>${cashValues[i][0]}: $${giveChange[i]}</p>`);
  };
  drawerTotal.innerText = calculateTotal(cid);
  setStatus();
  changeDueDiv.innerHTML = `${statusText} ${giveChangeArr.join(" ")}`;
}

document.addEventListener("DOMContentLoaded", updateDisplays());```
1 Like
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
3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.