Back to Freecodecamp

Step 34

curriculum/challenges/english/blocks/workshop-cat-photo-app/5ef9b03c81a63668521804d4.md

latest2.6 KB
Original Source

--description--

The strong element is used to indicate that some text is of strong importance or urgent.

In the figcaption you just added, indicate that hate is of strong importance by wrapping it in a strong element.

--hints--

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

js
assert.exists(document.querySelector('strong'));

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

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

Your strong element should surround the word hate in the text Cats hate other cats. You have either omitted the text or have a typo.

js
assert.equal(
  document
    .querySelectorAll('figcaption')[1]
    ?.querySelector('strong')
    ?.innerText?.trim().toLowerCase(), 'hate'
);

The figcaption's text should be Cats hate other cats. Check for typos and that the necessary spaces are present around the strong element's opening and closing tags.

js
const secondFigCaption = document.querySelectorAll('figcaption')[1];
assert.match(
   secondFigCaption?.innerText
      .replace(/\s+/gi, ' ')
      .trim(),
      /cats hate other cats\.?/i
);

--seed--

--seed-contents--

html
<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <section>
        <h2>Cat Photos</h2>
        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
        <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
        <a href="https://freecatphotoapp.com"></a>
      </section>
      <section>
        <h2>Cat Lists</h2>
        <h3>Things cats love:</h3>
        <ul>
          <li>catnip</li>
          <li>laser pointers</li>
          <li>lasagna</li>
        </ul>
        <figure>
          
          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
        </figure>
        <h3>Top 3 things cats hate:</h3>
        <ol>
          <li>flea treatment</li>
          <li>thunder</li>
          <li>other cats</li>
        </ol>
        <figure>
          
--fcc-editable-region--
          <figcaption>Cats hate other cats.</figcaption>  
--fcc-editable-region--
        </figure>
      </section>
    </main>
  </body>
</html>