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

Tell us what’s happening:

Describe your issue in detail here.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
    <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>
    <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>
    <div class="results">
        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 class="bold">Mean: <span id="mean"></span></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 class="bold">Median: <span id="median"></span></p>
        The <dfn>mode</dfn> of a list of numbers is the number that appears most
        often in the list.
      <p class="bold">Mode: <span id="mode"></span></p>
        The <dfn>range</dfn> of a list of numbers is the difference between the
        largest and smallest numbers in the list.
      <p class="bold">Range: <span id="range"></span></p>
        The <dfn>variance</dfn> of a list of numbers measures how far the values
        are from the mean, on average.
      <p class="bold">Variance: <span id="variance"></span></p>
        The <dfn>standard deviation</dfn> of a list of numbers is the square
        root of the variance.
      <p class="bold">
        Standard Deviation: <span id="standardDeviation"></span>
/* 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.slice().sort(function(a, b) {
    return a - b;


// 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/ Safari/537.36

Challenge Information:

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

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.

Hi @colmwoods13

Please move the slice method as this was not mentioned in the instructions.

For next time, describe the issue in your own words. Learning to communicate problems is a part of becoming a web developer.

Happy coding