ContextQMD
Back to Freecodecamp

Step 2

curriculum/challenges/english/blocks/workshop-greeting-card/6720b3191bbafd269bae0ae8.md

latest1.8 KB
Original Source

--description--

Create a div element that has an id of greeting-card and a class of card.

Inside the div element, add an h1 with the text Happy Birthday!. Then add a paragraph element with a class called message and the text Wishing you all the happiness and joy on your special day!.

--hints--

You should have a div element.

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

The div element should have an id of greeting-card.

js
assert.strictEqual(document.querySelector("div").id, "greeting-card");

The div element should have a class of card.

js
assert.strictEqual(document.querySelector("#greeting-card").className, "card");

You should have an h1 element inside the div element.

js
assert.exists(document.querySelector("div > h1"));

The h1 element should contain the text Happy Birthday!.

js
assert.strictEqual(document.querySelector("div > h1").textContent.trim(), "Happy Birthday!");

You should have a p element inside the div.

js
assert.exists(document.querySelector("div > p"));

The p element should have a class of message.

js
assert.exists(document.querySelector("div > p.message"));

The p element should contain the text Wishing you all the happiness and joy on your special day!.

js
assert.strictEqual(document.querySelector("div > p.message").textContent.trim(), "Wishing you all the happiness and joy on your special day!");

--seed--

--seed-contents--

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Greeting Card</title>
    <link href="styles.css" rel="stylesheet">
  </head>
  <body>
--fcc-editable-region--
    
--fcc-editable-region--
  </body>
</html>
css