Build a Cash Register Project - Build a Cash Register

JavaScript
1

Tell us what’s happening:

I have finished writing the code and it is responding very well. But when I run the test I get failed tests that are unclear to me. What could be the issue?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Build a Cash Register Project</title>
    <link rel="stylesheet" href="./styles.css" />
</head>

<body>

    <div id="change-due"></div>
    <input id="cash" />
    <div id="change-due"></div>
    <button id="purchase-btn">Balance</button>
    <div id="price"></div>
    <div id="balance"></div>
    <h4>Change in drawer</h4>
    <div id="drawerChange"></div>


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

</html>

/* file: script.js */
const cash = document.getElementById("cash");
const changeDue = document.getElementById("change-due");
const purchaseBtn = document.getElementById("purchase-btn");
const drawerChange = document.getElementById("drawerChange");
const pri = document.getElementById("price"); 
const bal = document.getElementById("balance"); 
let price = 19.5;

let cid = [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]];

let cUnit = [
  ['PENNY', 0.01],
  ['NICKEL', 0.05],
  ['DIME', 0.10],
  ['QUARTER', 0.25],
  ['ONE', 1],
  ['FIVE', 5],
  ['TEN', 10],
  ['TWENTY', 20],
  ['ONE HUNDRED', 100]
];

pri.innerHTML = price
let regTotal = 0;

const updateDrawerDisplay = () => {
  drawerChange.innerHTML = "";
  regTotal = 0;
  for (let i = 0; i < cid.length; i++) {
    drawerChange.innerHTML += `<p>${cid[i][0]} : <span>${cid[i][1]}</span></p>`;
    regTotal += cid[i][1];
  }
  return parseFloat(regTotal.toFixed(2))
};

updateDrawerDisplay();

const calBalance = () => {
  let cashAmount = parseFloat(cash.value);
  if (cashAmount === price) {
    changeDue.innerHTML = "";
    changeDue.innerHTML += `<p>No change due - customer paid with exact cash</p>`;
    cash.value = ""
    return
  } 

  let balance = parseFloat((cash.value - price).toFixed(2));

  bal.innerHTML = "";
  bal.innerHTML = `<p>${balance}</p>`;

  regTotal =  parseFloat(regTotal.toFixed(2))
  if (regTotal < balance) {
    changeDue.innerHTML = "";
    changeDue.innerHTML += `<p>Status: INSUFFICIENT_FUNDS</p>`;
    return;

  } else if (regTotal === balance) {

    
    let changeResult = calculateChange(balance, cid, cUnit);

    regTotal = 0;

    for (let i = 0; i < cid.length; i++) {
        cid[i][1] = 0;
    }

    updateDrawerDisplay();

    changeDue.innerHTML = "";
    changeDue.innerHTML = "Status: CLOSED " + changeResult.map((cash) => `${cash[0]} : $${cash[1]}`).join(" ")
    // changeDue.innerHTML += "Status: CLOSED";
    // for (let i = 0; i < changeResult.length; i++) {
    //   changeDue.innerHTML += `<p>${changeResult[i][0]} : ${changeResult[i][1]}</p>`;
    // }

    return;
  }

  let changeResult = calculateChange(balance, cid, cUnit);

  changeDue.innerHTML = "";
  changeDue.innerHTML = "Status: <b>OPEN</b> <br><br> " + changeResult.map((cash) => `<b>${cash[0]}</b> : $${cash[1]}<br>`).join(" ")
  // changeDue.innerHTML += "Status: OPEN";
  // for (let i = 0; i < changeResult.length; i++) {
  //   changeDue.innerHTML += `<p>${changeResult[i][0]} : ${changeResult[i][1]}</p>`;
  // }

  updateDrawerDisplay();

  // Reset cash input
  cash.value = "";
 
};

const calculateChange = (balance, cid, cUnit)  => {
  let getTotalbalance = [];

  for (let i = cUnit.length - 1; i >= 0; i--) {
      let totalAmount = 0;
      while (balance >= cUnit[i][1] && cid[i][1] >= cUnit[i][1]) {
          totalAmount = parseFloat((totalAmount + cUnit[i][1]).toFixed(2));
          cid[i][1] = parseFloat((cid[i][1] - cUnit[i][1]).toFixed(2));
          balance = parseFloat((balance - cUnit[i][1]).toFixed(2));
      }

      if (totalAmount > 0) {
          getTotalbalance.push([cUnit[i][0], totalAmount]);
      }
  }

  return  getTotalbalance;
}

purchaseBtn.addEventListener('click', () => {
  if (cash.value < price) {
      alert("Customer does not have enough money to purchase the item");
  } else {
      calBalance();
  }
});

cash.addEventListener("keydown", (e) => {
  if (e.key === "Enter") {
    if (cash.value < price) {
      alert("Customer does not have enough money to purchase the item");
    } else {
        calBalance();
    }
  }
});

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

Challenge Information:

Build a Cash Register Project - Build a Cash Register

2

running the tests is like adding a bunch of these functions after your code

function test() {
  price = 19.5;
  cid = [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]];
  cash.value = 20;
  document.querySelector("#purchase-btn").click()
}

test()

figure out why this one doesn’t give the expected result, you figure out why the tests don’t pass

3

This is giving me the exact result.

4

have you made any changes to your code?

5

Aside placing the function you wrote down at the bottom of the code which gives me what is expected, I haven’t made any change yet.

6

Really?
I get this result, using the code you posted and adding the test function at the bottom
image

7

Yes, Same here. Should I be getting something else?

8

why do you think these values

shoudl result in “INSUFFICIENT_FUNDS”?

9

Kindly refer to the cid I posted at the beginning and see if my cid is the same as yours.

10

no, that value of cid is not the one used while testing, the value of cid used in the test is the one in the function cid = [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]];

11

jfhugu

How about now? The same test function with your cid.

12

did you make it work changing the cid definition? If you can’t make it work with a reassigned cid like in the test function, then it’s not going to work

13 
function test() {
  price = 19.5;
  cid = [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]];
  cash.value = 20;
  document.querySelector("#purchase-btn").click()
}
test()
function test2() {
  price = 19.5;
  cid = [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]];
  cash.value = 20;
  document.querySelector("#purchase-btn").click()
}

test2()

two of the tests one after the other. Does the second gives the right value?
you can also switch again the order of the two calls, both orders should give the expected result defined by the user stories and tests

14

Ok, Test2 is returning OPEN while it should be INSUFFICIENT_FUNDS.

15

yes. You have many things that happen only when the app is loaded for the first time. Your code needs to be able to work with changing cid and price while it’s on, as that is what the tests do

16

Please can I get the function test for test 18 and 19. It’s also failing.

17

For 18 you can get the values from the text of the test. For 19, they are random

18

Still have issue with test 11, 12, 13, 18 and 19. I tested all with the test function and they all gave me the corresponding outcome.

19

Here is the code `

const cash = document.getElementById("cash");
const changeDue = document.getElementById("change-due");
const purchaseBtn = document.getElementById("purchase-btn");
const drawerChange = document.getElementById("drawerChange");
const pri = document.getElementById("price"); 
const bal = document.getElementById("balance"); 
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]
];

let cUnit = [
  ['PENNY', 0.01],
  ['NICKEL', 0.05],
  ['DIME', 0.10],
  ['QUARTER', 0.25],
  ['ONE', 1],
  ['FIVE', 5],
  ['TEN', 10],
  ['TWENTY', 20],
  ['ONE HUNDRED', 100]
];

pri.innerHTML = price
let regTotal = 0;

const updateDrawerDisplay = () => {
  drawerChange.innerHTML = "";
  regTotal = 0;
  for (let i = 0; i < cid.length; i++) {
    drawerChange.innerHTML += `<p>${cid[i][0]} : <span>${cid[i][1]}</span></p>`;
    regTotal += cid[i][1];
  }
  return parseFloat(regTotal.toFixed(2))
};

updateDrawerDisplay();

const calBalance = () => {
  let cashAmount = parseFloat(cash.value);
  if (cashAmount === price) {
    changeDue.innerHTML = "";
    changeDue.innerHTML += `<p>No change due - customer paid with exact cash</p>`;
    cash.value = ""
    return
  } 

  let balance = parseFloat((cash.value - price).toFixed(2));

  bal.innerHTML = "";
  bal.innerHTML = `<p>${balance}</p>`;

  regTotal =  parseFloat(regTotal.toFixed(2))
  console.log(regTotal)
  if (regTotal < balance) {
    changeDue.innerHTML = "";
    changeDue.innerHTML += `<p>Status: INSUFFICIENT_FUNDS</p>`;
    return;

  }

    
  let changeResult = calculateChange(balance, cid, cUnit);
  console.log(changeResult.totalChange)
  if(balance === changeResult.totalChange){
    
    regTotal = 0;

    for (let i = 0; i < cid.length; i++) {
        cid[i][1] = 0;
    }

    updateDrawerDisplay();

    changeDue.innerHTML = "";
    changeDue.innerHTML = "Status: CLOSED " + changeResult.getTotalbalance.map((cash) => `${cash[0]} : ${cash[1]}`).join(" ")
    // changeDue.innerHTML += "Status: CLOSED";
    // for (let i = 0; i < changeResult.length; i++) {
    //   changeDue.innerHTML += `<p>${changeResult[i][0]} : ${changeResult[i][1]}</p>`;
    // }
    return;
  }

  // let changeResult = calculateChange(balance, cid, cUnit);
  if (balance > changeResult.totalChange) {
    changeDue.innerHTML = "";
    changeDue.innerHTML += `<p>Status: INSUFFICIENT_FUNDS</p>`;
  } else if(changeResult.getTotalbalance) {
    changeDue.innerHTML = "";
    changeDue.innerHTML = "Status: OPEN " + changeResult.getTotalbalance.map((cash) => `${cash[0]} : $${cash[1]}`).join(" ")
    // changeDue.innerHTML += "Status: OPEN";
    // for (let i = 0; i < changeResult.length; i++) {
    //   changeDue.innerHTML += `<p>${changeResult[i][0]} : ${changeResult[i][1]}</p>`;
    // }

    updateDrawerDisplay();
    console.log("open")
    // Reset cash input
    cash.value = "";
  }
};

const calculateChange = (balance, cid, cUnit)  => {
  let getTotalbalance = [];
  let totalChange = updateDrawerDisplay()
  console.log(totalChange)

  for (let i = cUnit.length - 1; i >= 0; i--) {
      let totalAmount = 0;
      while (balance >= cUnit[i][1] && cid[i][1] >= cUnit[i][1]) {
          totalAmount = parseFloat((totalAmount + cUnit[i][1]).toFixed(2));
          cid[i][1] = parseFloat((cid[i][1] - cUnit[i][1]).toFixed(2));
          balance = parseFloat((balance - cUnit[i][1]).toFixed(2));
      }

      if (totalAmount > 0) {
          getTotalbalance.push([cUnit[i][0], totalAmount]);
      }
  }

  return  {totalChange, getTotalbalance};
}

purchaseBtn.addEventListener('click', () => {
  if (cash.value < price) {
      alert("Customer does not have enough money to purchase the item");
  } else {
      calBalance();
  }
});

cash.addEventListener("keydown", (e) => {
  if (e.key === "Enter") {
    if (cash.value < price) {
      alert("Customer does not have enough money to purchase the item");
    } else {
        calBalance();
    }
  }
});`
20

if it works manually but the tests don’t work you still have stuff in the global space that should not be there.

ultimate test:

change this to let cid = [] and update it only in the test function