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

JavaScript
1

Tell us what’s happening:

Your function should use a ternary operator. I keep getting this message. I am lost. what is wrong with my ternary operator?

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;

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


// User Editable Region

const getMode = (array) => {
  const counts = {};
  array.forEach(el => counts[el] = counts[el] ? counts[el] += 1 : counts[el] = 1)
  return counts;
}

// 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);
  const median = getMedian(numbers);
  console.log(getMode(numbers));

  document.querySelector("#mean").textContent = mean;
  document.querySelector("#median").textContent = median;
}

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

Challenge Information:

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

2

A ternary should not have = inside of it

Bad:

cond ? a = 1 : a = 2

Good:

a = cond ? 1 : 2
3

a = cond ? 1 : 2. in my case ( 1: 2 ) is supposed to be 1 : 1??
I still don’t get how to increment the counts variable with that

4

You have = in your ternary after the ?

You should have zero = inside of your ternary

5

array.forEach(el => counts[el] = counts[el] += 1 ? counts[el] + 1 : counts[el] )

6

this is still an assignment, it should not be inside the ternary, and it is not a condition so I am not sure what you expect this to check

7

I’m not sure what you expect that syntax to do?

A ternary has the pattern

result = condition ? value_if_true : value_if_false

What is the condition you want to test? What do you want to do if that condition is true? What do you want to do if that condition is false?

8

i get now. thanks. it took me a while lol

9

As said, you really shouldn’t have assignments inside the ternary expressions, but it is allowed, and you can pass with it.

const wasItTrue = true ? "It was true" : "It was false"
console.log(wasItTrue) // "It was true"

Could also be written as:

let wasItTrue;
true ? wasItTrue = "It was true" : wasItTrue = "It was false"
console.log(wasItTrue) // "It was true"

But that isn’t a good use of a ternary and should be avoided.