Back to Freecodecamp

Step 3

curriculum/challenges/english/blocks/workshop-tailwind-cta-component/68552464ef378e1051a55c28.md

latest1.6 KB
Original Source

--description--

Inside the second div, create two anchor elements. The first should have the text Learn more, and the second should have the text Start listening.

For the href attribute of the two anchor elements, set them both to #.

--hints--

You should create two a elements inside the second div element

js
assert.lengthOf(document.querySelectorAll("div > div:nth-child(2) > a"), 2)

Your first a element should have the text Learn more and an href attribute of # inside the second div element.

js
const links = document.querySelectorAll("div > div:nth-child(2) > a")

assert.equal(links[0]?.textContent, "Learn more")
assert.equal(links[0]?.getAttribute("href"), "#")

Your second a element should have the text Start listening and a href attribute of # inside the second div element.

js
const links = document.querySelectorAll("div > div:nth-child(2) > a")

assert.equal(links[1]?.textContent, "Start listening")
assert.equal(links[1]?.getAttribute("href"), "#")

--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>CTA component</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <div>
      <div>
        <span>Soundflow</span>
        <h1>Discover New Music</h1>
        <p>Stream your favorite tracks and discover new artists.</p>
      </div>
      <div>
        --fcc-editable-region--
        
        --fcc-editable-region--
      </div>
    </div>
  </body>
</html>