--description--

For the third blog post, you will need to add another article element.

Inside the article element, add an h3 element with the text of Mr. Whiskers' First Birthday Party.

Below your h3 element, add two paragraphs of lorem ipsum text.

--hints--

You should have a third article element within your section element with the id set to posts.

const articleElement = document.querySelector('#posts article:nth-of-type(3)');
assert.strictEqual(articleElement?.parentElement.tagName, 'SECTION');

You should have an h3 element inside the article element with the text of Mr. Whiskers' First Birthday Party.

const h3Element = document.querySelector('#posts article:nth-of-type(3) h3');
assert.strictEqual(h3Element?.innerText.trim(), "Mr. Whiskers' First Birthday Party");

Your h3 element should be within your article element.

const h3Element = document.querySelector('#posts article:nth-of-type(3) h3');
assert.strictEqual(h3Element?.parentElement.tagName, 'ARTICLE');

You should have two paragraph elements inside the article element.

const paragraphElements = document.querySelectorAll('#posts article:nth-of-type(2) p');
assert.strictEqual(paragraphElements.length, 2);

Your first paragraph element should have lorem ipsum text. Double check for spelling and punctuation errors.

const paragraphElement = document.querySelector('#posts article:nth-of-type(3) p:first-of-type');
const loremIpsum = `Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae quidem voluptatum quas. Quisquam quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae quidem voluptatum quas.`

assert.strictEqual(paragraphElement?.innerText.trim(), loremIpsum);

Your second paragraph element should have lorem ipsum text. Double check for spelling and punctuation errors.

const paragraphElement = document.querySelector('#posts article:nth-of-type(3) p:last-of-type');
const loremIpsum = `Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae quidem voluptatum quas. Quisquam quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae quidem voluptatum quas.`

assert.strictEqual(paragraphElement?.innerText.trim(), loremIpsum);

Your paragraphs should come after the h3 element.

let h3 = document.querySelectorAll('#posts article:nth-of-type(3) > p ~ h3');
assert.isEmpty(h3);
const paragraphs = document.querySelectorAll('#posts article:nth-of-type(3) > h3 ~ p');
assert.lengthOf(paragraphs, 2);

--seed--

--seed-contents--

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Mr. Whiskers' Blog</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <header>
      <h1>Welcome to Mr. Whiskers' Blog Page!</h1>
      <figure>
        
        <figcaption>Mr. Whiskers in the Garden</figcaption>
      </figure>
      <nav>
        <ul>
          <li><a href="#about">About</a></li>
          <li><a href="#posts">Posts</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <section id="about">
        <h2>About</h2>
        <p>
          Hi there! I'm Jane Doe, a passionate writer who finds endless inspiration in the antics of my beloved cat, Mr. Whiskers.
        </p>
        <p>
          His playful nature and boundless energy keeps me on my toes. I love him so much.
        </p>
      </section>
      <section id="posts">
        <h2>Posts</h2>

        <article>
          <h3>Mr. Whiskers' First Day Home</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
            quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae
            quidem voluptatum quas. Quisquam quod, voluptates, quae, quos
            quibusdam dolorum quia nemo repudiandae quidem voluptatum quas.
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
            quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae
            quidem voluptatum quas. Quisquam quod, voluptates, quae, quos
            quibusdam dolorum quia nemo repudiandae quidem voluptatum quas.
          </p>
        </article>
        <article>
          <h3>Mr. Whiskers' First Bath</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
            quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae
            quidem voluptatum quas. Quisquam quod, voluptates, quae, quos
            quibusdam dolorum quia nemo repudiandae quidem voluptatum quas.
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
            quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae
            quidem voluptatum quas. Quisquam quod, voluptates, quae, quos
            quibusdam dolorum quia nemo repudiandae quidem voluptatum quas.
          </p>
        </article>
--fcc-editable-region--
        
--fcc-editable-region--
      </section>
    </main>
  </body>
</html>

Step 13

--description--

--hints--

--seed--

--seed-contents--