---
id: 635090f47eb6d9563a6fed05
title: Step 22
challengeType: 0
dashedName: step-22
---

# --description--

The next step is to find the number in the middle of the list. If the list has an odd number of numbers, the middle number is the median. If the list has an even number of numbers, the median is the average of the two middle numbers.

You can check if a number is even or odd with the <dfn>modulus operator</dfn>, which is represented by the `%` symbol. This operator returns the remainder of the division of two numbers. If the remainder is `0`, the number is even. If the remainder is `1`, the number is odd:

```js
array.length % 2 === 0;
```

Declare a `median` variable. Using the ternary operator, check if the length of `array` is even. If the length of `array` is even, find the two middle numbers and calculate the mean of those numbers. If the length of `array` is odd, find the middle number and assign it to the `median` variable.

# --hints--

Your `getMedian` function should have a `median` variable.

```js
assert.match(getMedian.toString(), /median\s*=/);
```

Your `median` variable should use a ternary operator to check if the `array.length` is even.

```js
assert.match(getMedian.toString(), /median\s*=\s*array\.length\s*%\s*2\s*===\s*0\s*\?/);
```

If the `array.length` is even, your `median` variable should use the `getMean` function to calculate the mean of the two middle numbers. Your first argument should be the value of `sorted` at `array.length / 2`, and the second at `array.length / 2 - 1`.

```js
assert.match(getMedian.toString(), /median\s*=\s*array\.length\s*%\s*2\s*===\s*0\s*\?\s*getMean\(\s*\[sorted\[array\.length\s*\/\s*2\]\s*,\s*sorted\[\s*array\.length\s*\/\s*2\s*-\s*1\]\]\)\s*\:/);
```

If the `array.length` is odd, your `median` variable should assign the middle number to the `median` variable. The middle number is the value of `sorted` at `Math.floor(array.length / 2)`.

```js
assert.match(getMedian.toString(), /median\s*=\s*array\.length\s*%\s*2\s*===\s*0\s*\?\s*getMean\(\s*\[sorted\[array\.length\s*\/\s*2\]\s*,\s*sorted\[\s*array\.length\s*\/\s*2\s*-\s*1\]\]\)\s*\:\s*sorted\[\s*Math\.floor\(\s*array\.length\s*\/\s*2\)\];/);
```

# --seed--

## --seed-contents--

```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>
```

```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;
}
```

```js
const getMean = (array) => array.reduce((acc, el) => acc + el, 0) / array.length;

--fcc-editable-region--
const getMedian = (array) => {
  const sorted = array.sort((a, b) => a - b);
}
--fcc-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;
}
```
