ContextQMD
Back to Freecodecamp

Step 2

curriculum/challenges/english/blocks/learn-html-by-building-a-cat-photo-app/5dc1798ff86c76b9248c6eb3.md

latest2.4 KB
Original Source

--description--

The h1 through h6 heading elements are used to signify the importance of content below them. The lower the number, the higher the importance, so h2 elements have less importance than h1 elements.

html
<h1>most important heading element</h1>
<h2>second most important heading element</h2>
<h3>third most important heading element</h3>
<h4>fourth most important heading element</h4>
<h5>fifth most important heading element</h5>
<h6>least important heading element</h6>

Only use one h1 element per page and place lower importance headings below higher importance headings.

Below the h1 element, add an h2 element with this text:

Cat Photos

--hints--

Your h1 element should have an opening tag. Opening tags have this syntax: <elementName>.

js
assert(document.querySelector('h1'));

Your h1 element should have a closing tag. Closing tags have a / just after the < character.

js
assert(code.match(/<\/h1\>/));

You should only have one h1 element. Remove the extra.

js
assert(
  document.querySelector('h1') && document.querySelectorAll('h1').length === 1
);

Your h1 element's text should be CatPhotoApp. You have either omitted the text or have a typo.

js
assert(document.querySelector('h1').innerText.toLowerCase() === 'catphotoapp');

Your h2 tags should be in lowercase. By convention, all HTML tags are written in lowercase.

js
assert.notMatch(code, /<\/?H2>/);

Your h2 element should have an opening tag. Opening tags have this syntax: <elementName>.

js
assert(document.querySelector('h2'));

Your h2 element should have a closing tag. Closing tags have a / just after the < character.

js
assert(code.match(/<\/h2\>/));

Your h2 element's text should be Cat Photos. Only place the text Cat Photos between the opening and closing h2 tags.

js
assert(document.querySelector('h2').innerText.toLowerCase() === 'cat photos');

Your h2 element should be below the h1 element. The h1 element has greater importance and must be above the h2 element.

js
const collection = [...document.querySelectorAll('h1,h2')].map(
  (node) => node.nodeName
);
assert(collection.indexOf('H1') < collection.indexOf('H2'));

--seed--

--seed-contents--

html
<html>
  <body>
--fcc-editable-region--
    <h1>CatPhotoApp</h1>
    
--fcc-editable-region--
  </body>
</html>