Learn Advanced Array Methods by Building a Statistics Calculator - Step 7

Giving an error: " You should use !Number.isNaN, to check if “el” is not NaN

Your code so far

const calculate = () => {
const value = document.querySelector(“#numbers”).value;
const array = value.split(/,\s*/g);
const numbers = array.map(el => Number(el));
const filtered = numbers.filter((el) => !Number.isNaN(Number(el)));
}

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="./styles.css" />
    <script src="./script.js"></script>
    <title>Statistics Calculator</title>
  </head>
  <body>
    <h1>Statistics Calculator</h1>
    <p>Enter a list of comma-separated numbers.</p>

    <form onsubmit="calculate();">
      <label for="numbers">Numbers:</label>
      <input type="text" name="numbers" id="numbers" />
      <button type="submit">Calculate</button>
    </form>
    <div class="results">
      <p>
        The <dfn>mean</dfn> of a list of numbers is the average, calculated by
        taking the sum of all numbers and dividing that by the count of numbers.
      </p>
      <p class="bold">Mean: <span id="mean"></span></p>
      <p>
        The <dfn>median</dfn> of a list of numbers is the number that appears in
        the middle of the list, when sorted from least to greatest.
      </p>
      <p class="bold">Median: <span id="median"></span></p>
      <p>
        The <dfn>mode</dfn> of a list of numbers is the number that appears most
        often in the list.
      </p>
      <p class="bold">Mode: <span id="mode"></span></p>
      <p>
        The <dfn>range</dfn> of a list of numbers is the difference between the
        largest and smallest numbers in the list.
      </p>
      <p class="bold">Range: <span id="range"></span></p>
      <p>
        The <dfn>variance</dfn> of a list of numbers measures how far the values
        are from the mean, on average.
      </p>
      <p class="bold">Variance: <span id="variance"></span></p>
      <p>
        The <dfn>standard deviation</dfn> of a list of numbers is the square
        root of the variance.
      </p>
      <p class="bold">
        Standard Deviation: <span id="standardDeviation"></span>
      </p>
    </div>
  </body>
</html>
/* file: styles.css */
body {
  margin: 0;
  background-color: rgb(27, 27, 50);
  text-align: center;
  color: #fff;
}

button {
  cursor: pointer;
  background-color: rgb(59, 59, 79);
  border: 3px solid white;
  color: white;
}

input {
  background-color: rgb(10, 10, 35);
  color: white;
  border: 1px solid rgb(59, 59, 79);
}

.bold {
  font-weight: bold;
}
/* file: script.js */

/* User Editable Region */

const calculate = () => {
  const value = document.querySelector("#numbers").value;
  const array = value.split(/,\s*/g);
  const numbers = array.map(el => Number(el));
  const filtered = numbers.filter((el) => !Number.isNaN(Number(el)));
}

/* User Editable Region */

Your browser information:

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

Challenge Information:

Learn Advanced Array Methods by Building a Statistics Calculator - Step 7

In the previous line, you already perform Number(el), I don’t think you need to do that again.

"check if “el” is not NaN The error also does not mention using Number(el), you can take it literally

Sorry, I did not write the whole message. It mentions “el”: "Your callback function should use ! and Number.isNaN() to check if “el " is NOT NaN.”

The problem is the same though, the error message doesn’t say Number(el) anywhere. That part shouldn’t be needed.

Thanks!!!It worked…

1 Like

Just want to add a comment becuase I got confused by this, it is important to remember that is NaN is taking the value of the element here not being performed on the numbers array inside of filter as filter is the method already being run on the numbers array.