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

JavaScript
1

Tell us what’s happening:

i’m not sure how to go about this one, the initial value should be the second parameter? and it should be 0? what else am i missing?

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: 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 getMean = (array) => {
  const sum = array.reduce((acc, 0) => acc + 0);
}

// User Editable Region


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

Your browser information:

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

Challenge Information:

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

2

Try to understand the example first . Your answer should be similar in terms of the parameters

array.reduce((acc, el) => acc + el.toLowerCase(), "");

But the initial value in your case is not an empty string.

3

const sum = array.reduce((acc, el) => acc + el.toLowerCase(), 0);

something like this? and is the initial parameter the second argument or el? can’t figure this out

4

In the example code the initial value (not initial parameter) is the empty string. Notice where it is located. (It is the second parameter passed into reduce).

For this step, you should not make any change to the code except to add that second parameter.

5

ok so i add 0 to second parameter or replace el with 0? can’t figure this one out, could you please expand on what you mean or how to go about this?

6

Look at the example again. Your code should be virtually identical except that the second parameter for reduce is not “”, it is a zero.

(And obviously your function body should be something diff)

7

i thought thats what i had with this:
const sum = array.reduce((acc, el) => acc + el.toLowerCase(), 0);

and how should the function body be different?

8

click Reset and you will see the original code which was:

const getMean = (array) => {
  const sum = array.reduce((acc, el) => acc + el);
}

They didn’t want you to change anything except to add that second reduce parameter.

Edit: it might be good for you to take a little breather.
I feel you’re missing the forest for the weeds here.

1 Like
9

Just as an aside. Parameters are always variables, they can not be direct values. You can assign a default value, but you can’t use a value directly.

function test(params, 10) {    
}
Uncaught SyntaxError: Unexpected number

Reduce takes a callback, and an optional initial value.

reduce(callbackFn, initialValue)
10

ok thanks for all your help, and sorry, i still can’t figure out if i need to add the:
el.toLowerCase(), “”) to the answer from the example given and then replace the “” with 0? or not add the .toLowerCase(), “”) from the example and figure out where to put the 0 in the original code given. Thats where i’m confused.

11

Trust me on this. You need to click Reset.
Then after that, you only need to add 2 characters to the code.
A comma and a zero.

Again, it may be good to take a little break here.

12

i reset it, but all i’m trying to figure out is where to add the comma and zero.
like, where in this line of code do i add the comma and zero?
const sum = array.reduce((acc, el) => acc + el);

13

good, that’s a good question to ask.

Where did the , "" go in the example?

1 Like
14

ok thanks i got it. i really appreciate your help

1 Like
15

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.