Back to Freecodecamp

Step 4

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

latest1.5 KB
Original Source

--description--

Under the p element you just added, create another p element with the text Start exploring millions of songs with basic features and ads.. Under that, create an empty ul element.

--hints--

You should create another p element with the text Start exploring millions of songs with basic features and ads.

js
const paragraphs = document.querySelectorAll("p")

const targetP = Array.from(paragraphs).find(p =>
  p.textContent === "Start exploring millions of songs with basic features and ads."
)
assert.exists(targetP)

You should create an empty ul element under the p element.

js
const paragraphs = document.querySelectorAll("p")

const targetP = Array.from(paragraphs).find(p =>
  p.textContent === "Start exploring millions of songs with basic features and ads."
)

const ul = targetP.nextElementSibling
assert.equal(ul?.tagName, "UL")
assert.isEmpty(ul?.innerHTML.trim())

--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>
      <div>
        <div>
          <div>
            <h2>Listener</h2>
            <p>$0<span>/month</span></p>
            --fcc-editable-region--
            
            --fcc-editable-region--
          </div>
        </div>
      </div>
    </main>
  </body>
</html>