Back to Freecodecamp

Step 8

curriculum/challenges/english/blocks/workshop-blog-page/66a7e72adf226c02626715a3.md

latest2.4 KB
Original Source

--description--

Below your h2 element, add a paragraph element with the text of Hi there! I'm Jane Doe, a passionate writer who finds endless inspiration in the antics of my beloved cat, Mr. Whiskers.

Below your paragraph element, add another paragraph element with the text of His playful nature and boundless energy keeps me on my toes. I love him so much.

--hints--

Your first paragraph should have the text of Hi there! I'm Jane Doe, a passionate writer who finds endless inspiration in the antics of my beloved cat, Mr. Whiskers. Double-check your spelling.

js
const pElement = document.querySelector('body p:first-of-type');
const text = "Hi there! I'm Jane Doe, a passionate writer who finds endless inspiration in the antics of my beloved cat, Mr. Whiskers."
assert.strictEqual(pElement?.innerText.trim(), text);

Your first paragraph should be nested inside the section element.

js
const pElement = document.querySelector('#about p:first-of-type');
assert.strictEqual(pElement?.parentElement.tagName, 'SECTION');

You should have a second paragraph inside your section element.

js
const pElement = document.querySelectorAll('#about p');
assert.strictEqual(pElement?.length, 2);

Your second paragraph should have the text of His playful nature and boundless energy keeps me on my toes. I love him so much. Double check your spelling.

js
const pElement = document.querySelector('#about p:last-of-type');
const text = "His playful nature and boundless energy keeps me on my toes. I love him so much."
assert.strictEqual(pElement?.innerText.trim(), text);

--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>
      --fcc-editable-region--
        
      --fcc-editable-region--
      </section>
    </main>
  </body>
</html>