ContextQMD
Back to Freecodecamp

Step 2

curriculum/challenges/english/blocks/workshop-tailwind-pricing-component/686386e76197458b7dfd52eb.md

latest1.3 KB
Original Source

--description--

Create a div element under the h1. Inside that div, create another div element, and nest another div element inside it.

And inside the innermost div, create an h2 element with the text Listener. This will represent the first pricing plan.

--hints--

You should create a div element.

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

You should create another div element inside the outer div.

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

You should create another div element inside the inner div.

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

You should create an h2 with the text Listener inside the innermost div element.

js
assert.equal(document.querySelector("div > div > div > h2")?.textContent, "Listener");

--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>Music App Pricing</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <main>
      <h1>Choose your listening plan</h1>
    --fcc-editable-region--
      
    --fcc-editable-region--
    </main>
  </body>
</html>