mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-28 18:26:54 +00:00
fix(curriculum): learn advanced array methods step 59 delete (#56023)
This commit is contained in:
Gagan Bhullar
+1
-5
@@ -234,15 +234,11 @@
|
||||
},
|
||||
{
|
||||
"id": "6353028147d3c7309017216a",
|
||||
"title": "Step 57 "
|
||||
"title": "Step 57"
|
||||
},
|
||||
{
|
||||
"id": "635302be760d6031d11a06cd",
|
||||
"title": "Step 58"
|
||||
},
|
||||
{
|
||||
"id": "6374249d3fbf2a5b079ba036",
|
||||
"title": "Step 59"
|
||||
}
|
||||
]
|
||||
}
|
||||
+157
-1
@@ -7,7 +7,9 @@ dashedName: step-58
|
||||
|
||||
# --description--
|
||||
|
||||
Now update the `calculate` function to include the standard deviation logic, like you did with your other functions.
|
||||
Lastly update the `calculate` function to include the standard deviation logic, like you did with your other functions.
|
||||
|
||||
Congratulations! Your project is complete.
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -180,3 +182,157 @@ const calculate = () => {
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```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.toSorted((a, b) => a - b);
|
||||
const median =
|
||||
sorted.length % 2 === 0
|
||||
? getMean([sorted[sorted.length / 2], sorted[sorted.length / 2 - 1]])
|
||||
: sorted[Math.floor(sorted.length / 2)];
|
||||
return median;
|
||||
}
|
||||
|
||||
const getMode = (array) => {
|
||||
const counts = {};
|
||||
array.forEach((el) => {
|
||||
counts[el] = (counts[el] || 0) + 1;
|
||||
})
|
||||
if (new Set(Object.values(counts)).size === 1) {
|
||||
return null;
|
||||
}
|
||||
const highest = Object.keys(counts).sort(
|
||||
(a, b) => counts[b] - counts[a]
|
||||
)[0];
|
||||
const mode = Object.keys(counts).filter(
|
||||
(el) => counts[el] === counts[highest]
|
||||
);
|
||||
return mode.join(", ");
|
||||
}
|
||||
|
||||
const getRange = (array) => {
|
||||
return Math.max(...array) - Math.min(...array);
|
||||
}
|
||||
|
||||
const getVariance = (array) => {
|
||||
const mean = getMean(array);
|
||||
const variance = array.reduce((acc, el) => {
|
||||
const difference = el - mean;
|
||||
const squared = difference ** 2;
|
||||
return acc + squared;
|
||||
}, 0) / array.length;
|
||||
return variance;
|
||||
}
|
||||
|
||||
const getStandardDeviation = (array) => {
|
||||
const variance = getVariance(array);
|
||||
const standardDeviation = Math.sqrt(variance);
|
||||
return standardDeviation;
|
||||
}
|
||||
|
||||
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);
|
||||
const mode = getMode(numbers);
|
||||
const range = getRange(numbers);
|
||||
const variance = getVariance(numbers);
|
||||
const standardDeviation = getStandardDeviation(numbers);
|
||||
|
||||
document.querySelector("#mean").textContent = mean;
|
||||
document.querySelector("#median").textContent = median;
|
||||
document.querySelector("#mode").textContent = mode;
|
||||
document.querySelector("#range").textContent = range;
|
||||
document.querySelector("#variance").textContent = variance;
|
||||
document.querySelector("#standardDeviation").textContent = standardDeviation;
|
||||
}
|
||||
```
|
||||
|
||||
-344
@@ -1,344 +0,0 @@
|
||||
---
|
||||
id: 6374249d3fbf2a5b079ba036
|
||||
title: Step 59
|
||||
challengeType: 0
|
||||
dashedName: step-59
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
There is one last thing to fix. The `.sort()` method <dfn>mutates</dfn> the array it's called on. It is generally bad practice to mutate a function parameter, which `array` is.
|
||||
|
||||
To fix this, add an empty `.slice()` call before your `.sort()` method. The empty `.slice()` call will make a shallow copy of the `array`, which you are free to mutate.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should call `.slice()` on the `array` parameter.
|
||||
|
||||
```js
|
||||
assert.match(getMedian.toString(), /array\.slice\(\s*\)/);
|
||||
```
|
||||
|
||||
Your `.sort()` call should be chained to the `.slice()` call.
|
||||
|
||||
```js
|
||||
assert.match(getMedian.toString(), /array\.slice\(\s*\)\.sort\(/);
|
||||
```
|
||||
|
||||
You should not modify the `.sort()` method callback.
|
||||
|
||||
```js
|
||||
assert.match(getMedian.toString(), /array\.slice\(\s*\)\.sort\(\s*function\s*\(\s*a\s*,\s*b\s*\)\s*\{\s*(return\s+)?\s*a\s*\-\s*b/)
|
||||
```
|
||||
|
||||
# --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 getMedian = (array) => {
|
||||
const sorted = array.toSorted((a, b) => a - b);
|
||||
const median =
|
||||
sorted.length % 2 === 0
|
||||
? getMean([sorted[sorted.length / 2], sorted[sorted.length / 2 - 1]])
|
||||
: sorted[Math.floor(sorted.length / 2)];
|
||||
return median;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
const getMode = (array) => {
|
||||
const counts = {};
|
||||
array.forEach((el) => {
|
||||
counts[el] = (counts[el] || 0) + 1;
|
||||
})
|
||||
if (new Set(Object.values(counts)).size === 1) {
|
||||
return null;
|
||||
}
|
||||
const highest = Object.keys(counts).sort(
|
||||
(a, b) => counts[b] - counts[a]
|
||||
)[0];
|
||||
const mode = Object.keys(counts).filter(
|
||||
(el) => counts[el] === counts[highest]
|
||||
);
|
||||
return mode.join(", ");
|
||||
}
|
||||
|
||||
const getRange = (array) => {
|
||||
return Math.max(...array) - Math.min(...array);
|
||||
}
|
||||
|
||||
const getVariance = (array) => {
|
||||
const mean = getMean(array);
|
||||
const variance = array.reduce((acc, el) => {
|
||||
const difference = el - mean;
|
||||
const squared = difference ** 2;
|
||||
return acc + squared;
|
||||
}, 0) / array.length;
|
||||
return variance;
|
||||
}
|
||||
|
||||
const getStandardDeviation = (array) => {
|
||||
const variance = getVariance(array);
|
||||
const standardDeviation = Math.sqrt(variance);
|
||||
return standardDeviation;
|
||||
}
|
||||
|
||||
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);
|
||||
const mode = getMode(numbers);
|
||||
const range = getRange(numbers);
|
||||
const variance = getVariance(numbers);
|
||||
const standardDeviation = getStandardDeviation(numbers);
|
||||
|
||||
document.querySelector("#mean").textContent = mean;
|
||||
document.querySelector("#median").textContent = median;
|
||||
document.querySelector("#mode").textContent = mode;
|
||||
document.querySelector("#range").textContent = range;
|
||||
document.querySelector("#variance").textContent = variance;
|
||||
document.querySelector("#standardDeviation").textContent = standardDeviation;
|
||||
}
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```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.slice().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;
|
||||
})
|
||||
if (new Set(Object.values(counts)).size === 1) {
|
||||
return null;
|
||||
}
|
||||
const highest = Object.keys(counts).sort(
|
||||
(a, b) => counts[b] - counts[a]
|
||||
)[0];
|
||||
const mode = Object.keys(counts).filter(
|
||||
(el) => counts[el] === counts[highest]
|
||||
);
|
||||
return mode.join(", ");
|
||||
}
|
||||
|
||||
const getRange = (array) => {
|
||||
return Math.max(...array) - Math.min(...array);
|
||||
}
|
||||
|
||||
const getVariance = (array) => {
|
||||
const mean = getMean(array);
|
||||
const variance = array.reduce((acc, el) => {
|
||||
const difference = el - mean;
|
||||
const squared = difference ** 2;
|
||||
return acc + squared;
|
||||
}, 0) / array.length;
|
||||
return variance;
|
||||
}
|
||||
|
||||
const getStandardDeviation = (array) => {
|
||||
const variance = getVariance(array);
|
||||
const standardDeviation = Math.sqrt(variance);
|
||||
return standardDeviation;
|
||||
}
|
||||
|
||||
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);
|
||||
const mode = getMode(numbers);
|
||||
const range = getRange(numbers);
|
||||
const variance = getVariance(numbers);
|
||||
const standardDeviation = getStandardDeviation(numbers);
|
||||
|
||||
document.querySelector("#mean").textContent = mean;
|
||||
document.querySelector("#median").textContent = median;
|
||||
document.querySelector("#mode").textContent = mode;
|
||||
document.querySelector("#range").textContent = range;
|
||||
document.querySelector("#variance").textContent = variance;
|
||||
document.querySelector("#standardDeviation").textContent = standardDeviation;
|
||||
}
|
||||
```
|
||||
Reference in New Issue
Block a user