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

Tell us what’s happening:

hi! ive been on this step for literal days! I would really appreciate if anyone can help me/ correct me on the syntax of my ternary operators for this step. I didn’t quite finish the second ternary for the length of an odd array because I wasn’t sure what to put for the falsey attribute and everything I tried wouldn’t pass. please help!

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.toSorted((a, b) => a - b);
  const median = 
    array.length % 2 === 0 ? getMean([sorted[array.length / 2 - 1], sorted[array.length / 2]]) : sorted[Math.floor(array.length / 2)];
    array.length % 2 === 1 ? sorted[Math.floor(array.length / 2)] 
  return median
}

// 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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.1 Safari/605.1.15

Challenge Information:

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

this is one expression.

while this below is a whole other expression unrelated to the one above it:

The first expression is the one that is being evaluated for median.
While the 2nd one might as well not be there because it affects nothing at all.

So I’m just going to ignore that 2nd expression and ask you to delete it.
After you delete it, check the hints. they will suggest something to fix.

hi. thanks for your help. I deleted the second ternary expression and the hint it gave me when I try to pass the code is : " Your getMedian function should use sorted array." which I’m honestly still very confused with because I thought I was already using sorted in the getMedian function. So, this is now my existing code:

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

right you are using sorted but you are still also using array
They want you to use just sorted (not intermingle the use of array and sorted)

1 Like

the problem is with “toSorted”…check the console and y’ll find this error"[TypeError: array.toSorted is not a function]"

look what i did to pass the step …i change “toSorted” by “sort”
mod edit: code removed

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

but there an issue with this step

there is no issue with this step. If you need help, please don’t spam someone else’s post and open your own post. (use the Help button to do so please)