Build a Cash Register Project - Build a Cash Register

Tell us what’s happening:

The last test won’t pass. Don’t know why. When I replicate the test conditions the program seems to be doing exactly what it asks.
All the other tests pass. Thanks for your help!

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <title>Secure Checkout</title>
  </head>
  <body>
    <h1>Secure Checkout</h1>
    <p id="moneyback">Money Back Guarantee!</p>
    <p id="price">Loading...</p>
    <form id="purchase-form">
      <label>Enter cash amount: <input id="cash" type="number" placeholder="$" step="0.01" min="0.01"></input></label>
      <button id="purchase-btn">Purchase</button>
    </form>
    <p id="change-due">Loading...</p>
    <script src="./script.js"></script>
  </body>
</html>
/* file: script.js */
/*jshint esversion: 6 */
// TODO: test if e.preventDefault() is needed


let price = 19.5;
let cid = [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 1], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]];
const values = {
  "PENNY": 0.01,
  "NICKEL": 0.05,
  "DIME": 0.10,
  "QUARTER": 0.25,
  "ONE": 1.00,
  "FIVE": 5.00,
  "TEN": 10.00,
  "TWENTY": 20.00,
  "ONE HUNDRED": 100.00
};
let myStatus = 2;


const cashInput = document.getElementById("cash");
const changeOutput = document.getElementById("change-due");
const purchaseForm = document.getElementById("purchase-form");
const priceOutput = document.getElementById("price");

priceOutput.textContent = `Price Of Item: $${price}`;


const updateOutputText = (text) => {
  changeOutput.innerHTML = `Status: ${["INSUFFICIENT_FUNDS", "CLOSED", "OPEN"][myStatus]}${text}`;
};
updateOutputText("<br>Make a purchase above.");

const round = num => Math.round(num * 100) / 100;

purchaseForm.addEventListener("submit", () => {
  if (myStatus !== 1) {
    const cash = cashInput.value;
    let totalChange = round(cash - price);
    if (totalChange < 0) {
      updateOutputText("Not enough money provided.");
      alert("Customer does not have enough money to purchase the item");
    } else if (totalChange === 0) {
      changeOutput.innerHTML = "No change due - customer paid with exact cash";
    } else {

      const specificChange = {};
      cid.toReversed().forEach((item) => {
        const amount = Math.min(Math.floor(totalChange / values[item[0]]) * values[item[0]], item[1]);
        if (amount) {
          totalChange = round(totalChange - amount);
          specificChange[item[0]] = amount;
        }
      });

      if (totalChange === 0) { // there was enough change
        cid.forEach((item) => {
          item[1] = specificChange.hasOwnProperty(item[0]) ? round(item[1] - specificChange[item[0]]) : item[1];
        }); // update cash in drawer
        if (!cid.some((el) => el[1] > 0)) {
          myStatus = 1;
        } else {
          myStatus = 2;
        }
        updateOutputText(Object.keys(specificChange).reduce((acc, el) => {
          acc += ` ${el}: $${specificChange[el]}`;
          return acc;
        }, ""));
      } else {
        myStatus = 0;
        updateOutputText("");
      }
    }
  }
});

/* file: styles.css */
#change-due {
  border: 1px dashed green;
  min-height: 50px;
}

#moneyback {
  color: green;
  font-style: italic;
}

#purchase-button {
  border: 1px solid green;
}

#cash {
  width: 100px;
  border: 1px solid green;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:139.0) Gecko/20100101 Firefox/139.0

Challenge Information:

Build a Cash Register Project - Build a Cash Register

1 Like

you can replicate them by adding the code of this file below your code in the JS file: cash register test suite.js · GitHub

everything works fine… I have no idea about the error message that appear in the console while the tests are running tho

Uncaught (in promise) TypeError: this[#i] is not a function
    at DOMTestEvaluator.handleMessage (dom-test-evaluator.js:2:254166)
    at onmessage (dom-test-evaluator.js:2:254467)

So maybe there is a deeper issue to investigate

There’s little caveat with using submit event. By default that means form is submitted to server and page at least reloads. That doesn’t happen in the preview, but during tests it will, causing the fails. Do you know how actual submitting of the form to the server could be prevented?

I did e.preventDefault() at the beginning of the event listener callback. Tests seem to be working more consistently even though the last one still won’t pass. Thanks!

That’s funny, I don’t get that error message.
The github you sent me contains many of the tests but not the one that’s failing, #19.
I think I’ll just give this up because there are better things to do than get this stupid test to pass. Thanks.

when I test your code, tests start failing from test 9 onward

provide the code that fails only test 19 if you need help with that

anyway, this is an example of values for test 19, it is not included in the file because this is a random test and run with different values each time

cid = [
    [
        "PENNY",
        0.13
    ],
    [
        "NICKEL",
        0
    ],
    [
        "DIME",
        0.1
    ],
    [
        "QUARTER",
        0
    ],
    [
        "ONE",
        2
    ],
    [
        "FIVE",
        0
    ],
    [
        "TEN",
        10
    ],
    [
        "TWENTY",
        0
    ],
    [
        "ONE HUNDRED",
        0
    ]
];

price = 67.77;

document.querySelector('#cash').value = 80;