2.6 KiB
id, title, challengeType, dashedName
| id | title | challengeType | dashedName |
|---|---|---|---|
| 642db8c409d9991d0b3b2f0d | Step 1 | 0 | step-1 |
--description--
Your project starts with a basic HTML container and some corresponding CSS. Your first task will be to programmatically generate the cells for your spreadsheet.
The global window object represents the browser window (or tab). It has an onload property which allows you to define behavior when the window has loaded the entire page, including stylesheets and scripts.
Start by setting the onload property of window to an arrow function with no parameters. In the function, declare a container variable and assign it the value of getting the element by the id of container.
--hints--
You should access the onload property of the window object.
assert.match(code, /window\.onload/);
You should set the onload property to a function.
assert.isFunction(window.onload);
You should use arrow syntax.
assert.match(code, /window\.onload\s*=\s*\(/);
Your onload function should not take any parameters.
assert.match(code, /window\.onload\s*=\s*\(\s*\)/);
You should declare a container variable in your onload function.
assert.match(code, /window\.onload\s*=\s*\(\s*\)\s*=>\s*\{\s*(?:let|var|const)\s+container/);
Your container variable should be declared with const.
assert.match(code, /window\.onload\s*=\s*\(\s*\)\s*=>\s*\{\s*const\s+container/);
You should use document.getElementById()
assert.match(code, /document\.getElementById\(/);
You should get the element with the id of container.
assert.match(code, /document\.getElementById\(\s*('|"|`)container\1\s*\)/);
You should assign the #container element to container.
assert.match(code, /window\.onload\s*=\s*\(\s*\)\s*=>\s*\{\s*const\s+container\s*=\s*document\.getElementById\(\s*('|"|`)container\1\s*\)/);
--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;
}
--fcc-editable-region--
--fcc-editable-region--