curriculum/challenges/english/blocks/workshop-cafe-menu/5f716ad029ee4053c7027a7a.md
Nest two p elements inside your article element. The first one's text should be Donut, and the second's text 1.50. Put both of them on the same line making sure there is no space between them.
You should not change your existing article element.
assert.lengthOf(document.querySelectorAll('article'), 6);
Your new article element should have two p elements.
const newArticle = [...document.querySelectorAll('article')].at(-1);
const paragraphs = newArticle?.querySelectorAll(`:scope ${'p'}`);
assert.lengthOf(paragraphs, 2);
Your first p element should have the text Donut.
const newArticle = [...document.querySelectorAll('article')].at(-1);
const paragraph = newArticle?.querySelector(`:scope ${'p'}`);
assert.match(paragraph?.innerText.trim(), /Donut/i);
Your second p element should have the text 1.50.
const newArticle = [...document.querySelectorAll('article')].at(-1);
const paragraphs = newArticle?.querySelectorAll(`:scope ${'p'}`);
assert.match(paragraphs?.[1]?.innerText.trim(), /1\.50/i);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cafe Menu</title>
<link href="styles.css" rel="stylesheet"/>
</head>
<body>
<div class="menu">
<main>
<h1>CAMPER CAFE</h1>
<p>Est. 2020</p>
<section>
<h2>Coffee</h2>
<article class="item">
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
</article>
<article class="item">
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
</article>
<article class="item">
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
</article>
<article class="item">
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
</article>
<article class="item">
<p class="flavor">Mocha</p><p class="price">4.50</p>
</article>
</section>
<section>
<h2>Desserts</h2>
<article class="item">
--fcc-editable-region--
--fcc-editable-region--
</article>
</section>
</main>
</div>
</body>
</html>
body {
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
}
h1, h2, p {
text-align: center;
}
.menu {
width: 80%;
background-color: burlywood;
margin-left: auto;
margin-right: auto;
}
.item p {
display: inline-block;
}
.flavor {
text-align: left;
width: 75%;
}
.price {
text-align: right;
width: 25%
}