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

JavaScript
1

Tell us what’s happening:

I keep getting this error message: What am I doing wrong?
“Your function should still increment the counts variable properly.”

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] += 1 : counts[el] = 1);
     
  
  
console.log(counts[el])

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

Challenge Information:

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

2

Hi. Can I direct you to this post where there is some useful hints on how to complete the task. Please post back if you are still stuck having gone through the tips there.

3

I loved your explanation, it helped me a lot. Thank you so much for taking the time :heart: :grinning: :blush:

4

I have spent days on this one step…just spoil it for me! I’m so frustrated

5

I’m sorry we can’t give the answer! Did you check the 2 explanations in the other post I linked to? If you have changed anything since the above, please post your updated code. If there is anything in particular you don’t understand please say (I appreciate you don’t know what you don’t know though).

Did you press help on your step (which appears after a couple of failed attempts) to look at any other posts on this step in the forum?

As I mentioned in the post that I linked to, you are missing part of the syntax - look at it again, you have started at the condition, which you have put correctly. Once you have the = sign where it should be in the syntax, another hint is to revert back from the += assignment operator that you already have. What do they mean? If you have the = sign in the right place then you don’t put it again in the expression if true / false. Have a look at this to see what your assignment operator does (which you already know but it sometimes helps to look).

6

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

this is what I changed to after I was looking at what you said. What am I doing wrong?

7

You have the first part before the equal sign right - well done for getting that. Your condition is right. Your first expression if true is also right. You just need to work on the last one, expression if false. You are way out there, you just need to work on what you originally put : counts[el] = 1)

You have now put counts[el] at the start before the equal sign at the start. You don’t put the equal sign again. See if you can figure it out now.

8

I now have
array.forEach(el => counts[el] = counts[el] ? counts[el] + 1 : 1)
I get the error message below

Your function should still increment the counts variable properly.

9

This code passes correctly for me. You may have accidentally modified another part of the code.

You can try to reset the step and put in the exact same thing, or share your full getMode function here.

10

Yes that passed for me as well. Did you replace just the if else statement? If you look at the last instruction you don’t just replace the if else statement.