--- 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 Statistics Calculator

Statistics Calculator

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-- } ```