mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-20 12:03:11 -04:00
chore(i18n,learn): processed translations (#49559)
This commit is contained in:
camperbot
@@ -14,12 +14,12 @@ dashedName: selecting-from-many-options-with-switch-statements
|
||||
فيما يلي مثال على عبارة `switch`:
|
||||
|
||||
```js
|
||||
switch (lowercaseLetter) {
|
||||
case "a":
|
||||
console.log("A");
|
||||
switch (fruit) {
|
||||
case "apple":
|
||||
console.log("The fruit is an apple");
|
||||
break;
|
||||
case "b":
|
||||
console.log("B");
|
||||
case "orange":
|
||||
console.log("The fruit is an orange");
|
||||
break;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -32,7 +32,7 @@ Create a person schema called `personSchema` with the following shape:
|
||||
|
||||
* A required `name` field of type `String`
|
||||
* An `age` field of type `Number`
|
||||
* A `favouriteFoods` field of type `[String]`
|
||||
* A `favoriteFoods` field of type `[String]`
|
||||
|
||||
Use the Mongoose basic schema types. If you want you can also add more fields, use simple validators like required or unique, and set default values. See our <a href="https://www.freecodecamp.org/news/introduction-to-mongoose-for-mongodb-d2a7aa593c57/" target="_blank" rel="noopener noreferrer nofollow">Mongoose article</a>.
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-41
|
||||
|
||||
# --description--
|
||||
|
||||
لا تنس إعطاء `form` زر submit.
|
||||
Do not forget to give your `form` a submit button with the text `Send`.
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -17,25 +17,25 @@ dashedName: step-41
|
||||
assert.exists(document.querySelector('button') || document.querySelector('main > input') || document.querySelector('form > input'));
|
||||
```
|
||||
|
||||
يجب عليك وضع submit ضمن عنصر `form`.
|
||||
You should place the submit button within the `form` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('form > button') || document.querySelector('form > input'));
|
||||
```
|
||||
|
||||
يجب عليك وضع submitt بعد آخر عنصر `section`.
|
||||
You should place the submit button after the last `section` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('section:last-of-type + button') || document.querySelector('section:last-of-type + input'));
|
||||
```
|
||||
|
||||
يجب عليك إعطاء submit سمة `type` بقيمة `submit`.
|
||||
You should give the submit button a `type` of `submit`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('button[type="submit"]') || document.querySelector('form > input[type="submit"]'));
|
||||
```
|
||||
|
||||
يجب أن يعرض زر الإرسال (submit) نص `Send`.
|
||||
The submit button should display the text `Send`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('button[type="submit"]')?.textContent ?? document.querySelector('input[type="submit"]')?.value, 'Send');
|
||||
|
||||
@@ -32,13 +32,13 @@ assert(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background);
|
||||
assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background, 'linear-gradient');
|
||||
```
|
||||
|
||||
يجب عليك إعطاء `background` بنوع `linear-gradient` بدءاً من `--building-color1`.
|
||||
You should give the `background` a `linear-gradient` starting from `var(--building-color1)`.
|
||||
|
||||
```js
|
||||
assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background', true), 'linear-gradient(var(--building-color1');
|
||||
```
|
||||
|
||||
يجب عليك إعطاء `background` بنوع `linear-gradient` بدءاً من `--window-color1`.
|
||||
You should give the `background` a `linear-gradient` ending at `var(--window-color1)`.
|
||||
|
||||
```js
|
||||
assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background', true), 'linear-gradient(var(--building-color1),var(--window-color1))');
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-52
|
||||
|
||||
# --description--
|
||||
|
||||
أنشئ منتقي لاستهداف عناصر `td` داخل جسم الجدول الخاص بك. أعطيهم عرض (width) لملء طريقة العرض، مع حد أدنى والحد الأقصى `4rem`. ويكفل هذا النهج تحديد العرض، في حين أن إعداد `width` على وجه التحديد سيسمح للعناصر بالانكماش (shrink) إلى الحاوية (لأننا نستخدم flexbox).
|
||||
أنشئ منتقي لاستهداف عناصر `td` داخل جسم الجدول الخاص بك. أعطيهم عرض (width) لملء طريقة العرض، مع حد أدنى والحد الأقصى `4rem`. This approach ensures that the width is fixed, whereas setting `width` specifically would allow the elements to shrink to the container.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -0,0 +1,127 @@
|
||||
---
|
||||
id: 635060a5c03c950f46174cb5
|
||||
title: Step 1
|
||||
challengeType: 0
|
||||
dashedName: step-1
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Statistics is a way of using math to make sense of data. It helps us understand patterns and trends in information, so we can make predictions and decisions based on that information.
|
||||
|
||||
In this challenge, you will build a statistics calculator that takes a set of numbers and returns the mean, median, mode, standard deviation, and variance.
|
||||
|
||||
The HTML and CSS have been provided for you. Feel free to explore the code – you may notice that the `calculate` function is called when the form is submitted. When you are ready, declare a `calculate` variable and assign it an empty function in the `script.js` file.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `const` keyword to declare a variable `calculate`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s*calculate/);
|
||||
```
|
||||
|
||||
Your `calculate` variable should be a function.
|
||||
|
||||
```js
|
||||
assert.isFunction(calculate);
|
||||
```
|
||||
|
||||
Your `calculate` function should be empty.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /\{\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();">
|
||||
<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
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,133 @@
|
||||
---
|
||||
id: 63507b5ac8a55134223374c7
|
||||
title: Step 2
|
||||
challengeType: 0
|
||||
dashedName: step-2
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To begin, the `calculate` function needs to find the number that was entered in the `#numbers` input field. To do this, use a `.querySelector` to locate the input field and then use the `.value` property to get the number entered.
|
||||
|
||||
Store this in a `value` variable.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `calculate` function should have a `value` variable.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /value/);
|
||||
```
|
||||
|
||||
Your `calculate` function should call `document.querySelector()` with `#numbers` as the argument.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /document\.querySelector\(\s*("|')#numbers\1\s*\)/)
|
||||
```
|
||||
|
||||
You should access the `value` property of your `document.querySelector()` call.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /document\.querySelector\(\s*("|')#numbers\1\s*\)\.value/);
|
||||
```
|
||||
|
||||
You should assign the `value` property to your `value` variable.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /value\s*=\s*document\.querySelector\(\s*("|')#numbers\1\s*\)\.value/);
|
||||
```
|
||||
|
||||
# --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();">
|
||||
<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
|
||||
--fcc-editable-region--
|
||||
const calculate = () => {
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,129 @@
|
||||
---
|
||||
id: 63507bcbfe4ede356e624395
|
||||
title: Step 3
|
||||
challengeType: 0
|
||||
dashedName: step-3
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now that you have the value of the input, you need to split it into an array of numbers. Use the `.split()` method to do this.
|
||||
|
||||
The `.split()` method takes a string and splits it into an array of strings. You can pass it a string of characters or a RegEx to use as a separator. For example, `string.split(",")` would split the string at each comma and return an array of strings.
|
||||
|
||||
Use a regex to split the `value` string by commas followed by any number of spaces. Store the array in an `array` variable.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `calculate` function should have an `array` variable.
|
||||
|
||||
```js
|
||||
assert.match(code.toString(), /array/);
|
||||
```
|
||||
|
||||
Your `calculate` function should call the `.split()` method on the `value` variable.
|
||||
|
||||
```js
|
||||
assert.match(code.toString(), /value\.split()/);
|
||||
```
|
||||
|
||||
Your `calculate` function should assign the result of the `.split()` method to the `array` variable.
|
||||
|
||||
```js
|
||||
assert.match(code.toString(), /array\s*=\s*value\.split()/);
|
||||
```
|
||||
|
||||
# --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();">
|
||||
<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
|
||||
--fcc-editable-region--
|
||||
const calculate = () => {
|
||||
const value = document.querySelector("#numbers").value;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,128 @@
|
||||
---
|
||||
id: 63507c19151201368ee3e16c
|
||||
title: Step 4
|
||||
challengeType: 0
|
||||
dashedName: step-4
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The value of an input element is always a string, even if the input type is `number`. You need to convert this array of strings into an array of numbers. To do this, you can use the `.map()` method.
|
||||
|
||||
Create a `numbers` variable and assign it the value of `array.map()`. Remember that `.map()` creates a new array, instead of mutating the original array.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `calculate` function should have a `numbers` variable.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /numbers/);
|
||||
```
|
||||
|
||||
You should use the `.map()` method on your `array` variable.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /array\.map\(\)/);
|
||||
```
|
||||
|
||||
You should assign the result of your `.map()` call to your `numbers` variable.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /numbers\s*=\s*array.map()/);
|
||||
```
|
||||
|
||||
# --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();">
|
||||
<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
|
||||
--fcc-editable-region--
|
||||
const calculate = () => {
|
||||
const value = document.querySelector("#numbers").value;
|
||||
const array = value.split(/,\s*/g);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,143 @@
|
||||
---
|
||||
id: 63507c4b63731437227b0134
|
||||
title: Step 5
|
||||
challengeType: 0
|
||||
dashedName: step-5
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `.map()` method takes a callback function as its first argument. This callback function takes a few arguments, but the first one is the current element being processed. Here is an example:
|
||||
|
||||
```js
|
||||
array.map(el => {
|
||||
|
||||
})
|
||||
```
|
||||
|
||||
The callback function needs to return a value. In this case, you want to return the value of each element converted to a number. You can do this by using the `Number()` constructor, passing the element as an argument.
|
||||
|
||||
Add a callback function to your `.map()` method that converts each element to a number.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.map()` method should have a callback function which takes an `el` argument.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /array\.map\(\(?\s*el\s*\)?\s*=>|array\.map\(function\s*\(?el\)\s*\{/)
|
||||
```
|
||||
|
||||
Your callback function should use the `Number` constructor to convert `el` to a number.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /Number\(\s*el\s*\)/);
|
||||
```
|
||||
|
||||
Your callback function should not use the `new` keyword with the `Number` constructor.
|
||||
|
||||
```js
|
||||
assert.notMatch(calculate.toString(), /new/);
|
||||
```
|
||||
|
||||
Your callback function should return the element converted to a number.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /(array\.map\(\(?\s*el\s*\)?\s*=>|array\.map\(function\s*\(?el\)\s*\{)\s*(return\s*)?Number\(\s*el\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();">
|
||||
<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
|
||||
--fcc-editable-region--
|
||||
const calculate = () => {
|
||||
const value = document.querySelector("#numbers").value;
|
||||
const array = value.split(/,\s*/g);
|
||||
const numbers = array.map();
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,131 @@
|
||||
---
|
||||
id: 63507d810f1a2e38f1908fd8
|
||||
title: Step 6
|
||||
challengeType: 0
|
||||
dashedName: step-6
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
A user could put any text they want into the input box. You want to make sure that you are only working with numbers. The `Number()` constructor will return `NaN` (which stands for "not a number") if the value passed to it cannot be converted to a number.
|
||||
|
||||
You need to filter these values out – thankfully, arrays have a method specifically for this. The `.filter()` method will allow you to filter elements out of an array, creating a new array in the process.
|
||||
|
||||
Declare a `filtered` variable and assign `numbers.filter()` to it.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `calculate` function should have a `filtered` variable.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /filtered/);
|
||||
```
|
||||
|
||||
Your `calculate` function should use the `.filter()` method on the `numbers` array.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /numbers\.filter\(\)/)
|
||||
```
|
||||
|
||||
You should assign the result of `numbers.filter()` to the `filtered` variable.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /filtered\s*=\s*numbers.filter\(\)/);
|
||||
```
|
||||
|
||||
# --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();">
|
||||
<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
|
||||
--fcc-editable-region--
|
||||
const calculate = () => {
|
||||
const value = document.querySelector("#numbers").value;
|
||||
const array = value.split(/,\s*/g);
|
||||
const numbers = array.map(el => Number(el));
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,140 @@
|
||||
---
|
||||
id: 63507e4562cdde3a28e8de1b
|
||||
title: Step 7
|
||||
challengeType: 0
|
||||
dashedName: step-7
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Much like the `.map()` method, the `.filter()` method takes a callback function. The callback function takes the current element as its first argument.
|
||||
|
||||
```js
|
||||
array.filter(el => {
|
||||
|
||||
})
|
||||
```
|
||||
|
||||
The callback function needs to return a Boolean value, which indicates whether the element should be included in the new array. In this case, you want to return `true` if the element is not `NaN` (not a number).
|
||||
|
||||
However, you cannot check for equality here, because `NaN` is not equal to itself. Instead, you can use the `Number.isNaN()` method, which returns `true` if the argument is `NaN`.
|
||||
|
||||
Add a callback function to your `.filter()` method that returns `true` if the element is not `NaN`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.filter()` method should have a callback which accepts `el` as an argument.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /numbers\.filter\(\(?\s*el\s*\)?\s*=>|numbers\.filter\(function\s*\(?el\)\s*\{/)
|
||||
```
|
||||
|
||||
Your callback function should use `!` and `Number.isNaN()` to check if `el` is NOT `NaN`.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /!(Number\.)?isNaN\(\s*el\s*\)/);
|
||||
```
|
||||
|
||||
Your callback function should return elements that are not `NaN`.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /(numbers\.filter\(\(?\s*el\s*\)?\s*=>|numbers\.filter\(function\s*\(?el\)\s*\{)\s*(return\s*)?!(Number\.)?isNaN\(\s*el\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();">
|
||||
<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
|
||||
--fcc-editable-region--
|
||||
const calculate = () => {
|
||||
const value = document.querySelector("#numbers").value;
|
||||
const array = value.split(/,\s*/g);
|
||||
const numbers = array.map(el => Number(el));
|
||||
const filtered = numbers.filter();
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,143 @@
|
||||
---
|
||||
id: 63507ebb0c50ce3b9d669cd9
|
||||
title: Step 8
|
||||
challengeType: 0
|
||||
dashedName: step-8
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Array methods can often be chained together to perform multiple operations at once. As an example:
|
||||
|
||||
```js
|
||||
array.map().filter();
|
||||
```
|
||||
|
||||
The `.map()` method is called on the array, and then the `.filter()` method is called on the result of the `.map()` method. This is called method chaining.
|
||||
|
||||
Following that example, remove your `filtered` variable, and chain your `.filter()` call to your `.map()` call above. Do not remove either of the callback functions.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should remove the `filtered` variable.
|
||||
|
||||
```js
|
||||
assert.notMatch(calculate.toString(), /filtered/);
|
||||
```
|
||||
|
||||
You should chain your `.filter()` call to your `.map()` call.
|
||||
|
||||
```js
|
||||
console.log(calculate.toString());
|
||||
assert.match(calculate.toString(), /array\.map\(.*\)\.filter\(/s);
|
||||
```
|
||||
|
||||
You should not remove the `.map()` callback.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /(array\.map\(\(?\s*el\s*\)?\s*=>|array\.map\(function\s*\(?el\)\s*\{)\s*(return\s*)?Number\(\s*el\s*\)/);
|
||||
```
|
||||
|
||||
You should not remove the `.filter()` callback.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /(\.filter\(\(?\s*el\s*\)?\s*=>|\.filter\(function\s*\(?el\)\s*\{)\s*(return\s*)?!(Number\.)?isNaN\(\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();">
|
||||
<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
|
||||
--fcc-editable-region--
|
||||
const calculate = () => {
|
||||
const value = document.querySelector("#numbers").value;
|
||||
const array = value.split(/,\s*/g);
|
||||
const numbers = array.map(el => Number(el));
|
||||
const filtered = numbers.filter(el => !isNaN(el));
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,131 @@
|
||||
---
|
||||
id: 63507fc6cc29083cc44df2fb
|
||||
title: Step 9
|
||||
challengeType: 0
|
||||
dashedName: step-9
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
That is as far as you can get with the calculate function for now. It is time to write your mean logic.
|
||||
|
||||
Create an empty function called `getMean`. It should take a single parameter `array`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should declare a `getMean` function.
|
||||
|
||||
```js
|
||||
assert.isFunction(getMean);
|
||||
```
|
||||
|
||||
Your `getMean` function should take a single `array` argument.
|
||||
|
||||
```js
|
||||
assert.match(getMean.toString(), /\(\s*array\s*\)/);
|
||||
```
|
||||
|
||||
Your `getMean` function should be empty.
|
||||
|
||||
```js
|
||||
assert.match(getMean.toString(), /\{\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();">
|
||||
<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
|
||||
--fcc-editable-region--
|
||||
|
||||
--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));
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,133 @@
|
||||
---
|
||||
id: 6350805fe0fe283dd347b0dc
|
||||
title: Step 10
|
||||
challengeType: 0
|
||||
dashedName: step-10
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The <dfn>mean</dfn> is the average value of all numbers in a list. The first step in calculating the mean is to take the sum of all numbers in the list. Arrays have another method, called `.reduce()`, which is perfect for this situation. The `.reduce()` method takes an array and applies a callback function to condense the array into a single value.
|
||||
|
||||
Declare a `sum` variable and assign `array.reduce()` to it.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `getMean` function should have a `sum` variable.
|
||||
|
||||
```js
|
||||
assert.match(getMean.toString(), /sum/);
|
||||
```
|
||||
|
||||
Your `getMean` function should use the `.reduce()` method of the `array` argument.
|
||||
|
||||
```js
|
||||
assert.match(getMean.toString(), /array\.reduce\(\)/);
|
||||
```
|
||||
|
||||
You should assign the result of `array.reduce()` to the `sum` variable.
|
||||
|
||||
```js
|
||||
assert.match(getMean.toString(), /sum\s*=\s*array\.reduce\(\)/);
|
||||
```
|
||||
|
||||
# --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();">
|
||||
<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
|
||||
--fcc-editable-region--
|
||||
const getMean = (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));
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,133 @@
|
||||
---
|
||||
id: 635080d80b72803e973841da
|
||||
title: Step 11
|
||||
challengeType: 0
|
||||
dashedName: step-11
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Like the other methods, `.reduce()` takes a callback. This callback, however, takes at least two parameters. The first is the <dfn>accumulator</dfn>, and the second is the current element in the array. The return value for the callback becomes the value of the accumulator on the next iteration.
|
||||
|
||||
```js
|
||||
array.reduce((acc, el) => {
|
||||
|
||||
});
|
||||
```
|
||||
|
||||
For your `sum` variable, pass a callback to `.reduce()` that takes the accumulator and the current element as parameters. The callback should return the sum of the accumulator and the current element.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `reduce` method should have a callback function which takes an `acc` and an `el` argument.
|
||||
|
||||
```js
|
||||
assert.match(getMean.toString(), /(array\.reduce\(\(acc\s*,\s*el\s*\)\s*=>|array\.reduce\(function\s*\(acc\s*,\s*el\)\s*\{)/)
|
||||
```
|
||||
|
||||
Your `reduce` method should return the sum of `acc` and `el`.
|
||||
|
||||
```js
|
||||
assert.match(getMean.toString(), /(array\.reduce\(\(acc\s*,\s*el\s*\)\s*=>|array\.reduce\(function\s*\(acc\s*,\s*el\)\s*\{)\s*(return)?\s*acc\s*\+\s*el/)
|
||||
```
|
||||
|
||||
# --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();">
|
||||
<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
|
||||
--fcc-editable-region--
|
||||
const getMean = (array) => {
|
||||
const sum = array.reduce();
|
||||
}
|
||||
--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));
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,127 @@
|
||||
---
|
||||
id: 6350854411ffb73feb6bb84e
|
||||
title: Step 12
|
||||
challengeType: 0
|
||||
dashedName: step-12
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `.reduce()` method takes a second parameter that is used as the initial value of the accumulator. Without a second parameter, the `.reduce()` method uses the first element of the array as the accumulator, which can lead to unexpected results.
|
||||
|
||||
To be safe, it's best to set an initial value. Here is an example of setting the initial value to an empty string:
|
||||
|
||||
```js
|
||||
array.reduce((acc, el) => acc + el.toLowerCase(), "");
|
||||
```
|
||||
|
||||
Set the initial value of the accumulator to `0`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `reduce` method should have `0` as the initial value.
|
||||
|
||||
```js
|
||||
assert.match(getMean.toString(), /(array\.reduce\(\(acc\s*,\s*el\s*\)\s*=>|array\.reduce\(function\s*\(acc\s*,\s*el\)\s*\{)\s*(return)?\s*acc\s*\+\s*el;\s*\}?\s*,\s*0\)/)
|
||||
```
|
||||
|
||||
# --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();">
|
||||
<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
|
||||
--fcc-editable-region--
|
||||
const getMean = (array) => {
|
||||
const sum = array.reduce((acc, el) => acc + el);
|
||||
}
|
||||
--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));
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,127 @@
|
||||
---
|
||||
id: 63508577f69f41409275f877
|
||||
title: Step 13
|
||||
challengeType: 0
|
||||
dashedName: step-13
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The next step in calculating the mean is to divide the sum of numbers by the count of numbers in the list.
|
||||
|
||||
Declare a `mean` variable and assign it the value of `sum` divided by the length of `array`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `getMean` function should have a `mean` variable.
|
||||
|
||||
```js
|
||||
assert.match(getMean.toString(), /mean\s*=/);
|
||||
```
|
||||
|
||||
You should assign the value of `sum` divided by `array.length` to the `mean` variable.
|
||||
|
||||
```js
|
||||
assert.match(getMean.toString(), /mean\s*=\s*sum\s*\/\s*array\.length/);
|
||||
```
|
||||
|
||||
# --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();">
|
||||
<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
|
||||
--fcc-editable-region--
|
||||
const getMean = (array) => {
|
||||
const sum = array.reduce((acc, el) => acc + el, 0);
|
||||
}
|
||||
--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));
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,126 @@
|
||||
---
|
||||
id: 635085da54fc2041e0303e75
|
||||
title: Step 14
|
||||
challengeType: 0
|
||||
dashedName: step-14
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Finally, you need to return the value of `mean`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `getMean` function should use the `return` keyword.
|
||||
|
||||
```js
|
||||
assert.match(getMean.toString(), /return/);
|
||||
```
|
||||
|
||||
Your `getMean` function should return the value of `mean`.
|
||||
|
||||
```js
|
||||
assert.match(getMean.toString(), /return\s*mean\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();">
|
||||
<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
|
||||
--fcc-editable-region--
|
||||
const getMean = (array) => {
|
||||
const sum = array.reduce((acc, el) => acc + el, 0);
|
||||
const mean = sum / array.length;
|
||||
}
|
||||
--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));
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,147 @@
|
||||
---
|
||||
id: 635085f80bd9b5429faa40c4
|
||||
title: Step 15
|
||||
challengeType: 0
|
||||
dashedName: step-15
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You can actually clean this logic up a bit. Using the implicit return of an arrow function, you can directly return the value of the `.reduce()` method divided by the length of the array, without having to assign any variables.
|
||||
|
||||
Update your `getMean` function as described above.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should remove the `sum` variable declaration.
|
||||
|
||||
```js
|
||||
assert.notMatch(getMean.toString(), /sum\s*=/);
|
||||
```
|
||||
|
||||
You should remove the `mean` variable declaration.
|
||||
|
||||
```js
|
||||
assert.notMatch(getMean.toString(), /mean\s*=/);
|
||||
```
|
||||
|
||||
You should not change the logic within the `reduce` method.
|
||||
|
||||
```js
|
||||
assert.match(getMean.toString(), /(array\.reduce\(\(acc\s*,\s*el\s*\)\s*=>|array\.reduce\(function\s*\(acc\s*,\s*el\)\s*\{)\s*(return)?\s*acc\s*\+\s*el;\s*\}?\s*,\s*0\)/)
|
||||
```
|
||||
|
||||
You should divide the result of the `reduce` method by the length of the array.
|
||||
|
||||
```js
|
||||
assert.match(getMean.toString(), /(array\.reduce\(\(acc\s*,\s*el\s*\)\s*=>|array\.reduce\(function\s*\(acc\s*,\s*el\)\s*\{)\s*(return)?\s*acc\s*\+\s*el;\s*\}?\s*,\s*0\)\s*\/\s*array\.length/)
|
||||
```
|
||||
|
||||
You should use implicit return syntax to directly return the result of `reduce` divided by the array length.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+getMean\s*=\s*\(?array\)?\s*=>\s*array\.reduce\(\(acc\s*,\s*el\)\s*=>\s*acc\s*\+\s*el\s*,\s*0\s*\)\s*\/\s*array\.length/)
|
||||
```
|
||||
|
||||
# --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();">
|
||||
<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
|
||||
--fcc-editable-region--
|
||||
const getMean = (array) => {
|
||||
const sum = array.reduce((acc, el) => acc + el, 0);
|
||||
const mean = sum / array.length;
|
||||
return mean;
|
||||
}
|
||||
--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));
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,125 @@
|
||||
---
|
||||
id: 6350866cce4c6d43bdf607c8
|
||||
title: Step 16
|
||||
challengeType: 0
|
||||
dashedName: step-16
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now you need to use your new `getMean` function. In your `calculate` function, declare a `mean` variable and assign it the value of `getMean(numbers)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `calculate` function should have a `mean` variable.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /mean\s*=/);
|
||||
```
|
||||
|
||||
Your `mean` variable should be assigned the value of `getMean(numbers)`.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /mean\s*=\s*getMean\(\s*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();">
|
||||
<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 calculate = () => {
|
||||
const value = document.querySelector("#numbers").value;
|
||||
const array = value.split(/,\s*/g);
|
||||
const numbers = array.map(el => Number(el)).filter(el => !isNaN(el));
|
||||
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,135 @@
|
||||
---
|
||||
id: 63508750f040a348a440a0bf
|
||||
title: Step 17
|
||||
challengeType: 0
|
||||
dashedName: step-17
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To display the value of `mean`, your app has a `#mean` element ready to go.
|
||||
|
||||
Use a `.querySelector` to find that element, and then set its `.textContent` to the value of `mean`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `calculate` function should use a `document.querySelector()`.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /document\.querySelector\(/);
|
||||
```
|
||||
|
||||
Your `.querySelector()` should target the `#mean` element.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /document\.querySelector\(\s*('|")#mean\1\s*\)/);
|
||||
```
|
||||
|
||||
Your `calculate` function should set the `#mean` element's `.textContent` to the value of `mean`.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /document\.querySelector\(\s*('|")#mean\1\s*\)\s*\.textContent\s*=\s*mean;/);
|
||||
```
|
||||
|
||||
# --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();">
|
||||
<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 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);
|
||||
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,134 @@
|
||||
---
|
||||
id: 635089e3bd3e144f2db4094f
|
||||
title: Step 18
|
||||
challengeType: 0
|
||||
dashedName: step-18
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
If you test your form with a list of numbers, you should see the mean display on the page. However, this only works because freeCodeCamp's iframe has special settings. Normally, when a form is submitted, the event triggers a page refresh.
|
||||
|
||||
To resolve this, add `return false;` after your `calculate();` call in the `onsubmit` attribute.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `onsubmit` attribute should have a `return false;` statement.
|
||||
|
||||
```js
|
||||
assert.match(document.querySelector("form").getAttribute("onsubmit"), /return\s+false;/);
|
||||
```
|
||||
|
||||
Your `onsubmit` attribute should still call `calculate()`.
|
||||
|
||||
```js
|
||||
assert.match(document.querySelector("form").getAttribute("onsubmit"), /calculate\(\s*\)/);
|
||||
```
|
||||
|
||||
You should return `false` after you call `calculate()`.
|
||||
|
||||
```js
|
||||
assert.match(document.querySelector("form").getAttribute("onsubmit"), /calculate\(\s*\);\s*return\s+false;/);
|
||||
```
|
||||
|
||||
# --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>
|
||||
--fcc-editable-region--
|
||||
<form onsubmit="calculate();">
|
||||
--fcc-editable-region--
|
||||
<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 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;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,136 @@
|
||||
---
|
||||
id: 63508abbff1c4c5210d68cc5
|
||||
title: Step 19
|
||||
challengeType: 0
|
||||
dashedName: step-19
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Time to start working on the <dfn>median</dfn> calculation. The median is the midpoint of a set of numbers.
|
||||
|
||||
Begin with an empty function called `getMedian`, which should take an `array` parameter.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should define a `getMedian` function.
|
||||
|
||||
```js
|
||||
assert.isFunction(getMedian);
|
||||
```
|
||||
|
||||
Your `getMedian` function should take an `array` parameter.
|
||||
|
||||
```js
|
||||
assert.match(getMedian.toString(), /\(\s*array\s*\)/);
|
||||
```
|
||||
|
||||
Your `getMedian` function should be empty.
|
||||
|
||||
```js
|
||||
assert.match(getMedian.toString(), /\(\s*array\s*\)\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;
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--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);
|
||||
|
||||
document.querySelector("#mean").textContent = mean;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,132 @@
|
||||
---
|
||||
id: 63508bb4afb069534e81f33b
|
||||
title: Step 20
|
||||
challengeType: 0
|
||||
dashedName: step-20
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The first step in calculating the median is to ensure the list of numbers is sorted from least to greatest. Once again, there is an array method ideal for this – the `.sort()` method.
|
||||
|
||||
Declare a `sorted` variable and assign `array.sort()` to it.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `getMedian` function should have a `sorted` variable.
|
||||
|
||||
```js
|
||||
assert.match(getMedian.toString(), /sorted\s*=/);
|
||||
```
|
||||
|
||||
Your `getMedian` function should assign `array.sort()` to the `sorted` variable.
|
||||
|
||||
```js
|
||||
assert.match(getMedian.toString(), /sorted\s*=\s*array\.sort\(\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 getMedian = (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);
|
||||
|
||||
document.querySelector("#mean").textContent = mean;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,134 @@
|
||||
---
|
||||
id: 63508c898d753754757bd5e3
|
||||
title: Step 21
|
||||
challengeType: 0
|
||||
dashedName: step-21
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
By default, the `.sort()` method converts the elements of an array into strings, then sorts them alphabetically. This works well for strings, but not so well for numbers. For example, `10` comes before `2` when sorted as strings, but `2` comes before `10` when sorted as numbers.
|
||||
|
||||
To fix this, you can pass in a callback function to the `.sort()` method. This function takes two parameters, which represent the two elements being compared. The function should return a value less than `0` if the first element should come before the second element, a value greater than `0` if the first element should come after the second element, and `0` if the two elements should remain in their current positions.
|
||||
|
||||
To sort your numbers from smallest to largest, pass a callback function that takes parameters `a` and `b`, and returns the result of subtracting `b` from `a`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `sort` method should have a callback function which takes an `a` and a `b` argument.
|
||||
|
||||
```js
|
||||
assert.match(getMedian.toString(), /(array\.sort\(\(\s*a\s*,\s*b\s*\)\s*=>|array\.sort\(function\s*\(\s*a\s*,\s*b\)\s*\{)/)
|
||||
```
|
||||
|
||||
Your `sort` method should return the result of subtracting `b` from `a`.
|
||||
|
||||
```js
|
||||
assert.match(getMedian.toString(), /(array\.sort\(\(\s*a\s*,\s*b\s*\)\s*=>|array\.sort\(function\s*\(\s*a\s*,\s*b\)\s*\{)\s*(return)?\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.sort();
|
||||
}
|
||||
--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);
|
||||
|
||||
document.querySelector("#mean").textContent = mean;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,150 @@
|
||||
---
|
||||
id: 635090f47eb6d9563a6fed05
|
||||
title: Step 22
|
||||
challengeType: 0
|
||||
dashedName: step-22
|
||||
---
|
||||
|
||||
# --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.
|
||||
|
||||
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:
|
||||
|
||||
```js
|
||||
array.length % 2 === 0;
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `getMedian` function should have a `median` variable.
|
||||
|
||||
```js
|
||||
assert.match(getMedian.toString(), /median\s*=/);
|
||||
```
|
||||
|
||||
Your `median` variable should use a ternary operator to check if the `array.length` is even.
|
||||
|
||||
```js
|
||||
assert.match(getMedian.toString(), /median\s*=\s*array\.length\s*%\s*2\s*===\s*0\s*\?/);
|
||||
```
|
||||
|
||||
If the `array.length` is even, your `median` variable should use the `getMean` function to calculate the mean of the two middle numbers. Your first argument should be the value of `sorted` at `array.length / 2`, and the second at `array.length / 2 - 1`.
|
||||
|
||||
```js
|
||||
assert.match(getMedian.toString(), /median\s*=\s*array\.length\s*%\s*2\s*===\s*0\s*\?\s*getMean\(\s*\[sorted\[array\.length\s*\/\s*2\]\s*,\s*sorted\[\s*array\.length\s*\/\s*2\s*-\s*1\]\]\)\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*\[sorted\[array\.length\s*\/\s*2\]\s*,\s*sorted\[\s*array\.length\s*\/\s*2\s*-\s*1\]\]\)\s*\:\s*sorted\[\s*Math\.floor\(\s*array\.length\s*\/\s*2\)\];/);
|
||||
```
|
||||
|
||||
# --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.sort((a, b) => a - b);
|
||||
}
|
||||
--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);
|
||||
|
||||
document.querySelector("#mean").textContent = mean;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,130 @@
|
||||
---
|
||||
id: 635091f8dbf554575fb5aa0c
|
||||
title: Step 23
|
||||
challengeType: 0
|
||||
dashedName: step-23
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Finally, return the value of `median`.
|
||||
|
||||
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.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `getMedian` function should return the value of `median`.
|
||||
|
||||
```js
|
||||
assert.match(getMedian.toString(), /return\s+median;/);
|
||||
```
|
||||
|
||||
# --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.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;
|
||||
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;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,145 @@
|
||||
---
|
||||
id: 6352e79d15aae30fac58f48e
|
||||
title: Step 24
|
||||
challengeType: 0
|
||||
dashedName: step-24
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Like you did with your `getMean` function, you need to add your `getMedian` function to your `calculate` logic.
|
||||
|
||||
Declare a variable `median` and assign it the value of `getMedian(numbers)`. Then, query the DOM for the `#median` element and set the `textContent` to `median`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `calculate` function should have a `median` variable.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /median\s*=/);
|
||||
```
|
||||
|
||||
Your `median` variable should be assigned the value of `getMedian(numbers)`.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /median\s*=\s*getMedian\(numbers\)/);
|
||||
```
|
||||
|
||||
Your `calculate` function should query the DOM for the `#median` element and set the `textContent` to `median`.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /document\.querySelector\(('|")#median\1\)\.textContent\s*=\s*median/);
|
||||
```
|
||||
|
||||
# --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 calculate = () => {
|
||||
const value = document.querySelector("#numbers").value;
|
||||
const array = value.split(/,\s*/g);
|
||||
const numbers = array.map(el => Number(el)).filter(el => !isNaN(el));
|
||||
|
||||
--fcc-editable-region--
|
||||
const mean = getMean(numbers);
|
||||
|
||||
|
||||
document.querySelector("#mean").textContent = mean;
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,146 @@
|
||||
---
|
||||
id: 6352e80e024e89111600edfb
|
||||
title: Step 25
|
||||
challengeType: 0
|
||||
dashedName: step-25
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Your next calculation is the <dfn>mode</dfn>, which is the number that appears most often in the list. To get started, declare a `getMode` function that takes the same `array` parameter you have been using.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should declare a `getMode` function.
|
||||
|
||||
```js
|
||||
assert.isFunction(getMode);
|
||||
```
|
||||
|
||||
Your `getMode` function should take a parameter named `array`.
|
||||
|
||||
```js
|
||||
assert.match(getMode.toString(), /\(\s*array\s*\)/);
|
||||
```
|
||||
|
||||
Your `getMode` function should be empty.
|
||||
|
||||
```js
|
||||
assert.match(getMode.toString(), /\(\s*array\s*\)\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--
|
||||
|
||||
--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;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,142 @@
|
||||
---
|
||||
id: 6352e93db104661305c5f658
|
||||
title: Step 26
|
||||
challengeType: 0
|
||||
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.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `getMode` function should have a `counts` variable.
|
||||
|
||||
```js
|
||||
assert.match(getMode.toString(), /counts\s*=/);
|
||||
```
|
||||
|
||||
Your `counts` variable should be an empty object.
|
||||
|
||||
```js
|
||||
assert.match(getMode.toString(), /counts\s*=\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) => {
|
||||
|
||||
}
|
||||
--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;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,152 @@
|
||||
---
|
||||
id: 6352e96d2604f813c656750b
|
||||
title: Step 27
|
||||
challengeType: 0
|
||||
dashedName: step-27
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Remember that the `.forEach()` method allows you to run a callback function for each element in the array.
|
||||
|
||||
Use the `.forEach()` method to loop through the `array`. In the callback, use the `el` argument to access the `counts` object and increment the count for each number.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `getMode` function should use the `.forEach()` method.
|
||||
|
||||
```js
|
||||
assert.match(getMode.toString(), /array\.forEach\(/);
|
||||
```
|
||||
|
||||
Your `.forEach()` method should have a callback function which takes an `el` argument.
|
||||
|
||||
```js
|
||||
console.log(getMode.toString());
|
||||
assert.match(getMode.toString(), /(array\.forEach\(\(?\s*el\s*\)?\s*=>|array\.forEach\(function\s*\(?el\)?\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*el\s*\)?\s*=>|array\.forEach\(function\s*\(?el\)?\s*\{)\s*\{?\s*(return)?\s*counts\[\s*el\s*\]\s*=\s*\(\s*counts\[\s*el\s*\]\s*\|\|\s*0\s*\)\s*\+\s*1\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 = {};
|
||||
|
||||
}
|
||||
--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;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,162 @@
|
||||
---
|
||||
id: 6352ea3a5b79e614ee2282fd
|
||||
title: Step 28
|
||||
challengeType: 0
|
||||
dashedName: step-28
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
There are a few edge cases to account for when calculating the mode of a dataset. First, if every value appears the same number of times, there is no mode.
|
||||
|
||||
To calculate this, you will use a `Set`. A `Set` is a data structure that only allows unique values. If you pass an array into the `Set` constructor, it will remove any duplicate values.
|
||||
|
||||
Start by creating an `if` statement. In the condition, create a `Set` with `new Set()` and pass it the `Object.values()` of your `counts` object. If the `size` property of this `Set` is equal to `1`, that tells you every value appears the same number of times. In this case, return `null` from your function.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `getMode` function should have an `if` statement.
|
||||
|
||||
```js
|
||||
assert.match(getMode.toString(), /if\s*\(/);
|
||||
```
|
||||
|
||||
Your `if` statement should create a new `Set` and pass the `Object.values()` of your `counts` object.
|
||||
|
||||
```js
|
||||
assert.match(getMode.toString(), /if\s*\(\s*new\s+Set\s*\(\s*Object\.values\s*\(\s*counts\s*\)/);
|
||||
```
|
||||
|
||||
Your `if` statement should check if the `size` property of the new `Set` is equal to `1`.
|
||||
|
||||
```js
|
||||
assert.match(getMode.toString(), /if\s*\(\s*new\s+Set\s*\(\s*Object\.values\s*\(\s*counts\s*\)\s*\)\s*\.size\s*===\s*1/);
|
||||
```
|
||||
|
||||
Your `if` statement should return `null` if the `size` property of the new `Set` is equal to `1`.
|
||||
|
||||
```js
|
||||
assert.match(getMode.toString(), /if\s*\(\s*new\s+Set\s*\(\s*Object\.values\s*\(\s*counts\s*\)\s*\)\.size\s*===\s*1\s*\)\s*\{?\s*return\s+null;\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;
|
||||
})
|
||||
|
||||
}
|
||||
--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;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,156 @@
|
||||
---
|
||||
id: 6352ebd3ab962c168a122e85
|
||||
title: Step 29
|
||||
challengeType: 0
|
||||
dashedName: step-29
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now you need to find the value that occurs with the highest frequency. You'll use the `Object.keys()` method for this.
|
||||
|
||||
Start by declaring a `highest` variable, and assigning it the value of the `counts` object's `Object.keys()` method.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `getMode` function should have a `highest` variable.
|
||||
|
||||
```js
|
||||
assert.match(getMode.toString(), /highest\s*=/);
|
||||
```
|
||||
|
||||
Your `getMode` function should use the `Object.keys()` method to get the keys of the `counts` object.
|
||||
|
||||
```js
|
||||
assert.match(getMode.toString(), /Object\.keys\(\s*counts\s*\)/);
|
||||
```
|
||||
|
||||
Your `getMode` function should use the `Object.keys()` method to get the keys of the `counts` object and assign them to the `highest` variable.
|
||||
|
||||
```js
|
||||
assert.match(getMode.toString(), /highest\s*=\s*Object\.keys\(\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;
|
||||
})
|
||||
if (new Set(Object.values(counts)).size === 1) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
--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;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,165 @@
|
||||
---
|
||||
id: 6352ec8b9c70fd17b8c7ba3f
|
||||
title: Step 30
|
||||
challengeType: 0
|
||||
dashedName: step-30
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now you need to sort the values properly. Chain the `.sort()` method to your `Object.keys()` call.
|
||||
|
||||
For the callback, you'll need to use the `counts` object to compare the values of each key. You can use the `a` and `b` parameters to access the keys. Then, return the value of `counts[b]` minus the value of `counts[a]`.
|
||||
|
||||
Finally, access the first element in the array using bracket notation to complete your `highest` variable.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `getMode` function should use the `sort` method to sort the `Object.keys()` array.
|
||||
|
||||
```js
|
||||
assert.match(getMode.toString(), /highest\s*=\s*Object\.keys\(\s*counts\s*\)\.sort\(/)
|
||||
```
|
||||
|
||||
Your `getMode` function should pass a callback to the `sort` method with parameters `a` and `b`.
|
||||
|
||||
```js
|
||||
assert.match(getMode.toString(), /highest\s*=\s*Object\.keys\(\s*counts\s*\)\.sort\(function\s*\(\s*a\s*,\s*b\s*\)/)
|
||||
```
|
||||
|
||||
Your `getMode` function should use the `sort` method to sort the `Object.keys()` array and return the value of `counts[b]` minus the value of `counts[a]`.
|
||||
|
||||
```js
|
||||
assert.match(getMode.toString(), /highest\s*=\s*Object\.keys\(\s*counts\s*\)\.sort\(\s*function\s*\(\s*a\s*,\s*b\s*\)\s*\{\s*return\s*counts\[\s*b\s*\]\s*-\s*counts\[\s*a\s*\];?\s*\}\s*\)/)
|
||||
```
|
||||
|
||||
Your `highest` variable should have the value of the first entry in the sorted `Object.keys(counts)` array.
|
||||
|
||||
```js
|
||||
assert.match(getMode.toString(), /highest\s*=\s*Object\.keys\(\s*counts\s*\)\.sort\(\s*function\s*\(\s*a\s*,\s*b\s*\)\s*\{\s*return\s*counts\[\s*b\s*\]\s*-\s*counts\[\s*a\s*\];?\s*\}\s*\)\[0\];/)
|
||||
```
|
||||
|
||||
# --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;
|
||||
})
|
||||
if (new Set(Object.values(counts)).size === 1) {
|
||||
return null;
|
||||
}
|
||||
const highest = Object.keys(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;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,154 @@
|
||||
---
|
||||
id: 6352ecef9f045519063da9b3
|
||||
title: Step 31
|
||||
challengeType: 0
|
||||
dashedName: step-31
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
If multiple numbers in a series occur at the same highest frequency, they are all considered the mode. Otherwise, the mode is the number that occurs most often, that single number is the mode.
|
||||
|
||||
Thankfully, you can handle both of these cases at once with the `.filter()` method. Start by declaring a `mode` variable and assigning it the value of `Object.keys(counts)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `getMode` function should have a `mode` variable.
|
||||
|
||||
```js
|
||||
assert.match(getMode.toString(), /mode\s*=/);
|
||||
```
|
||||
|
||||
Your `getMode` function should use the `Object.keys()` method to get the keys of the `counts` object and assign them to the `mode` variable.
|
||||
|
||||
```js
|
||||
assert.match(getMode.toString(), /mode\s*=\s*Object\.keys\(\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;
|
||||
})
|
||||
if (new Set(Object.values(counts)).size === 1) {
|
||||
return null;
|
||||
}
|
||||
const highest = Object.keys(counts).sort(
|
||||
(a, b) => counts[b] - counts[a]
|
||||
)[0];
|
||||
|
||||
}
|
||||
--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;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,158 @@
|
||||
---
|
||||
id: 6352edee8a4de01ad693f0e4
|
||||
title: Step 32
|
||||
challengeType: 0
|
||||
dashedName: step-32
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now chain the filter method to your latest `Object.keys()` call. The callback function should return whether the value of `counts[el]` is equal to your `counts[highest]`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should chain `.filter()` to your last `Object.keys()` call.
|
||||
|
||||
```js
|
||||
assert.match(getMode.toString(), /mode\s*=\s*Object\.keys\(\s*counts\s*\)\.filter\(/);
|
||||
```
|
||||
|
||||
Your `.filter()` method should take a callback function with a parameter `el`.
|
||||
|
||||
```js
|
||||
assert.match(getMode.toString(), /mode\s*=\s*Object\.keys\(\s*counts\s*\)\.filter\(function\s*\(\s*el\s*\)/);
|
||||
```
|
||||
|
||||
Your `.filter()` method should return whether the value of `counts[el]` is equal to `counts[highest]`.
|
||||
|
||||
```js
|
||||
assert.match(getMode.toString(), /mode\s*=\s*Object\.keys\(\s*counts\s*\)\.filter\(function\s*\(\s*el\s*\)\s*\{\s*return\s*counts\[\s*el\s*\]\s*===\s*counts\[\s*highest\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 = {};
|
||||
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);
|
||||
}
|
||||
--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;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,163 @@
|
||||
---
|
||||
id: 6352ee566a59d31d24bde74b
|
||||
title: Step 33
|
||||
challengeType: 0
|
||||
dashedName: step-33
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Time to return your `mode` variable.
|
||||
|
||||
`mode` is an array, so return it as a string with the `.join()` method. Separate the elements with a comma followed by a space.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `getMode` function should return the `mode` variable.
|
||||
|
||||
```js
|
||||
assert.match(getMode.toString(), /return\s*mode\s*/)
|
||||
```
|
||||
|
||||
Your `mode` variable should be returned as a string with the `join` method.
|
||||
|
||||
```js
|
||||
assert.match(getMode.toString(), /return\s*mode\.join\(/)
|
||||
```
|
||||
|
||||
You should separate the elements of the `mode` array with a comma and a space.
|
||||
|
||||
```js
|
||||
assert.match(getMode.toString(), /return\s*mode\.join\(\s*('|"),\s\1\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;
|
||||
})
|
||||
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]
|
||||
);
|
||||
|
||||
}
|
||||
--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;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,157 @@
|
||||
---
|
||||
id: 6352f09b1e53a420e7873344
|
||||
title: Step 34
|
||||
challengeType: 0
|
||||
dashedName: step-34
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add your `getMode()` function to your `calculate` logic, and update the respective HTML element.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `calculate` function should have a `mode` variable with the value of `getMode(numbers)`.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /mode\s*=\s*getMode\(\s*numbers\s*\);/);
|
||||
```
|
||||
|
||||
Your `calculate` function should query the DOM for the `#mode` element and set the `textContent` to `mode`.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /document\.querySelector\(('|")#mode\1\)\.textContent\s*=\s*mode;/);
|
||||
```
|
||||
|
||||
# --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;
|
||||
})
|
||||
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 calculate = () => {
|
||||
const value = document.querySelector("#numbers").value;
|
||||
const array = value.split(/,\s*/g);
|
||||
const numbers = array.map(el => Number(el)).filter(el => !isNaN(el));
|
||||
|
||||
--fcc-editable-region--
|
||||
const mean = getMean(numbers);
|
||||
const median = getMedian(numbers);
|
||||
|
||||
|
||||
document.querySelector("#mean").textContent = mean;
|
||||
document.querySelector("#median").textContent = median;
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,191 @@
|
||||
---
|
||||
id: 6352f179bdca23221298a5ba
|
||||
title: Step 35
|
||||
challengeType: 0
|
||||
dashedName: step-35
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Your next calculation is the <dfn>range</dfn>, which is the difference between the largest and smallest numbers in the list.
|
||||
|
||||
You previously learned about the global `Math` object. `Math` has a `.min()` method to get the smallest number from a series of numbers, and the `.max()` method to get the largest number. Here's an example that gets the smallest number from an array:
|
||||
|
||||
```js
|
||||
Math.min(1, 9, 11, -3, 0.5);
|
||||
```
|
||||
|
||||
Declare a `getRange` function that takes the same `array` parameter you have been using. Using `Math.min()`, `Math.max()`, and the spread operator, return the difference between the largest and smallest numbers in the list.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should define a `getRange` function.
|
||||
|
||||
```js
|
||||
assert.isFunction(getRange);
|
||||
```
|
||||
|
||||
Your `getRange` function should take an `array` parameter.
|
||||
|
||||
```js
|
||||
assert.match(getRange.toString(), /array/);
|
||||
```
|
||||
|
||||
Your `getRange` function should use the spread operator on the `array` parameter.
|
||||
|
||||
```js
|
||||
assert.match(code.split("getRange")[1], /\.\.\.array/);
|
||||
```
|
||||
|
||||
Your `getRange` function should use `Math.max` on the spread `array` parameter.
|
||||
|
||||
```js
|
||||
assert.match(code.split("getRange")[1], /Math\.max\(\s*\.\.\.array\s*\)/);
|
||||
```
|
||||
|
||||
Your `getRange` function should use `Math.min` on the spread `array` parameter.
|
||||
|
||||
```js
|
||||
assert.match(code.split("getRange")[1], /Math\.min\(\s*\.\.\.array\s*\)/);
|
||||
```
|
||||
|
||||
Your `getRange` function should return the difference between the largest and smallest numbers in the list.
|
||||
|
||||
```js
|
||||
assert.equal(getRange([1, 2, 3, 4, 5]), 4);
|
||||
assert.equal(getRange([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]), 9);
|
||||
```
|
||||
|
||||
# --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;
|
||||
})
|
||||
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(", ");
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--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);
|
||||
const mode = getMode(numbers);
|
||||
|
||||
document.querySelector("#mean").textContent = mean;
|
||||
document.querySelector("#median").textContent = median;
|
||||
document.querySelector("#mode").textContent = mode;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,162 @@
|
||||
---
|
||||
id: 6352f2526dccb523150b64fb
|
||||
title: Step 36
|
||||
challengeType: 0
|
||||
dashedName: step-36
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add the logic for calculating and displaying the range to your `calculate` function.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `calculate` function should set a `range` variable to the result of `getRange(numbers)`.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /range\s*=\s*getRange\(numbers\);/);
|
||||
```
|
||||
|
||||
Your `calculate` function should set the `#range` element's `textContent` to the `range` variable.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /document\.querySelector\(('|")#range\1\)\.textContent\s*=\s*range;/);
|
||||
```
|
||||
|
||||
# --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;
|
||||
})
|
||||
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 calculate = () => {
|
||||
const value = document.querySelector("#numbers").value;
|
||||
const array = value.split(/,\s*/g);
|
||||
const numbers = array.map(el => Number(el)).filter(el => !isNaN(el));
|
||||
|
||||
--fcc-editable-region--
|
||||
const mean = getMean(numbers);
|
||||
const median = getMedian(numbers);
|
||||
const mode = getMode(numbers);
|
||||
|
||||
|
||||
document.querySelector("#mean").textContent = mean;
|
||||
document.querySelector("#median").textContent = median;
|
||||
document.querySelector("#mode").textContent = mode;
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,178 @@
|
||||
---
|
||||
id: 6352f2a24eb71b24284ca2b6
|
||||
title: Step 37
|
||||
challengeType: 0
|
||||
dashedName: step-37
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The <dfn>variance</dfn> of a series represents how much the data deviates from the mean, and can be used to determine how spread out the data are. The variance is calculated in a few steps.
|
||||
|
||||
Start by declaring a `getVariance` function that takes an `array` parameter. Within that function, declare a `mean` variable and assign it the value of the `getMean` function, passing `array` as the argument.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should define a `getVariance` function.
|
||||
|
||||
```js
|
||||
assert.isFunction(getVariance);
|
||||
```
|
||||
|
||||
Your `getVariance` function should take an `array` parameter.
|
||||
|
||||
```js
|
||||
assert.match(getVariance.toString(), /array/);
|
||||
```
|
||||
|
||||
Your `getVariance` function should declare a `mean` variable.
|
||||
|
||||
```js
|
||||
assert.match(getVariance.toString(), /mean\s*=/);
|
||||
```
|
||||
|
||||
Your `mean` variable should be assigned the value of the `getMean` function, passing the `array` argument.
|
||||
|
||||
```js
|
||||
assert.match(getVariance.toString(), /mean\s*=\s*getMean\(\s*array\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;
|
||||
})
|
||||
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);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--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);
|
||||
const mode = getMode(numbers);
|
||||
const range = getRange(numbers);
|
||||
|
||||
document.querySelector("#mean").textContent = mean;
|
||||
document.querySelector("#median").textContent = median;
|
||||
document.querySelector("#mode").textContent = mode;
|
||||
document.querySelector("#range").textContent = range;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,179 @@
|
||||
---
|
||||
id: 6352faf71a9db52631864634
|
||||
title: Step 38
|
||||
challengeType: 0
|
||||
dashedName: step-38
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The next step is to calculate how far each element is from the mean. Declare a `differences` variable, and assign it the value of `array.map()`. For the callback, return the value of `el` minus `mean`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `getVariance` function should have a `differences` variable.
|
||||
|
||||
```js
|
||||
assert.match(getVariance.toString(), /differences\s*=/);
|
||||
```
|
||||
|
||||
Your `differences` variable should use the `array.map()` method.
|
||||
|
||||
```js
|
||||
assert.match(getVariance.toString(), /differences\s*=\s*array\.map\(/);
|
||||
```
|
||||
|
||||
Your `differences` variable should use the `el` parameter in the callback function.
|
||||
|
||||
```js
|
||||
assert.match(getVariance.toString(), /differences\s*=\s*array\.map\(function\s*\(?\s*el\s*\)?/);
|
||||
```
|
||||
|
||||
Your `map` callback should return the value of `el` minus `mean`.
|
||||
|
||||
```js
|
||||
assert.match(getVariance.toString(), /differences\s*=\s*array\.map\(function\s*\(?\s*el\s*\)?\s*\{\s*return\s*el\s*-\s*mean;?\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;
|
||||
})
|
||||
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);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
const getVariance = (array) => {
|
||||
const mean = getMean(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);
|
||||
const mode = getMode(numbers);
|
||||
const range = getRange(numbers);
|
||||
|
||||
document.querySelector("#mean").textContent = mean;
|
||||
document.querySelector("#median").textContent = median;
|
||||
document.querySelector("#mode").textContent = mode;
|
||||
document.querySelector("#range").textContent = range;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,190 @@
|
||||
---
|
||||
id: 6352fbb93a91a8272f838d42
|
||||
title: Step 39
|
||||
challengeType: 0
|
||||
dashedName: step-39
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The next step is to square each of the differences. To square a value, you can use the `**` operator. For example, `3 ** 2` would return `9`.
|
||||
|
||||
Declare a `squaredDifferences` variable, and assign it the value of `differences.map()`. For the callback, return the value of `el` squared.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `squaredDifferences` variable.
|
||||
|
||||
```js
|
||||
assert.match(getVariance.toString(), /squaredDifferences\s*=/);
|
||||
```
|
||||
|
||||
Your `squaredDifferences` variable should use the `differences.map()` method.
|
||||
|
||||
```js
|
||||
assert.match(getVariance.toString(), /squaredDifferences\s*=\s*differences\.map\(/);
|
||||
```
|
||||
|
||||
Your `squaredDifferences` variable should use the `el` parameter in the callback function.
|
||||
|
||||
```js
|
||||
assert.match(getVariance.toString(), /squaredDifferences\s*=\s*differences\.map\(function\s*\(?\s*el\s*\)?/);
|
||||
```
|
||||
|
||||
Your `map` callback should return the value of `el` squared.
|
||||
|
||||
```js
|
||||
assert.match(getVariance.toString(), /squaredDifferences\s*=\s*differences\.map\(function\s*\(?\s*el\s*\)?\s*\{\s*return\s*Math\.pow\(\s*el\s*,\s*2\s*\);\s*\}/);
|
||||
```
|
||||
|
||||
Your `map` callback should use the `**` operator.
|
||||
|
||||
```js
|
||||
assert.match(code.split("getVariance")[1], /el\s*\*\*\s*2/);
|
||||
```
|
||||
|
||||
# --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;
|
||||
})
|
||||
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);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
const getVariance = (array) => {
|
||||
const mean = getMean(array);
|
||||
const differences = array.map(
|
||||
el => el - mean
|
||||
);
|
||||
|
||||
}
|
||||
--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);
|
||||
const mode = getMode(numbers);
|
||||
const range = getRange(numbers);
|
||||
|
||||
document.querySelector("#mean").textContent = mean;
|
||||
document.querySelector("#median").textContent = median;
|
||||
document.querySelector("#mode").textContent = mode;
|
||||
document.querySelector("#range").textContent = range;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,188 @@
|
||||
---
|
||||
id: 6352fcb156834128001ea945
|
||||
title: Step 40
|
||||
challengeType: 0
|
||||
dashedName: step-40
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Next, you need to take the sum of the squared differences.
|
||||
|
||||
Declare a `sumSquaredDifferences` variable, and assign it the value of `squaredDifferences.reduce()`. For the callback, return the sum of `acc` and `el`. Remember to set the initial value to `0`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `sumSquaredDifferences` variable.
|
||||
|
||||
```js
|
||||
assert.match(getVariance.toString(), /sumSquaredDifferences\s*=/);
|
||||
```
|
||||
|
||||
Your `sumSquaredDifferences` variable should use the `squaredDifferences.reduce()` method.
|
||||
|
||||
```js
|
||||
assert.match(getVariance.toString(), /sumSquaredDifferences\s*=\s*squaredDifferences\.reduce\(/);
|
||||
```
|
||||
|
||||
Your `sumSquaredDifferences` variable should use the `acc` and `el` parameters in the callback function.
|
||||
|
||||
```js
|
||||
assert.match(getVariance.toString(), /sumSquaredDifferences\s*=\s*squaredDifferences\.reduce\(function\s*\(?\s*acc\s*,\s*el\s*\)?/);
|
||||
```
|
||||
|
||||
Your `reduce` callback should return the sum of `acc` and `el`.
|
||||
|
||||
```js
|
||||
console.log(getVariance.toString());
|
||||
assert.match(getVariance.toString(), /sumSquaredDifferences\s*=\s*squaredDifferences\.reduce\(function\s*\(?\s*acc\s*,\s*el\s*\)?\s*\{\s*return\s*acc\s*\+\s*el\s*\;\s*\},\s*0\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;
|
||||
})
|
||||
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);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
const getVariance = (array) => {
|
||||
const mean = getMean(array);
|
||||
const differences = array.map(
|
||||
el => el - mean
|
||||
);
|
||||
const squaredDifferences = differences.map(
|
||||
el => el ** 2
|
||||
);
|
||||
|
||||
}
|
||||
--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);
|
||||
const mode = getMode(numbers);
|
||||
const range = getRange(numbers);
|
||||
|
||||
document.querySelector("#mean").textContent = mean;
|
||||
document.querySelector("#median").textContent = median;
|
||||
document.querySelector("#mode").textContent = mode;
|
||||
document.querySelector("#range").textContent = range;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,213 @@
|
||||
---
|
||||
id: 6352fce75b2d3b2924930f1e
|
||||
title: Step 41
|
||||
challengeType: 0
|
||||
dashedName: step-41
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
With two `.map()` calls and a `.reduce()` call, you're creating extra arrays and iterating more times than needed. You should move all of the logic into the `.reduce()` call to save time and memory.
|
||||
|
||||
Remove the `differences`, `squaredDifferences`, and `sumSquaredDifferences` variables (and their values). Declare a `variance` variable, and assign it the value of `array.reduce()`. For the callback, pass in your standard `acc` and `el` parameters, but leave the function body empty for now. Don't forget to set the initial value to `0`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should remove the `differences` variable.
|
||||
|
||||
```js
|
||||
assert.notMatch(getVariance.toString(), /differences\s*=/);
|
||||
```
|
||||
|
||||
You should remove the `squaredDifferences` variable.
|
||||
|
||||
```js
|
||||
assert.notMatch(getVariance.toString(), /squaredDifferences\s*=/);
|
||||
```
|
||||
|
||||
You should remove the `sumSquaredDifferences` variable.
|
||||
|
||||
```js
|
||||
assert.notMatch(getVariance.toString(), /sumSquaredDifferences\s*=/);
|
||||
```
|
||||
|
||||
You should have a `variance` variable.
|
||||
|
||||
```js
|
||||
assert.match(getVariance.toString(), /variance\s*=/);
|
||||
```
|
||||
|
||||
Your `variance` variable should use the `array.reduce()` method.
|
||||
|
||||
```js
|
||||
assert.match(getVariance.toString(), /variance\s*=\s*array\.reduce\(/);
|
||||
```
|
||||
|
||||
Your `variance` variable should use the `acc` and `el` parameters in the callback function.
|
||||
|
||||
```js
|
||||
assert.match(getVariance.toString(), /variance\s*=\s*array\.reduce\(function\s*\(?\s*acc\s*,\s*el\s*\)?/);
|
||||
```
|
||||
|
||||
Your `reduce` callback should be an empty function.
|
||||
|
||||
```js
|
||||
assert.match(getVariance.toString(), /variance\s*=\s*array\.reduce\(function\s*\(?\s*acc\s*,\s*el\s*\)?\s*\{\s*\}/);
|
||||
```
|
||||
|
||||
Your `reduce` callback should have an initial value of `0`.
|
||||
|
||||
```js
|
||||
assert.match(getVariance.toString(), /variance\s*=\s*array\.reduce\(function\s*\(?\s*acc\s*,\s*el\s*\)?\s*\{\s*\}\s*,\s*0\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;
|
||||
})
|
||||
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);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
const getVariance = (array) => {
|
||||
const mean = getMean(array);
|
||||
const differences = array.map(
|
||||
el => el - mean
|
||||
);
|
||||
const squaredDifferences = differences.map(
|
||||
el => el ** 2
|
||||
);
|
||||
const sumSquaredDifferences = squaredDifferences.reduce(
|
||||
(acc, el) => acc + el, 0
|
||||
);
|
||||
}
|
||||
--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);
|
||||
const mode = getMode(numbers);
|
||||
const range = getRange(numbers);
|
||||
|
||||
document.querySelector("#mean").textContent = mean;
|
||||
document.querySelector("#median").textContent = median;
|
||||
document.querySelector("#mode").textContent = mode;
|
||||
document.querySelector("#range").textContent = range;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,193 @@
|
||||
---
|
||||
id: 6352fe473d53592a40ae403b
|
||||
title: Step 42
|
||||
challengeType: 0
|
||||
dashedName: step-42
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Within your empty `.reduce()` callback, declare a variable `difference` and set it to the value of `el` minus `mean`. Then declare a `squared` variable, and set it to the value of `difference` to the power of `2`. Finally, return the value of `acc` plus `squared`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `reduce` callback should have a `difference` variable.
|
||||
|
||||
```js
|
||||
assert.match(getVariance.toString(), /variance\s*=\s*array\.reduce\(function\s*\(?\s*acc\s*,\s*el\s*\)?\s*\{\s*var\s*difference\s*=/);
|
||||
```
|
||||
|
||||
Your `difference` variable should be set to the value of `el` minus `mean`.
|
||||
|
||||
```js
|
||||
assert.match(getVariance.toString(), /variance\s*=\s*array\.reduce\(function\s*\(?\s*acc\s*,\s*el\s*\)?\s*\{\s*var\s*difference\s*=\s*el\s*-\s*mean\s*;/);
|
||||
```
|
||||
|
||||
Your `reduce` callback should have a `squared` variable.
|
||||
|
||||
```js
|
||||
assert.match(getVariance.toString(), /variance\s*=\s*array\.reduce\(function\s*\(?\s*acc\s*,\s*el\s*\)?\s*\{\s*var\s*difference\s*=\s*el\s*-\s*mean\s*;\s*var\s*squared\s*=/);
|
||||
```
|
||||
|
||||
Your `squared` variable should be set to the value of `difference` to the power of 2.
|
||||
|
||||
```js
|
||||
assert.match(getVariance.toString(), /variance\s*=\s*array\.reduce\(function\s*\(?\s*acc\s*,\s*el\s*\)?\s*\{\s*var\s*difference\s*=\s*el\s*-\s*mean\s*;\s*var\s*squared\s*=\s*Math\.pow\(\s*difference\s*,\s*2\s*\);/);
|
||||
```
|
||||
|
||||
Your `reduce` callback should return the value of `acc` plus `squared`.
|
||||
|
||||
```js
|
||||
assert.match(getVariance.toString(), /variance\s*=\s*array\.reduce\(function\s*\(?\s*acc\s*,\s*el\s*\)?\s*\{\s*var\s*difference\s*=\s*el\s*-\s*mean\s*;\s*var\s*squared\s*=\s*Math\.pow\(\s*difference\s*,\s*2\s*\);\s*return\s*acc\s*\+\s*squared\s*;/);
|
||||
```
|
||||
|
||||
You should not remove the initial value of `0` from your `.reduce()` method.
|
||||
|
||||
```js
|
||||
assert.match(getVariance.toString(), /variance\s*=\s*array\.reduce\(function\s*\(?\s*acc\s*,\s*el\s*\)?\s*\{\s*var\s*difference\s*=\s*el\s*-\s*mean\s*;\s*var\s*squared\s*=\s*Math\.pow\(\s*difference\s*,\s*2\s*\);\s*return\s*acc\s*\+\s*squared\s*;\s*\}\s*,\s*0\)/);
|
||||
```
|
||||
|
||||
# --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;
|
||||
})
|
||||
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);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
const getVariance = (array) => {
|
||||
const mean = getMean(array);
|
||||
const variance = array.reduce((acc, el) => {
|
||||
|
||||
}, 0);
|
||||
}
|
||||
--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);
|
||||
const mode = getMode(numbers);
|
||||
const range = getRange(numbers);
|
||||
|
||||
document.querySelector("#mean").textContent = mean;
|
||||
document.querySelector("#median").textContent = median;
|
||||
document.querySelector("#mode").textContent = mode;
|
||||
document.querySelector("#range").textContent = range;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,173 @@
|
||||
---
|
||||
id: 6352fed209792d2b89e92ea1
|
||||
title: Step 43
|
||||
challengeType: 0
|
||||
dashedName: step-43
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The final step in calculating the variance is to divide the sum of the squared differences by the count of numbers.
|
||||
|
||||
Divide your `.reduce()` call by the length of the array (in your `variance` declaration). Then, return `variance`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should divide the result of the `.reduce()` call by the length of the array.
|
||||
|
||||
```js
|
||||
assert.match(getVariance.toString(), /variance\s*=\s*array\.reduce\(function\s*\(?\s*acc\s*,\s*el\s*\)?\s*\{\s*var\s*difference\s*=\s*el\s*-\s*mean\s*;\s*var\s*squared\s*=\s*Math\.pow\(\s*difference\s*,\s*2\s*\);\s*return\s*acc\s*\+\s*squared\s*;\s*\}\s*,\s*0\)\s*\/\s*array\.length;/);
|
||||
```
|
||||
|
||||
You should return the value of `variance`.
|
||||
|
||||
```js
|
||||
assert.match(getVariance.toString(), /return\s*variance\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;
|
||||
})
|
||||
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);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
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);
|
||||
}
|
||||
--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);
|
||||
const mode = getMode(numbers);
|
||||
const range = getRange(numbers);
|
||||
|
||||
document.querySelector("#mean").textContent = mean;
|
||||
document.querySelector("#median").textContent = median;
|
||||
document.querySelector("#mode").textContent = mode;
|
||||
document.querySelector("#range").textContent = range;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,174 @@
|
||||
---
|
||||
id: 6352ff27e0e51b2c7dce0010
|
||||
title: Step 44
|
||||
challengeType: 0
|
||||
dashedName: step-44
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add your new `getVariance` function to the `calculate` function, and update the respective HTML element.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `calculate` function should have a `variance` variable set to the value of `getVariance(numbers)`.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /variance\s*=\s*getVariance\(\s*numbers\s*\)/);
|
||||
```
|
||||
|
||||
You should set the `textContent` of the `#variance` element to the value of the `variance` variable.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /document\.querySelector\(('|")#variance\1\)\.textContent\s*=\s*variance/);
|
||||
```
|
||||
|
||||
# --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;
|
||||
})
|
||||
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 calculate = () => {
|
||||
const value = document.querySelector("#numbers").value;
|
||||
const array = value.split(/,\s*/g);
|
||||
const numbers = array.map(el => Number(el)).filter(el => !isNaN(el));
|
||||
|
||||
--fcc-editable-region--
|
||||
const mean = getMean(numbers);
|
||||
const median = getMedian(numbers);
|
||||
const mode = getMode(numbers);
|
||||
const range = getRange(numbers);
|
||||
|
||||
|
||||
document.querySelector("#mean").textContent = mean;
|
||||
document.querySelector("#median").textContent = median;
|
||||
document.querySelector("#mode").textContent = mode;
|
||||
document.querySelector("#range").textContent = range;
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,190 @@
|
||||
---
|
||||
id: 6352ffe4cfafa72d595a0007
|
||||
title: Step 45
|
||||
challengeType: 0
|
||||
dashedName: step-45
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Your final calculation is the <dfn>standard deviation</dfn>, which is the square root of the variance.
|
||||
|
||||
Begin by declaring a `getStandardDeviation` function, with the `array` parameter. In the function body, declare a `variance` variable and assign it the variance of the `array`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `getStandardDeviation` function.
|
||||
|
||||
```js
|
||||
assert.isFunction(getStandardDeviation);
|
||||
```
|
||||
|
||||
Your `getStandardDeviation` function should have an `array` parameter.
|
||||
|
||||
```js
|
||||
assert.match(getStandardDeviation.toString(), /array/);
|
||||
```
|
||||
|
||||
Your `getStandardDeviation` function should have a `variance` variable.
|
||||
|
||||
```js
|
||||
assert.match(getStandardDeviation.toString(), /variance\s*=/);
|
||||
```
|
||||
|
||||
Your `variance` variable should have the value of `getVariance(array)`.
|
||||
|
||||
```js
|
||||
assert.match(getStandardDeviation.toString(), /variance\s*=\s*getVariance\(\s*array\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;
|
||||
})
|
||||
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;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--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);
|
||||
const mode = getMode(numbers);
|
||||
const range = getRange(numbers);
|
||||
const variance = getVariance(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;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,192 @@
|
||||
---
|
||||
id: 6353004b235d7a2e0b913f2b
|
||||
title: Step 46
|
||||
challengeType: 0
|
||||
dashedName: step-46
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To calculate a root exponent, such as $\sqrt[n]{x}$, you can use an inverted exponent $x^{1/n}$.
|
||||
|
||||
Declare a `standardDeviation` variable, and use the `Math.pow()` function to assign it the value of $variance^{1/2}$.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `standardDeviation` variable.
|
||||
|
||||
```js
|
||||
assert.match(getStandardDeviation.toString(), /standardDeviation\s*=/);
|
||||
```
|
||||
|
||||
Your `standardDeviation` variable should use the `Math.pow()` function.
|
||||
|
||||
```js
|
||||
assert.match(getStandardDeviation.toString(), /standardDeviation\s*=\s*Math\.pow\(/);
|
||||
```
|
||||
|
||||
Your `standardDeviation` variable should use the `variance` variable.
|
||||
|
||||
```js
|
||||
assert.match(getStandardDeviation.toString(), /standardDeviation\s*=\s*Math\.pow\(\s*variance\s*,/);
|
||||
```
|
||||
|
||||
Your `standardDeviation` variable should use the `1/2` exponent.
|
||||
|
||||
```js
|
||||
assert.match(getStandardDeviation.toString(), /standardDeviation\s*=\s*Math\.pow\(\s*variance\s*,\s*1\s*\/\s*2\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;
|
||||
})
|
||||
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;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
const getStandardDeviation = (array) => {
|
||||
const variance = getVariance(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);
|
||||
const mode = getMode(numbers);
|
||||
const range = getRange(numbers);
|
||||
const variance = 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;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,175 @@
|
||||
---
|
||||
id: 6353024f5eab012fa2f57eec
|
||||
title: Step 47
|
||||
challengeType: 0
|
||||
dashedName: step-47
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `Math` object has a `.sqrt()` method specifically for finding the square root of a number.
|
||||
|
||||
Change your `standardDeviation` variable to use this method instead of `Math.pow()`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `standardDeviation` variable should use `Math.sqrt()`.
|
||||
|
||||
```js
|
||||
assert.match(getStandardDeviation.toString(), /standardDeviation\s*=\s*Math\.sqrt\(\s*variance\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;
|
||||
})
|
||||
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;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
const getStandardDeviation = (array) => {
|
||||
const variance = getVariance(array);
|
||||
const standardDeviation = Math.pow(variance, 1/2);
|
||||
}
|
||||
--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);
|
||||
const mode = getMode(numbers);
|
||||
const range = getRange(numbers);
|
||||
const variance = getVariance(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;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,174 @@
|
||||
---
|
||||
id: 6353028147d3c7309017216a
|
||||
title: Step 48
|
||||
challengeType: 0
|
||||
dashedName: step-48
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Return your `standardDeviation` variable.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `getStandardDeviation` function should return the `standardDeviation` variable.
|
||||
|
||||
```js
|
||||
assert.match(getStandardDeviation.toString(), /return\s*standardDeviation;/);
|
||||
```
|
||||
|
||||
# --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;
|
||||
})
|
||||
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;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
const getStandardDeviation = (array) => {
|
||||
const variance = getVariance(array);
|
||||
const standardDeviation = Math.sqrt(variance);
|
||||
|
||||
}
|
||||
--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);
|
||||
const mode = getMode(numbers);
|
||||
const range = getRange(numbers);
|
||||
const variance = getVariance(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;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,182 @@
|
||||
---
|
||||
id: 635302be760d6031d11a06cd
|
||||
title: Step 49
|
||||
challengeType: 0
|
||||
dashedName: step-49
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now update the `calculate` function to include the standard deviation logic, like you did with your other functions.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `calculate` function should have a `standardDeviation` variable set to the result of `getStandardDeviation(numbers)`.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /standardDeviation\s*=\s*getStandardDeviation\(numbers\)/);
|
||||
```
|
||||
|
||||
You should update the `textContent` of the `#standardDeviation` element to be the `standardDeviation` variable.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /document\.querySelector\(('|")#standardDeviation\1\)\.textContent\s*=\s*standardDeviation/);
|
||||
```
|
||||
|
||||
# --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;
|
||||
})
|
||||
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));
|
||||
|
||||
--fcc-editable-region--
|
||||
const mean = getMean(numbers);
|
||||
const median = getMedian(numbers);
|
||||
const mode = getMode(numbers);
|
||||
const range = getRange(numbers);
|
||||
const variance = getVariance(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;
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,344 @@
|
||||
---
|
||||
id: 6374249d3fbf2a5b079ba036
|
||||
title: Step 50
|
||||
challengeType: 0
|
||||
dashedName: step-50
|
||||
---
|
||||
|
||||
# --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 argument, 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\(\)/);
|
||||
```
|
||||
|
||||
Your `.sort()` call should be chained to the `.slice()` call.
|
||||
|
||||
```js
|
||||
assert.match(getMedian.toString(), /array\.slice\(\)\.sort\(/);
|
||||
```
|
||||
|
||||
You should not modify the `.sort()` method callback.
|
||||
|
||||
```js
|
||||
assert.match(getMedian.toString(), /array\.slice\(\)\.sort\(function\s*\(\s*a\s*,\s*b\s*\)\s*\{\s*(return)?\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.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;
|
||||
})
|
||||
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;
|
||||
}
|
||||
```
|
||||
@@ -14,12 +14,12 @@ dashedName: selecting-from-many-options-with-switch-statements
|
||||
這是 `switch` 語句的示例：
|
||||
|
||||
```js
|
||||
switch (lowercaseLetter) {
|
||||
case "a":
|
||||
console.log("A");
|
||||
switch (fruit) {
|
||||
case "apple":
|
||||
console.log("The fruit is an apple");
|
||||
break;
|
||||
case "b":
|
||||
console.log("B");
|
||||
case "orange":
|
||||
console.log("The fruit is an orange");
|
||||
break;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -32,7 +32,7 @@ Create a person schema called `personSchema` with the following shape:
|
||||
|
||||
* A required `name` field of type `String`
|
||||
* An `age` field of type `Number`
|
||||
* A `favouriteFoods` field of type `[String]`
|
||||
* A `favoriteFoods` field of type `[String]`
|
||||
|
||||
採用 Mongoose 基礎 schema 類型。 你如果還想添加更多的鍵，就請使用 required 或 unique 等簡單的驗證器（validators），並設置默認值。 查看我們的 <a href="https://www.freecodecamp.org/news/introduction-to-mongoose-for-mongodb-d2a7aa593c57/" target="_blank" rel="noopener noreferrer nofollow">Mongoose 文章</a>。
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-41
|
||||
|
||||
# --description--
|
||||
|
||||
不要忘記給你的 `form` 添加一個提交按鈕。
|
||||
Do not forget to give your `form` a submit button with the text `Send`.
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -17,25 +17,25 @@ dashedName: step-41
|
||||
assert.exists(document.querySelector('button') || document.querySelector('main > input') || document.querySelector('form > input'));
|
||||
```
|
||||
|
||||
你應該將提交按鈕放在 `form` 元素中。
|
||||
You should place the submit button within the `form` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('form > button') || document.querySelector('form > input'));
|
||||
```
|
||||
|
||||
你應該將提交按鈕放在最後一個 `section` 元素之後。
|
||||
You should place the submit button after the last `section` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('section:last-of-type + button') || document.querySelector('section:last-of-type + input'));
|
||||
```
|
||||
|
||||
你應該給提交按鈕添加 `type` 爲 `submit`。
|
||||
You should give the submit button a `type` of `submit`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('button[type="submit"]') || document.querySelector('form > input[type="submit"]'));
|
||||
```
|
||||
|
||||
提交按鈕的文本應爲 `Send`。
|
||||
The submit button should display the text `Send`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('button[type="submit"]')?.textContent ?? document.querySelector('input[type="submit"]')?.value, 'Send');
|
||||
|
||||
@@ -32,13 +32,13 @@ assert(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background);
|
||||
assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background, 'linear-gradient');
|
||||
```
|
||||
|
||||
你應該給 `background` 一個以 `--building-color1` 開始的 `linear-gradient`。
|
||||
You should give the `background` a `linear-gradient` starting from `var(--building-color1)`.
|
||||
|
||||
```js
|
||||
assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background', true), 'linear-gradient(var(--building-color1');
|
||||
```
|
||||
|
||||
你應該給 `background` 一個以 `--window-color1` 結束的 `linear-gradient`。
|
||||
You should give the `background` a `linear-gradient` ending at `var(--window-color1)`.
|
||||
|
||||
```js
|
||||
assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background', true), 'linear-gradient(var(--building-color1),var(--window-color1))');
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-52
|
||||
|
||||
# --description--
|
||||
|
||||
創建一個選擇器來定位表格正文中的 `td` 元素。 給它們一個寬度以填充視口，最小值和最大值爲 `4rem`。 這種方法確保寬度是固定的，而專門設置 `width` 將允許元素收縮到容器中（因爲我們使用的是 flexbox）。
|
||||
創建一個選擇器來定位表格正文中的 `td` 元素。 給它們一個寬度以填充視口，最小值和最大值爲 `4rem`。 This approach ensures that the width is fixed, whereas setting `width` specifically would allow the elements to shrink to the container.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -0,0 +1,127 @@
|
||||
---
|
||||
id: 635060a5c03c950f46174cb5
|
||||
title: Step 1
|
||||
challengeType: 0
|
||||
dashedName: step-1
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Statistics is a way of using math to make sense of data. It helps us understand patterns and trends in information, so we can make predictions and decisions based on that information.
|
||||
|
||||
In this challenge, you will build a statistics calculator that takes a set of numbers and returns the mean, median, mode, standard deviation, and variance.
|
||||
|
||||
The HTML and CSS have been provided for you. Feel free to explore the code – you may notice that the `calculate` function is called when the form is submitted. When you are ready, declare a `calculate` variable and assign it an empty function in the `script.js` file.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `const` keyword to declare a variable `calculate`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s*calculate/);
|
||||
```
|
||||
|
||||
Your `calculate` variable should be a function.
|
||||
|
||||
```js
|
||||
assert.isFunction(calculate);
|
||||
```
|
||||
|
||||
Your `calculate` function should be empty.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /\{\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();">
|
||||
<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
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,133 @@
|
||||
---
|
||||
id: 63507b5ac8a55134223374c7
|
||||
title: Step 2
|
||||
challengeType: 0
|
||||
dashedName: step-2
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To begin, the `calculate` function needs to find the number that was entered in the `#numbers` input field. To do this, use a `.querySelector` to locate the input field and then use the `.value` property to get the number entered.
|
||||
|
||||
Store this in a `value` variable.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `calculate` function should have a `value` variable.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /value/);
|
||||
```
|
||||
|
||||
Your `calculate` function should call `document.querySelector()` with `#numbers` as the argument.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /document\.querySelector\(\s*("|')#numbers\1\s*\)/)
|
||||
```
|
||||
|
||||
You should access the `value` property of your `document.querySelector()` call.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /document\.querySelector\(\s*("|')#numbers\1\s*\)\.value/);
|
||||
```
|
||||
|
||||
You should assign the `value` property to your `value` variable.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /value\s*=\s*document\.querySelector\(\s*("|')#numbers\1\s*\)\.value/);
|
||||
```
|
||||
|
||||
# --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();">
|
||||
<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
|
||||
--fcc-editable-region--
|
||||
const calculate = () => {
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,129 @@
|
||||
---
|
||||
id: 63507bcbfe4ede356e624395
|
||||
title: Step 3
|
||||
challengeType: 0
|
||||
dashedName: step-3
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now that you have the value of the input, you need to split it into an array of numbers. Use the `.split()` method to do this.
|
||||
|
||||
The `.split()` method takes a string and splits it into an array of strings. You can pass it a string of characters or a RegEx to use as a separator. For example, `string.split(",")` would split the string at each comma and return an array of strings.
|
||||
|
||||
Use a regex to split the `value` string by commas followed by any number of spaces. Store the array in an `array` variable.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `calculate` function should have an `array` variable.
|
||||
|
||||
```js
|
||||
assert.match(code.toString(), /array/);
|
||||
```
|
||||
|
||||
Your `calculate` function should call the `.split()` method on the `value` variable.
|
||||
|
||||
```js
|
||||
assert.match(code.toString(), /value\.split()/);
|
||||
```
|
||||
|
||||
Your `calculate` function should assign the result of the `.split()` method to the `array` variable.
|
||||
|
||||
```js
|
||||
assert.match(code.toString(), /array\s*=\s*value\.split()/);
|
||||
```
|
||||
|
||||
# --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();">
|
||||
<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
|
||||
--fcc-editable-region--
|
||||
const calculate = () => {
|
||||
const value = document.querySelector("#numbers").value;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,128 @@
|
||||
---
|
||||
id: 63507c19151201368ee3e16c
|
||||
title: Step 4
|
||||
challengeType: 0
|
||||
dashedName: step-4
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The value of an input element is always a string, even if the input type is `number`. You need to convert this array of strings into an array of numbers. To do this, you can use the `.map()` method.
|
||||
|
||||
Create a `numbers` variable and assign it the value of `array.map()`. Remember that `.map()` creates a new array, instead of mutating the original array.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `calculate` function should have a `numbers` variable.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /numbers/);
|
||||
```
|
||||
|
||||
You should use the `.map()` method on your `array` variable.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /array\.map\(\)/);
|
||||
```
|
||||
|
||||
You should assign the result of your `.map()` call to your `numbers` variable.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /numbers\s*=\s*array.map()/);
|
||||
```
|
||||
|
||||
# --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();">
|
||||
<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
|
||||
--fcc-editable-region--
|
||||
const calculate = () => {
|
||||
const value = document.querySelector("#numbers").value;
|
||||
const array = value.split(/,\s*/g);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,143 @@
|
||||
---
|
||||
id: 63507c4b63731437227b0134
|
||||
title: Step 5
|
||||
challengeType: 0
|
||||
dashedName: step-5
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `.map()` method takes a callback function as its first argument. This callback function takes a few arguments, but the first one is the current element being processed. Here is an example:
|
||||
|
||||
```js
|
||||
array.map(el => {
|
||||
|
||||
})
|
||||
```
|
||||
|
||||
The callback function needs to return a value. In this case, you want to return the value of each element converted to a number. You can do this by using the `Number()` constructor, passing the element as an argument.
|
||||
|
||||
Add a callback function to your `.map()` method that converts each element to a number.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.map()` method should have a callback function which takes an `el` argument.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /array\.map\(\(?\s*el\s*\)?\s*=>|array\.map\(function\s*\(?el\)\s*\{/)
|
||||
```
|
||||
|
||||
Your callback function should use the `Number` constructor to convert `el` to a number.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /Number\(\s*el\s*\)/);
|
||||
```
|
||||
|
||||
Your callback function should not use the `new` keyword with the `Number` constructor.
|
||||
|
||||
```js
|
||||
assert.notMatch(calculate.toString(), /new/);
|
||||
```
|
||||
|
||||
Your callback function should return the element converted to a number.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /(array\.map\(\(?\s*el\s*\)?\s*=>|array\.map\(function\s*\(?el\)\s*\{)\s*(return\s*)?Number\(\s*el\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();">
|
||||
<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
|
||||
--fcc-editable-region--
|
||||
const calculate = () => {
|
||||
const value = document.querySelector("#numbers").value;
|
||||
const array = value.split(/,\s*/g);
|
||||
const numbers = array.map();
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,131 @@
|
||||
---
|
||||
id: 63507d810f1a2e38f1908fd8
|
||||
title: Step 6
|
||||
challengeType: 0
|
||||
dashedName: step-6
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
A user could put any text they want into the input box. You want to make sure that you are only working with numbers. The `Number()` constructor will return `NaN` (which stands for "not a number") if the value passed to it cannot be converted to a number.
|
||||
|
||||
You need to filter these values out – thankfully, arrays have a method specifically for this. The `.filter()` method will allow you to filter elements out of an array, creating a new array in the process.
|
||||
|
||||
Declare a `filtered` variable and assign `numbers.filter()` to it.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `calculate` function should have a `filtered` variable.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /filtered/);
|
||||
```
|
||||
|
||||
Your `calculate` function should use the `.filter()` method on the `numbers` array.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /numbers\.filter\(\)/)
|
||||
```
|
||||
|
||||
You should assign the result of `numbers.filter()` to the `filtered` variable.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /filtered\s*=\s*numbers.filter\(\)/);
|
||||
```
|
||||
|
||||
# --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();">
|
||||
<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
|
||||
--fcc-editable-region--
|
||||
const calculate = () => {
|
||||
const value = document.querySelector("#numbers").value;
|
||||
const array = value.split(/,\s*/g);
|
||||
const numbers = array.map(el => Number(el));
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,140 @@
|
||||
---
|
||||
id: 63507e4562cdde3a28e8de1b
|
||||
title: Step 7
|
||||
challengeType: 0
|
||||
dashedName: step-7
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Much like the `.map()` method, the `.filter()` method takes a callback function. The callback function takes the current element as its first argument.
|
||||
|
||||
```js
|
||||
array.filter(el => {
|
||||
|
||||
})
|
||||
```
|
||||
|
||||
The callback function needs to return a Boolean value, which indicates whether the element should be included in the new array. In this case, you want to return `true` if the element is not `NaN` (not a number).
|
||||
|
||||
However, you cannot check for equality here, because `NaN` is not equal to itself. Instead, you can use the `Number.isNaN()` method, which returns `true` if the argument is `NaN`.
|
||||
|
||||
Add a callback function to your `.filter()` method that returns `true` if the element is not `NaN`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.filter()` method should have a callback which accepts `el` as an argument.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /numbers\.filter\(\(?\s*el\s*\)?\s*=>|numbers\.filter\(function\s*\(?el\)\s*\{/)
|
||||
```
|
||||
|
||||
Your callback function should use `!` and `Number.isNaN()` to check if `el` is NOT `NaN`.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /!(Number\.)?isNaN\(\s*el\s*\)/);
|
||||
```
|
||||
|
||||
Your callback function should return elements that are not `NaN`.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /(numbers\.filter\(\(?\s*el\s*\)?\s*=>|numbers\.filter\(function\s*\(?el\)\s*\{)\s*(return\s*)?!(Number\.)?isNaN\(\s*el\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();">
|
||||
<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
|
||||
--fcc-editable-region--
|
||||
const calculate = () => {
|
||||
const value = document.querySelector("#numbers").value;
|
||||
const array = value.split(/,\s*/g);
|
||||
const numbers = array.map(el => Number(el));
|
||||
const filtered = numbers.filter();
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,143 @@
|
||||
---
|
||||
id: 63507ebb0c50ce3b9d669cd9
|
||||
title: Step 8
|
||||
challengeType: 0
|
||||
dashedName: step-8
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Array methods can often be chained together to perform multiple operations at once. As an example:
|
||||
|
||||
```js
|
||||
array.map().filter();
|
||||
```
|
||||
|
||||
The `.map()` method is called on the array, and then the `.filter()` method is called on the result of the `.map()` method. This is called method chaining.
|
||||
|
||||
Following that example, remove your `filtered` variable, and chain your `.filter()` call to your `.map()` call above. Do not remove either of the callback functions.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should remove the `filtered` variable.
|
||||
|
||||
```js
|
||||
assert.notMatch(calculate.toString(), /filtered/);
|
||||
```
|
||||
|
||||
You should chain your `.filter()` call to your `.map()` call.
|
||||
|
||||
```js
|
||||
console.log(calculate.toString());
|
||||
assert.match(calculate.toString(), /array\.map\(.*\)\.filter\(/s);
|
||||
```
|
||||
|
||||
You should not remove the `.map()` callback.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /(array\.map\(\(?\s*el\s*\)?\s*=>|array\.map\(function\s*\(?el\)\s*\{)\s*(return\s*)?Number\(\s*el\s*\)/);
|
||||
```
|
||||
|
||||
You should not remove the `.filter()` callback.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /(\.filter\(\(?\s*el\s*\)?\s*=>|\.filter\(function\s*\(?el\)\s*\{)\s*(return\s*)?!(Number\.)?isNaN\(\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();">
|
||||
<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
|
||||
--fcc-editable-region--
|
||||
const calculate = () => {
|
||||
const value = document.querySelector("#numbers").value;
|
||||
const array = value.split(/,\s*/g);
|
||||
const numbers = array.map(el => Number(el));
|
||||
const filtered = numbers.filter(el => !isNaN(el));
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,131 @@
|
||||
---
|
||||
id: 63507fc6cc29083cc44df2fb
|
||||
title: Step 9
|
||||
challengeType: 0
|
||||
dashedName: step-9
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
That is as far as you can get with the calculate function for now. It is time to write your mean logic.
|
||||
|
||||
Create an empty function called `getMean`. It should take a single parameter `array`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should declare a `getMean` function.
|
||||
|
||||
```js
|
||||
assert.isFunction(getMean);
|
||||
```
|
||||
|
||||
Your `getMean` function should take a single `array` argument.
|
||||
|
||||
```js
|
||||
assert.match(getMean.toString(), /\(\s*array\s*\)/);
|
||||
```
|
||||
|
||||
Your `getMean` function should be empty.
|
||||
|
||||
```js
|
||||
assert.match(getMean.toString(), /\{\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();">
|
||||
<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
|
||||
--fcc-editable-region--
|
||||
|
||||
--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));
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,133 @@
|
||||
---
|
||||
id: 6350805fe0fe283dd347b0dc
|
||||
title: Step 10
|
||||
challengeType: 0
|
||||
dashedName: step-10
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The <dfn>mean</dfn> is the average value of all numbers in a list. The first step in calculating the mean is to take the sum of all numbers in the list. Arrays have another method, called `.reduce()`, which is perfect for this situation. The `.reduce()` method takes an array and applies a callback function to condense the array into a single value.
|
||||
|
||||
Declare a `sum` variable and assign `array.reduce()` to it.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `getMean` function should have a `sum` variable.
|
||||
|
||||
```js
|
||||
assert.match(getMean.toString(), /sum/);
|
||||
```
|
||||
|
||||
Your `getMean` function should use the `.reduce()` method of the `array` argument.
|
||||
|
||||
```js
|
||||
assert.match(getMean.toString(), /array\.reduce\(\)/);
|
||||
```
|
||||
|
||||
You should assign the result of `array.reduce()` to the `sum` variable.
|
||||
|
||||
```js
|
||||
assert.match(getMean.toString(), /sum\s*=\s*array\.reduce\(\)/);
|
||||
```
|
||||
|
||||
# --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();">
|
||||
<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
|
||||
--fcc-editable-region--
|
||||
const getMean = (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));
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,133 @@
|
||||
---
|
||||
id: 635080d80b72803e973841da
|
||||
title: Step 11
|
||||
challengeType: 0
|
||||
dashedName: step-11
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Like the other methods, `.reduce()` takes a callback. This callback, however, takes at least two parameters. The first is the <dfn>accumulator</dfn>, and the second is the current element in the array. The return value for the callback becomes the value of the accumulator on the next iteration.
|
||||
|
||||
```js
|
||||
array.reduce((acc, el) => {
|
||||
|
||||
});
|
||||
```
|
||||
|
||||
For your `sum` variable, pass a callback to `.reduce()` that takes the accumulator and the current element as parameters. The callback should return the sum of the accumulator and the current element.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `reduce` method should have a callback function which takes an `acc` and an `el` argument.
|
||||
|
||||
```js
|
||||
assert.match(getMean.toString(), /(array\.reduce\(\(acc\s*,\s*el\s*\)\s*=>|array\.reduce\(function\s*\(acc\s*,\s*el\)\s*\{)/)
|
||||
```
|
||||
|
||||
Your `reduce` method should return the sum of `acc` and `el`.
|
||||
|
||||
```js
|
||||
assert.match(getMean.toString(), /(array\.reduce\(\(acc\s*,\s*el\s*\)\s*=>|array\.reduce\(function\s*\(acc\s*,\s*el\)\s*\{)\s*(return)?\s*acc\s*\+\s*el/)
|
||||
```
|
||||
|
||||
# --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();">
|
||||
<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
|
||||
--fcc-editable-region--
|
||||
const getMean = (array) => {
|
||||
const sum = array.reduce();
|
||||
}
|
||||
--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));
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,127 @@
|
||||
---
|
||||
id: 6350854411ffb73feb6bb84e
|
||||
title: Step 12
|
||||
challengeType: 0
|
||||
dashedName: step-12
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `.reduce()` method takes a second parameter that is used as the initial value of the accumulator. Without a second parameter, the `.reduce()` method uses the first element of the array as the accumulator, which can lead to unexpected results.
|
||||
|
||||
To be safe, it's best to set an initial value. Here is an example of setting the initial value to an empty string:
|
||||
|
||||
```js
|
||||
array.reduce((acc, el) => acc + el.toLowerCase(), "");
|
||||
```
|
||||
|
||||
Set the initial value of the accumulator to `0`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `reduce` method should have `0` as the initial value.
|
||||
|
||||
```js
|
||||
assert.match(getMean.toString(), /(array\.reduce\(\(acc\s*,\s*el\s*\)\s*=>|array\.reduce\(function\s*\(acc\s*,\s*el\)\s*\{)\s*(return)?\s*acc\s*\+\s*el;\s*\}?\s*,\s*0\)/)
|
||||
```
|
||||
|
||||
# --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();">
|
||||
<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
|
||||
--fcc-editable-region--
|
||||
const getMean = (array) => {
|
||||
const sum = array.reduce((acc, el) => acc + el);
|
||||
}
|
||||
--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));
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,127 @@
|
||||
---
|
||||
id: 63508577f69f41409275f877
|
||||
title: Step 13
|
||||
challengeType: 0
|
||||
dashedName: step-13
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The next step in calculating the mean is to divide the sum of numbers by the count of numbers in the list.
|
||||
|
||||
Declare a `mean` variable and assign it the value of `sum` divided by the length of `array`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `getMean` function should have a `mean` variable.
|
||||
|
||||
```js
|
||||
assert.match(getMean.toString(), /mean\s*=/);
|
||||
```
|
||||
|
||||
You should assign the value of `sum` divided by `array.length` to the `mean` variable.
|
||||
|
||||
```js
|
||||
assert.match(getMean.toString(), /mean\s*=\s*sum\s*\/\s*array\.length/);
|
||||
```
|
||||
|
||||
# --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();">
|
||||
<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
|
||||
--fcc-editable-region--
|
||||
const getMean = (array) => {
|
||||
const sum = array.reduce((acc, el) => acc + el, 0);
|
||||
}
|
||||
--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));
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,126 @@
|
||||
---
|
||||
id: 635085da54fc2041e0303e75
|
||||
title: Step 14
|
||||
challengeType: 0
|
||||
dashedName: step-14
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Finally, you need to return the value of `mean`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `getMean` function should use the `return` keyword.
|
||||
|
||||
```js
|
||||
assert.match(getMean.toString(), /return/);
|
||||
```
|
||||
|
||||
Your `getMean` function should return the value of `mean`.
|
||||
|
||||
```js
|
||||
assert.match(getMean.toString(), /return\s*mean\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();">
|
||||
<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
|
||||
--fcc-editable-region--
|
||||
const getMean = (array) => {
|
||||
const sum = array.reduce((acc, el) => acc + el, 0);
|
||||
const mean = sum / array.length;
|
||||
}
|
||||
--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));
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,147 @@
|
||||
---
|
||||
id: 635085f80bd9b5429faa40c4
|
||||
title: Step 15
|
||||
challengeType: 0
|
||||
dashedName: step-15
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You can actually clean this logic up a bit. Using the implicit return of an arrow function, you can directly return the value of the `.reduce()` method divided by the length of the array, without having to assign any variables.
|
||||
|
||||
Update your `getMean` function as described above.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should remove the `sum` variable declaration.
|
||||
|
||||
```js
|
||||
assert.notMatch(getMean.toString(), /sum\s*=/);
|
||||
```
|
||||
|
||||
You should remove the `mean` variable declaration.
|
||||
|
||||
```js
|
||||
assert.notMatch(getMean.toString(), /mean\s*=/);
|
||||
```
|
||||
|
||||
You should not change the logic within the `reduce` method.
|
||||
|
||||
```js
|
||||
assert.match(getMean.toString(), /(array\.reduce\(\(acc\s*,\s*el\s*\)\s*=>|array\.reduce\(function\s*\(acc\s*,\s*el\)\s*\{)\s*(return)?\s*acc\s*\+\s*el;\s*\}?\s*,\s*0\)/)
|
||||
```
|
||||
|
||||
You should divide the result of the `reduce` method by the length of the array.
|
||||
|
||||
```js
|
||||
assert.match(getMean.toString(), /(array\.reduce\(\(acc\s*,\s*el\s*\)\s*=>|array\.reduce\(function\s*\(acc\s*,\s*el\)\s*\{)\s*(return)?\s*acc\s*\+\s*el;\s*\}?\s*,\s*0\)\s*\/\s*array\.length/)
|
||||
```
|
||||
|
||||
You should use implicit return syntax to directly return the result of `reduce` divided by the array length.
|
||||
|
||||
```js
|
||||
assert.match(code, /const\s+getMean\s*=\s*\(?array\)?\s*=>\s*array\.reduce\(\(acc\s*,\s*el\)\s*=>\s*acc\s*\+\s*el\s*,\s*0\s*\)\s*\/\s*array\.length/)
|
||||
```
|
||||
|
||||
# --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();">
|
||||
<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
|
||||
--fcc-editable-region--
|
||||
const getMean = (array) => {
|
||||
const sum = array.reduce((acc, el) => acc + el, 0);
|
||||
const mean = sum / array.length;
|
||||
return mean;
|
||||
}
|
||||
--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));
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,125 @@
|
||||
---
|
||||
id: 6350866cce4c6d43bdf607c8
|
||||
title: Step 16
|
||||
challengeType: 0
|
||||
dashedName: step-16
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now you need to use your new `getMean` function. In your `calculate` function, declare a `mean` variable and assign it the value of `getMean(numbers)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `calculate` function should have a `mean` variable.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /mean\s*=/);
|
||||
```
|
||||
|
||||
Your `mean` variable should be assigned the value of `getMean(numbers)`.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /mean\s*=\s*getMean\(\s*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();">
|
||||
<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 calculate = () => {
|
||||
const value = document.querySelector("#numbers").value;
|
||||
const array = value.split(/,\s*/g);
|
||||
const numbers = array.map(el => Number(el)).filter(el => !isNaN(el));
|
||||
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,135 @@
|
||||
---
|
||||
id: 63508750f040a348a440a0bf
|
||||
title: Step 17
|
||||
challengeType: 0
|
||||
dashedName: step-17
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To display the value of `mean`, your app has a `#mean` element ready to go.
|
||||
|
||||
Use a `.querySelector` to find that element, and then set its `.textContent` to the value of `mean`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `calculate` function should use a `document.querySelector()`.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /document\.querySelector\(/);
|
||||
```
|
||||
|
||||
Your `.querySelector()` should target the `#mean` element.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /document\.querySelector\(\s*('|")#mean\1\s*\)/);
|
||||
```
|
||||
|
||||
Your `calculate` function should set the `#mean` element's `.textContent` to the value of `mean`.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /document\.querySelector\(\s*('|")#mean\1\s*\)\s*\.textContent\s*=\s*mean;/);
|
||||
```
|
||||
|
||||
# --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();">
|
||||
<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 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);
|
||||
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,134 @@
|
||||
---
|
||||
id: 635089e3bd3e144f2db4094f
|
||||
title: Step 18
|
||||
challengeType: 0
|
||||
dashedName: step-18
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
If you test your form with a list of numbers, you should see the mean display on the page. However, this only works because freeCodeCamp's iframe has special settings. Normally, when a form is submitted, the event triggers a page refresh.
|
||||
|
||||
To resolve this, add `return false;` after your `calculate();` call in the `onsubmit` attribute.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `onsubmit` attribute should have a `return false;` statement.
|
||||
|
||||
```js
|
||||
assert.match(document.querySelector("form").getAttribute("onsubmit"), /return\s+false;/);
|
||||
```
|
||||
|
||||
Your `onsubmit` attribute should still call `calculate()`.
|
||||
|
||||
```js
|
||||
assert.match(document.querySelector("form").getAttribute("onsubmit"), /calculate\(\s*\)/);
|
||||
```
|
||||
|
||||
You should return `false` after you call `calculate()`.
|
||||
|
||||
```js
|
||||
assert.match(document.querySelector("form").getAttribute("onsubmit"), /calculate\(\s*\);\s*return\s+false;/);
|
||||
```
|
||||
|
||||
# --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>
|
||||
--fcc-editable-region--
|
||||
<form onsubmit="calculate();">
|
||||
--fcc-editable-region--
|
||||
<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 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;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,136 @@
|
||||
---
|
||||
id: 63508abbff1c4c5210d68cc5
|
||||
title: Step 19
|
||||
challengeType: 0
|
||||
dashedName: step-19
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Time to start working on the <dfn>median</dfn> calculation. The median is the midpoint of a set of numbers.
|
||||
|
||||
Begin with an empty function called `getMedian`, which should take an `array` parameter.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should define a `getMedian` function.
|
||||
|
||||
```js
|
||||
assert.isFunction(getMedian);
|
||||
```
|
||||
|
||||
Your `getMedian` function should take an `array` parameter.
|
||||
|
||||
```js
|
||||
assert.match(getMedian.toString(), /\(\s*array\s*\)/);
|
||||
```
|
||||
|
||||
Your `getMedian` function should be empty.
|
||||
|
||||
```js
|
||||
assert.match(getMedian.toString(), /\(\s*array\s*\)\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;
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--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);
|
||||
|
||||
document.querySelector("#mean").textContent = mean;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,132 @@
|
||||
---
|
||||
id: 63508bb4afb069534e81f33b
|
||||
title: Step 20
|
||||
challengeType: 0
|
||||
dashedName: step-20
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The first step in calculating the median is to ensure the list of numbers is sorted from least to greatest. Once again, there is an array method ideal for this – the `.sort()` method.
|
||||
|
||||
Declare a `sorted` variable and assign `array.sort()` to it.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `getMedian` function should have a `sorted` variable.
|
||||
|
||||
```js
|
||||
assert.match(getMedian.toString(), /sorted\s*=/);
|
||||
```
|
||||
|
||||
Your `getMedian` function should assign `array.sort()` to the `sorted` variable.
|
||||
|
||||
```js
|
||||
assert.match(getMedian.toString(), /sorted\s*=\s*array\.sort\(\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 getMedian = (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);
|
||||
|
||||
document.querySelector("#mean").textContent = mean;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,134 @@
|
||||
---
|
||||
id: 63508c898d753754757bd5e3
|
||||
title: Step 21
|
||||
challengeType: 0
|
||||
dashedName: step-21
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
By default, the `.sort()` method converts the elements of an array into strings, then sorts them alphabetically. This works well for strings, but not so well for numbers. For example, `10` comes before `2` when sorted as strings, but `2` comes before `10` when sorted as numbers.
|
||||
|
||||
To fix this, you can pass in a callback function to the `.sort()` method. This function takes two parameters, which represent the two elements being compared. The function should return a value less than `0` if the first element should come before the second element, a value greater than `0` if the first element should come after the second element, and `0` if the two elements should remain in their current positions.
|
||||
|
||||
To sort your numbers from smallest to largest, pass a callback function that takes parameters `a` and `b`, and returns the result of subtracting `b` from `a`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `sort` method should have a callback function which takes an `a` and a `b` argument.
|
||||
|
||||
```js
|
||||
assert.match(getMedian.toString(), /(array\.sort\(\(\s*a\s*,\s*b\s*\)\s*=>|array\.sort\(function\s*\(\s*a\s*,\s*b\)\s*\{)/)
|
||||
```
|
||||
|
||||
Your `sort` method should return the result of subtracting `b` from `a`.
|
||||
|
||||
```js
|
||||
assert.match(getMedian.toString(), /(array\.sort\(\(\s*a\s*,\s*b\s*\)\s*=>|array\.sort\(function\s*\(\s*a\s*,\s*b\)\s*\{)\s*(return)?\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.sort();
|
||||
}
|
||||
--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);
|
||||
|
||||
document.querySelector("#mean").textContent = mean;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,150 @@
|
||||
---
|
||||
id: 635090f47eb6d9563a6fed05
|
||||
title: Step 22
|
||||
challengeType: 0
|
||||
dashedName: step-22
|
||||
---
|
||||
|
||||
# --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.
|
||||
|
||||
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:
|
||||
|
||||
```js
|
||||
array.length % 2 === 0;
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `getMedian` function should have a `median` variable.
|
||||
|
||||
```js
|
||||
assert.match(getMedian.toString(), /median\s*=/);
|
||||
```
|
||||
|
||||
Your `median` variable should use a ternary operator to check if the `array.length` is even.
|
||||
|
||||
```js
|
||||
assert.match(getMedian.toString(), /median\s*=\s*array\.length\s*%\s*2\s*===\s*0\s*\?/);
|
||||
```
|
||||
|
||||
If the `array.length` is even, your `median` variable should use the `getMean` function to calculate the mean of the two middle numbers. Your first argument should be the value of `sorted` at `array.length / 2`, and the second at `array.length / 2 - 1`.
|
||||
|
||||
```js
|
||||
assert.match(getMedian.toString(), /median\s*=\s*array\.length\s*%\s*2\s*===\s*0\s*\?\s*getMean\(\s*\[sorted\[array\.length\s*\/\s*2\]\s*,\s*sorted\[\s*array\.length\s*\/\s*2\s*-\s*1\]\]\)\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*\[sorted\[array\.length\s*\/\s*2\]\s*,\s*sorted\[\s*array\.length\s*\/\s*2\s*-\s*1\]\]\)\s*\:\s*sorted\[\s*Math\.floor\(\s*array\.length\s*\/\s*2\)\];/);
|
||||
```
|
||||
|
||||
# --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.sort((a, b) => a - b);
|
||||
}
|
||||
--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);
|
||||
|
||||
document.querySelector("#mean").textContent = mean;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,130 @@
|
||||
---
|
||||
id: 635091f8dbf554575fb5aa0c
|
||||
title: Step 23
|
||||
challengeType: 0
|
||||
dashedName: step-23
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Finally, return the value of `median`.
|
||||
|
||||
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.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `getMedian` function should return the value of `median`.
|
||||
|
||||
```js
|
||||
assert.match(getMedian.toString(), /return\s+median;/);
|
||||
```
|
||||
|
||||
# --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.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;
|
||||
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;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,145 @@
|
||||
---
|
||||
id: 6352e79d15aae30fac58f48e
|
||||
title: Step 24
|
||||
challengeType: 0
|
||||
dashedName: step-24
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Like you did with your `getMean` function, you need to add your `getMedian` function to your `calculate` logic.
|
||||
|
||||
Declare a variable `median` and assign it the value of `getMedian(numbers)`. Then, query the DOM for the `#median` element and set the `textContent` to `median`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `calculate` function should have a `median` variable.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /median\s*=/);
|
||||
```
|
||||
|
||||
Your `median` variable should be assigned the value of `getMedian(numbers)`.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /median\s*=\s*getMedian\(numbers\)/);
|
||||
```
|
||||
|
||||
Your `calculate` function should query the DOM for the `#median` element and set the `textContent` to `median`.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /document\.querySelector\(('|")#median\1\)\.textContent\s*=\s*median/);
|
||||
```
|
||||
|
||||
# --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 calculate = () => {
|
||||
const value = document.querySelector("#numbers").value;
|
||||
const array = value.split(/,\s*/g);
|
||||
const numbers = array.map(el => Number(el)).filter(el => !isNaN(el));
|
||||
|
||||
--fcc-editable-region--
|
||||
const mean = getMean(numbers);
|
||||
|
||||
|
||||
document.querySelector("#mean").textContent = mean;
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,146 @@
|
||||
---
|
||||
id: 6352e80e024e89111600edfb
|
||||
title: Step 25
|
||||
challengeType: 0
|
||||
dashedName: step-25
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Your next calculation is the <dfn>mode</dfn>, which is the number that appears most often in the list. To get started, declare a `getMode` function that takes the same `array` parameter you have been using.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should declare a `getMode` function.
|
||||
|
||||
```js
|
||||
assert.isFunction(getMode);
|
||||
```
|
||||
|
||||
Your `getMode` function should take a parameter named `array`.
|
||||
|
||||
```js
|
||||
assert.match(getMode.toString(), /\(\s*array\s*\)/);
|
||||
```
|
||||
|
||||
Your `getMode` function should be empty.
|
||||
|
||||
```js
|
||||
assert.match(getMode.toString(), /\(\s*array\s*\)\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--
|
||||
|
||||
--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;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,142 @@
|
||||
---
|
||||
id: 6352e93db104661305c5f658
|
||||
title: Step 26
|
||||
challengeType: 0
|
||||
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.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `getMode` function should have a `counts` variable.
|
||||
|
||||
```js
|
||||
assert.match(getMode.toString(), /counts\s*=/);
|
||||
```
|
||||
|
||||
Your `counts` variable should be an empty object.
|
||||
|
||||
```js
|
||||
assert.match(getMode.toString(), /counts\s*=\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) => {
|
||||
|
||||
}
|
||||
--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;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,152 @@
|
||||
---
|
||||
id: 6352e96d2604f813c656750b
|
||||
title: Step 27
|
||||
challengeType: 0
|
||||
dashedName: step-27
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Remember that the `.forEach()` method allows you to run a callback function for each element in the array.
|
||||
|
||||
Use the `.forEach()` method to loop through the `array`. In the callback, use the `el` argument to access the `counts` object and increment the count for each number.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `getMode` function should use the `.forEach()` method.
|
||||
|
||||
```js
|
||||
assert.match(getMode.toString(), /array\.forEach\(/);
|
||||
```
|
||||
|
||||
Your `.forEach()` method should have a callback function which takes an `el` argument.
|
||||
|
||||
```js
|
||||
console.log(getMode.toString());
|
||||
assert.match(getMode.toString(), /(array\.forEach\(\(?\s*el\s*\)?\s*=>|array\.forEach\(function\s*\(?el\)?\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*el\s*\)?\s*=>|array\.forEach\(function\s*\(?el\)?\s*\{)\s*\{?\s*(return)?\s*counts\[\s*el\s*\]\s*=\s*\(\s*counts\[\s*el\s*\]\s*\|\|\s*0\s*\)\s*\+\s*1\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 = {};
|
||||
|
||||
}
|
||||
--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;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,162 @@
|
||||
---
|
||||
id: 6352ea3a5b79e614ee2282fd
|
||||
title: Step 28
|
||||
challengeType: 0
|
||||
dashedName: step-28
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
There are a few edge cases to account for when calculating the mode of a dataset. First, if every value appears the same number of times, there is no mode.
|
||||
|
||||
To calculate this, you will use a `Set`. A `Set` is a data structure that only allows unique values. If you pass an array into the `Set` constructor, it will remove any duplicate values.
|
||||
|
||||
Start by creating an `if` statement. In the condition, create a `Set` with `new Set()` and pass it the `Object.values()` of your `counts` object. If the `size` property of this `Set` is equal to `1`, that tells you every value appears the same number of times. In this case, return `null` from your function.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `getMode` function should have an `if` statement.
|
||||
|
||||
```js
|
||||
assert.match(getMode.toString(), /if\s*\(/);
|
||||
```
|
||||
|
||||
Your `if` statement should create a new `Set` and pass the `Object.values()` of your `counts` object.
|
||||
|
||||
```js
|
||||
assert.match(getMode.toString(), /if\s*\(\s*new\s+Set\s*\(\s*Object\.values\s*\(\s*counts\s*\)/);
|
||||
```
|
||||
|
||||
Your `if` statement should check if the `size` property of the new `Set` is equal to `1`.
|
||||
|
||||
```js
|
||||
assert.match(getMode.toString(), /if\s*\(\s*new\s+Set\s*\(\s*Object\.values\s*\(\s*counts\s*\)\s*\)\s*\.size\s*===\s*1/);
|
||||
```
|
||||
|
||||
Your `if` statement should return `null` if the `size` property of the new `Set` is equal to `1`.
|
||||
|
||||
```js
|
||||
assert.match(getMode.toString(), /if\s*\(\s*new\s+Set\s*\(\s*Object\.values\s*\(\s*counts\s*\)\s*\)\.size\s*===\s*1\s*\)\s*\{?\s*return\s+null;\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;
|
||||
})
|
||||
|
||||
}
|
||||
--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;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,156 @@
|
||||
---
|
||||
id: 6352ebd3ab962c168a122e85
|
||||
title: Step 29
|
||||
challengeType: 0
|
||||
dashedName: step-29
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now you need to find the value that occurs with the highest frequency. You'll use the `Object.keys()` method for this.
|
||||
|
||||
Start by declaring a `highest` variable, and assigning it the value of the `counts` object's `Object.keys()` method.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `getMode` function should have a `highest` variable.
|
||||
|
||||
```js
|
||||
assert.match(getMode.toString(), /highest\s*=/);
|
||||
```
|
||||
|
||||
Your `getMode` function should use the `Object.keys()` method to get the keys of the `counts` object.
|
||||
|
||||
```js
|
||||
assert.match(getMode.toString(), /Object\.keys\(\s*counts\s*\)/);
|
||||
```
|
||||
|
||||
Your `getMode` function should use the `Object.keys()` method to get the keys of the `counts` object and assign them to the `highest` variable.
|
||||
|
||||
```js
|
||||
assert.match(getMode.toString(), /highest\s*=\s*Object\.keys\(\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;
|
||||
})
|
||||
if (new Set(Object.values(counts)).size === 1) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
--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;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,165 @@
|
||||
---
|
||||
id: 6352ec8b9c70fd17b8c7ba3f
|
||||
title: Step 30
|
||||
challengeType: 0
|
||||
dashedName: step-30
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now you need to sort the values properly. Chain the `.sort()` method to your `Object.keys()` call.
|
||||
|
||||
For the callback, you'll need to use the `counts` object to compare the values of each key. You can use the `a` and `b` parameters to access the keys. Then, return the value of `counts[b]` minus the value of `counts[a]`.
|
||||
|
||||
Finally, access the first element in the array using bracket notation to complete your `highest` variable.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `getMode` function should use the `sort` method to sort the `Object.keys()` array.
|
||||
|
||||
```js
|
||||
assert.match(getMode.toString(), /highest\s*=\s*Object\.keys\(\s*counts\s*\)\.sort\(/)
|
||||
```
|
||||
|
||||
Your `getMode` function should pass a callback to the `sort` method with parameters `a` and `b`.
|
||||
|
||||
```js
|
||||
assert.match(getMode.toString(), /highest\s*=\s*Object\.keys\(\s*counts\s*\)\.sort\(function\s*\(\s*a\s*,\s*b\s*\)/)
|
||||
```
|
||||
|
||||
Your `getMode` function should use the `sort` method to sort the `Object.keys()` array and return the value of `counts[b]` minus the value of `counts[a]`.
|
||||
|
||||
```js
|
||||
assert.match(getMode.toString(), /highest\s*=\s*Object\.keys\(\s*counts\s*\)\.sort\(\s*function\s*\(\s*a\s*,\s*b\s*\)\s*\{\s*return\s*counts\[\s*b\s*\]\s*-\s*counts\[\s*a\s*\];?\s*\}\s*\)/)
|
||||
```
|
||||
|
||||
Your `highest` variable should have the value of the first entry in the sorted `Object.keys(counts)` array.
|
||||
|
||||
```js
|
||||
assert.match(getMode.toString(), /highest\s*=\s*Object\.keys\(\s*counts\s*\)\.sort\(\s*function\s*\(\s*a\s*,\s*b\s*\)\s*\{\s*return\s*counts\[\s*b\s*\]\s*-\s*counts\[\s*a\s*\];?\s*\}\s*\)\[0\];/)
|
||||
```
|
||||
|
||||
# --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;
|
||||
})
|
||||
if (new Set(Object.values(counts)).size === 1) {
|
||||
return null;
|
||||
}
|
||||
const highest = Object.keys(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;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,154 @@
|
||||
---
|
||||
id: 6352ecef9f045519063da9b3
|
||||
title: Step 31
|
||||
challengeType: 0
|
||||
dashedName: step-31
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
If multiple numbers in a series occur at the same highest frequency, they are all considered the mode. Otherwise, the mode is the number that occurs most often, that single number is the mode.
|
||||
|
||||
Thankfully, you can handle both of these cases at once with the `.filter()` method. Start by declaring a `mode` variable and assigning it the value of `Object.keys(counts)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `getMode` function should have a `mode` variable.
|
||||
|
||||
```js
|
||||
assert.match(getMode.toString(), /mode\s*=/);
|
||||
```
|
||||
|
||||
Your `getMode` function should use the `Object.keys()` method to get the keys of the `counts` object and assign them to the `mode` variable.
|
||||
|
||||
```js
|
||||
assert.match(getMode.toString(), /mode\s*=\s*Object\.keys\(\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;
|
||||
})
|
||||
if (new Set(Object.values(counts)).size === 1) {
|
||||
return null;
|
||||
}
|
||||
const highest = Object.keys(counts).sort(
|
||||
(a, b) => counts[b] - counts[a]
|
||||
)[0];
|
||||
|
||||
}
|
||||
--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;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,158 @@
|
||||
---
|
||||
id: 6352edee8a4de01ad693f0e4
|
||||
title: Step 32
|
||||
challengeType: 0
|
||||
dashedName: step-32
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now chain the filter method to your latest `Object.keys()` call. The callback function should return whether the value of `counts[el]` is equal to your `counts[highest]`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should chain `.filter()` to your last `Object.keys()` call.
|
||||
|
||||
```js
|
||||
assert.match(getMode.toString(), /mode\s*=\s*Object\.keys\(\s*counts\s*\)\.filter\(/);
|
||||
```
|
||||
|
||||
Your `.filter()` method should take a callback function with a parameter `el`.
|
||||
|
||||
```js
|
||||
assert.match(getMode.toString(), /mode\s*=\s*Object\.keys\(\s*counts\s*\)\.filter\(function\s*\(\s*el\s*\)/);
|
||||
```
|
||||
|
||||
Your `.filter()` method should return whether the value of `counts[el]` is equal to `counts[highest]`.
|
||||
|
||||
```js
|
||||
assert.match(getMode.toString(), /mode\s*=\s*Object\.keys\(\s*counts\s*\)\.filter\(function\s*\(\s*el\s*\)\s*\{\s*return\s*counts\[\s*el\s*\]\s*===\s*counts\[\s*highest\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 = {};
|
||||
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);
|
||||
}
|
||||
--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;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,163 @@
|
||||
---
|
||||
id: 6352ee566a59d31d24bde74b
|
||||
title: Step 33
|
||||
challengeType: 0
|
||||
dashedName: step-33
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Time to return your `mode` variable.
|
||||
|
||||
`mode` is an array, so return it as a string with the `.join()` method. Separate the elements with a comma followed by a space.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `getMode` function should return the `mode` variable.
|
||||
|
||||
```js
|
||||
assert.match(getMode.toString(), /return\s*mode\s*/)
|
||||
```
|
||||
|
||||
Your `mode` variable should be returned as a string with the `join` method.
|
||||
|
||||
```js
|
||||
assert.match(getMode.toString(), /return\s*mode\.join\(/)
|
||||
```
|
||||
|
||||
You should separate the elements of the `mode` array with a comma and a space.
|
||||
|
||||
```js
|
||||
assert.match(getMode.toString(), /return\s*mode\.join\(\s*('|"),\s\1\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;
|
||||
})
|
||||
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]
|
||||
);
|
||||
|
||||
}
|
||||
--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;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,157 @@
|
||||
---
|
||||
id: 6352f09b1e53a420e7873344
|
||||
title: Step 34
|
||||
challengeType: 0
|
||||
dashedName: step-34
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add your `getMode()` function to your `calculate` logic, and update the respective HTML element.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `calculate` function should have a `mode` variable with the value of `getMode(numbers)`.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /mode\s*=\s*getMode\(\s*numbers\s*\);/);
|
||||
```
|
||||
|
||||
Your `calculate` function should query the DOM for the `#mode` element and set the `textContent` to `mode`.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /document\.querySelector\(('|")#mode\1\)\.textContent\s*=\s*mode;/);
|
||||
```
|
||||
|
||||
# --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;
|
||||
})
|
||||
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 calculate = () => {
|
||||
const value = document.querySelector("#numbers").value;
|
||||
const array = value.split(/,\s*/g);
|
||||
const numbers = array.map(el => Number(el)).filter(el => !isNaN(el));
|
||||
|
||||
--fcc-editable-region--
|
||||
const mean = getMean(numbers);
|
||||
const median = getMedian(numbers);
|
||||
|
||||
|
||||
document.querySelector("#mean").textContent = mean;
|
||||
document.querySelector("#median").textContent = median;
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,191 @@
|
||||
---
|
||||
id: 6352f179bdca23221298a5ba
|
||||
title: Step 35
|
||||
challengeType: 0
|
||||
dashedName: step-35
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Your next calculation is the <dfn>range</dfn>, which is the difference between the largest and smallest numbers in the list.
|
||||
|
||||
You previously learned about the global `Math` object. `Math` has a `.min()` method to get the smallest number from a series of numbers, and the `.max()` method to get the largest number. Here's an example that gets the smallest number from an array:
|
||||
|
||||
```js
|
||||
Math.min(1, 9, 11, -3, 0.5);
|
||||
```
|
||||
|
||||
Declare a `getRange` function that takes the same `array` parameter you have been using. Using `Math.min()`, `Math.max()`, and the spread operator, return the difference between the largest and smallest numbers in the list.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should define a `getRange` function.
|
||||
|
||||
```js
|
||||
assert.isFunction(getRange);
|
||||
```
|
||||
|
||||
Your `getRange` function should take an `array` parameter.
|
||||
|
||||
```js
|
||||
assert.match(getRange.toString(), /array/);
|
||||
```
|
||||
|
||||
Your `getRange` function should use the spread operator on the `array` parameter.
|
||||
|
||||
```js
|
||||
assert.match(code.split("getRange")[1], /\.\.\.array/);
|
||||
```
|
||||
|
||||
Your `getRange` function should use `Math.max` on the spread `array` parameter.
|
||||
|
||||
```js
|
||||
assert.match(code.split("getRange")[1], /Math\.max\(\s*\.\.\.array\s*\)/);
|
||||
```
|
||||
|
||||
Your `getRange` function should use `Math.min` on the spread `array` parameter.
|
||||
|
||||
```js
|
||||
assert.match(code.split("getRange")[1], /Math\.min\(\s*\.\.\.array\s*\)/);
|
||||
```
|
||||
|
||||
Your `getRange` function should return the difference between the largest and smallest numbers in the list.
|
||||
|
||||
```js
|
||||
assert.equal(getRange([1, 2, 3, 4, 5]), 4);
|
||||
assert.equal(getRange([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]), 9);
|
||||
```
|
||||
|
||||
# --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;
|
||||
})
|
||||
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(", ");
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--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);
|
||||
const mode = getMode(numbers);
|
||||
|
||||
document.querySelector("#mean").textContent = mean;
|
||||
document.querySelector("#median").textContent = median;
|
||||
document.querySelector("#mode").textContent = mode;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,162 @@
|
||||
---
|
||||
id: 6352f2526dccb523150b64fb
|
||||
title: Step 36
|
||||
challengeType: 0
|
||||
dashedName: step-36
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add the logic for calculating and displaying the range to your `calculate` function.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `calculate` function should set a `range` variable to the result of `getRange(numbers)`.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /range\s*=\s*getRange\(numbers\);/);
|
||||
```
|
||||
|
||||
Your `calculate` function should set the `#range` element's `textContent` to the `range` variable.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /document\.querySelector\(('|")#range\1\)\.textContent\s*=\s*range;/);
|
||||
```
|
||||
|
||||
# --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;
|
||||
})
|
||||
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 calculate = () => {
|
||||
const value = document.querySelector("#numbers").value;
|
||||
const array = value.split(/,\s*/g);
|
||||
const numbers = array.map(el => Number(el)).filter(el => !isNaN(el));
|
||||
|
||||
--fcc-editable-region--
|
||||
const mean = getMean(numbers);
|
||||
const median = getMedian(numbers);
|
||||
const mode = getMode(numbers);
|
||||
|
||||
|
||||
document.querySelector("#mean").textContent = mean;
|
||||
document.querySelector("#median").textContent = median;
|
||||
document.querySelector("#mode").textContent = mode;
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,178 @@
|
||||
---
|
||||
id: 6352f2a24eb71b24284ca2b6
|
||||
title: Step 37
|
||||
challengeType: 0
|
||||
dashedName: step-37
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The <dfn>variance</dfn> of a series represents how much the data deviates from the mean, and can be used to determine how spread out the data are. The variance is calculated in a few steps.
|
||||
|
||||
Start by declaring a `getVariance` function that takes an `array` parameter. Within that function, declare a `mean` variable and assign it the value of the `getMean` function, passing `array` as the argument.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should define a `getVariance` function.
|
||||
|
||||
```js
|
||||
assert.isFunction(getVariance);
|
||||
```
|
||||
|
||||
Your `getVariance` function should take an `array` parameter.
|
||||
|
||||
```js
|
||||
assert.match(getVariance.toString(), /array/);
|
||||
```
|
||||
|
||||
Your `getVariance` function should declare a `mean` variable.
|
||||
|
||||
```js
|
||||
assert.match(getVariance.toString(), /mean\s*=/);
|
||||
```
|
||||
|
||||
Your `mean` variable should be assigned the value of the `getMean` function, passing the `array` argument.
|
||||
|
||||
```js
|
||||
assert.match(getVariance.toString(), /mean\s*=\s*getMean\(\s*array\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;
|
||||
})
|
||||
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);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--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);
|
||||
const mode = getMode(numbers);
|
||||
const range = getRange(numbers);
|
||||
|
||||
document.querySelector("#mean").textContent = mean;
|
||||
document.querySelector("#median").textContent = median;
|
||||
document.querySelector("#mode").textContent = mode;
|
||||
document.querySelector("#range").textContent = range;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,179 @@
|
||||
---
|
||||
id: 6352faf71a9db52631864634
|
||||
title: Step 38
|
||||
challengeType: 0
|
||||
dashedName: step-38
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The next step is to calculate how far each element is from the mean. Declare a `differences` variable, and assign it the value of `array.map()`. For the callback, return the value of `el` minus `mean`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `getVariance` function should have a `differences` variable.
|
||||
|
||||
```js
|
||||
assert.match(getVariance.toString(), /differences\s*=/);
|
||||
```
|
||||
|
||||
Your `differences` variable should use the `array.map()` method.
|
||||
|
||||
```js
|
||||
assert.match(getVariance.toString(), /differences\s*=\s*array\.map\(/);
|
||||
```
|
||||
|
||||
Your `differences` variable should use the `el` parameter in the callback function.
|
||||
|
||||
```js
|
||||
assert.match(getVariance.toString(), /differences\s*=\s*array\.map\(function\s*\(?\s*el\s*\)?/);
|
||||
```
|
||||
|
||||
Your `map` callback should return the value of `el` minus `mean`.
|
||||
|
||||
```js
|
||||
assert.match(getVariance.toString(), /differences\s*=\s*array\.map\(function\s*\(?\s*el\s*\)?\s*\{\s*return\s*el\s*-\s*mean;?\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;
|
||||
})
|
||||
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);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
const getVariance = (array) => {
|
||||
const mean = getMean(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);
|
||||
const mode = getMode(numbers);
|
||||
const range = getRange(numbers);
|
||||
|
||||
document.querySelector("#mean").textContent = mean;
|
||||
document.querySelector("#median").textContent = median;
|
||||
document.querySelector("#mode").textContent = mode;
|
||||
document.querySelector("#range").textContent = range;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,190 @@
|
||||
---
|
||||
id: 6352fbb93a91a8272f838d42
|
||||
title: Step 39
|
||||
challengeType: 0
|
||||
dashedName: step-39
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The next step is to square each of the differences. To square a value, you can use the `**` operator. For example, `3 ** 2` would return `9`.
|
||||
|
||||
Declare a `squaredDifferences` variable, and assign it the value of `differences.map()`. For the callback, return the value of `el` squared.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `squaredDifferences` variable.
|
||||
|
||||
```js
|
||||
assert.match(getVariance.toString(), /squaredDifferences\s*=/);
|
||||
```
|
||||
|
||||
Your `squaredDifferences` variable should use the `differences.map()` method.
|
||||
|
||||
```js
|
||||
assert.match(getVariance.toString(), /squaredDifferences\s*=\s*differences\.map\(/);
|
||||
```
|
||||
|
||||
Your `squaredDifferences` variable should use the `el` parameter in the callback function.
|
||||
|
||||
```js
|
||||
assert.match(getVariance.toString(), /squaredDifferences\s*=\s*differences\.map\(function\s*\(?\s*el\s*\)?/);
|
||||
```
|
||||
|
||||
Your `map` callback should return the value of `el` squared.
|
||||
|
||||
```js
|
||||
assert.match(getVariance.toString(), /squaredDifferences\s*=\s*differences\.map\(function\s*\(?\s*el\s*\)?\s*\{\s*return\s*Math\.pow\(\s*el\s*,\s*2\s*\);\s*\}/);
|
||||
```
|
||||
|
||||
Your `map` callback should use the `**` operator.
|
||||
|
||||
```js
|
||||
assert.match(code.split("getVariance")[1], /el\s*\*\*\s*2/);
|
||||
```
|
||||
|
||||
# --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;
|
||||
})
|
||||
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);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
const getVariance = (array) => {
|
||||
const mean = getMean(array);
|
||||
const differences = array.map(
|
||||
el => el - mean
|
||||
);
|
||||
|
||||
}
|
||||
--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);
|
||||
const mode = getMode(numbers);
|
||||
const range = getRange(numbers);
|
||||
|
||||
document.querySelector("#mean").textContent = mean;
|
||||
document.querySelector("#median").textContent = median;
|
||||
document.querySelector("#mode").textContent = mode;
|
||||
document.querySelector("#range").textContent = range;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,188 @@
|
||||
---
|
||||
id: 6352fcb156834128001ea945
|
||||
title: Step 40
|
||||
challengeType: 0
|
||||
dashedName: step-40
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Next, you need to take the sum of the squared differences.
|
||||
|
||||
Declare a `sumSquaredDifferences` variable, and assign it the value of `squaredDifferences.reduce()`. For the callback, return the sum of `acc` and `el`. Remember to set the initial value to `0`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `sumSquaredDifferences` variable.
|
||||
|
||||
```js
|
||||
assert.match(getVariance.toString(), /sumSquaredDifferences\s*=/);
|
||||
```
|
||||
|
||||
Your `sumSquaredDifferences` variable should use the `squaredDifferences.reduce()` method.
|
||||
|
||||
```js
|
||||
assert.match(getVariance.toString(), /sumSquaredDifferences\s*=\s*squaredDifferences\.reduce\(/);
|
||||
```
|
||||
|
||||
Your `sumSquaredDifferences` variable should use the `acc` and `el` parameters in the callback function.
|
||||
|
||||
```js
|
||||
assert.match(getVariance.toString(), /sumSquaredDifferences\s*=\s*squaredDifferences\.reduce\(function\s*\(?\s*acc\s*,\s*el\s*\)?/);
|
||||
```
|
||||
|
||||
Your `reduce` callback should return the sum of `acc` and `el`.
|
||||
|
||||
```js
|
||||
console.log(getVariance.toString());
|
||||
assert.match(getVariance.toString(), /sumSquaredDifferences\s*=\s*squaredDifferences\.reduce\(function\s*\(?\s*acc\s*,\s*el\s*\)?\s*\{\s*return\s*acc\s*\+\s*el\s*\;\s*\},\s*0\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;
|
||||
})
|
||||
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);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
const getVariance = (array) => {
|
||||
const mean = getMean(array);
|
||||
const differences = array.map(
|
||||
el => el - mean
|
||||
);
|
||||
const squaredDifferences = differences.map(
|
||||
el => el ** 2
|
||||
);
|
||||
|
||||
}
|
||||
--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);
|
||||
const mode = getMode(numbers);
|
||||
const range = getRange(numbers);
|
||||
|
||||
document.querySelector("#mean").textContent = mean;
|
||||
document.querySelector("#median").textContent = median;
|
||||
document.querySelector("#mode").textContent = mode;
|
||||
document.querySelector("#range").textContent = range;
|
||||
}
|
||||
```
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user