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

JavaScript
1

Tell us what’s happening:

Not sure where i got it wrong but using the exact syntax taught in the initial steps for the getMedian function, i can’t pass my code.

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: 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) {
    mean = getMean([sorted[sorted.length / 2 - 1], sorted[sorted.length / 2]]);
    return mean;
  }
  else if (sorted.length % 2 === 1) {
    mean = sorted[Math.floor(sorted.length / 2)];
    return mean;
  }
  }

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

/* 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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36 Edg/127.0.0.0

Challenge Information:

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

2

Try moving the return statement so it happens outside the if else block. You should only need one return statement.

1 Like
3

Thank you for your feedback, i tried but yet to pass my code.

4

is your mean variable defined anywhere? (usually with a let or a const)?
check the console as well for error messages

5

i tried to define it once and below was the console statement:

Your getMedian function should return the mean of the middle two numbers if the array length is even.
Your getMedian function should return the middle number if the array length is odd.
// tests completed
6

what does your code look like now?

7

below

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

yeah that will not work.
you are defining the variable mean inside the if and else-if blocks so your return will not know what you are talking about as it is outside these blocks.

Check the console, don’t you see an error there? (it should be telling you that you have a reference error)

You have two options. Define the mean variable in the function scope so that the return can see it (that means defining it in the same place as the const sorted is defined right now), or stop using it entirely and just return the results directly (skip the part where you try to store the mean in the variable and just return it as-is)

9

if i have to define it at the function scope, would it then mean that i use a Let so i can re assign the result as it differs in the case of odd and even number?
skipping it entirely would be the initial step before defining the mean? I am a bit confused with the last part.

10

you can use let to define it in the function scope yes.
Then you can re-assign the value as needed and return at the end.

The other option is to skip creating the variable completely and just return the result of the getMean directly (and the middle value of sorted in the case of the odd option)

1 Like
11

Thank you so much, it eventually passed have to return the mean syntax directly in each case.

1 Like