Build a Cash Register Project - Build a Cash Register

JavaScript
1

Tell us what’s happening:

Hello, I am stuck in step 12 and 13. When I enter different cash amounts, I see that the change is always correct,

I have tried to work with the float values and maybe the mistake was there but no luck.

Thanks,

Your code so far

<!-- file: index.html -->
<input id="cash"></input>
<div id="change-due"></div>
<button id="purchase-btn">Comprar</button>

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

/* file: script.js */
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]
];

let billete100 = 0;
let billete20 = 0;
let billete10 = 0;
let billete5 = 0;
let billete1 = 0;
let billeteQuarter = 0;
let billeteDime = 0;
let billeteNickel = 0;
let billetePenny = 0;


const purchaseButton = document.getElementById("purchase-btn");

const textoResultado = document.getElementById("change-due");

purchaseButton.addEventListener("click", () => {

  // Obtengo el dinero que saco.
  let cashTexto = document.getElementById("cash").value;
  console.log(cashTexto);
 
  let cash = parseFloat(cashTexto);
  console.log(cash);

  let priceFloat = parseFloat(price)
  //Hago la diferencia
  let dineritoDevolver = Math.round((cash - priceFloat) * 100) / 100;
  console.log("dinero a devolver= " + dineritoDevolver);

  let dineroCaja = cid[8][1] + cid[7][1] +cid[6][1]+cid[5][1]+cid[4][1]+cid[3][1]+cid[2][1]+cid[1][1]+cid[0][1]

  if (dineritoDevolver < 0) {
    alert("Customer does not have enough money to purchase the item");
  }
  else if (dineritoDevolver == 0) {
   textoResultado.innerText =  "No change due - customer paid with exact cash";
  }
  else {
    calcularDevolucion(dineritoDevolver);

    let cadenaTexto = ["Status: OPEN "]

    if (billete100 > 0) {
      cadenaTexto.push("ONE HUNDRED: $" + (billete100 * 100));
    }
    if (billete20 > 0) {
      cadenaTexto.push("TWENTY: $" + (billete20 * 20));
    }
    if (billete10 > 0) {
      cadenaTexto.push("TEN: $" + (billete10 * 10));
    }
    if (billete5 > 0) {
      cadenaTexto.push("FIVE: $" + (billete5 * 5));
    }
    if (billete1 > 0) {
      cadenaTexto.push("ONE: $" + (billete1 * 1));
    }
    if (billeteQuarter > 0) {
      cadenaTexto.push("QUARTER: $" + (billeteQuarter * 0.25));
    }
    if (billeteDime > 0) {
      cadenaTexto.push("DIME: $" + (billeteDime * 0.10));
    }
    if (billeteNickel > 0) {
      cadenaTexto.push("NICKEL: $" + (billeteNickel * 0.05));
    }
    if (billetePenny > 0) {
      cadenaTexto.push("PENNY: $" + (billetePenny * 0.01));
    }

    textoResultado.innerText = cadenaTexto.join("\n");

  }

});

function calcularDevolucion(cash) {

  // Mientras sea mayor que 0, sigo iterando.
  while (cash > 0) {

    if (cid[8][1] >= 100 && cash >= 100) {
      cash = Math.round((cash - 100) * 100) / 100;
      cid[8][1] = Math.round((cid[8][1] - 100) * 100) / 100;
      billete100++;
    }
    else if (cid[7][1] >= 20 && cash >= 20) {
      cash = Math.round((cash - 20) * 100) / 100;
      cid[7][1] = Math.round((cid[7][1] - 20) * 100) / 100;
      billete20++;
    }
    else if (cid[6][1] >= 10 && cash >= 10) {
      cash = Math.round((cash - 10) * 100) / 100;
      cid[6][1] = Math.round((cid[6][1] - 10) * 100) / 100;
      billete10++;
    }
    else if (cid[5][1] >= 5 && cash >= 5) {
      cash = Math.round((cash - 5) * 100) / 100;
      cid[5][1] = Math.round((cid[5][1] - 5) * 100) / 100;
      billete5++;
    }
    else if (cid[4][1] >= 1 && cash >= 1) {
      cash = Math.round((cash - 1) * 100) / 100;
      cid[4][1] = Math.round((cid[4][1] - 1) * 100) / 100;
      billete1++;
    }
    else if (cid[3][1] >= 0.25 && cash >= 0.25) {
      cash = Math.round((cash - 0.25) * 100) / 100;
      cid[3][1] = Math.round((cid[3][1] - 0.25) * 100) / 100;
      billeteQuarter++;
    }
    else if (cid[2][1] >= 0.10 && cash >= 0.10) {
      cash = Math.round((cash - 0.10) * 100) / 100;
      cid[2][1] = Math.round((cid[2][1] - 0.10) * 100) / 100;
      billeteDime++;
    }
    else if (cid[1][1] >= 0.05 && cash >= 0.05) {
      cash = Math.round((cash - 0.05) * 100) / 100;
      cid[1][1] = Math.round((cid[1][1] - 0.05) * 100) / 100;
      billeteNickel++;
    }
    else if (cid[0][1] >= 0.01 && cash >= 0.01) {
      cash = Math.round((cash - 0.01) * 100) / 100;
      cid[0][1] = Math.round((cid[0][1] - 0.01) * 100) / 100;
      billetePenny++;
    }
    else {
      return
    }
  }
};

/* 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

You can add this below your code in the JS file to simulate what the tests do:

console.log("\nTest #9");
price = 11.95;
document.querySelector("#cash").value = 11.95;
document.querySelector("#purchase-btn").click();
console.log("actual", document.querySelector("#change-due").innerText);
console.log("expected", "No change due - customer paid with exact cash");

console.log("\nTest #11");
price = 19.5;
document.querySelector("#cash").value = 20;
cid = [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]];
document.querySelector("#purchase-btn").click();
console.log("actual", document.querySelector("#change-due").innerText);
console.log("expected", "Status: OPEN QUARTER: $0.5");

console.log("\nTest #12");
price = 3.26;
document.querySelector("#cash").value = 100;
cid = [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]];
document.querySelector("#purchase-btn").click();
console.log("actual", document.querySelector("#change-due").innerText);
console.log("expected", "Status: OPEN TWENTY: $60 TEN: $20 FIVE: $15 ONE: $1 QUARTER: $0.5 DIME: $0.2 PENNY: $0.04");

console.log("\nTest #14");
price = 19.5;
document.querySelector("#cash").value = 20;
cid = [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]];
document.querySelector("#purchase-btn").click();
console.log("actual", document.querySelector("#change-due").innerText);
console.log("expected", "Status: INSUFFICIENT_FUNDS");

console.log("\nTest #16");
price = 19.5;
document.querySelector("#cash").value = 20;
cid = [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 1], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]];
document.querySelector("#purchase-btn").click();
console.log("actual", document.querySelector("#change-due").innerText);
console.log("expected", "Status: INSUFFICIENT_FUNDS");

console.log("\nTest #18");
price = 19.5;
document.querySelector("#cash").value = 20;
cid = [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]];
document.querySelector("#purchase-btn").click();
console.log("actual", document.querySelector("#change-due").innerText);
console.log("expected", "Status: CLOSED PENNY: $0.5");
3

Thank you for answering.

I am working on step 12:

console.log(“\nTest #12”);
price = 3.26;
document.querySelector(“#cash”).value = 100;
cid = [[“PENNY”, 1.01], [“NICKEL”, 2.05], [“DIME”, 3.1], [“QUARTER”, 4.25], [“ONE”, 90], [“FIVE”, 55], [“TEN”, 20], [“TWENTY”, 60], [“ONE HUNDRED”, 100]];
document.querySelector(“#purchase-btn”).click();
console.log(“actual”, document.querySelector(“#change-due”).innerText);
console.log(“expected”, “Status: OPEN TWENTY: $60 TEN: $20 FIVE: $15 ONE: $1 QUARTER: $0.5 DIME: $0.2 PENNY: $0.04”);

The message that I see on console is:

actual Status: OPEN
TWENTY: $60
TEN: $20
FIVE: $15
ONE: $1
QUARTER: $0.5
DIME: $0.2
PENNY: $0.04
expected Status: OPEN TWENTY: $60 TEN: $20 FIVE: $15 ONE: $1 QUARTER: $0.5 DIME: $0.2 PENNY: $0.04

I still can´t see the error in this step.

4

do you only have Test 12 code? you need to include also the preceeding tests, if you do that then the output is

Test #12
100
100
dinero a devolver= 96.74
actual Status: OPEN
TWENTY: $60
TEN: $20
FIVE: $15
ONE: $1
QUARTER: $1
DIME: $0.2
PENNY: $0.04
expected Status: OPEN TWENTY: $60 TEN: $20 FIVE: $15 ONE: $1 QUARTER: $0.5 DIME: $0.2 PENNY: $0.04
5

Yes, you are right. Thanks ILM.

I have logged the values of the “number of quartes” in every step, and it is storing the value correctly.

I have noticed why there is a difference in the values of the quartes.

If I manually enter 100, the value is 2. If I only include the test12, the value is 2.

But if I include all the test, the value is 4 as it is working with the 11 test too.

Is my program supposed to clear the values after every calculation?

6

the code I gave you is to simulate what the tests do, and you found the main issue in your code

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
7

That was the solution.

Changed every variable and the logic to my function and that solved the steps.

Thanks a lot!