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

JavaScript
1

Tell us what’s happening:

I’m getting a TypeError saying “array.reduce is not a function.” I wonder what the error is.

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(); return false;">
      <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 */
const getMean = (array) => array.reduce((acc, el) => acc + el, 0) / array.length;


// User Editable Region

const getMedian = (array) => {
  const sorted = array.sort((a, b) => a - b);
  if (sorted.length % 2 === 0) {
    return getMean(sorted[Math.floor(sorted.length / 2)], sorted[sorted.length / 2 - 1]);
  } else {
    return sorted[Math.floor(sorted.length / 2)];
  }
}

// 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));
  
  const mean = getMean(numbers);

  document.querySelector("#mean").textContent = mean;
}

Your browser information:

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

Challenge Information:

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

2

You must pass an array to this function

So that it can use reduce on that array

3

Here’s my code:

const getMedian = (array) => {
  const sorted = array.sort((a, b) => a - b);
  if (array.length % 2 === 0) {
    return getMean(array[Math.floor(array.length / 2)], array[array.length / 2 - 1]);
  } else {
    return array[Math.floor(array.length / 2)];
  }
}

I seem to be finding it confusing.

4

I know what your code is. That’s why I quoted your code in my reply talking about what is wrong. You should respond to what I said if you have questions about what I said

5

I wasn’t sure about which array to pass in and how to pass it in, that confused me.

6

The instructions say

If it is, find the middle two numbers, calculate their mean, and return the result.

But the function for calculating means only accepts arrays, so those middle two numbers have to be put into a new array to be a compatible argument

7

Here’s my new code:

const getMedian = (array) => {
  const sorted = array.sort((a, b) => a - b);
  if (array.length % 2 === 0) {
    const middleNumber1 = array[Math.floor(array.length / 2)]
    const middleNumber2 = array[array.length / 2 - 1];
    const midArray = [middleNumber1, middleNumber2];
    return getMean(middleNumber1, middleNumber2);
  } else {
    return array[Math.floor(array.length / 2)];
  }
}

I tried creating a new array, but achieving compatibility still seems confusing.

8

You aren’t passing an array to the ‘getMean’ function though

9

Thanks, I finally got it.

1 Like
10

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