Files
freeCodeCamp/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-015.md
Randell Dawson 94f0cf0ef8 chore(learn): Remove remaining isHidden keys from frontmatter (English and Chinese challenges) (#39809)
* fix: remove isHidden key from tool template

* fix: removed isHidden key from English challenges

* fix: remove isHidden key from Chinese challenges
2020-10-08 14:18:47 +02:00

1.9 KiB

id, title, challengeType
id title challengeType
5f07be6ef7412fbad0c5626b Part 15 0

Description

Before adding any new content, you should make use of a section element to separate the cat photos content from the future content.

Take all the elements currently located within the main element and nest them in a section element.

Tests

tests:
  - text: "Your `section` element should have an opening tag. Opening tags have the following syntax: `<elementName>`."
    testString: assert( document.querySelector('section') );
  - text: Your `section` element should have a closing tag. Closing tags have a `/` just after the `<` character.
    testString: assert( code.match(/<\/section\>/) );
  - text: The entire `section` element should be between the opening and closing tags of the `main` element.
    testString: assert( document.querySelector('section').parentNode.nodeName === "MAIN" );
  - text: The existing `h2`, comment, `p` element, and anchor (`a`) element should be between the opening and closing tags of the `section` element.
    testString: |
      const childrenOfSection = [ ...document.querySelector('section').childNodes ];
      const foundElems = childrenOfSection.filter(child => {
        return ['H2', 'A', 'P'].includes(child.nodeName);
      });
      assert( foundElems.length === 3 );

Challenge Seed

<html>
  <body>
    <h1>CatPhotoApp</h1>
    --fcc-editable-region--
    <main>
      <h2>Cat Photos</h2>
      <!-- TODO: Add link to cat photos -->
      <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
      <a href="https://freecatphotoapp.com"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
    </main>
    --fcc-editable-region--
  </body>
</html>