mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-28 18:26:54 +00:00
fix(curriculum): update statistics calculator: step 27 (#53196)
Co-authored-by: jdwilkin4 <jwilkin4@hotmail.com> Co-authored-by: Jessica Wilkins <67210629+jdwilkin4@users.noreply.github.com> Co-authored-by: Kolade Chris <65571316+Ksound22@users.noreply.github.com> Co-authored-by: Naomi <nhcarrigan@gmail.com>
This commit is contained in:
Lawrence Li
+43
-23
@@ -122,96 +122,116 @@
|
||||
"title": "Step 27"
|
||||
},
|
||||
{
|
||||
"id": "6352ea3a5b79e614ee2282fd",
|
||||
"id": "65aac0678d51b3f1a0cb8061",
|
||||
"title": "Step 28"
|
||||
},
|
||||
{
|
||||
"id": "6352ebd3ab962c168a122e85",
|
||||
"id": "65c4dc57418fd6bfc710d61d",
|
||||
"title": "Step 29"
|
||||
},
|
||||
{
|
||||
"id": "6352ec8b9c70fd17b8c7ba3f",
|
||||
"id": "65ca2d0625aa3a3201067f70",
|
||||
"title": "Step 30"
|
||||
},
|
||||
{
|
||||
"id": "6352ecef9f045519063da9b3",
|
||||
"id": "65e62efde0592ec4b4bb6a69",
|
||||
"title": "Step 31"
|
||||
},
|
||||
{
|
||||
"id": "6352edee8a4de01ad693f0e4",
|
||||
"id": "65f83a7ca7047318e3ccff7c",
|
||||
"title": "Step 32"
|
||||
},
|
||||
{
|
||||
"id": "6352ee566a59d31d24bde74b",
|
||||
"id": "6352ea3a5b79e614ee2282fd",
|
||||
"title": "Step 33"
|
||||
},
|
||||
{
|
||||
"id": "6352f09b1e53a420e7873344",
|
||||
"id": "6352ebd3ab962c168a122e85",
|
||||
"title": "Step 34"
|
||||
},
|
||||
{
|
||||
"id": "6352f179bdca23221298a5ba",
|
||||
"id": "6352ec8b9c70fd17b8c7ba3f",
|
||||
"title": "Step 35"
|
||||
},
|
||||
{
|
||||
"id": "6352f2526dccb523150b64fb",
|
||||
"id": "6352ecef9f045519063da9b3",
|
||||
"title": "Step 36"
|
||||
},
|
||||
{
|
||||
"id": "6352f2a24eb71b24284ca2b6",
|
||||
"id": "6352edee8a4de01ad693f0e4",
|
||||
"title": "Step 37"
|
||||
},
|
||||
{
|
||||
"id": "6352faf71a9db52631864634",
|
||||
"id": "6352ee566a59d31d24bde74b",
|
||||
"title": "Step 38"
|
||||
},
|
||||
{
|
||||
"id": "6352fbb93a91a8272f838d42",
|
||||
"id": "6352f09b1e53a420e7873344",
|
||||
"title": "Step 39"
|
||||
},
|
||||
{
|
||||
"id": "6352fcb156834128001ea945",
|
||||
"id": "6352f179bdca23221298a5ba",
|
||||
"title": "Step 40"
|
||||
},
|
||||
{
|
||||
"id": "6352fce75b2d3b2924930f1e",
|
||||
"id": "6352f2526dccb523150b64fb",
|
||||
"title": "Step 41"
|
||||
},
|
||||
{
|
||||
"id": "6352fe473d53592a40ae403b",
|
||||
"id": "6352f2a24eb71b24284ca2b6",
|
||||
"title": "Step 42"
|
||||
},
|
||||
{
|
||||
"id": "6352fed209792d2b89e92ea1",
|
||||
"id": "6352faf71a9db52631864634",
|
||||
"title": "Step 43"
|
||||
},
|
||||
{
|
||||
"id": "6352ff27e0e51b2c7dce0010",
|
||||
"id": "6352fbb93a91a8272f838d42",
|
||||
"title": "Step 44"
|
||||
},
|
||||
{
|
||||
"id": "6352ffe4cfafa72d595a0007",
|
||||
"id": "6352fcb156834128001ea945",
|
||||
"title": "Step 45"
|
||||
},
|
||||
{
|
||||
"id": "6353004b235d7a2e0b913f2b",
|
||||
"id": "6352fce75b2d3b2924930f1e",
|
||||
"title": "Step 46"
|
||||
},
|
||||
{
|
||||
"id": "6353024f5eab012fa2f57eec",
|
||||
"id": "6352fe473d53592a40ae403b",
|
||||
"title": "Step 47"
|
||||
},
|
||||
{
|
||||
"id": "6353028147d3c7309017216a",
|
||||
"id": "6352fed209792d2b89e92ea1",
|
||||
"title": "Step 48"
|
||||
},
|
||||
{
|
||||
"id": "635302be760d6031d11a06cd",
|
||||
"id": "6352ff27e0e51b2c7dce0010",
|
||||
"title": "Step 49"
|
||||
},
|
||||
{
|
||||
"id": "6374249d3fbf2a5b079ba036",
|
||||
"id": "6352ffe4cfafa72d595a0007",
|
||||
"title": "Step 50"
|
||||
},
|
||||
{
|
||||
"id": "6353004b235d7a2e0b913f2b",
|
||||
"title": "Step 51"
|
||||
},
|
||||
{
|
||||
"id": "6353024f5eab012fa2f57eec",
|
||||
"title": "Step 52"
|
||||
},
|
||||
{
|
||||
"id": "6353028147d3c7309017216a",
|
||||
"title": "Step 53"
|
||||
},
|
||||
{
|
||||
"id": "635302be760d6031d11a06cd",
|
||||
"title": "Step 54"
|
||||
},
|
||||
{
|
||||
"id": "6374249d3fbf2a5b079ba036",
|
||||
"title": "Step 55"
|
||||
}
|
||||
]
|
||||
}
|
||||
+24
-1
@@ -7,7 +7,30 @@ dashedName: step-26
|
||||
|
||||
# --description--
|
||||
|
||||
In your new function, declare an empty `counts` object. You will use this to track the number of times each number appears in the list.
|
||||
To calculate the occurrence you can use the following approach:
|
||||
|
||||
```js
|
||||
const numbersArr = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 1, 2, 3, 4];
|
||||
const counts = {};
|
||||
numbersArr.forEach((el) => {
|
||||
if (counts[el]) {
|
||||
counts[el] += 1;
|
||||
} else {
|
||||
counts[el] = 1;
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
Check if the current number is already in the `counts` object. If it is, incremented by `1`. If it is not, set it to `1`.
|
||||
|
||||
Resulting object. The keys are the numbers from the array and the values are the number of times each number appears in the list:
|
||||
|
||||
```js
|
||||
{ 1: 3, 2: 3, 3: 3, 4: 3, 5: 2 }
|
||||
```
|
||||
|
||||
For this step, start by declaring an empty `counts` object. Later on in the project, you will use this object to calculate the mode of the list of numbers.
|
||||
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
+16
-29
@@ -7,28 +7,16 @@ dashedName: step-27
|
||||
|
||||
# --description--
|
||||
|
||||
Remember that the `.forEach()` method allows you to run a callback function for each element in the array.
|
||||
To better understand how the `getMode` function is going to work, you will need to print out its contents. This will allow you to see what is happening as you build out the function. But first you will need to return the `array` so it can be tested properly.
|
||||
|
||||
Use the `.forEach()` method to loop through the `array`. In the callback, use the `el` parameter to access the `counts` object and increment the count for each number.
|
||||
Inside your `getMode` function return your `array` parameter.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `getMode` function should use the `.forEach()` method.
|
||||
You should return the `array` parameter inside the `getMode` function.
|
||||
|
||||
```js
|
||||
assert.match(getMode.toString(), /array\.forEach\(/);
|
||||
```
|
||||
|
||||
Your `.forEach()` method should have a callback function which takes an `el` parameter.
|
||||
|
||||
```js
|
||||
assert.match(getMode.toString(), /(array\.forEach\(\s*(\(\s*el\s*\)|el)\s*=>|array\.forEach\(\s*function\s*\(\s*el\s*\)\s*\{)/);
|
||||
```
|
||||
|
||||
Your `.forEach()` method should increment the count for each number. Don't forget the fallback value.
|
||||
|
||||
```js
|
||||
assert.match(getMode.toString(), /(array\.forEach\(\s*(\(\s*el\s*\)|el)\s*=>|array\.forEach\(\s*function\s*\(\s*el\s*\)\s*\{)\s*\{?\s*(return)?\s*counts\s*\[\s*el\s*\]\s*=\s*\(\s*counts\s*\[\s*el\s*\]\s*\|\|\s*0\s*\)\s*\+\s*1\s*\}?/);
|
||||
assert.match(getMode.toString(), /return\s+array\s*;?/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@@ -118,34 +106,33 @@ input {
|
||||
```
|
||||
|
||||
```js
|
||||
const getMean = (array) => array.reduce((acc, el) => acc + el, 0) / array.length;
|
||||
const getMean = array => array.reduce((acc, el) => acc + el, 0) / array.length;
|
||||
|
||||
const getMedian = (array) => {
|
||||
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;
|
||||
}
|
||||
};
|
||||
|
||||
--fcc-editable-region--
|
||||
const getMode = (array) => {
|
||||
const getMode = array => {
|
||||
const counts = {};
|
||||
--fcc-editable-region--
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
};
|
||||
|
||||
const calculate = () => {
|
||||
const value = document.querySelector("#numbers").value;
|
||||
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;
|
||||
}
|
||||
document.querySelector('#mean').textContent = mean;
|
||||
document.querySelector('#median').textContent = median;
|
||||
};
|
||||
```
|
||||
|
||||
+3
-6
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6352ea3a5b79e614ee2282fd
|
||||
title: Step 28
|
||||
title: Step 33
|
||||
challengeType: 0
|
||||
dashedName: step-28
|
||||
dashedName: step-33
|
||||
---
|
||||
|
||||
# --description--
|
||||
@@ -140,10 +140,7 @@ const getMedian = (array) => {
|
||||
--fcc-editable-region--
|
||||
const getMode = (array) => {
|
||||
const counts = {};
|
||||
array.forEach((el) => {
|
||||
counts[el] = (counts[el] || 0) + 1;
|
||||
})
|
||||
|
||||
array.forEach(el => counts[el] = (counts[el] || 0) + 1)
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6352ebd3ab962c168a122e85
|
||||
title: Step 29
|
||||
title: Step 34
|
||||
challengeType: 0
|
||||
dashedName: step-29
|
||||
dashedName: step-34
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6352ec8b9c70fd17b8c7ba3f
|
||||
title: Step 30
|
||||
title: Step 35
|
||||
challengeType: 0
|
||||
dashedName: step-30
|
||||
dashedName: step-35
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6352ecef9f045519063da9b3
|
||||
title: Step 31
|
||||
title: Step 36
|
||||
challengeType: 0
|
||||
dashedName: step-31
|
||||
dashedName: step-36
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6352edee8a4de01ad693f0e4
|
||||
title: Step 32
|
||||
title: Step 37
|
||||
challengeType: 0
|
||||
dashedName: step-32
|
||||
dashedName: step-37
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6352ee566a59d31d24bde74b
|
||||
title: Step 33
|
||||
title: Step 38
|
||||
challengeType: 0
|
||||
dashedName: step-33
|
||||
dashedName: step-38
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6352f09b1e53a420e7873344
|
||||
title: Step 34
|
||||
title: Step 39
|
||||
challengeType: 0
|
||||
dashedName: step-34
|
||||
dashedName: step-39
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6352f179bdca23221298a5ba
|
||||
title: Step 35
|
||||
title: Step 40
|
||||
challengeType: 0
|
||||
dashedName: step-35
|
||||
dashedName: step-40
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6352f2526dccb523150b64fb
|
||||
title: Step 36
|
||||
title: Step 41
|
||||
challengeType: 0
|
||||
dashedName: step-36
|
||||
dashedName: step-41
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6352f2a24eb71b24284ca2b6
|
||||
title: Step 37
|
||||
title: Step 42
|
||||
challengeType: 0
|
||||
dashedName: step-37
|
||||
dashedName: step-42
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6352faf71a9db52631864634
|
||||
title: Step 38
|
||||
title: Step 43
|
||||
challengeType: 0
|
||||
dashedName: step-38
|
||||
dashedName: step-43
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6352fbb93a91a8272f838d42
|
||||
title: Step 39
|
||||
title: Step 44
|
||||
challengeType: 0
|
||||
dashedName: step-39
|
||||
dashedName: step-44
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6352fcb156834128001ea945
|
||||
title: Step 40
|
||||
title: Step 45
|
||||
challengeType: 0
|
||||
dashedName: step-40
|
||||
dashedName: step-45
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6352fce75b2d3b2924930f1e
|
||||
title: Step 41
|
||||
title: Step 46
|
||||
challengeType: 0
|
||||
dashedName: step-41
|
||||
dashedName: step-46
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6352fe473d53592a40ae403b
|
||||
title: Step 42
|
||||
title: Step 47
|
||||
challengeType: 0
|
||||
dashedName: step-42
|
||||
dashedName: step-47
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6352fed209792d2b89e92ea1
|
||||
title: Step 43
|
||||
title: Step 48
|
||||
challengeType: 0
|
||||
dashedName: step-43
|
||||
dashedName: step-48
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6352ff27e0e51b2c7dce0010
|
||||
title: Step 44
|
||||
title: Step 49
|
||||
challengeType: 0
|
||||
dashedName: step-44
|
||||
dashedName: step-49
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6352ffe4cfafa72d595a0007
|
||||
title: Step 45
|
||||
title: Step 50
|
||||
challengeType: 0
|
||||
dashedName: step-45
|
||||
dashedName: step-50
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6353004b235d7a2e0b913f2b
|
||||
title: Step 46
|
||||
title: Step 51
|
||||
challengeType: 0
|
||||
dashedName: step-46
|
||||
dashedName: step-51
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6353024f5eab012fa2f57eec
|
||||
title: Step 47
|
||||
title: Step 52
|
||||
challengeType: 0
|
||||
dashedName: step-47
|
||||
dashedName: step-52
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6353028147d3c7309017216a
|
||||
title: Step 48
|
||||
title: Step 53
|
||||
challengeType: 0
|
||||
dashedName: step-48
|
||||
dashedName: step-53
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 635302be760d6031d11a06cd
|
||||
title: Step 49
|
||||
title: Step 54
|
||||
challengeType: 0
|
||||
dashedName: step-49
|
||||
dashedName: step-54
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6374249d3fbf2a5b079ba036
|
||||
title: Step 50
|
||||
title: Step 55
|
||||
challengeType: 0
|
||||
dashedName: step-50
|
||||
dashedName: step-55
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
+147
@@ -0,0 +1,147 @@
|
||||
---
|
||||
id: 65aac0678d51b3f1a0cb8061
|
||||
title: Step 28
|
||||
challengeType: 0
|
||||
dashedName: step-28
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside the `calculate` function, you have already called the `getMean` and `getMedian` functions.
|
||||
|
||||
Below those function calls, add a `console.log(getMode(numbers))`.
|
||||
|
||||
To see the result, enter the numbers `4, 4, 2, 5` and click on the `"Calculate"` button. Open up the console to see the following array:
|
||||
|
||||
```js
|
||||
[ 2, 4, 4, 5 ]
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
You should call `console.log(getMode(numbers))` inside the `calculate` function.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /console\.log\(getMode\(numbers\)\)/);
|
||||
```
|
||||
|
||||
# --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;
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
const getMode = (array) => {
|
||||
const counts = {};
|
||||
return array;
|
||||
}
|
||||
|
||||
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);
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
document.querySelector("#mean").textContent = mean;
|
||||
document.querySelector("#median").textContent = median;
|
||||
}
|
||||
|
||||
```
|
||||
+148
@@ -0,0 +1,148 @@
|
||||
---
|
||||
id: 65c4dc57418fd6bfc710d61d
|
||||
title: Step 29
|
||||
challengeType: 0
|
||||
dashedName: step-29
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside your `getMode` function, on the empty line above your return call `forEach` on `array`. Your `.forEach()` method should have an empty callback function that takes an `el` parameter.
|
||||
|
||||
In the next few steps, you will use this loop to count the frequency of occurrences of each number in the array.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `getMode` function should use the `.forEach()` method on the `array` parameter.
|
||||
|
||||
```js
|
||||
assert.match(getMode.toString(), /array\.forEach\(/);
|
||||
```
|
||||
|
||||
Your `.forEach()` method should have a callback function which takes an `el` parameter.
|
||||
|
||||
```js
|
||||
assert.match(getMode.toString(), /\.forEach\s*\(\s*(function\s*\(\s*el\s*\)|\(\s*el\s*\)\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;
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
const getMode = (array) => {
|
||||
const counts = {};
|
||||
|
||||
return array;
|
||||
}
|
||||
--fcc-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;
|
||||
}
|
||||
|
||||
|
||||
```
|
||||
+160
@@ -0,0 +1,160 @@
|
||||
---
|
||||
id: 65ca2d0625aa3a3201067f70
|
||||
title: Step 30
|
||||
challengeType: 0
|
||||
dashedName: step-30
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside the `array.forEach()` callback function, check if the current element is inside the `counts` object. If the element can be found, increment the value of `counts[el]` by `1`. Otherwise, assign the number `1` to `counts[el]`.
|
||||
|
||||
Change your return statement to return `counts` instead of `array`.
|
||||
|
||||
To test this, enter the numbers `4, 4, 2, 5` and click `Calculate`. You should see the following in the console:
|
||||
|
||||
```js
|
||||
{ '2': 1, '4': 2, '5': 1 }
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
You should change your return statement to return `counts` instead of `array`.
|
||||
|
||||
```js
|
||||
assert.match(getMode.toString(), /return\s+counts\s*;/);
|
||||
```
|
||||
|
||||
You should check if the current element can be found inside the `counts` object. If it can be found, update the value of `counts[el]` by `1`. Otherwise, assign the number `1` to `counts[el]`. Enter the numbers `4, 4, 2, 5` and click `"Calculate"` for testing.
|
||||
|
||||
```js
|
||||
const expected = {'2': 1, '4': 2, '5': 1};
|
||||
assert.deepEqual(getMode([4, 4, 2, 5]), expected)
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
# --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;
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
const getMode = (array) => {
|
||||
const counts = {};
|
||||
array.forEach(el => {
|
||||
|
||||
})
|
||||
return array;
|
||||
}
|
||||
--fcc-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;
|
||||
}
|
||||
|
||||
|
||||
```
|
||||
+142
@@ -0,0 +1,142 @@
|
||||
---
|
||||
id: 65e62efde0592ec4b4bb6a69
|
||||
title: Step 31
|
||||
challengeType: 0
|
||||
dashedName: step-31
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now that you have a better understanding of how the `getMode` function works, you can remove the `console.log(getMode(numbers))` statement from the `calculate` function.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should not have a `console.log(getMode(numbers))` inside your `calculate` function.
|
||||
|
||||
|
||||
```js
|
||||
assert.notMatch(calculate.toString(), /console\.log\(\s*getMode\(numbers\)\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;
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
const getMode = (array) => {
|
||||
const counts = {};
|
||||
array.forEach(el => counts[el] = (counts[el] || 0) + 1)
|
||||
console.log(counts)
|
||||
return counts;
|
||||
}
|
||||
|
||||
--fcc-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;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
+141
@@ -0,0 +1,141 @@
|
||||
---
|
||||
id: 65f83a7ca7047318e3ccff7c
|
||||
title: Step 32
|
||||
challengeType: 0
|
||||
dashedName: step-32
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Returning the `counts` variable was only for testing purposes. Now that you are done testing, remove the `return counts` line from the `getMode` function.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should not have a `return counts` inside your `getMode` function.
|
||||
|
||||
```js
|
||||
assert.notMatch(getMode.toString(), /return\s+counts\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;
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
const getMode = (array) => {
|
||||
const counts = {};
|
||||
array.forEach(el => counts[el] = (counts[el] || 0) + 1)
|
||||
console.log(counts)
|
||||
return counts;
|
||||
}
|
||||
--fcc-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;
|
||||
}
|
||||
|
||||
|
||||
```
|
||||
Reference in New Issue
Block a user