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

JavaScript
1

Tell us what’s happening:

In the “build a statistics calculator” lesson, I am stuck on step 5. I thought I knew what I was doing until now. The console keeps consistently telling me “do not use the word “new” in the number constructor” or “map method should utilize a callback function” or “,” expected. I had thought I knew what I was doing and had done both of these, but now I’m not sure that I actually know what I am doing. Please help. Here is my code:

  const numbers = array.map(Number(el) => {})

.

Your code so far

<!-- 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: script.js */

// User Editable Region

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

// User Editable Region


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

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36

Challenge Information:

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

2

Remember that arrow functions always have this format:

(parameters, here) => { other code here }
3

OK, I think I am missing something fundamental here. I know that that is the correct format for an arrow function - but - I have tried literally dozens of permutations of this code to no avail. I think I am not processing what the instructions say to do correctly so I’ll be direct and simply ask: what are the parameters for this function? The instructions (and multiple other sites) say that the first parameter of the .map() method always is a callback function. I interpret this being

const  numbers = array.Map((array.Number() => {}) => {};

I see this as the number method arrow function is the parameter of the .map() method, which in turn is also arrow function. However, I already know that this doesn’t work. Is there another parameter I not considering, or, is it supposed to be more like:

const number = array.map(number) => {
    array.forEach(i = 0; i < array.length; i++) {
     return Number(array);
}

The above is just an example, and I already know it also doesn’t work. So I guess what I am asking is: are the instructions asking me to also created the callback function statements. I’m pretty sure this is no because as I understand it the Number() method used within the .map() method on an array should automatically return a new array in which the string number values are converted to acutal primitive number values.

Here is another example of what I have tried:

const numbers = array.Map(number.Number(array) => {});

also:

const numbers = array.Map(Number(array) => {});

Both of these last two examples don’t work. I cannot figure this out. However, another post in this forum had said that this IS the solution:

const number = array.Map({El => {});

However, this code also does not pass the tests.

So to sum up my questions are:

  1. Is this supposed to be a function within a function? ( my guess is no)
  2. Am I missing parameters that I haven’t considered? (my guess is likely yes)
  3. Are we supposed to be createding code statemwnts for the .map() and Number() methods within the curley brackets ourselves (such as in the example I provided))? (my guess is likely no)
  4. A solution to this step was posted in the freeCodeCamp fourum, that worked for that user apparently but deinitely not for me.
  5. Is there some obvious item that should is staring me in the face that I am just not recognizing?

Thank you for your help so far but I think I’m gonna need a few more nudges in the right direction before I can solve this one. Again, thank you for your help thus far…

1 Like
4

I think so.

Here’s my example again:

So far you have:

(Well you have it if you click reset)

They said to add a callback function.

So you need to put the call back function obviously between the two () of map.

So far so good.

Look at my example now. What is the first character I used?

Look at your code in comparison: what is your first character?

Mine was a (
Yours in the original attempt was a N

That is a problem.
Because mine is parenthesis that surround the parameters. And yours is not.

So I would start there.
Create a pair of parenthesis in the map parenthesis and write down the parameter name inside it.

Note: they didn’t say what the parameter should be called so you can call it anything. They did say though that your map will:

convert each element into a number

So maybe something like el works well as a parameter name here.

Try this first and get back to me.

2 Likes
5

I literally just was able to solved it. I was overthinking the problem by miles and making my solution waaaaaaaay more complicated than it needed to be. Thank you for taking the time and making such an involved attempt to lead me in the right direction!! Much appreciated!

1 Like