Build a Cash Register Project - Build a Cash Register

JavaScript
1

Tell us what’s happening:

My code doesn’t pass test 14 and onwards, despite the fact that the output I get when I test it is exactly what it says the desired output is.
Could someone explain why?

I understand the code is a little messy I haven’t gotten round to refactoring since adjusting it to pass the tests.

Your code so far

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Cash Register</title>
      <link rel="stylesheet" href="styles.css">
  </head>

  <body>
      <header>
          <h1>Cash Register</h1>
      </header>

      <main>
          <section id="customer-info">
              <h2>Customer Info</h2>
              <h3>Cost: $1.87</h3>
              <label for="change-received">Change Given</label>
              <input id="cash" type="number"></input>
              <button id="purchase-btn">Confirm Purchase</button>
              <div id="change-due"><ul class="change" id="change-given"></ul></div>
          </section>

          <section id="till-info">
            <h2>Till Info</h2>
            <h3>Till Change</h3>
            <ul class="change" id="till-change"></ul>
          </section>
      </main>
      <script src="script.js"></script>
  </body>
</html>



const changeReceived = document.getElementById('cash');
const changeGiven = document.getElementById('change-given');
const tillChange = document.getElementById('till-change');
const confirmBtn = document.getElementById('purchase-btn');
let price = 19.5;
let changeGivenArr = [];
let cid = [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]];

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

function loadChangeValue() {
  for (let i = 0; i < cid.length; i++) {
    let num = cid[i][1] / changeValue[i][1];
    changeValue[i].push(Math.floor(num));
    console.log(num);
  }
}

function loadTill() {
  for (const change of cid) {
    tillChange.innerHTML += `<li>${change[0]}: ${change[1]}</li>`;
  }
}
loadTill();

//CID CHANGES IN TESTS

function calculateChange() {
  if (!changeReceived.value) {
    alert('input a number');
    return true;
  }
  
  let owedChange = parseFloat(parseFloat(changeReceived.value) - price).toFixed(2);
  if (owedChange < 0) {
    alert("Customer does not have enough money to purchase the item");
    return true;
  }

  loadChangeValue();
  const count = {};
  for (let i = changeValue.length-1; i > -1; i--) {
    let num = Math.floor(owedChange / changeValue[i][1]);
    if (num > changeValue[i][2]) {
      num = changeValue[i][2];
    }
    owedChange = parseFloat((owedChange - (changeValue[i][1] * num)).toFixed(2));
    //cid[i][2] -= num;
    //cid[i][1] = parseFloat((cid[i][1] - changeValue[i][1] * num).toFixed(2));
    if (num) {
      count[cid[i][0]] = num;
      changeGivenArr.push([cid[i][0], parseFloat((changeValue[i][1] * num).toFixed(2))]);
    }
  }
  if (owedChange > 0) {
    return false;
  }
  return true;
}

function loadChange() {
  changeGiven.innerHTML = 'Status: OPEN';
  changeGivenArr.forEach(change => {
    changeGiven.innerHTML += `<li>${change[0]}: $${change[1]}</li>`;
  })
  if (changeGivenArr.length === 0) {
    changeGiven.innerHTML = `<li>No change due - customer paid with exact cash</li>`;
  }
  changeGivenArr = [];
}

function updateTill() {
  const yup = calculateChange();
  //tillChange.innerHTML = '';
  //loadTill();
  if (yup) {
    loadChange();
  } else {
    changeGiven.innerText = 'Status: INSUFFICIENT_FUNDS';
  }
  console.log('--------------');
}

confirmBtn.addEventListener('click', updateTill);




* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

body {
  background-color: #232333;
  color: #ccc;
}

header {
  background-color: #111133;
  padding: 20px;
  font-size: 1.1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

main {
  display: flex;
  height: 80vh;
}

section {
  width: 50vw;
  display: flex;
  flex-direction: column;
  border-right: 2px solid grey;
  border-left: 2px solid grey;
  border-bottom: 2px solid grey;
  height: 100%;
  align-items: center;
}

h2, h3 {
  padding: 2px;
}

h3 {
  margin-top: 20px;
}

label {
  margin-top: 20px;
  font-size: 1.1rem;
}

input {
  width: 50%;
  font-size: 1rem;
  padding: 10px;
  border-radius: 20px;
  border: none;
  margin: 5px;
  text-align: center;
}

button {
  margin: 10px;
  font-size: 1rem;
  padding: 5px;
  background-color: #237723;
  border: none;
  border-radius: 15px;
}

button:hover {
  cursor: pointer;
  border: 2px solid white;
}

ul {
  list-style-type: none;
}

li {
  padding: 2px;
  border-top: 1px solid ;
  border-bottom: 1px solid;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36 Edg/132.0.0.0

Challenge Information:

Build a Cash Register Project - Build a Cash Register

2

Please post your code and talk about how you got stuck figuring out what was wrong. Thanks

3

Hey there,

Please update the message to include your code. The code was too long to be automatically inserted by the help button.

When you enter a code, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

4

There we go, first post here sorry about that!

5

This shouldn’t be a global variable.

Can you talk about how you got stuck in your debugging please?

6

Sure, I input 20 and the result was Status: (whatever its meant to say i cant remember), and its in the correct element so the output is right but for some reason something I am doing to one of my variables isn’t ticking the test.

7

I would check so you can clearly articulate what you see when you try to recreate what the test sees.

8

What do you mean? As in I should check what each changed variable is at the end to see what could be failing the test?

9

You said this. I would run the test yourself again and fully describe what happened

10

I put another line of code in that outputs cid when the changeGiven.innerText is changed to insufficient_funds, when I test it myself, cid is the same but when I run the tests that line of code never runs.

11

I would still get rid of this global variable though

12

okay, are global variables bad coding practice?

13

Generally they make debugging harder and in this case it makes it hard to re-use your function. The tests call your same function multiple times in a row.

14

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
15

You can add the code in this gist below your code in the .js file and it will be like running all the tests one after the other, you can track where the issue is like that: