3c1353fbe0
Co-authored-by: Naomi <nhcarrigan@gmail.com> Co-authored-by: Sem Bauke <semboot699@gmail.com>
4.7 KiB
id, title, challengeType, dashedName
| id | title | challengeType | dashedName |
|---|---|---|---|
| 6352ea3a5b79e614ee2282fd | Step 36 | 0 | step-36 |
--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.
assert.match(getMode.toString(), /if\s*\(/);
Your if statement should create a new Set and pass the Object.values() of your counts object.
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.
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.
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*;?\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(); 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>
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;
}
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;
}