curriculum/challenges/english/blocks/workshop-tailwind-pricing-component/686386e76197458b7dfd52ee.md
Inside the ul, create two list items. Inside the first list item, create a span element and add the HTML entity ✓ as its text. Right after that span but within the list item, add the text Ad-supported streaming.
Inside the second list item, create a span element and add the entity ✓ as its text. Right after that span, but within the list item, add the text Curated playlists.
You should have two list items inside your ul element.
assert.lengthOf(document.querySelectorAll("ul > li"), 2)
Your first li element should have a span element with the HTML character entity ✓ in it.
const listItems = document.querySelectorAll("ul > li")
const firstSpan = listItems[0].querySelector("span")
assert.equal(firstSpan?.textContent, "✓")
Your first li element should have the text Ad-supported streaming just after the span element.
const listItems = document.querySelectorAll("ul > li");
const span = listItems[0].querySelector("span");
assert.equal(span.nextSibling?.textContent.trim(), "Ad-supported streaming");
Your second li element should have a span element with the HTML character entity ✓ in it.
const listItems = document.querySelectorAll("ul > li")
const secondSpan = listItems[1].querySelector("span")
assert.equal(secondSpan?.textContent, "✓")
Your second li element should have the text Curated playlists just after the span element.
const listItems = document.querySelectorAll("ul > li");
const span = listItems[1].querySelector("span");
assert.equal(span.nextSibling?.textContent.trim(), "Curated playlists");
<!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>
<p>Start exploring millions of songs with basic features and ads.</p>
<ul>
--fcc-editable-region--
--fcc-editable-region--
</ul>
</div>
</div>
</div>
</main>
</body>
</html>