jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2025-12-25 02:14:11 -05:00
Code Issues Projects Releases Wiki Activity

refactor(curriculum): updating step 22 of stats calculator project (#54312)

Browse Source 
Co-authored-by: Naomi <nhcarrigan@gmail.com>
Co-authored-by: Sem Bauke <semboot699@gmail.com>
This commit is contained in:
Jessica Wilkins
2024-04-18 00:31:46 -07:00
committed by GitHub
parent f7dbd84351
commit 3c1353fbe0
38 changed files with 667 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
curriculum/challenges/_meta/learn-advanced-array-methods-by-building-a-statistics-calculator/meta.json
View File

@@ -98,140 +98,152 @@
"title": "Step 21"
},
{
"id": "635090f47eb6d9563a6fed05",
"id": "661890c4abae9f2a0eddad6b",
"title": "Step 22"
},
{
"id": "635091f8dbf554575fb5aa0c",
"id": "661899113600ef307d8a7487",
"title": "Step 23"
},
{
"id": "6352e79d15aae30fac58f48e",
"id": "6618a3264f955339063d3328",
"title": "Step 24"
},
{
"id": "6352e80e024e89111600edfb",
"id": "6618abf6368d073f0f659780",
"title": "Step 25"
},
{
"id": "6352e93db104661305c5f658",
"id": "635090f47eb6d9563a6fed05",
"title": "Step 26"
},
{
"id": "6352e96d2604f813c656750b",
"id": "6352e79d15aae30fac58f48e",
"title": "Step 27"
},
{
"id": "65aac0678d51b3f1a0cb8061",
"id": "6352e80e024e89111600edfb",
"title": "Step 28"
},
{
"id": "65c4dc57418fd6bfc710d61d",
"id": "6352e93db104661305c5f658",
"title": "Step 29"
},
{
"id": "65ca2d0625aa3a3201067f70",
"id": "6352e96d2604f813c656750b",
"title": "Step 30"
},
{
"id": "65e62efde0592ec4b4bb6a69",
"id": "65aac0678d51b3f1a0cb8061",
"title": "Step 31"
},
{
"id": "65f83a7ca7047318e3ccff7c",
"id": "65c4dc57418fd6bfc710d61d",
"title": "Step 32"
},
{
"id": "6352ea3a5b79e614ee2282fd",
"id": "65ca2d0625aa3a3201067f70",
"title": "Step 33"
},
{
"id": "6352ebd3ab962c168a122e85",
"id": "65e62efde0592ec4b4bb6a69",
"title": "Step 34"
},
{
"id": "6352ec8b9c70fd17b8c7ba3f",
"id": "65f83a7ca7047318e3ccff7c",
"title": "Step 35"
},
{
"id": "6352ecef9f045519063da9b3",
"id": "6352ea3a5b79e614ee2282fd",
"title": "Step 36"
},
{
"id": "6352edee8a4de01ad693f0e4",
"id": "6352ebd3ab962c168a122e85",
"title": "Step 37"
},
{
"id": "6352ee566a59d31d24bde74b",
"id": "6352ec8b9c70fd17b8c7ba3f",
"title": "Step 38"
},
{
"id": "6352f09b1e53a420e7873344",
"id": "6352ecef9f045519063da9b3",
"title": "Step 39"
},
{
"id": "6352f179bdca23221298a5ba",
"id": "6352edee8a4de01ad693f0e4",
"title": "Step 40"
},
{
"id": "6352f2526dccb523150b64fb",
"id": "6352ee566a59d31d24bde74b",
"title": "Step 41"
},
{
"id": "6352f2a24eb71b24284ca2b6",
"id": "6352f09b1e53a420e7873344",
"title": "Step 42"
},
{
"id": "6352faf71a9db52631864634",
"id": "6352f179bdca23221298a5ba",
"title": "Step 43"
},
{
"id": "6352fbb93a91a8272f838d42",
"id": "6352f2526dccb523150b64fb",
"title": "Step 44"
},
{
"id": "6352fcb156834128001ea945",
"id": "6352f2a24eb71b24284ca2b6",
"title": "Step 45"
},
{
"id": "6352fce75b2d3b2924930f1e",
"id": "6352faf71a9db52631864634",
"title": "Step 46"
},
{
"id": "6352fe473d53592a40ae403b",
"id": "6352fbb93a91a8272f838d42",
"title": "Step 47"
},
{
"id": "6352fed209792d2b89e92ea1",
"id": "6352fcb156834128001ea945",
"title": "Step 48"
},
{
"id": "6352ff27e0e51b2c7dce0010",
"id": "6352fce75b2d3b2924930f1e",
"title": "Step 49"
},
{
"id": "6352ffe4cfafa72d595a0007",
"id": "6352fe473d53592a40ae403b",
"title": "Step 50"
},
{
"id": "6353004b235d7a2e0b913f2b",
"id": "6352fed209792d2b89e92ea1",
"title": "Step 51"
},
{
"id": "6353024f5eab012fa2f57eec",
"id": "6352ff27e0e51b2c7dce0010",
"title": "Step 52"
},
{
"id": "6353028147d3c7309017216a",
"id": "6352ffe4cfafa72d595a0007",
"title": "Step 53"
},
{
"id": "635302be760d6031d11a06cd",
"id": "6353004b235d7a2e0b913f2b",
"title": "Step 54"
},
{
"id": "6374249d3fbf2a5b079ba036",
"id": "6353024f5eab012fa2f57eec",
"title": "Step 55"
},
{
"id": "6353028147d3c7309017216a",
"title": "Step 56"
},
{
"id": "635302be760d6031d11a06cd",
"title": "Step 57"
},
{
"id": "6374249d3fbf2a5b079ba036",
"title": "Step 58"
}
]
}

37
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/635090f47eb6d9563a6fed05.md
View File

@@ -1,46 +1,35 @@
---
id: 635090f47eb6d9563a6fed05
title: Step 22
title: Step 26
challengeType: 0
dashedName: step-22
dashedName: step-26
---
# --description--
The next step is to find the number in the middle of the list. If the list has an odd number of numbers, the middle number is the median. If the list has an even number of numbers, the median is the average of the two middle numbers.
Now it is time to apply what you have learned to the `getMedian` function.
You can check if a number is even or odd with the <dfn>modulus operator</dfn>, which is represented by the `%` symbol. This operator returns the remainder of the division of two numbers. If the remainder is `0`, the number is even. If the remainder is `1`, the number is odd:
Inside your `getMedian` function, check if the length of `array` is even. If it is, find the middle two numbers, calculate their mean, and return the result. If the length of `array` is odd, return the middle number.
```js
array.length % 2 === 0;
```
Make sure to work with the `sorted` array to find the middle numbers.
Declare a `median` variable. Using the ternary operator, check if the length of `array` is even. If the length of `array` is even, find the two middle numbers and calculate the mean of those numbers. If the length of `array` is odd, find the middle number and assign it to the `median` variable.
Also if you need help, refer back to the previous few steps to see how to find the median for an array.
# --hints--
Your `getMedian` function should have a `median` variable.
Your `getMedian` function should return the mean of the middle two numbers if the array length is even.
```js
assert.match(getMedian.toString(), /median\s*=/);
assert.equal(getMedian([1,2,3,4,5,6]), 3.5);
assert.equal(getMedian([1,2,3,4,5,6,7,8,9,10]), 5.5);
```
Your `median` variable should use a ternary operator to check if the `array.length` is even.
Your `getMedian` function should return the middle number if the array length is odd.
```js
assert.match(getMedian.toString(), /median\s*=\s*array\.length\s*%\s*2\s*===\s*0\s*\?/);
```
If `array.length` is even, pass an array with the two middle numbers from the `sorted` array to the `getMean` function. The first item in the array argument should be the value at index `array.length / 2` from `sorted` and the second should use the value at the index `array.length / 2 - 1` from `sorted`.
```js
assert.match(getMedian.toString(), /median\s*=\s*array\.length\s*%\s*2\s*===\s*0\s*\?\s*getMean\(\s*\[\s*sorted\s*\[\s*array\.length\s*\/\s*2\s*\]\s*,\s*sorted\s*\[\s*array\.length\s*\/\s*2\s*-\s*1\s*\]\s*\]\s*\)\s*\:/);
```
If the `array.length` is odd, your `median` variable should assign the middle number to the `median` variable. The middle number is the value of `sorted` at `Math.floor(array.length / 2)`.
```js
assert.match(getMedian.toString(), /median\s*=\s*array\.length\s*%\s*2\s*===\s*0\s*\?\s*getMean\(\s*\[\s*sorted\s*\[\s*array\.length\s*\/\s*2\s*\]\s*,\s*sorted\s*\[\s*array\.length\s*\/\s*2\s*-\s*1\s*\]\s*\]\s*\)\s*\:\s*sorted\s*\[\s*Math\.floor\(\s*array\.length\s*\/\s*2\s*\)\s*\]\s*;/);
assert.equal(getMedian([1,2,3,4,5]), 3);
assert.equal(getMedian([1,2,3,4,5,6,7,8,9]), 5);
```
# --seed--

4
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/6352e79d15aae30fac58f48e.md
View File

@@ -1,8 +1,8 @@
---
id: 6352e79d15aae30fac58f48e
title: Step 24
title: Step 27
challengeType: 0
dashedName: step-24
dashedName: step-27
---
# --description--

4
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/6352e80e024e89111600edfb.md
View File

@@ -1,8 +1,8 @@
---
id: 6352e80e024e89111600edfb
title: Step 25
title: Step 28
challengeType: 0
dashedName: step-25
dashedName: step-28
---
# --description--

4
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/6352e93db104661305c5f658.md
View File

@@ -1,8 +1,8 @@
---
id: 6352e93db104661305c5f658
title: Step 26
title: Step 29
challengeType: 0
dashedName: step-26
dashedName: step-29
---
# --description--

4
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/6352e96d2604f813c656750b.md
View File

@@ -1,8 +1,8 @@
---
id: 6352e96d2604f813c656750b
title: Step 27
title: Step 30
challengeType: 0
dashedName: step-27
dashedName: step-30
---
# --description--

4
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/6352ea3a5b79e614ee2282fd.md
View File

@@ -1,8 +1,8 @@
---
id: 6352ea3a5b79e614ee2282fd
title: Step 33
title: Step 36
challengeType: 0
dashedName: step-33
dashedName: step-36
---
# --description--

4
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/6352ebd3ab962c168a122e85.md
View File

@@ -1,8 +1,8 @@
---
id: 6352ebd3ab962c168a122e85
title: Step 34
title: Step 37
challengeType: 0
dashedName: step-34
dashedName: step-37
---
# --description--

4
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/6352ec8b9c70fd17b8c7ba3f.md
View File

@@ -1,8 +1,8 @@
---
id: 6352ec8b9c70fd17b8c7ba3f
title: Step 35
title: Step 38
challengeType: 0
dashedName: step-35
dashedName: step-38
---
# --description--

4
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/6352ecef9f045519063da9b3.md
View File

@@ -1,8 +1,8 @@
---
id: 6352ecef9f045519063da9b3
title: Step 36
title: Step 39
challengeType: 0
dashedName: step-36
dashedName: step-39
---
# --description--

4
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/6352edee8a4de01ad693f0e4.md
View File

@@ -1,8 +1,8 @@
---
id: 6352edee8a4de01ad693f0e4
title: Step 37
title: Step 40
challengeType: 0
dashedName: step-37
dashedName: step-40
---
# --description--

4
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/6352ee566a59d31d24bde74b.md
View File

@@ -1,8 +1,8 @@
---
id: 6352ee566a59d31d24bde74b
title: Step 38
title: Step 41
challengeType: 0
dashedName: step-38
dashedName: step-41
---
# --description--

4
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/6352f09b1e53a420e7873344.md
View File

@@ -1,8 +1,8 @@
---
id: 6352f09b1e53a420e7873344
title: Step 39
title: Step 42
challengeType: 0
dashedName: step-39
dashedName: step-42
---
# --description--

4
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/6352f179bdca23221298a5ba.md
View File

@@ -1,8 +1,8 @@
---
id: 6352f179bdca23221298a5ba
title: Step 40
title: Step 43
challengeType: 0
dashedName: step-40
dashedName: step-43
---
# --description--

4
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/6352f2526dccb523150b64fb.md
View File

@@ -1,8 +1,8 @@
---
id: 6352f2526dccb523150b64fb
title: Step 41
title: Step 44
challengeType: 0
dashedName: step-41
dashedName: step-44
---
# --description--

4
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/6352f2a24eb71b24284ca2b6.md
View File

@@ -1,8 +1,8 @@
---
id: 6352f2a24eb71b24284ca2b6
title: Step 42
title: Step 45
challengeType: 0
dashedName: step-42
dashedName: step-45
---
# --description--

4
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/6352faf71a9db52631864634.md
View File

@@ -1,8 +1,8 @@
---
id: 6352faf71a9db52631864634
title: Step 43
title: Step 46
challengeType: 0
dashedName: step-43
dashedName: step-46
---
# --description--

4
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/6352fbb93a91a8272f838d42.md
View File

@@ -1,8 +1,8 @@
---
id: 6352fbb93a91a8272f838d42
title: Step 44
title: Step 47
challengeType: 0
dashedName: step-44
dashedName: step-47
---
# --description--

4
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/6352fcb156834128001ea945.md
View File

@@ -1,8 +1,8 @@
---
id: 6352fcb156834128001ea945
title: Step 45
title: Step 48
challengeType: 0
dashedName: step-45
dashedName: step-48
---
# --description--

4
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/6352fce75b2d3b2924930f1e.md
View File

@@ -1,8 +1,8 @@
---
id: 6352fce75b2d3b2924930f1e
title: Step 46
title: Step 49
challengeType: 0
dashedName: step-46
dashedName: step-49
---
# --description--

4
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/6352fe473d53592a40ae403b.md
View File

@@ -1,8 +1,8 @@
---
id: 6352fe473d53592a40ae403b
title: Step 47
title: Step 50
challengeType: 0
dashedName: step-47
dashedName: step-50
---
# --description--

4
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/6352fed209792d2b89e92ea1.md
View File

@@ -1,8 +1,8 @@
---
id: 6352fed209792d2b89e92ea1
title: Step 48
title: Step 51
challengeType: 0
dashedName: step-48
dashedName: step-51
---
# --description--

4
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/6352ff27e0e51b2c7dce0010.md
View File

@@ -1,8 +1,8 @@
---
id: 6352ff27e0e51b2c7dce0010
title: Step 49
title: Step 52
challengeType: 0
dashedName: step-49
dashedName: step-52
---
# --description--

4
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/6352ffe4cfafa72d595a0007.md
View File

@@ -1,8 +1,8 @@
---
id: 6352ffe4cfafa72d595a0007
title: Step 50
title: Step 53
challengeType: 0
dashedName: step-50
dashedName: step-53
---
# --description--

4
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/6353004b235d7a2e0b913f2b.md
View File

@@ -1,8 +1,8 @@
---
id: 6353004b235d7a2e0b913f2b
title: Step 51
title: Step 54
challengeType: 0
dashedName: step-51
dashedName: step-54
---
# --description--

4
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/6353024f5eab012fa2f57eec.md
View File

@@ -1,8 +1,8 @@
---
id: 6353024f5eab012fa2f57eec
title: Step 52
title: Step 55
challengeType: 0
dashedName: step-52
dashedName: step-55
---
# --description--

4
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/6353028147d3c7309017216a.md
View File

@@ -1,8 +1,8 @@
---
id: 6353028147d3c7309017216a
title: Step 53
title: Step 56
challengeType: 0
dashedName: step-53
dashedName: step-56
---
# --description--

4
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/635302be760d6031d11a06cd.md
View File

@@ -1,8 +1,8 @@
---
id: 635302be760d6031d11a06cd
title: Step 54
title: Step 57
challengeType: 0
dashedName: step-54
dashedName: step-57
---
# --description--

4
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/6374249d3fbf2a5b079ba036.md
View File

@@ -1,8 +1,8 @@
---
id: 6374249d3fbf2a5b079ba036
title: Step 55
title: Step 58
challengeType: 0
dashedName: step-55
dashedName: step-58
---
# --description--

4
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/65aac0678d51b3f1a0cb8061.md
View File

@@ -1,8 +1,8 @@
---
id: 65aac0678d51b3f1a0cb8061
title: Step 28
title: Step 31
challengeType: 0
dashedName: step-28
dashedName: step-31
---
# --description--

4
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/65c4dc57418fd6bfc710d61d.md
View File

@@ -1,8 +1,8 @@
---
id: 65c4dc57418fd6bfc710d61d
title: Step 29
title: Step 32
challengeType: 0
dashedName: step-29
dashedName: step-32
---
# --description--

4
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/65ca2d0625aa3a3201067f70.md
View File

@@ -1,8 +1,8 @@
---
id: 65ca2d0625aa3a3201067f70
title: Step 30
title: Step 33
challengeType: 0
dashedName: step-30
dashedName: step-33
---
# --description--

4
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/65e62efde0592ec4b4bb6a69.md
View File

@@ -1,8 +1,8 @@
---
id: 65e62efde0592ec4b4bb6a69
title: Step 31
title: Step 34
challengeType: 0
dashedName: step-31
dashedName: step-34
---
# --description--

4
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/65f83a7ca7047318e3ccff7c.md
View File

@@ -1,8 +1,8 @@
---
id: 65f83a7ca7047318e3ccff7c
title: Step 32
title: Step 35
challengeType: 0
dashedName: step-32
dashedName: step-35
---
# --description--

53
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/635091f8dbf554575fb5aa0c.md → curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/661890c4abae9f2a0eddad6b.md
View File

@@ -1,22 +1,52 @@
---
id: 635091f8dbf554575fb5aa0c
title: Step 23
id: 661890c4abae9f2a0eddad6b
title: Step 22
challengeType: 0
dashedName: step-23
dashedName: step-22
---
# --description--
Finally, return the value of `median`.
In the next few steps, you'll learn how to determine if an array's length is even or odd, as well as how to find the median. You will then be able to apply what you learned to the `getMedian` function.
Like the `getMean` function, you could condense this code into one line and reduce the number of variables you instantiate. However, it is important to remember that shorter code is not always better code. In this case, reducing the lines of code would make the code harder to read and understand, impacting future maintainability.
To check if a number is even or odd, you can use the <dfn>modulus operator</dfn> `%`. The modulus operator returns the remainder of the division of two numbers.
Here is an example checking if an array length is even or odd:
```js
// check if array length is even
arr.length % 2 === 0;
// check if array length is odd
arr.length % 2 === 1;
```
If the remainder is `0`, the number is even. If the remainder is `1`, the number is odd.
Create a variable called `isEven`. Then use the modulus operator to check if the length of the `testArr2` array is even. Assign that expression to the `isEven` variable.
Below your `isEven` variable, log out the `isEven` variable to the console.
Open up the console to see the result.
# --hints--
Your `getMedian` function should return the value of `median`.
You should have an `isEven` variable.
```js
assert.match(getMedian.toString(), /return\s+median\s*;?/);
assert.isDefined(isEven);
```
You should check if the length of the `testArr2` array is even. Refer back to the example provided for you: `arr.length % 2 === 0;`
```js
assert.isTrue(isEven);
```
You should have a `console.log` statement that logs the `isEven` variable.
```js
assert.match(code, /console\.log\(isEven\)/);
```
# --seed--
@@ -108,15 +138,14 @@ input {
```js
const getMean = (array) => array.reduce((acc, el) => acc + el, 0) / array.length;
--fcc-editable-region--
const testArr1 = [1, 2, 3, 4, 5];
const testArr2 = [1, 2, 3, 4, 5, 6];
--fcc-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)];
}
--fcc-editable-region--
const calculate = () => {
const value = document.querySelector("#numbers").value;

162
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/661899113600ef307d8a7487.md Normal file
View File

@@ -0,0 +1,162 @@
---
id: 661899113600ef307d8a7487
title: Step 23
challengeType: 0
dashedName: step-23
---
# --description--
To get the median of an array with an odd number of elements, you will need to find and return the middle number.
Here is how to find the middle number of an array with an odd number of elements:
```js
arr[Math.floor(arr.length / 2)];
```
Here is a longer example finding the middle number of an array with `5` elements:
```js
const numbers = [1, 2, 3, 4, 5];
const middleNumber = numbers[Math.floor(numbers.length / 2)];
console.log(middleNumber); // 3
```
The reason why you use `Math.floor` is because the result of dividing an odd number by `2` will be a decimal. `Math.floor` will round down to the nearest whole number.
Declare an `oddListMedian` variable and assign it the result of finding the middle number of the `testArr1`. Then log the `oddListMedian` variable to the console.
Open up the console to see the result.
# --hints--
You should have an `oddListMedian` variable.
```js
assert.isDefined(oddListMedian);
```
You should assign the result of finding the middle number for the `testArr1` to the `oddListMedian` variable. Remember to refer to the example from earlier: `arr[Math.floor(arr.length / 2)];`
```js
assert.strictEqual(oddListMedian, 3);
```
You should have a console statement that logs the `oddListMedian` variable.
```js
assert.match(code, /console\.log\(\s*oddListMedian\s*\);?/);
```
# --seed--
## --seed-contents--
```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>
```
```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;
}
```
```js
const getMean = (array) => array.reduce((acc, el) => acc + el, 0) / array.length;
--fcc-editable-region--
const testArr1 = [1, 2, 3, 4, 5];
const testArr2 = [1, 2, 3, 4, 5, 6];
const isEven = testArr2.length % 2 === 0;
console.log(isEven);
--fcc-editable-region--
const getMedian = (array) => {
const sorted = array.sort((a, b) => a - b);
}
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;
}
```

166
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/6618a3264f955339063d3328.md Normal file
View File

@@ -0,0 +1,166 @@
---
id: 6618a3264f955339063d3328
title: Step 24
challengeType: 0
dashedName: step-24
---
# --description--
To find the median of an even list of numbers, you need to find the two middle numbers and calculate the mean of those numbers.
Here is how to find the two middle numbers of an even list of items:
```js
// first middle number
arr[arr.length / 2];
// second middle number
arr[(arr.length / 2) - 1];
```
To find the median, you can use the `getMean` function which adds the middle numbers and divides the sum by `2`.
```js
const numbers = [1, 2, 3, 4];
const firstMiddleNumber = numbers[numbers.length / 2];
const secondMiddleNumber = numbers[(numbers.length / 2) - 1];
// result is 2.5
getMean([firstMiddleNumber, secondMiddleNumber]);
```
Create an `evenListMedian` variable and assign it the result of finding the median of the `testArr2`.
Then, log the `evenListMedian` variable to the console.
# --hints--
You should have a variable named `evenListMedian`.
```js
assert.isDefined(evenListMedian);
```
You should assign the result of finding the median of the `testArr2` to the `evenListMedian` variable. Refer back to the example for extra help.
```js
assert.strictEqual(evenListMedian, 3.5);
```
You should log the `evenListMedian` variable to the console.
```js
assert.match(code, /console\.log\(\s*evenListMedian\s*\)/);
```
# --seed--
## --seed-contents--
```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>
```
```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;
}
```
```js
const getMean = (array) => array.reduce((acc, el) => acc + el, 0) / array.length;
--fcc-editable-region--
const testArr1 = [1, 2, 3, 4, 5];
const testArr2 = [1, 2, 3, 4, 5, 6];
const isEven = testArr2.length % 2 === 0;
console.log(isEven);
const oddListMedian = testArr1[Math.floor(testArr1.length / 2)];
console.log(oddListMedian);
--fcc-editable-region--
const getMedian = (array) => {
const sorted = array.sort((a, b) => a - b);
}
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;
}
```

175
curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/6618abf6368d073f0f659780.md Normal file
View File

@@ -0,0 +1,175 @@
---
id: 6618abf6368d073f0f659780
title: Step 25
challengeType: 0
dashedName: step-25
---
# --description--
Now that you have a better understanding of how to find the median for odd and even lists of numbers, you can remove all your test code from the previous steps.
# --hints--
You should not have a `const testArr1 = [1, 2, 3, 4, 5];` in your code.
```js
assert.notMatch(code, /const testArr1 = \[1, 2, 3, 4, 5\];/);
```
You should not have a `const testArr2 = [1, 2, 3, 4, 5, 6];` in your code.
```js
assert.notMatch(code, /const testArr2 = \[1, 2, 3, 4, 5, 6\];/);
```
You should not have a `const isEven = testArr2.length % 2 === 0;` in your code.
```js
assert.notMatch(code, /const isEven = testArr2.length % 2 === 0;/);
```
You should not have a `console.log(isEven);` in your code.
```js
assert.notMatch(code, /console\.log\(isEven\);/);
```
You should not have a `const oddListMedian = testArr1[Math.floor(testArr1.length / 2)];` in your code.
```js
assert.notMatch(code, /const oddListMedian = testArr1\[Math\.floor\(testArr1\.length \/ 2\)\];/);
```
You should not have a `console.log(oddListMedian);` in your code.
```js
assert.notMatch(code, /console\.log\(oddListMedian\);/);
```
You should not have a `const evenListMedian = getMean([testArr2[testArr2.length / 2 - 1], testArr2[testArr2.length / 2]]);` in your code.
```js
assert.notMatch(code, /const evenListMedian = getMean\(\[testArr2\[testArr2\.length \/ 2 - 1\], testArr2\[testArr2\.length \/ 2\]\]\);/);
```
You should not have a `console.log(evenListMedian);` in your code.
```js
assert.notMatch(code, /console\.log\(evenListMedian\);/);
```
# --seed--
## --seed-contents--
```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>
```
```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;
}
```
```js
const getMean = (array) => array.reduce((acc, el) => acc + el, 0) / array.length;
--fcc-editable-region--
const testArr1 = [1, 2, 3, 4, 5];
const testArr2 = [1, 2, 3, 4, 5, 6];
const isEven = testArr2.length % 2 === 0;
console.log(isEven);
const oddListMedian = testArr1[Math.floor(testArr1.length / 2)];
console.log(oddListMedian);
const evenListMedian = getMean([testArr2[testArr2.length / 2 - 1], testArr2[testArr2.length / 2]]);
console.log(evenListMedian);
--fcc-editable-region--
const getMedian = (array) => {
const sorted = array.sort((a, b) => a - b);
}
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;
}
```