--description--

This blog post is going to contain a couple of paragraphs with <dfn>lorem ipsum</dfn> text.

Lorem ipsum is commonly used in web development to serve as placeholder text. It is useful when you want to focus on building out the basic structure of your web pages and not have to worry about the actual content just yet.

Here is an example of using lorem ipsum:

html

<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>

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

--hints--

You should have two paragraph elements inside the article element.

const paragraphElements = document.querySelectorAll('#posts article 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('article 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().replaceAll(/\s+/g, ' '), loremIpsum);

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

const paragraphElement = document.querySelector('article 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().replaceAll(/\s+/g, ' '), loremIpsum);

Your paragraphs should come after the h3 element.

let h3 = document.querySelectorAll('article > p ~ h3');
assert.isEmpty(h3);
const paragraphs = document.querySelectorAll('article > 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>
        --fcc-editable-region--
          
        --fcc-editable-region--
        </article>
      </section>
    </main>
  </body>
</html>

Step 11

--description--

--hints--

--seed--

--seed-contents--