Files
freeCodeCamp/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-065.md
Nicholas Carrigan (he/him) 8900fe0b8e feat: CSS Cafe Menu (#41797)
* fix: general bugs

- Ensure editable region at end of code-block is followed by a blank
line.
- Remove apparent duplicate step.
- Address spelling issues.

* feat: some tests

* feat: tests 6-20

Add tests for steps 6-20.

* feat: tests 21-30

Add tests for steps 21 through 30.

* feat: tests 31-40

Add tests for steps 31 through 40.

* feat: tests 41-50

Add tests for steps 41 through 50.

* feat: tests 51-60

Add tests for steps 51 through 60.

* feat: tests 61-70

Add tests for steps 61 through 70.

* feat: tests 71-80

Add tests for steps 71 through 80.

* feat: steps 81-92

Add tests for steps 81 through 92.

* feat: align dashed names

Align the dashed names with the titles and file names.

* fix: apply gikf's suggestions

Co-authored-by: gikf <60067306+gikf@users.noreply.github.com>

* fix: manual review suggestions

Apply gikf's other suggestions.

* feat: more thorough testing

When a test asserts that a camper adds a new element relative to
an existing element, also test that the existing element is not
malformed.

* feat: optional semi colons

Make EOL semi-colons optional in the CSS. If they're missing and the
CSS doesn't render correctly, other tests will catch that. If they
are on the last property of the ruleset, they technically aren't
required so we shouldn't require them?

* chore: apply review suggestions

Apply review suggestions from gikf

Co-authored-by: gikf <60067306+gikf@users.noreply.github.com>

* chore: apply suggestions from code review

Co-authored-by: gikf <60067306+gikf@users.noreply.github.com>

* feat: review suggestions

Apply Ahmad's review suggestions.

* chore: additional suggestions

Manual application of Ahmad's review suggestions.

Co-authored-by: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com>

* chore: apply suggestions from code review

Co-authored-by: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com>

* chore: apply shaun's review suggestions

Co-authored-by: Shaun Hamilton <51722130+ShaunSHamilton@users.noreply.github.com>

* feat: add clarification

Add a bit of text clarifying the file switch in the editor.

* chore: replace URLs

Replace the tinyurls with our self-hosted CDN images.

* feat: new CSS tests

Re-write CSS tests with new parser.

* fix: grammar

Apply Shaun's grammar reviews.

Co-authored-by: Shaun Hamilton <51722130+ShaunSHamilton@users.noreply.github.com>

* fix: optional chaining

* chore: apply suggestions from code review

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

* chore: apply reviews manually

* chore: getStyle update

Replace getStyleDeclaration with getStyle.

* fix: resolve test issue

* chore: remove jQuery :(

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

* chore: apply suggestions from code review

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

* fiux: Update curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-073.md

Co-authored-by: Tom <20648924+moT01@users.noreply.github.com>

Co-authored-by: gikf <60067306+gikf@users.noreply.github.com>
Co-authored-by: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com>
Co-authored-by: Shaun Hamilton <51722130+ShaunSHamilton@users.noreply.github.com>
Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>
Co-authored-by: Tom <20648924+moT01@users.noreply.github.com>
2021-07-21 14:03:09 -05:00

3.4 KiB

id, title, challengeType, dashedName
id title challengeType dashedName
5f3ef6e0a81099d9a697b550 Part 65 0 part-65

--description--

Inside the footer, add a p element. Then, nest an anchor (a) element in the p that links to https://www.freecodecamp.org and has the text Visit our website.

--hints--

You should not modify the existing footer element.

assert($('footer').length === 1);

Your new p element should be nested within your footer element.

assert($('footer').children('p').length === 1);

Your new a element should be nested within your new p element.

assert($('footer').children('p').children('a').length === 1);

Your new a element should have the text Visit our website.

assert($('footer').find('a')[0].innerText.match(/Visit our website/i));

Your new a element should link to https://www.freecodecamp.org. Remember that a elements use the href attribute to create a link.

assert($('footer').find('a').attr('href') === 'https://www.freecodecamp.org');

--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 class="established">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>
          <article class="item">
            <p class="dessert">Donut</p><p class="price">1.50</p>
          </article>
          <article class="item">
            <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
          </article>
          <article class="item">
            <p class="dessert">Cheesecake</p><p class="price">3.00</p>
          </article>
          <article class="item">
            <p class="dessert">Cinammon Roll</p><p class="price">2.50</p>
          </article>
        </section>
      </main>
--fcc-editable-region--
      <footer>
      </footer>
--fcc-editable-region--
    </div>
  </body>
<html>
body {
  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
  font-family: sans-serif;
}

h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

.established {
  font-style: italic;
}

h1, h2, p {
  text-align: center;
}

.menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  max-width: 500px;
}

h1, h2 {
  font-family: Impact, serif;
}

.item p {
  display: inline-block;
}

.flavor, .dessert {
  text-align: left;
  width: 75%;
}

.price {
  text-align: right;
  width: 25%
}