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

JavaScript
1

Tell us what’s happening:

I know theoretically what I am supposed to be doing here based on the previous steps, but I’m having a hard time adjusting it so that my code will work. I’ve tried at least 20 different things, looked up explanations, and the only person I know who knows anything about coding was too busy with school to help me. I looked at other forum posts but it seems like the step has been changed since these posts have been made, they are already working on the mode step which is not what my step 27 is.

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);
  sorted % 2 === 0 ? getMean([(sorted.length / 2), ((sorted.length / 2) - 1)]) : (sorted / 2 );
}

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

Challenge Information:

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

2

From a glance, your code looks good. Check and make sure that your function itself is returning a value though.

Hope this helps pass the test.

3

I just edited a small typo in my code, but I am having a bit of trouble understanding how to fulfill what you have just described. I just tried adjusting things like 10 more times and have yet to pass the tests. I’m really frustrated. Javascript feels so inconsistent to me, I can solve a problem one way once, but the next time I need to solve the exact same problem, suddenly it doesn’t work anymore. I’ve been trying to reference the code from the sample given in the previous steps, but no matter how similar I make my code, even just re naming things to make it fit my current array and whatnot, it won’t pass. I’m honestly close to a breakdown because coding is my last chance to get an education and a career as a disabled person. I just want to improve my life and I can’t afford any other type of education. I just want to be good at something, to contribute to the needs of the people I love. If not I don’t know what I have to live for.

4

You need to calculate the sorted array with the help of getMean function also you need to round the sorted array length within the getMean function, using Math.floor and return that Turney statement statement.

1 Like
5

I understand your frustration. You’re very close to your solution.

The one line solution for sorted is cool, but it also adds a lot of complexity.

This code will pass getMean an array: [ length of sorted / 2, length of sorted / 2 - 1 ]. Did you mean to pass the lengths of the array to your getMean() function, or did you intend to use those lengths as indexes for items in your sorted array?

Such as:
sorted[sorted.length / 2]

Maybe do a console.log of your median value before you return it just to look at what may be going wrong with your code.

Please post updates of your javascript code if you keep having issues.

6

Also check if sorted.length gives you a different result too. You want to check if the length of the array is even, not the array object itself.

1 Like
7

for your function to return something you need to have return, right now you have a ternary operator which resulting value is just lost

1 Like