curriculum/challenges/english/blocks/learn-advanced-array-methods-by-building-a-statistics-calculator/63507c4b63731437227b0134.md
The .map() method takes a callback function as its first argument. This callback function takes a few arguments, but the first one is the current element being processed. Here is an example:
array.map(el => {
})
The callback function needs to return a value. In this case, you want to return the value of each element converted to a number. You can do this by using the Number() constructor, passing the element as an argument.
Add a callback function to your .map() method that converts each element to a number.
Your .map() method should have a callback function.
assert.match(calculate.toString(), /array\.map\(\s*(\(\s*\w+\s*\)|\w+)\s*=>|array\.map\(\s*function\s*\(\s*\w+\s*\)\s*\{|array\.map\(\s*Number\s*\)/)
Your callback function should use the Number constructor to convert each array element to a number.
assert.match(calculate.toString(), /Number\(\s*\w+\s*\)|Number/);
Your callback function should not use the new keyword with the Number constructor.
assert.notMatch(calculate.toString(), /new/);
Your callback function should return the element converted to a number.
assert.match(calculate.toString(), /(array\.map\(\s*(\(\s*\w+\s*\)|\w+)\s*=>|array\.map\(\s*function\s*\(\s*\w+\s*\)\s*\{)\s*(return\s+)?Number\(\s*\w+\s*\)|array\.map\(\s*Number\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();">
<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();
}
--fcc-editable-region--