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

JavaScript
1

I got stuck at step 27, I tried couple of different methods but didn’t work. Please help me figure out how to solve this. Thank you
This is where I got stuck:
const getMode = (array) => {
const counts = {};
array.forEach(el => counts[el] ? counts[el]++ : counts[el] = 1)
}

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

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

/* 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);

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

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Challenge Information:

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

2

It’s expecting:
array.forEach((el) => counts[el] = (counts[el] || 0) + 1);
I looked in the tests using developer tools.

2 Likes
3

Thank you very much! I was dwelling on it for hours, and now it finally worked,

4

Hi, could you please tell me how do you open the tests using developer tools, I came across another problem, and I want to check the answer. I’ve never used it before. Thank you

5

Hi, I only used it because everything I tried that was valid didn’t work. It’s very picky about what you put in.
To be able to do it, you need to understand how to destructure a regular expression.
Within the js file is a method called executeTests. Look in there when you’re absolutely stuck.

6

I tried to utilize the method but I found myself a bit lost in the process. Thank you for offering this method for me anyway.

7

Sorry, you will. I’ve been paid to do the job for 33 years and am evaluating the learning method.
When you get to the phone number project, you’ll struggle to get the correct regular expression. The one I had passed when using the form and not when running theirs tests.

2 Likes
8

Very picky. I tried very readable verbose solutions and failed. I even have a solution that is slightly more concise and looks almost the same
array.forEach((el) => counts[el] = counts[el] + 1 || 1);
It works almost exact same just takes advantage that counts[el] + 1 will result in NaN which is falsy and give the fallback value, but NOPE!

9

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