--- id: 642dccb78549c9285835ebc2 title: Step 2 challengeType: 0 dashedName: step-2 --- # --description-- Functions are ideal for reusable logic. When a function itself needs to reuse logic, you can declare a nested function to handle that logic. Here is an example of a nested function: ```js const outer = () => { const inner = () => { }; }; ``` Declare a nested `createLabel` function using arrow syntax. It should take a `name` parameter. # --hints-- You should declare a `createLabel` variable in your `onload` function. ```js assert.match(code, /window\.onload\s*=\s*\(\s*\)\s*=>\s*\{\s*(?:const\s+container\s*=\s*document\.getElementById\(\s*('|"|`)container\1\s*\)\s*;?)?\s*(?:let|var|const)\s+createLabel/); ``` Your `createLabel` variable should be declared after your `container` variable. ```js assert.match(code, /window\.onload\s*=\s*\(\s*\)\s*=>\s*\{\s*const\s+container\s*=\s*document\.getElementById\(\s*('|"|`)container\1\s*\)\s*;?\s*(?:let|var|const)\s+createLabel/); ``` Your `createLabel` variable should be declared with `const`. ```js assert.match(code, /window\.onload\s*=\s*\(\s*\)\s*=>\s*\{\s*const\s+container\s*=\s*document\.getElementById\(\s*('|"|`)container\1\s*\)\s*;?\s*const\s+createLabel/); ``` Your `createLabel` variable should be an arrow function. ```js assert.match(code, /window\.onload\s*=\s*\(\s*\)\s*=>\s*\{\s*const\s+container\s*=\s*document\.getElementById\(\s*('|"|`)container\1\s*\)\s*;?\s*const\s+createLabel\s*=\s*(\(.*\)|[^\s()]+)\s*=>/); ``` Your `createLabel` function should have a `name` parameter. ```js assert.match(code, /window\.onload\s*=\s*\(\s*\)\s*=>\s*\{\s*const\s+container\s*=\s*document\.getElementById\(\s*('|"|`)container\1\s*\)\s*;?\s*const\s+createLabel\s*=\s*(\(\s*name\s*\)|name)\s*=>/); ``` Your `createLabel` function should be empty. ```js assert.match(code, /window\.onload\s*=\s*\(\s*\)\s*=>\s*\{\s*const\s+container\s*=\s*document\.getElementById\(\s*('|"|`)container\1\s*\)\s*;?\s*const\s+createLabel\s*=\s*(\(\s*name\s*\)|name)\s*=>\s*\{\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"); } --fcc-editable-region-- ```