mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2025-12-22 03:26:02 -05:00
4ee3a52b10
Co-authored-by: Jessica Wilkins <67210629+jdwilkin4@users.noreply.github.com> Co-authored-by: Krzysztof G. <60067306+gikf@users.noreply.github.com>
3.1 KiB
3.1 KiB
id, title, challengeType, dashedName
| id | title | challengeType | dashedName |
|---|---|---|---|
| 6449749d20436c1f1dfadcf2 | Step 28 | 0 | step-28 |
--description--
In your window.onload function, you need to tell your input elements to call the update function when the value changes. You can do this by directly setting the onchange property.
Set the onchange property to be a reference to your update function.
--hints--
Your window.onload function should access the onchange property of the input element.
assert.match(window.onload.toString(), /input\.onchange/);
Your window.onload function should set the onchange property to update.
assert.match(window.onload.toString(), /input\.onchange\s*=\s*update/);
Your window.onload function should not call your update function.
assert.notMatch(window.onload.toString(), /update\(\s*\)/);
Your input elements should all have your update function as the onchange property.
const inputs = document.querySelectorAll('input');
inputs.forEach(input => {
assert.property(input, 'onchange');
assert.equal(input.onchange, update);
})
--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" />
<title>Functional Programming Spreadsheet</title>
</head>
<body>
<div id="container">
<div></div>
</div>
<script src="./script.js"></script>
</body>
</html>
#container {
display: grid;
grid-template-columns: 50px repeat(10, 200px);
grid-template-rows: repeat(11, 30px);
}
.label {
background-color: lightgray;
text-align: center;
vertical-align: middle;
line-height: 30px;
}
const isEven = num => num % 2 === 0;
const sum = nums => nums.reduce((acc, el) => acc + el, 0);
const average = nums => sum(nums) / nums.length;
const median = nums => {
const sorted = nums.slice().sort((a, b) => a - b);
const length = sorted.length;
const middle = length / 2 - 1;
return isEven(length)
? average([sorted[middle], sorted[middle + 1]])
: sorted[Math.ceil(middle)];
}
const spreadsheetFunctions = {
sum,
average,
median
}
const range = (start, end) => Array(end - start + 1).fill(start).map((element, index) => element + index);
const charRange = (start, end) => range(start.charCodeAt(0), end.charCodeAt(0)).map(code => String.fromCharCode(code));
window.onload = () => {
const container = document.getElementById("container");
const createLabel = (name) => {
const label = document.createElement("div");
label.className = "label";
label.textContent = name;
container.appendChild(label);
}
const letters = charRange("A", "J");
letters.forEach(createLabel);
range(1, 99).forEach(number => {
createLabel(number);
letters.forEach(letter => {
const input = document.createElement("input");
input.type = "text";
input.id = letter + number;
input.ariaLabel = letter + number;
--fcc-editable-region--
--fcc-editable-region--
container.appendChild(input);
})
})
}
const update = event => {
}