ContextQMD
Back to Freecodecamp

Step 3

curriculum/challenges/english/blocks/workshop-blog-page/669fd003cb89ee3c2402e041.md

latest2.9 KB
Original Source

--description--

In this introductory content, you will want to show an image of Mr. Whiskers with a caption.

Below the h1 element, start by adding a figure element.

Inside the figure element, add an img element.

The src attribute of the img should have a value of "https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg" and the alt text should have a value of "a cat in the garden".

Below your img element, add a figcaption with the text Mr. Whiskers in the Garden.

--hints--

Your figure element should have an opening tag.

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

Your figure element should have a closing tag.

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

Your figure element should be within your header element.

js
const figureElement = document.querySelector('figure');
assert.equal(figureElement?.parentElement.tagName, 'HEADER');

You should have an img element.

js
assert.exists(document.querySelector("img"));

Your img element should be within your figure element.

js
const imgElement = document.querySelector('img');
assert.strictEqual(imgElement?.parentElement.tagName, 'FIGURE');

Your img element should have a src attribute set to "https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg".

js
const imgElement = document.querySelector('img');
const src = imgElement?.getAttribute('src');

assert.strictEqual(src, 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg');

Your img element should have an alt attribute set to "a cat in the garden".

js
const imgElement = document.querySelector('img');
const alt = imgElement?.getAttribute('alt');

assert.strictEqual(alt, 'a cat in the garden');

Your figcaption element should have an opening tag.

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

Your figcaption element should have a closing tag.

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

Your figcaption element should be within your figure element.

js
const figcaptionElement = document.querySelector('figcaption');
assert.strictEqual(figcaptionElement?.parentElement.tagName, 'FIGURE');

Your figcaption element should have a the text of Mr. Whiskers in the Garden.

js
const figcaptionElement = document.querySelector('figcaption');
assert.strictEqual(figcaptionElement?.innerText.trim(), "Mr. Whiskers in the Garden")

Your figcaption should be below the img element. You have them in the wrong order.

js
const figureElement = document.querySelector('figure');
assert.strictEqual(figureElement?.lastElementChild?.tagName, "FIGCAPTION")

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