Files
Nicholas Carrigan (he/him) 59c24bd4be chore: rename cafe menu (#44201)
* chore: rename files

* chore: update codebase

* chore: proper title case

* chore: missed block name

Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>

Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>
Co-authored-by: Tom <20648924+moT01@users.noreply.github.com>
2021-11-19 22:22:24 -06:00

2.5 KiB

id, title, challengeType, dashedName
id title challengeType dashedName
5f716ad029ee4053c7027a7a Step 50 0 step-50

--description--

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.

--hints--

You should not change your existing article element.

assert($('article').length === 6);

Your new article element should have two p elements.

assert($('article').last().children('p').length === 2);

Your first p element should have the text Donut.

assert($('article').last().children('p')[0].innerText.match(/Donut/i));

Your second p element should have the text 1.50.

assert($('article').last().children('p')[1].innerText.match(/1\.50/i));

--seed--

--seed-contents--

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Camper Cafe Menu</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div class="menu">
      <header>
        <h1>CAMPER CAFE</h1>
        <p>Est. 2020</p>
      </header>
      <main>
        <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>
--fcc-editable-region--
          <article class="item">
          </article>
--fcc-editable-region--
        </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%
}