curriculum/challenges/english/blocks/workshop-blog-page/66a338be7f1dee383a0e0ecb.md
For the second 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 Bath.
Below your h3 element, add two paragraphs of lorem ipsum text.
You should have a second article element within your section element with the id set to posts.
const articleElement = document.querySelector('#posts article:nth-of-type(2)');
assert.strictEqual(articleElement?.parentElement.tagName, 'SECTION');
You should have an h3 element inside the article element with the text of Mr. Whiskers' First Bath.
const h3Element = document.querySelector('#posts article:nth-of-type(2) h3');
assert.strictEqual(h3Element?.innerText.trim(), "Mr. Whiskers' First Bath");
Your h3 element should be within your article element.
const h3Element = document.querySelector('#posts article:nth-of-type(2) 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(2) 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(2) 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(2) > p ~ h3');
assert.isEmpty(h3);
const paragraphs = document.querySelectorAll('#posts article:nth-of-type(2) > h3 ~ p');
assert.lengthOf(paragraphs, 2);
<!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>
--fcc-editable-region--
--fcc-editable-region--
</section>
</main>
</body>
</html>