--- id: 642ddfdea4200e313f80a4b6 title: Step 3 challengeType: 0 dashedName: step-3 --- # --description-- Remember that the `document` object has a `.createElement()` method which allows you to dynamically create new HTML elements. In your `createLabel` function, declare a `label` variable and assign it a new `div` element. # --hints-- You should declare a `label` variable in your `createLabel` function. ```js assert.match(code, /const\s+createLabel\s*=\s*(\(\s*name\s*\)|name)\s*=>\s*\{\s*(?:const|let|var)\s+label/); ``` Your `label` variable should be declared with `const`. ```js assert.match(code, /const\s+createLabel\s*=\s*(\(\s*name\s*\)|name)\s*=>\s*\{\s*const\s+label/); ``` You should use the `.createElement()` method of the `document` object. ```js assert.match(code, /document\.createElement\(/); ``` You should pass the string `div` to the `.createElement()` method. ```js assert.match(code, /document\.createElement\(\s*('|"|`)div\1\s*\)/); ``` You should assign your new `div` element to `label`. ```js assert.match(code, /const\s+label\s*=\s*document\.createElement\(\s*('|"|`)div\1\s*\)/) ``` # --seed-- ## --seed-contents-- ```html Functional Programming Spreadsheet
``` ```css #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; } ``` ```js --fcc-editable-region-- window.onload = () => { const container = document.getElementById("container"); const createLabel = (name) => { } } --fcc-editable-region-- ```