---
id: 6352f2526dccb523150b64fb
title: Step 44
challengeType: 0
dashedName: step-44
---
# --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\(\s*numbers\s*\)\s*;?/);
```
Your `calculate` function should set the `#range` element's `textContent` to the `range` variable.
```js
assert.match(calculate.toString(), /document\.querySelector\(\s*('|")#range\1\s*\)\.textContent\s*=\s*range\s*;?/);
```
# --seed--
## --seed-contents--
```html
Enter a list of comma-separated numbers.
The mean of a list of numbers is the average, calculated by
taking the sum of all numbers and dividing that by the count of numbers.
Mean:
The median of a list of numbers is the number that appears in
the middle of the list, when sorted from least to greatest.
Median:
The mode of a list of numbers is the number that appears most
often in the list.
Mode:
The range of a list of numbers is the difference between the
largest and smallest numbers in the list.
Range:
The variance of a list of numbers measures how far the values
are from the mean, on average.
Variance:
The standard deviation of a list of numbers is the square
root of the variance.
Standard Deviation:
```
```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--
}
```