mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2025-12-22 03:26:02 -05:00
3.6 KiB
3.6 KiB
id, title, challengeType, dashedName
| id | title | challengeType | dashedName |
|---|---|---|---|
| 63507d810f1a2e38f1908fd8 | Step 6 | 0 | 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.
assert.match(calculate.toString(), /filtered/);
Your calculate function should use the .filter() method on the numbers array.
assert.match(calculate.toString(), /numbers\.filter\(\s*\)/)
You should assign the result of numbers.filter() to the filtered variable.
assert.match(calculate.toString(), /filtered\s*=\s*numbers\.filter\(\s*\)/);
--seed--
--seed-contents--
<!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>
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;
}
--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--