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

JavaScript
1

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.
I’m having a bit of trouble here, I think I can do it by using an if statement but no idea how to with the ternary operator bcz it involves multiple lines. How can I write it one single line?

<!-- 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);
  const median = array.length % 2 === 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));
  
  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/122.0.0.0 Safari/537.36

Challenge Information:

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

2

Hi @GhadyKeyrouz

The tests for this step are checking for the ternary operator so you will need to use it here.

Remove the question mark after the zero

Happy coding

3

I tried, it still won’t work.

  const median = array.length % 2 === 0;
4

Remove the semi-colon, then on a new line add the code for the ternary operator.

5

Can I have multiple lines of code in the ternary operator, for example:

const median = array.length % 2 === 0?
// code here
//code here
//code here
:
//code here
//code here;
6

Yes, start with the question mark on a new line.

7

Should I put in on a new line completely by itself or before the first line of code, or it doesn’t matter either way?

8

Start with a question mark on a new line, then on the same line write the first part of the code. Do the same thing for the colon.

9

Alright, thank you so much. I’ll try to do it when I can and respond with the results.

1 Like
10

I was a little busy with work but I finally completed this step

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

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