curriculum/challenges/english/blocks/learn-advanced-array-methods-by-building-a-statistics-calculator/6352ecef9f045519063da9b3.md
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).
Your getMode function should have a mode variable.
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.
assert.match(getMode.toString(), /mode\s*=\s*Object\.keys\(\s*counts\s*\)/);
<!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.toSorted((a, b) => a - b);
const median =
sorted.length % 2 === 0
? getMean([sorted[sorted.length / 2], sorted[sorted.length / 2 - 1]])
: sorted[Math.floor(sorted.length / 2)];
return median;
}
--fcc-editable-region--
const getMode = (array) => {
const counts = {};
array.forEach(el => counts[el] = counts[el] ? counts[el] + 1 : 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;
}