f8287ce2ca
Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> Co-authored-by: Dario-DC <105294544+Dario-DC@users.noreply.github.com> Co-authored-by: Mrugesh Mohapatra <1884376+raisedadead@users.noreply.github.com>
3.1 KiB
id, title, challengeType, dashedName
| id | title | challengeType | dashedName |
|---|---|---|---|
| 5dc23991f86c76b9248c6eb8 | Step 6 | 0 | step-6 |
--description--
In the previous step, you put the h1, h2, comment, and p elements inside the main element. This is called nesting. Nested elements should be placed two spaces further to the right of the element they are nested in. This spacing is called indentation and it is used to make HTML easier to read.
Here is an example of nesting and indentation:
<main>
<h1>Most important content of the document</h1>
<p>Some more important content...</p>
</main>
The h1 element, h2 element and the comment are indented two spaces more than the main element in the code below. Use the space bar on your keyboard to add two more spaces in front of the p element so that it is indented properly as well.
--hints--
Your code should have an h2 element with text Cat Photos. You may have accidentally deleted it, it is missing both opening and closing tags, or the text has changed.
assert(
document.querySelector('h2') &&
code.match(/<\/h2\>/) &&
document.querySelector('h2').innerText.toLowerCase() === 'cat photos'
);
You should not add the ul or li elements from the example.
assert(
!document.querySelector('ul') && !document.querySelector('li')
);
You should not change the indentation on the line with your h2 element. Its opening tag should start 6 spaces over from the start of the line. You can restart the step to restore the original indentation.
assert(code.toLowerCase().match(/<\/h1\>\s*\n\s{6}<h2>/));
Your code should have a comment. You removed the comment from an earlier step.
assert(code.match(/<!--.*-->/));
The comment's text should be TODO: Add link to cat photos. Do not change the text or spacing of the comment.
assert(code.match(/<!--\s*todo:\s+add\s+link\s+to\s+cat\s+photos\.?\s*-->/i));
You should not change the indentation on the line with your comment element. Its opening tag should start 6 spaces over from the start of the line. You can restart the step to restore the original indentation.
assert(
code
.toLowerCase()
.match(/<\/h2>\s*\n\s{6}<!--\s*todo:\s+add\s+link\s+to\s+cat\s+photos\s*-->/)
);
Your code should have a p element. You have removed the p element from an earlier step.
assert(document.querySelector('p'));
The text of the p element should be Everyone loves cute cats online! Do not change the text, spacing, or punctuation of the p element.
assert.match(
document
.querySelector('p')
.innerText.toLowerCase(),
/everyone\s+loves\s+cute\s+cats\s+online!$/
);
The opening p tag should have indentation that matches your h2 and comment elements. Its opening tag should start 6 spaces over from the start of the line.
assert(code.toLowerCase().match(/-->\s*\n\s{6}<p>/));
--seed--
--seed-contents--
<html>
<body>
--fcc-editable-region--
<main>
<h1>CatPhotoApp</h1>
<h2>Cat Photos</h2>
<!-- TODO: Add link to cat photos -->
<p>Everyone loves cute cats online!</p>
</main>
--fcc-editable-region--
</body>
</html>