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

JavaScript
1

Tell us what’s happening:

Can someone explain this to me I don’t know how it works I just find the code

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.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)];
}

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

Challenge Information:

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

2

The goal of the stats calculator is for users to be able to enter in a list of numbers, click on the calculated button and have the median calculated for them.

The median is the middle point of the list.

If the list is odd, the middle point is going to be the middle number.
If the list is even, the middle will be the average of the two middle numbers

In an earlier step, you created this sorted variable which sorts the array from smallest to largest.

const sorted = array.sort((a, b) => a - b);

not matter what order the user provides the list of numbers, the getMedian function will always sort the list first.

The goal of this step is to create a median variable and assign it the result of finding the median. The reason why you need to use a ternary is because you need to check if the list has an even length or not. Then you need to make the appropriate calculations based on what I mentioned earlier

If the list is odd, the middle point is going to be the middle number.
If the list is even, the middle will be the average of the two middle numbers

To check if the length of the array is even or odd, then you use the modulus operator as shown in the example they gave you

array.length % 2 === 0;

So if the length is 4, then 4 divided by 2 gives us a remainder of 0 because it divides evenly.
If the length is 5 though, then 5 divided by 2 gives us a remainder of 1 because it doesn’t divide evenly.

Here is an example on how to get the middle point with an odd list of numbers

let’s say you had a list of numbers like this

const numbers = [1,2,3,4,5]

just by looking at it, the midpoint would be the value of 3 which would be numbers[2]. You shouldn’t hardcode numbers[2], but instead find a way to programmatically get the middle number no matter what odd length of array you are working with.

To get the middle number of any odd numbered length array, you would take the length of the array and divide it by 2.

numbers.length/2

since that result could include a decimal, then you should round the result down to nearest whole integer

Math.floor(numbers.length/2)

that result will be a whole number which represents your array index.

so the complete code for finding the middle number of an array would be this:

numbers[Math.floor(numbers.length/2)]

If the length of numbers is even, then you need to get the average of the middle two numbers.

here is another example using an array with 6 numbers

const secondNumbersArr = [1,2,3,4,5,6]

to get one of the middle numbers, you can use the length of the array divided by 2 like we did earlier.

secondNumbersArr.length / 2

that will give you the index number. The following code below with give you the first middle number

secondNumbersArr[secondNumbersArr.length / 2]

to get the second middle number, you can still take the length of the array divided by 2, but then subtract 1 from it.

(secondNumbersArr.length / 2) - 1

that will give the second index number. To code below, will give you the second middle number

secondNumbersArr[(secondNumbersArr.length / 2) - 1]

So the middle two numbers for the [1,2,3,4,5,6] array will be 3 and 4.

Now you need to get the average of 3 and 4.

Earlier in your code, you wrote this getMean function which adds up all of the numbers of the array and divides the result by the length of the array

const getMean = (array) => array.reduce((acc, el) => acc + el, 0) / array.length;

That is why getMean is being used in the answer because you need to get the average of the middle two numbers.

Essentially when you are using the getMean function in your answer, you are passing in an array of two middle numbers, adding them together and then dividing the result by 2.

Hopefully all of that made sense.

1 Like
3

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