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>
This commit is contained in:
Nicholas Carrigan (he/him)
2021-07-21 12:03:09 -07:00
committed by GitHub
parent 0e611f321e
commit 8900fe0b8e
94 changed files with 2214 additions and 937 deletions

View File

@ -223,163 +223,159 @@
"Part 53"
],
[
"5f3ef6e0086dc80481f8cb03",
"5f3ef6e0eaa7da26e3d34d78",
"Part 54"
],
[
"5f3ef6e0eaa7da26e3d34d78",
"5f3ef6e050279c7a4a7101d3",
"Part 55"
],
[
"5f3ef6e050279c7a4a7101d3",
"5f3ef6e04559b939080db057",
"Part 56"
],
[
"5f3ef6e04559b939080db057",
"5f3ef6e03d719d5ac4738993",
"Part 57"
],
[
"5f3ef6e03d719d5ac4738993",
"5f3ef6e05473f91f948724ab",
"Part 58"
],
[
"5f3ef6e05473f91f948724ab",
"5f3ef6e056bdde6ae6892ba2",
"Part 59"
],
[
"5f3ef6e056bdde6ae6892ba2",
"5f3ef6e0e9629bad967cd71e",
"Part 60"
],
[
"5f3ef6e0e9629bad967cd71e",
"5f3ef6e06d34faac0447fc44",
"Part 61"
],
[
"5f3ef6e06d34faac0447fc44",
"5f3ef6e087d56ed3ffdc36be",
"Part 62"
],
[
"5f3ef6e087d56ed3ffdc36be",
"5f3ef6e0f8c230bdd2349716",
"Part 63"
],
[
"5f3ef6e0f8c230bdd2349716",
"5f3ef6e07276f782bb46b93d",
"Part 64"
],
[
"5f3ef6e07276f782bb46b93d",
"5f3ef6e0a81099d9a697b550",
"Part 65"
],
[
"5f3ef6e0a81099d9a697b550",
"5f3ef6e0b431cc215bb16f55",
"Part 66"
],
[
"5f3ef6e0b431cc215bb16f55",
"5f3ef6e01f288a026d709587",
"Part 67"
],
[
"5f3ef6e01f288a026d709587",
"5f3f26fa39591db45e5cd7a0",
"Part 68"
],
[
"5f3f26fa39591db45e5cd7a0",
"5f459225127805351a6ad057",
"Part 69"
],
[
"5f459225127805351a6ad057",
"5f459a7ceb8b5c446656d88b",
"Part 70"
],
[
"5f459a7ceb8b5c446656d88b",
"5f459cf202c2a3472fae6a9f",
"Part 71"
],
[
"5f459cf202c2a3472fae6a9f",
"5f459fd48bdc98491ca6d1a3",
"Part 72"
],
[
"5f459fd48bdc98491ca6d1a3",
"5f45a05977e2fa49d9119437",
"Part 73"
],
[
"5f45a05977e2fa49d9119437",
"5f45a276c093334f0f6e9df4",
"Part 74"
],
[
"5f45a276c093334f0f6e9df4",
"5f45a5a7c49a8251f0bdb527",
"Part 75"
],
[
"5f45a5a7c49a8251f0bdb527",
"5f46fc57528aa1c4b5ea7c2e",
"Part 76"
],
[
"5f46fc57528aa1c4b5ea7c2e",
"5f4701b942c824109626c3d8",
"Part 77"
],
[
"5f4701b942c824109626c3d8",
"5f46ede1ff8fec5ba656b44c",
"Part 78"
],
[
"5f46ede1ff8fec5ba656b44c",
"5f45a66d4a2b0453301e5a26",
"Part 79"
],
[
"5f45a66d4a2b0453301e5a26",
"5f45b0731d39e15d54df4dfc",
"Part 80"
],
[
"5f45b0731d39e15d54df4dfc",
"5f45b25e7ec2405f166b9de1",
"Part 81"
],
[
"5f45b25e7ec2405f166b9de1",
"5f45b3c93c027860d9298dbd",
"Part 82"
],
[
"5f45b3c93c027860d9298dbd",
"5f45b45d099f3e621fbbb256",
"Part 83"
],
[
"5f45b45d099f3e621fbbb256",
"5f45b4c81cea7763550e40df",
"Part 84"
],
[
"5f45b4c81cea7763550e40df",
"5f45b715301bbf667badc04a",
"Part 85"
],
[
"5f45b715301bbf667badc04a",
"5f46e270702a8456a664f0df",
"Part 86"
],
[
"5f46e270702a8456a664f0df",
"5f46e36e745ead58487aabf2",
"Part 87"
],
[
"5f46e36e745ead58487aabf2",
"5f46e7a4750dd05b5a673920",
"Part 88"
],
[
"5f46e7a4750dd05b5a673920",
"5f46e8284aae155c83015dee",
"Part 89"
],
[
"5f46e8284aae155c83015dee",
"5f475bb508746c16c9431d42",
"Part 90"
],
[
"5f475bb508746c16c9431d42",
"5f475e1c7f71a61d913836c6",
"Part 91"
],
[
"5f475e1c7f71a61d913836c6",
"Part 92"
],
[
"5f47fe7e31980053a8d4403b",
"Part 93"
"Part 92"
]
]}

View File

@ -7,16 +7,28 @@ dashedName: part-1
# --description--
As you learned in the last few steps of the Cat Photo App, there is a basic structure need to start building your web page.
As you learned in the last few steps of the Cat Photo App, there is a basic structure needed to start building your web page.
Add the `<!DOCTYPE html>` and an `html` element.
Add the `<!DOCTYPE html>` tag, and an `html` element.
# --hints--
Test 1
You should have the `DOCTYPE` declaration.
```js
assert(code.match(/<!DOCTYPE html>/i));
```
You should have an opening `<html>` tag.
```js
assert(code.match(/<html>/i));
```
You should have a closing `<html>` tag. Remember that closing tags have a `/` following the opening `<` bracket.
```js
assert(code.match(/<\/html>/i));
```
# --seed--
@ -27,5 +39,5 @@ Test 1
--fcc-editable-region--
--fcc-editable-region--
```
```

View File

@ -11,10 +11,40 @@ Add a `head` element within the `html` element, so you can add a `title` element
# --hints--
Test 1
You should have an opening `<head>` tag.
```js
assert(code.match(/<head>/i));
```
You should have a closing `</head>` tag.
```js
assert(code.match(/<head>/i));
```
You should have an opening `<title>` tag.
```js
assert(code.match(/<title>/i));
```
You should have a closing `</title>` tag.
```js
assert(code.match(/<\/title>/i));
```
Your `<title>` element should be nested in your `<head>` element.
```js
assert(code.match(/<head>\s*<title>.*<\/title>\s*<\/head>/i));
```
Your `<title>` element should have the text `Camper Cafe Menu`. You may need to check your spelling.
```js
assert(code.match(/<title>camper\scafe\smenu<\/title>/i));
```
# --seed--
@ -29,4 +59,3 @@ Test 1
--fcc-editable-region--
</html>
```

View File

@ -9,14 +9,26 @@ dashedName: part-3
The `title` is one of several elements that provide extra information not visible on the web page, but could be useful for search engines or how the page gets displayed.
Inside the `head` element, nest a `meta` element with an attribute named `charset` set to the value `utf-8` to tell the browser how to encode characters for the page. Note tha `meta` elements are self-closing.
Inside the `head` element, nest a `meta` element with an attribute named `charset` set to the value `utf-8` to tell the browser how to encode characters for the page. Note that `meta` elements are self-closing.
# --hints--
Test 1
You should have a `meta` tag.
```js
assert(code.match(/<meta\s.*>/i));
```
Your `meta` tag should have a `charset` attribute.
```js
assert(code.match(/<meta charset=/i));
```
Your `charset` attribute should have a value of `utf-8`.
```js
assert(code.match(/charset=('|")utf-8\1/i));
```
# --seed--
@ -33,4 +45,3 @@ Test 1
--fcc-editable-region--
<html>
```

View File

@ -11,10 +11,29 @@ To prepare to create some actual content, add a `body` element below the `head`
# --hints--
Test 1
You should have an opening `<body>` tag.
```js
assert(code.match(/<body>/i));
```
You should have a closing `</body>` tag.
```js
assert(code.match(/<\/body>/i));
```
You should not change your `head` element. Make sure you did not delete your closing tag.
```js
assert(code.match(/<head>/i));
assert(code.match(/<\/head>/i));
```
Your `body` element should come after your `head` element.
```js
assert(code.match(/<\/head>[.\n\s]*<body>/im));
```
# --seed--

View File

@ -7,14 +7,38 @@ dashedName: part-5
# --description--
The name of the cafe is `Camper Cafe`. Add an `h1` element with the name of the cafe in capitalized letters to make it stand out.
The name of the cafe is `CAMPER CAFE`. Add an `h1` element within your `body` element. Give it the name of the cafe in capitalized letters to make it stand out.
# --hints--
Test 1
You should have an opening `<h1>` tag.
```js
assert(code.match(/<h1>/i));
```
You should have a closing `</h1>` tag.
```js
assert(code.match(/<\/h1>/i));
```
You should not change your existing `body` element.
```js
assert($('body').length === 1);
```
Your `h1` element should be nested in your `body` element.
```js
assert($('h1')[0].parentElement.tagName === "BODY");
```
Your `h1` element should have the text `CAMPER CAFE`.
```js
assert(code.match(/<h1>CAMPER CAFE<\/h1>/));
```
# --seed--
@ -34,4 +58,3 @@ Test 1
--fcc-editable-region--
<html>
```

View File

@ -11,10 +11,34 @@ To let visitors know the cafe was founded in 2020, add a `p` element below the `
# --hints--
Test 1
You should have an opening `<p>` tag.
```js
assert(code.match(/<p>/i));
```
You should have a closing `</p>` tag.
```js
assert(code.match(/<\/p>/i));
```
You should not change your existing `h1` element. Make sure you did not delete the closing tag.
```js
assert($('h1').length === 1);
```
Your `p` element should be below your `h1` element.
```js
assert($('p')[0].previousElementSibling.tagName === 'H1');
```
Your `p` element should have the text `Est. 2020`.
```js
assert(code.match(/<p>Est. 2020<\/p>/i));
```
# --seed--

View File

@ -11,10 +11,30 @@ Since the `p` element added in the previous step provides supplemental informati
# --hints--
Test 1
You should have an opening `<header>` tag.
```js
assert(code.match(/<header>/i));
```
You should have a closing `</header>` tag.
```js
assert(code.match(/<\/header>/i));
```
Your `h1` element should be nested in your `header` element.
```js
const header = document.querySelectorAll('header')[0];
assert(header.children[0].tagName === 'H1');
```
Your `p` element should be nested in your `header` element.
```js
const header = document.querySelectorAll('header')[0];
assert(header.children[1].tagName === "P");
```
# --seed--

View File

@ -7,14 +7,33 @@ dashedName: part-8
# --description--
It's time to add some menu content. Add a `main` element below the existing `header` element. It will eventually contain pricing information about coffees and desserts offered by the cafe.
It's time to add some menu content. Add a `main` element below the existing `header` element. It will eventually contain pricing information about coffee and desserts offered by the cafe.
# --hints--
Test 1
Your code should have an opening `<main>` tag.
```js
assert(code.match(/<main>/i));
```
Your code should have a closing `</main>` tag.
```js
assert(code.match(/<\/main>/i));
```
You should not change your `header` element. Make sure you don't accidentally delete your closing tag.
```js
assert($('header').length === 1);
```
Your `main` tag should come after your `header` tag.
```js
const main = document.querySelectorAll('main')[0];
assert(main.previousElementSibling.tagName === 'HEADER');
```
# --seed--
@ -38,4 +57,3 @@ Test 1
</body>
<html>
```

View File

@ -11,10 +11,29 @@ There will be two sections on the menu, one for coffees and one for desserts. Ad
# --hints--
Test 1
You should have an opening `<section>` tag.
```js
assert(code.match(/<section\s*>/i));
```
You should have a closing `</section>` tag.
```js
assert(code.match(/<\/section\s*>/i));
```
You should not change your existing `main` element. Make sure you didn't delete the closing tag.
```js
assert($('main').length === 1);
```
Your `section` element should be within your `main` element.
```js
const main = document.querySelectorAll('main')?.[0];
assert(main.children[0].tagName === 'SECTION');
```
# --seed--
@ -40,4 +59,3 @@ Test 1
</body>
<html>
```

View File

@ -7,14 +7,40 @@ dashedName: part-10
# --description--
Create an `h2` element in the `section` element and give it the text `Coffees`.
Create an `h2` element in the `section` element and give it the text `Coffee`.
# --hints--
Test 1
You should have an opening `<h2>` tag.
```js
assert(code.match(/<h2\s*>/i));
```
You should have a closing `</h2>` tag.
```js
assert(code.match(/<\/h2\s*>/i));
```
You should not change your existing `section` element. Make sure you did not delete the closing tag.
```js
assert($('section').length === 1);
```
Your `h2` element should be within your `section` element.
```js
const h2 = document.querySelector('h2');
assert(h2.parentElement.tagName === 'SECTION');
```
Your `h2` element should have the text `Coffee`.
```js
const h2 = document.querySelector('h2');
assert(h2.innerText === 'Coffee');
```
# --seed--
@ -42,4 +68,3 @@ Test 1
</body>
<html>
```

View File

@ -11,10 +11,22 @@ Up until now, you have been limited regarding the presentation and appearance of
# --hints--
Test 1
Your code should have an opening `<style>` tag.
```js
assert(code.match(/<style\s*>/i));
```
Your code should have a closing `</style>` tag.
```js
assert(code.match(/<\/style\s*>/));
```
Your `style` element should be nested in your `head` element.
```js
assert(code.match(/<head\s*>[\w\W\s]*<style\s*>[\w\W\s]*<\/style\s*>[\w\W\s]*<\/head\s*>/i))
```
# --seed--
@ -36,11 +48,10 @@ Test 1
</header>
<main>
<section>
<h2>Coffees</h2>
<h2>Coffee</h2>
</section>
</main>
</body>
--fcc-editable-region--
<html>
```

View File

@ -19,10 +19,25 @@ Center your `h1` element by setting its `text-align` property to the value `cent
# --hints--
Test 1
You should have an `h1` selector in your `style` element.
```js
const hasSelector = new __helpers.CSSHelp(document).getStyle('h1');
assert(hasSelector);
```
Your `text-align` property should set a value of `center`.
```js
const hasTextAlign = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['text-align'] === 'center');
assert(hasTextAlign);
```
Your `h1` selector should set the `text-align` property to `center`.
```js
const h1TextAlign = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('text-align');
assert(h1TextAlign === 'center');
```
# --seed--
@ -47,7 +62,7 @@ Test 1
</header>
<main>
<section>
<h2>Coffees</h2>
<h2>Coffee</h2>
</section>
</main>
</body>

View File

@ -11,10 +11,46 @@ In the previous step, you used a <dfn>type selector</dfn> to style the `h1` elem
# --hints--
Test 1
You should not change the existing `h1` selector.
```js
const hasH1 = new __helpers.CSSHelp(document).getStyle('h1');
assert(hasH1);
```
You should add a new `h2` selector.
```js
const hasH2 = new __helpers.CSSHelp(document).getStyle('h2');
assert(hasH2);
```
You should add a new `p` selector.
```js
const hasP = new __helpers.CSSHelp(document).getStyle('p');
assert(hasP);
```
Your `h1` element should have a `text-align` of `center`.
```js
const h1TextAlign = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('text-align');
assert(h1TextAlign === 'center');
```
Your `h2` element should have a `text-align` of `center`.
```js
const h2TextAlign = new __helpers.CSSHelp(document).getStyle('h2')?.getPropertyValue('text-align');
assert(h2TextAlign === 'center');
```
Your `p` element should have a `text-align` of `center`.
```js
const pTextAlign = new __helpers.CSSHelp(document).getStyle('p')?.getPropertyValue('text-align');
assert(pTextAlign === 'center');
```
# --seed--
@ -42,7 +78,7 @@ Test 1
</header>
<main>
<section>
<h2>Coffees</h2>
<h2>Coffee</h2>
</section>
</main>
</body>

View File

@ -19,10 +19,18 @@ Use a single type selector to center the `h1`, `h2` and `p` elements at the same
# --hints--
Test 1
You should use a single type selector for all three elements, `h1, h2, p`. Be sure to use that order.
```js
const hasSelector = new __helpers.CSSHelp(document).getStyle('h1, h2, p');
assert(hasSelector);
```
You should only have one selector in your `style` element.
```js
const selectors = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.selectorText)
assert(selectors.length === 1);
```
# --seed--
@ -56,7 +64,7 @@ Test 1
</header>
<main>
<section>
<h2>Coffees</h2>
<h2>Coffee</h2>
</section>
</main>
</body>

View File

@ -7,14 +7,33 @@ dashedName: part-15
# --description--
You have styled three elements by writing CSS inside the `style` tags. This works, but since there will many more styles, it's best to put all the styles in a separate file and link to it. Start by rewriting the styles you have created into the `styles.css` file. Make sure to exclude the opening and closing `style` tags.
You have styled three elements by writing CSS inside the `style` tags. This works, but since there will many more styles, it's best to put all the styles in a separate file and link to it.
We have created a separate `styles.css` file for you and switched the editor view to that file. You can change between files with the tabs at the top of the editor.
Start by rewriting the styles you have created into the `styles.css` file. Make sure to exclude the opening and closing `style` tags.
# --hints--
Test 1
Your `styles.css` file should have the `h1, h2, p` type selector.
```js
const css = code.split('<!DOCTYPE html>')[0];
assert(__helpers.removeWhiteSpace(css).match(/(h1|h2|p),(h1|h2|p),(h1|h2|p){/))
```
Your selector should set the `text-align` property to `center`.
```js
const css = code.split('<!DOCTYPE html>')[0];
assert(css.match(/text-align:\s*center;?/));
```
You should only have one selector.
```js
const css = code.split('<!DOCTYPE html>')[0];
assert(css.match(/text-align:\s*center;?/).length === 1);
```
# --seed--
@ -40,7 +59,7 @@ Test 1
</header>
<main>
<section>
<h2>Coffees</h2>
<h2>Coffee</h2>
</section>
</main>
</body>
@ -51,5 +70,5 @@ Test 1
--fcc-editable-region--
--fcc-editable-region--
```
```

View File

@ -7,14 +7,22 @@ dashedName: part-16
# --description--
Now that you have the CSS in the `styles.css` file, go ahead and remove the `style` element and all its content. Once it is removed, the text that as centered, will shift back to the left.
Now that you have the CSS in the `styles.css` file, go ahead and remove the `style` element and all its content. Once it is removed, the text that was centered will shift back to the left.
# --hints--
Test 1
You should not have any `style` tags in your code.
```js
assert(!code.match(/style/i));
```
You should not have any CSS selectors in your HTML file.
```js
const html = code.split('<!DOCTYPE html>')[1];
assert(!html.includes('style'));
assert(!html.includes('text-align'));
```
# --seed--
@ -42,7 +50,7 @@ Test 1
</header>
<main>
<section>
<h2>Coffees</h2>
<h2>Coffee</h2>
</section>
</main>
</body>

View File

@ -7,14 +7,52 @@ dashedName: part-17
# --description--
Now you need to link the `styles.css` file so the styles will be applied again. Next a self-closing `link` element in the `head` element. Give it a `rel` attribute value `stylesheet`, a `type` attribute value of `text/css`, and an `href` attribute value of `styles.css`.
Now you need to link the `styles.css` file so the styles will be applied again. Nest a self-closing `link` element in the `head` element. Give it a `rel` attribute value `stylesheet`, a `type` attribute value of `text/css`, and an `href` attribute value of `styles.css`.
# --hints--
Test 1
Your code should have a `link` element.
```js
// link is removed -> if exists, replaced with style
const link = document.querySelector('body > style');
assert(link);
```
You should not change your existing `head` element. Make sure you did not delete the closing tag.
```js
assert($('head').length === 1);
```
Your `link` element should be a self-closing element.
```js
assert(code.match(/<link[\w\W\s]+\/>/i));
```
Your `link` element should be within your `head` element.
```js
assert(code.match(/<head>[\w\W\s]*<link[\w\W\s]*\/>[\w\W\s]*<\/head>/i))
```
Your `link` element should have a `rel` attribute with the value `stylesheet`.
```js
assert(code.match(/rel=('|")stylesheet\1/i));
```
Your `link` element should have a `type` attribute with the value `text/css`.
```js
assert(code.match(/type=('|")text\/css\1/i));
```
Your `link` element should have an `href` attribute with the value `styles.css`.
```js
assert(code.match(/href=('|")styles.css\1/i));
```
# --seed--
@ -37,7 +75,7 @@ Test 1
</header>
<main>
<section>
<h2>Coffees</h2>
<h2>Coffee</h2>
</section>
</main>
</body>
@ -49,4 +87,3 @@ h1, h2, p {
text-align: center;
}
```

View File

@ -17,10 +17,24 @@ Add the following within the `head` element:
# --hints--
Test 1
Your code should have two `meta` elements.
```js
assert(code.match(/<meta.*\/?>/g).length === 2);
```
Your `meta` element should have a `name` attribute with a value of `viewport`.
```js
const meta = $('meta');
assert(meta[0].outerHTML.match(/name=('|")viewport\1/) || meta[1].outerHTML.match(/name=('|")viewport\1/));
```
Your `meta` element should have a `content` attribute with a value of `width=device-width, initial-scale=1.0`.
```js
const meta = $('meta');
assert(meta[0].outerHTML.match(/content=('|")width=device-width, initial-scale=1.0\1/) || meta[1].outerHTML.match(/content=('|")width=device-width, initial-scale=1.0\1/));
```
# --seed--
@ -44,7 +58,7 @@ Test 1
</header>
<main>
<section>
<h2>Coffees</h2>
<h2>Coffee</h2>
</section>
</main>
</body>
@ -56,4 +70,3 @@ h1, h2, p {
text-align: center;
}
```

View File

@ -11,10 +11,25 @@ The text is centered again so the link to the CSS file is working. Add another s
# --hints--
Test 1
You should use a `body` selector.
```js
const hasBody = new __helpers.CSSHelp(document).getStyle('body');
assert(hasBody);
```
You should set the `background-color` property to `brown`.
```js
const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'brown');
assert(hasBackground);
```
Your `body` element should have a `brown` background.
```js
const bodyBackground = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('background-color');
assert(bodyBackground === 'brown');
```
# --seed--
@ -37,7 +52,7 @@ Test 1
</header>
<main>
<section>
<h2>Coffees</h2>
<h2>Coffee</h2>
</section>
</main>
</body>
@ -50,5 +65,6 @@ h1, h2, p {
text-align: center;
}
--fcc-editable-region--
```

View File

@ -11,10 +11,18 @@ That brown background makes it hard to read the text. Change the `body` element'
# --hints--
Test 1
You should set the `background-color` property to `burlywood`.
```js
const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'burlywood');
assert(hasBackground);
```
Your `body` element should have a `burlywood` background.
```js
const bodyBackground = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('background-color');
assert(bodyBackground === 'burlywood');
```
# --seed--
@ -37,7 +45,7 @@ Test 1
</header>
<main>
<section>
<h2>Coffees</h2>
<h2>Coffee</h2>
</section>
</main>
</body>
@ -54,4 +62,3 @@ h1, h2, p {
text-align: center;
}
```

View File

@ -11,10 +11,29 @@ The `div` element is used mainly for design layout purposes unlike the other con
# --hints--
Test 1
You should have an opening `<div>` tag.
```js
assert(code.match(/<div>/i));
```
You should have a closing `</div>` tag.
```js
assert(code.match(/<\/div>/i));
```
You should not change your existing `body` element. Make sure you did not delete the closing tag.
```js
assert($('body').length === 1);
```
Your `div` tag should be nested in the `body`.
```js
const div = $('div')[0];
assert(div.parentElement.tagName === 'BODY');
```
# --seed--
@ -38,7 +57,7 @@ Test 1
</header>
<main>
<section>
<h2>Coffees</h2>
<h2>Coffee</h2>
</section>
</main>
</body>

View File

@ -11,10 +11,25 @@ The goal now is to make the `div` not take up the entire width of the page. The
# --hints--
Test 1
You should have a `div` type selector.
```js
const hasDiv = new __helpers.CSSHelp(document).getStyle('div');
assert(hasDiv);
```
You should set the `width` property to `300px`.
```js
const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '300px');
assert(hasWidth);
```
Your `div` should have a width of 300px.
```js
const divWidth = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('width');
assert(divWidth === '300px');
```
# --seed--
@ -38,7 +53,7 @@ Test 1
</header>
<main>
<section>
<h2>Coffees</h2>
<h2>Coffee</h2>
</section>
</main>
</div>
@ -56,5 +71,6 @@ h1, h2, p {
text-align: center;
}
--fcc-editable-region--
```

View File

@ -2,6 +2,7 @@
id: 5f356ed60a5decd94ab66986
title: Part 23
challengeType: 0
removeComments: false
dashedName: part-23
---
@ -17,10 +18,18 @@ In your style sheet, comment out the the line containing the `background-color`
# --hints--
Test 1
You should comment out the `background-color: burlywood;` line in your CSS.
```js
assert(code.match(/\/\*\s*background-color:\s*burlywood;?\s*\*\//i));
```
Your `body` should have a white background.
```js
const bodyCSS = $('body').css('background-color');
assert(bodyCSS === "rgba(0, 0, 0, 0)")
```
# --seed--
@ -44,7 +53,7 @@ Test 1
</header>
<main>
<section>
<h2>Coffees</h2>
<h2>Coffee</h2>
</section>
</main>
</div>

View File

@ -11,10 +11,18 @@ Now make the background color of the `div` element to be `burlywood`.
# --hints--
Test 1
You should set the `background-color` property to `burlywood`.
```js
const hasBackgroundColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'burlywood');
assert(hasBackgroundColor);
```
Your `div` should have a burlywood background.
```js
const divBackground = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('background-color');
assert(divBackground === 'burlywood');
```
# --seed--
@ -38,7 +46,7 @@ Test 1
</header>
<main>
<section>
<h2>Coffees</h2>
<h2>Coffee</h2>
</section>
</main>
</div>

View File

@ -11,10 +11,18 @@ Now it's easy to see that the text is centered inside the `div` element. Current
# --hints--
Test 1
You should set the `width` property to `80%`.
```js
const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '80%');
assert(hasWidth);
```
You should not have a `width` property of `300px`.
```js
const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '300px');
assert(!hasWidth);
```
# --seed--
@ -38,7 +46,7 @@ Test 1
</header>
<main>
<section>
<h2>Coffees</h2>
<h2>Coffee</h2>
</section>
</main>
</div>

View File

@ -11,10 +11,27 @@ Next, you want to center the `div` horizontally. You can do this by setting its
# --hints--
Test 1
You should set the `margin-left` property to `auto`.
```js
const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-left'] === 'auto');
assert(hasMargin);
```
You should set the `margin-right` property to `auto`.
```js
const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-right'] === 'auto');
assert(hasMargin);
```
You should set the `margin-left` and `margin-right` properties of your `div` to `auto`.
```js
const divMarginRight = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('margin-right');
const divMarginLeft = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('margin-left');
assert(divMarginRight === 'auto');
assert(divMarginLeft === 'auto');
```
# --seed--
@ -38,7 +55,7 @@ Test 1
</header>
<main>
<section>
<h2>Coffees</h2>
<h2>Coffee</h2>
</section>
</main>
</div>
@ -64,4 +81,3 @@ div {
}
--fcc-editable-region--
```

View File

@ -19,10 +19,18 @@ Change the existing `div` selector into a class selector by replacing `div` with
# --hints--
Test 1
You should have a `.menu` type selector.
```js
const hasMenu = new __helpers.CSSHelp(document).getStyle('.menu');
assert(hasMenu);
```
You should not have a `div` selector.
```js
const hasDiv = new __helpers.CSSHelp(document).getStyle('div');
assert(!hasDiv);
```
# --seed--
@ -46,7 +54,7 @@ Test 1
</header>
<main>
<section>
<h2>Coffees</h2>
<h2>Coffee</h2>
</section>
</main>
</div>

View File

@ -11,10 +11,16 @@ To apply the class's styling to the `div` element, add a `class` attribute to th
# --hints--
Test 1
Your `div` should still render. Make sure you haven't malformed the `<div>` tag.
```js
assert($('div').length === 1);
```
Your `div` element should have the `menu` class.
```js
assert($('div').attr('class').includes('menu'));
```
# --seed--
@ -40,7 +46,7 @@ Test 1
</header>
<main>
<section>
<h2>Coffees</h2>
<h2>Coffee</h2>
</section>
</main>
</div>

View File

@ -9,14 +9,35 @@ dashedName: part-29
Since the cafe's main product for sale is coffee, you could use an image of coffee beans for the background of the page.
Delete the comment and its contents inside the `body` type selector. Now add a `background-image` property and set its value to `url(https://tinyurl.com/coffee-beans-fcc)`.
Delete the comment and its contents inside the `body` type selector. Now add a `background-image` property and set its value to `url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg)`.
# --hints--
Test 1
You should remove the commented out `background-color` property.
```js
assert(!code.match(/\/\*\s*background-color:\s*burlywood;?\s*\*\//i))
```
Your `body` selector should not have any comments.
```js
assert(!code.match(/body\s*{\s*\/\*/i));
```
You should set the `background-image` property to `url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg)`.
```js
const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-image'] === `url("https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg")`)
assert(hasBackground)
```
Your `body` element should have the coffee beans background image.
```js
const bodyBackground = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('background-image');
console.log(bodyBackground);
assert(bodyBackground === `url("https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg")`);
```
# --seed--
@ -40,7 +61,7 @@ Test 1
</header>
<main>
<section>
<h2>Coffees</h2>
<h2>Coffee</h2>
</section>
</main>
</div>

View File

@ -7,14 +7,33 @@ dashedName: part-30
# --description--
Its looking good. Time to start adding some menu items. Add an empty `article` element under the `Coffees` heading. It will contain a flavor and price of each coffee you currently offer.
Its looking good. Time to start adding some menu items. Add an empty `article` element under the `Coffee` heading. It will contain a flavor and price of each coffee you currently offer.
# --hints--
Test 1
You should have an opening `<article>` tag.
```js
assert(code.match(/<article>/i));
```
You should have a closing `</article>` tag.
```js
assert(code.match(/<\/article>/i));
```
You should not change the existing `h2` element.
```js
assert($('h2').length === 1);
```
Your `article` element should come after your `h2` element.
```js
const article = $('article')[0];
assert(article.previousElementSibling.tagName === 'H2');
```
# --seed--
@ -39,7 +58,7 @@ Test 1
<main>
<section>
--fcc-editable-region--
<h2>Coffees</h2>
<h2>Coffee</h2>
--fcc-editable-region--
</section>
</main>
@ -50,7 +69,7 @@ Test 1
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
}
h1, h2, p {

View File

@ -11,10 +11,30 @@ dashedName: part-31
# --hints--
Test 1
You should not change the existing `article` element.
```js
assert($('article').length === 1);
```
Your `article` element should have two `p` elements.
```js
assert($('article').children('p').length === 2);
```
Your first `p` element should have the text `French Vanilla`.
```js
const firstP = $('article').children('p')[0];
assert(firstP.innerText.match(/French Vanilla/i));
```
Your second `p` element should have the text `3.00`.
```js
const secondP = $('article').children('p')[1];
assert(secondP.innerText.match(/3\.00/i));
```
# --seed--
@ -38,7 +58,7 @@ Test 1
</header>
<main>
<section>
<h2>Coffees</h2>
<h2>Coffee</h2>
--fcc-editable-region--
<article>
</article>
@ -52,7 +72,7 @@ Test 1
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
}
h1, h2, p {
@ -66,4 +86,3 @@ h1, h2, p {
margin-right: auto;
}
```

View File

@ -7,21 +7,72 @@ dashedName: part-32
# --description--
Starting below the existing coffee/price pair, add the following coffees and prices using an `article` element with two nested `p` elements inside each. As before, the first `p` element's text should contain the coffee flavor and the second `p` element's text should contain the price.
Starting below the existing coffee/price pair, add the following coffee and prices using `article` elements with two nested `p` elements inside each. As before, the first `p` element's text should contain the coffee flavor and the second `p` element's text should contain the price.
```bash
Carmel Macchiato 3.75
Caramel Macchiato 3.75
Pumpkin Spice 3.50
Hazelnut 4.00
Mocah 4.50
Mocha 4.50
```
# --hints--
Test 1
You should have five `article` elements.
```js
assert($('article').length === 5);
```
Each `article` element should have two `p` elements.
```js
const articles = $('article');
assert(articles[0].children.length === 2);
assert(articles[1].children.length === 2);
assert(articles[2].children.length === 2);
assert(articles[3].children.length === 2);
assert(articles[4].children.length === 2);
```
Your first `article` element should have `p` elements with the text `French Vanilla` and `3.00`.
```js
const children = $('article')[0].children;
assert(children[0].innerText.match(/French Vanilla/i));
assert(children[1].innerText.match(/3\.00/i));
```
Your second `article` element should have `p` elements with the text `Caramel Macchiato` and `3.75`.
```js
const children = $('article')[1].children;
assert(children[0].innerText.match(/Caramel Macchiato/i));
assert(children[1].innerText.match(/3\.75/i));
```
Your third `article` element should have `p` elements with the text `Pumpkin Spice` and `3.50`.
```js
const children = $('article')[2].children;
assert(children[0].innerText.match(/Pumpkin Spice/i));
assert(children[1].innerText.match(/3\.50/i));
```
Your fourth `article` element should have `p` elements with the text `Hazelnut` and `4.00`.
```js
const children = $('article')[3].children;
assert(children[0].innerText.match(/Hazelnut/i));
assert(children[1].innerText.match(/4\.00/i));
```
Your fifth `article` element should have `p` elements with the text `Mocha` and `4.50`.
```js
const children = $('article')[4].children;
assert(children[0].innerText.match(/Mocha/i));
assert(children[1].innerText.match(/4\.50/i));
```
# --seed--
@ -45,7 +96,7 @@ Test 1
</header>
<main>
<section>
<h2>Coffees</h2>
<h2>Coffee</h2>
--fcc-editable-region--
<article>
<p>French Vanilla</p>
@ -61,7 +112,7 @@ Test 1
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
}
h1, h2, p {
@ -75,4 +126,3 @@ h1, h2, p {
margin-right: auto;
}
```

View File

@ -13,10 +13,22 @@ Add the class name `flavor` to the `French Vanilla` `p` element.
# --hints--
Test 1
You should add the `flavor` class to your `p` element.
```js
assert(code.match(/<p\s*class=('|")flavor\1\s*>/i));
```
You should only have one element with the `flavor` class.
```js
assert($('.flavor').length === 1);
```
Your `flavor` class should be on the `p` element with the text `French Vanilla`.
```js
assert($('.flavor')[0].innerText.match(/French Vanilla/i));
```
# --seed--
@ -40,7 +52,7 @@ Test 1
</header>
<main>
<section>
<h2>Coffees</h2>
<h2>Coffee</h2>
<article>
--fcc-editable-region--
<p>French Vanilla</p>
@ -48,7 +60,7 @@ Test 1
--fcc-editable-region--
</article>
<article>
<p>Carmel Macchiato</p>
<p>Caramel Macchiato</p>
<p>3.75</p>
</article>
<article>
@ -72,7 +84,7 @@ Test 1
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
}
h1, h2, p {
@ -86,4 +98,3 @@ h1, h2, p {
margin-right: auto;
}
```

View File

@ -11,10 +11,25 @@ Using your new `flavor` class as a selector, set the `text-align` property's val
# --hints--
Test 1
You should have a `flavor` class selector.
```js
const hasFlavor = new __helpers.CSSHelp(document).getStyle('.flavor');
assert(hasFlavor);
```
You should set the `text-align` property to `left`.
```js
const hasTextAlign = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['text-align'] === 'left');
assert(hasTextAlign);
```
Your `flavor` class selector should set the `text-align` property to `left`.
```js
const flavorTextAlign = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('text-align');
assert(flavorTextAlign === 'left');
```
# --seed--
@ -38,13 +53,13 @@ Test 1
</header>
<main>
<section>
<h2>Coffees</h2>
<h2>Coffee</h2>
<article>
<p class="flavor">French Vanilla</p>
<p>3.00</p>
</article>
<article>
<p>Carmel Macchiato</p>
<p>Caramel Macchiato</p>
<p>3.75</p>
</article>
<article>
@ -68,7 +83,7 @@ Test 1
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
}
h1, h2, p {
@ -85,5 +100,6 @@ h1, h2, p {
--fcc-editable-region--
--fcc-editable-region--
```

View File

@ -11,10 +11,22 @@ Next, you want to align the price to the right. Add a class named `price` to you
# --hints--
Test 1
You should add the `price` class to your `p` element.
```js
assert(code.match(/<p\s*class=('|")price\1\s*>/i));
```
You should only have one element with the `price` class.
```js
assert($('.price').length === 1);
```
Your `price` class should be on the `p` element with the text `3.00`.
```js
assert($('.price')[0].innerText.match(/3\.00/i));
```
# --seed--
@ -38,7 +50,7 @@ Test 1
</header>
<main>
<section>
<h2>Coffees</h2>
<h2>Coffee</h2>
<article>
<p class="flavor">French Vanilla</p>
--fcc-editable-region--
@ -46,7 +58,7 @@ Test 1
--fcc-editable-region--
</article>
<article>
<p>Carmel Macchiato</p>
<p>Caramel Macchiato</p>
<p>3.75</p>
</article>
<article>
@ -70,7 +82,7 @@ Test 1
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
}
h1, h2, p {
@ -88,4 +100,3 @@ h1, h2, p {
text-align: left;
}
```

View File

@ -11,10 +11,22 @@ Now align the text to the `right` for the elements with the `price` class.
# --hints--
Test 1
You should have a `price` class selector.
```js
assert(code.match(/\.price\s*{/i));
```
Your `price` class selector should set the `text-align` property to `right`.
```js
assert(code.match(/\.price\s*{\s*text-align:\s*right;?/i));
```
Your `.price` element should be aligned to the right.
```js
assert($('.price').css('text-align') === 'right');
```
# --seed--
@ -38,13 +50,13 @@ Test 1
</header>
<main>
<section>
<h2>Coffees</h2>
<h2>Coffee</h2>
<article>
<p class="flavor">French Vanilla</p>
<p class="price">3.00</p>
</article>
<article>
<p>Carmel Macchiato</p>
<p>Caramel Macchiato</p>
<p>3.75</p>
</article>
<article>
@ -68,7 +80,7 @@ Test 1
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
}
h1, h2, p {
@ -89,5 +101,6 @@ h1, h2, p {
--fcc-editable-region--
--fcc-editable-region--
```

View File

@ -9,14 +9,26 @@ dashedName: part-37
That is kind of what you want, but now it would be nice if the flavor and price were on the same line. `p` elements are <dfn>block-level</dfn> elements, so they take up the entire width of their parent element.
To get them on the same line, you need to apply some styling to the `p` elements, so they behave more like `inline` elements. Add a `class` attribute with the value `item` to first `article` element under the `Coffees` heading.
To get them on the same line, you need to apply some styling to the `p` elements, so they behave more like `inline` elements. Add a `class` attribute with the value `item` to first `article` element under the `Coffee` heading.
# --hints--
Test 1
You should apply the `item` class to your `article` element.
```js
assert(code.match(/<article\s*class=('|")item\1\s*>/i))
```
You should only have one `item` class element.
```js
assert($('.item').length === 1);
```
Your first `article` element should have the `item` class.
```js
assert($('article')[0].className === 'item');
```
# --seed--
@ -41,14 +53,14 @@ Test 1
<main>
<section>
--fcc-editable-region--
<h2>Coffees</h2>
<h2>Coffee</h2>
<article>
<p class="flavor">French Vanilla</p>
<p class="price">3.00</p>
</article>
--fcc-editable-region--
<article>
<p>Carmel Macchiato</p>
<p>Caramel Macchiato</p>
<p>3.75</p>
</article>
<article>
@ -72,7 +84,7 @@ Test 1
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
}
h1, h2, p {
@ -94,4 +106,3 @@ h1, h2, p {
text-align: right;
}
```

View File

@ -7,7 +7,7 @@ dashedName: part-38
# --description--
The `p` elements are nested in an `article` elements with the class attribute of `item`. You can style all the `p` elements nested anywhere in elements with a class named `item` like this:
The `p` elements are nested in an `article` element with the class attribute of `item`. You can style all the `p` elements nested anywhere in elements with a class named `item` like this:
```css
.item p { }
@ -17,10 +17,25 @@ Using the above selector, add a `display` property with value `inline-block` so
# --hints--
Test 1
You should use the `.item p` selector.
```js
const hasItemP = new __helpers.CSSHelp(document).getStyle('.item p');
assert(hasItemP);
```
You should set the `display` property to `inline-block`.
```js
const hasDisplay = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.display === 'inline-block');
assert(hasDisplay);
```
Your `.item p` selector should set the `display` property to `inline-block`.
```js
const itemPDisplay = new __helpers.CSSHelp(document).getStyle('.item p')?.getPropertyValue('display');
assert(itemPDisplay === 'inline-block');
```
# --seed--
@ -44,13 +59,13 @@ Test 1
</header>
<main>
<section>
<h2>Coffees</h2>
<h2>Coffee</h2>
<article class="item">
<p class="flavor">French Vanilla</p>
<p class="price">3.00</p>
</article>
<article>
<p>Carmel Macchiato</p>
<p>Caramel Macchiato</p>
<p>3.75</p>
</article>
<article>
@ -74,7 +89,7 @@ Test 1
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
}
h1, h2, p {
@ -100,4 +115,3 @@ h1, h2, p {
text-align: right;
}
```

View File

@ -11,10 +11,18 @@ That's closer, but the price didn't stay over on the right. This is because `inl
# --hints--
Test 1
You should set the `width` property to `50%` in your `.flavor` selector.
```js
const flavorWidth = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('width');
assert(flavorWidth === '50%');
```
You should set the `width` property to `50%` in your `.price` selector.
```js
const priceWidth = new __helpers.CSSHelp(document).getStyle('.price')?.getPropertyValue('width');
assert(priceWidth === '50%');
```
# --seed--
@ -38,13 +46,13 @@ Test 1
</header>
<main>
<section>
<h2>Coffees</h2>
<h2>Coffee</h2>
<article class="item">
<p class="flavor">French Vanilla</p>
<p class="price">3.00</p>
</article>
<article>
<p>Carmel Macchiato</p>
<p>Caramel Macchiato</p>
<p>3.75</p>
</article>
<article>
@ -68,7 +76,7 @@ Test 1
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
}
h1, h2, p {

View File

@ -7,16 +7,24 @@ dashedName: part-40
# --description--
Well that did not work. Styling the `p` elements as `inline-block` and placing them on a separate lines in the code, creates an extra space to the right of the first `p` element, causing the second one to shift to the next line. One way to fix this is to make each `p`'s width a little less than `50%`.
Well that did not work. Styling the `p` elements as `inline-block` and placing them on separate lines in the code creates an extra space to the right of the first `p` element, causing the second one to shift to the next line. One way to fix this is to make each `p` element's width a little less than `50%`.
Change the `width` value to `49%` for each class to see what happens.
# --hints--
Test 1
You should set the `width` property to `49%` in your `.flavor` selector.
```js
const flavorWidth = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('width');
assert(flavorWidth === '49%');
```
You should set the `width` property to `49%` in your `.price` selector.
```js
const priceWidth = new __helpers.CSSHelp(document).getStyle('.price')?.getPropertyValue('width');
assert(priceWidth === '49%');
```
# --seed--
@ -40,13 +48,13 @@ Test 1
</header>
<main>
<section>
<h2>Coffees</h2>
<h2>Coffee</h2>
<article class="item">
<p class="flavor">French Vanilla</p>
<p class="price">3.00</p>
</article>
<article>
<p>Carmel Macchiato</p>
<p>Caramel Macchiato</p>
<p>3.75</p>
</article>
<article>
@ -70,7 +78,7 @@ Test 1
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
}
h1, h2, p {

View File

@ -13,10 +13,10 @@ You could keep trying various percentages for the widths. Instead, simply move t
# --hints--
Test 1
Your `p` elements should not have any space between them.
```js
assert(code.match(/Vanilla<\/p><p/));
```
# --seed--
@ -40,7 +40,7 @@ Test 1
</header>
<main>
<section>
<h2>Coffees</h2>
<h2>Coffee</h2>
<article class="item">
--fcc-editable-region--
<p class="flavor">French Vanilla</p>
@ -48,7 +48,7 @@ Test 1
--fcc-editable-region--
</article>
<article>
<p>Carmel Macchiato</p>
<p>Caramel Macchiato</p>
<p>3.75</p>
</article>
<article>
@ -72,7 +72,7 @@ Test 1
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
}
h1, h2, p {

View File

@ -11,10 +11,18 @@ Now go ahead and change both the `flavor` and `price` class' widths to be `50%`
# --hints--
Test 1
You should set the `width` property to `50%` in your `.flavor` selector.
```js
const flavorWidth = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('width');
assert(flavorWidth === '50%');
```
You should set the `width` property to `50%` in your `.price` selector.
```js
const priceWidth = new __helpers.CSSHelp(document).getStyle('.price')?.getPropertyValue('width');
assert(priceWidth === '50%');
```
# --seed--
@ -38,12 +46,12 @@ Test 1
</header>
<main>
<section>
<h2>Coffees</h2>
<h2>Coffee</h2>
<article class="item">
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
</article>
<article>
<p>Carmel Macchiato</p>
<p>Caramel Macchiato</p>
<p>3.75</p>
</article>
<article>
@ -67,7 +75,7 @@ Test 1
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
}
h1, h2, p {

View File

@ -11,10 +11,29 @@ Now that you know it works, you can change the remaining `article` and `p` eleme
# --hints--
Test 1
You should only have five `article` elements.
```js
assert($('article').length === 5);
```
You should only have five `.item` elements.
```js
assert($('.item').length === 5);
```
Your `.item` elements should be your `article` elements.
```js
const articles = $('article');
const items = $('.item');
assert(articles[0] === items[0]);
assert(articles[1] === items[1]);
assert(articles[2] === items[2]);
assert(articles[3] === items[3]);
assert(articles[4] === items[4]);
```
# --seed--
@ -38,13 +57,13 @@ Test 1
</header>
<main>
<section>
<h2>Coffees</h2>
<h2>Coffee</h2>
<article class="item">
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
</article>
--fcc-editable-region--
<article>
<p>Carmel Macchiato</p>
<p>Caramel Macchiato</p>
<p>3.75</p>
</article>
<article>
@ -69,7 +88,7 @@ Test 1
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
}
h1, h2, p {

View File

@ -11,10 +11,10 @@ Next, position the other `p` elements to be on the same line with no space betwe
# --hints--
Test 1
You should not have any spaces between your `p` elements.
```js
assert(!code.match(/<\/p>\s+<p/));
```
# --seed--
@ -38,13 +38,13 @@ Test 1
</header>
<main>
<section>
<h2>Coffees</h2>
<h2>Coffee</h2>
<article class="item">
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
</article>
--fcc-editable-region--
<article class="item">
<p>Carmel Macchiato</p>
<p>Caramel Macchiato</p>
<p>3.75</p>
</article>
<article class="item">
@ -69,7 +69,7 @@ Test 1
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
}
h1, h2, p {

View File

@ -11,10 +11,40 @@ To complete the styling, add the applicable class names `flavor` and `price` to
# --hints--
Test 1
You should have five `.flavor` elements.
```js
assert($('.flavor').length === 5);
```
You should have five `.price` elements.
```js
assert($('.price').length === 5);
```
Your `.flavor` elements should be your `p` elements with the text `French Vanilla`, `Caramel Macchiato`, `Pumpkin Spice`, `Hazelnut`, and `Mocha`.
```js
const p = $('p');
const flavor = $('.flavor');
assert(p[1] === flavor[0]);
assert(p[3] === flavor[1]);
assert(p[5] === flavor[2]);
assert(p[7] === flavor[3]);
assert(p[9] === flavor[4]);
```
Your `.price` elements should be your `p` elements with the text `3.00`, `3.75`, `3.50`, `4.00`, and `4.50`.
```js
const p = $('p');
const price = $('.price');
assert(p[2] === price[0]);
assert(p[4] === price[1]);
assert(p[6] === price[2]);
assert(p[8] === price[3]);
assert(p[10] === price[4]);
```
# --seed--
@ -38,13 +68,13 @@ Test 1
</header>
<main>
<section>
<h2>Coffees</h2>
<h2>Coffee</h2>
<article class="item">
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
</article>
--fcc-editable-region--
<article class="item">
<p>Carmel Macchiato</p><p>3.75</p>
<p>Caramel Macchiato</p><p>3.75</p>
</article>
<article class="item">
<p>Pumpkin Spice</p><p>3.50</p>
@ -65,7 +95,7 @@ Test 1
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
}
h1, h2, p {

View File

@ -9,14 +9,22 @@ dashedName: part-46
If you make the width of the page preview smaller, you will notice at some point, some of the text on the left starts wrapping around to the next line. This is because the width of the `p` elements on the left side can only take up `50%` of the space.
Since you know the prices on the right have significantly fewer characters, change the `flavor` class `width` value to be `75%` and then `dessert` class `width` value to be `25%`.
Since you know the prices on the right have significantly fewer characters, change the `flavor` class `width` value to be `75%` and then `price` class `width` value to be `25%`.
# --hints--
Test 1
You should set the `width` property to `75%` in your `.flavor` selector.
```js
const flavorWidth = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('width');
assert(flavorWidth === '75%');
```
You should set the `width` property to `25%` in your `.price` selector.
```js
const priceWidth = new __helpers.CSSHelp(document).getStyle('.price')?.getPropertyValue('width');
assert(priceWidth === '25%');
```
# --seed--
@ -40,12 +48,12 @@ Test 1
</header>
<main>
<section>
<h2>Coffees</h2>
<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">Carmel Macchiato</p><p class="price">3.75</p>
<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>
@ -65,7 +73,7 @@ Test 1
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
}
h1, h2, p {

View File

@ -11,10 +11,28 @@ You will come back to the styling the menu in a few steps, but for now, go ahead
# --hints--
Test 1
You should have an opening `section` tag.
```js
assert(code.match(/<section>/ig).length === 2);
```
You should have a closing `section` tag.
```js
assert(code.match(/<\/section>/ig).length === 2);
```
You should not change the existing `main` element.
```js
assert($('main').length === 1);
```
Your new `section` element should be nested in the `main` element.
```js
assert($('main').children('section').length === 2);
```
# --seed--
@ -39,12 +57,12 @@ Test 1
<main>
--fcc-editable-region--
<section>
<h2>Coffees</h2>
<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">Carmel Macchiato</p><p class="price">3.75</p>
<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>
@ -65,7 +83,7 @@ Test 1
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
}
h1, h2, p {

View File

@ -7,14 +7,26 @@ dashedName: part-48
# --description--
Add an `h2` element in the new section add give it the text `Desserts`.
Add an `h2` element in the new section and give it the text `Desserts`.
# --hints--
Test 1
You should not change your existing `section` element.
```js
assert($('section').length === 2);
```
You should add an `h2` element in your second `section` element.
```js
assert($('section')[1].children[0].tagName === 'H2');
```
Your new `h2` element should have the text `Desserts`.
```js
assert($('h2')[1].innerText.match(/Desserts/i));
```
# --seed--
@ -38,12 +50,12 @@ Test 1
</header>
<main>
<section>
<h2>Coffees</h2>
<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">Carmel Macchiato</p><p class="price">3.75</p>
<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>
@ -67,7 +79,7 @@ Test 1
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
}
h1, h2, p {

View File

@ -11,10 +11,22 @@ Add an empty `article` element under the `Desserts` heading. Give it a `class` a
# --hints--
Test 1
You should not change your existing `h2` element.
```js
assert($('h2').length === 2);
```
Your `article` element should be below your `h2` element.
```js
assert($('section')[1].children[1].tagName === 'ARTICLE');
```
Your new `article` element should have the `item` class.
```js
assert($('section')[1].children[1].className === 'item');
```
# --seed--
@ -38,12 +50,12 @@ Test 1
</header>
<main>
<section>
<h2>Coffees</h2>
<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">Carmel Macchiato</p><p class="price">3.75</p>
<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>
@ -68,7 +80,7 @@ Test 1
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
}
h1, h2, p {

View File

@ -11,10 +11,28 @@ Nest two `p` elements inside your `article` element. The first one's text should
# --hints--
Test 1
You should not change your existing `article` element.
```js
assert($('article').length === 6);
```
Your new `article` element should have two `p` elements.
```js
assert($('article').last().children('p').length === 2);
```
Your first `p` element should have the text `Donut`.
```js
assert($('article').last().children('p')[0].innerText.match(/Donut/i));
```
Your second `p` element should have the text `1.50`.
```js
assert($('article').last().children('p')[1].innerText.match(/1\.50/i));
```
# --seed--
@ -38,12 +56,12 @@ Test 1
</header>
<main>
<section>
<h2>Coffees</h2>
<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">Carmel Macchiato</p><p class="price">3.75</p>
<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>
@ -70,7 +88,7 @@ Test 1
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
}
h1, h2, p {

View File

@ -11,10 +11,28 @@ For the two `p` elements you just added, add `dessert` as the value of the first
# --hints--
Test 1
You should have one `p` element with the `dessert` class.
```js
assert($('.dessert').length === 1);
```
Your `p` element with the text `Donut` should have the `dessert` class.
```js
assert($('.dessert')[0].innerText.match(/donut/i));
```
Your `p` element with the text `1.50` should have the `price` class.
```js
assert($('.price').last().text().match(/1\.50/));
```
You should not have any spaces between your `p` elements.
```js
assert(!code.match(/<\/p>\s+<p/));
```
# --seed--
@ -38,12 +56,12 @@ Test 1
</header>
<main>
<section>
<h2>Coffees</h2>
<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">Carmel Macchiato</p><p class="price">3.75</p>
<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>
@ -71,7 +89,7 @@ Test 1
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
}
h1, h2, p {

View File

@ -7,16 +7,17 @@ dashedName: part-52
# --description--
Something does not look right. You added the correct `class` attribute value to the `p` element with `Donunt` as its text, but you have not defined a selector for it.
Something does not look right. You added the correct `class` attribute value to the `p` element with `Donut` as its text, but you have not defined a selector for it.
Since the `flavor` class selector already has the properties you want, just add the `dessert` class name to it.
# --hints--
Test 1
You should add the `.dessert` selector to your `.flavor` selector.
```js
const selector = new __helpers.CSSHelp(document).getStyle('.flavor, .dessert') || new __helpers.CSSHelp(document).getStyle('.dessert, .flavor');
assert(selector)
```
# --seed--
@ -40,12 +41,12 @@ Test 1
</header>
<main>
<section>
<h2>Coffees</h2>
<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">Carmel Macchiato</p><p class="price">3.75</p>
<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>
@ -71,7 +72,7 @@ Test 1
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
}
h1, h2, p {
@ -101,4 +102,3 @@ h1, h2, p {
width: 25%
}
```

View File

@ -17,10 +17,48 @@ Cinammon Roll 2.50
# --hints--
Test 1
You should have four `.dessert` elements.
```js
assert($('.dessert').length === 4);
```
You should have four new `.price` elements.
```js
assert($('section').last().find('.price').length === 4);
```
Your `section` element should have eight `p` elements.
```js
assert($('section').last().find('p').length === 8);
```
Your `.dessert` elements should have the text `Donut`, `Cherry Pie`, `Cheesecake`, and `Cinammon Roll`.
```js
const dessert = $('.dessert');
assert(dessert[0].innerText.match(/donut/i));
assert(dessert[1].innerText.match(/cherry pie/i));
assert(dessert[2].innerText.match(/cheesecake/i));
assert(dessert[3].innerText.match(/cinammon roll/i));
```
Your new `.price` elements should have the text `1.50`, `2.75`, `3.00`, and `2.50`.
```js
const prices = $('section').last().find('.price');
assert(prices[0].innerText.match(/1\.50/));
assert(prices[1].innerText.match(/2\.75/));
assert(prices[2].innerText.match(/3\.00/));
assert(prices[3].innerText.match(/2\.50/));
```
You should not have any spaces between your `p` elements.
```js
assert(!code.match(/<\/p>\s+<p/));
```
# --seed--
@ -44,12 +82,12 @@ Test 1
</header>
<main>
<section>
<h2>Coffees</h2>
<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">Carmel Macchiato</p><p class="price">3.75</p>
<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>
@ -77,7 +115,7 @@ Test 1
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
}
h1, h2, p {
@ -105,4 +143,3 @@ h1, h2, p {
width: 25%
}
```

View File

@ -1,5 +1,5 @@
---
id: 5f3ef6e0086dc80481f8cb03
id: 5f3ef6e0eaa7da26e3d34d78
title: Part 54
challengeType: 0
dashedName: part-54
@ -7,16 +7,38 @@ dashedName: part-54
# --description--
Something does not look right. You added the correct `class` attribute to the `p` elements with dessert names, but you have not defined a selector for it.
You can give your menu some space between the content and the sides with various `padding` properties.
Since the `flavor` class selector already has the properties you want, just add the `dessert` class to it.
Give the `menu` class a `padding-left` and a `padding-right` with the same value `20px`.
# --hints--
Test 1
You should set the `padding-left` property to `20px`.
```js
const hasPaddingLeft = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['padding-left'] === '20px');
assert(hasPaddingLeft);
```
You should set the `padding-right` property to `20px`.
```js
const hasPaddingRight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['padding-right'] === '20px');
assert(hasPaddingRight);
```
Your `.menu` element should have a `padding-left` of `20px`.
```js
const menuPaddingLeft = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-left');
assert(menuPaddingLeft === '20px');
```
Your `.menu` element should have a `padding-right` of `20px`.
```js
const menuPaddingRight = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-right');
assert(menuPaddingRight === '20px');
```
# --seed--
@ -40,12 +62,12 @@ Test 1
</header>
<main>
<section>
<h2>Coffees</h2>
<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">Carmel Macchiato</p><p class="price">3.75</p>
<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>
@ -80,30 +102,30 @@ Test 1
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
}
h1, h2, p {
text-align: center;
}
--fcc-editable-region--
.menu {
width: 80%;
background-color: burlywood;
margin-left: auto;
margin-right: auto;
}
--fcc-editable-region--
.item p {
display: inline-block;
}
--fcc-editable-region--
.flavor {
.flavor, .dessert {
text-align: left;
width: 75%;
}
--fcc-editable-region--
.price {
text-align: right;

View File

@ -1,5 +1,5 @@
---
id: 5f3ef6e0eaa7da26e3d34d78
id: 5f3ef6e050279c7a4a7101d3
title: Part 55
challengeType: 0
dashedName: part-55
@ -7,16 +7,45 @@ dashedName: part-55
# --description--
You can give your menu some space between the content and the sides with various `padding` properties.
Give the `menu` class a `padding-left` and a `padding-right` with the same value `20px`.
That looks better. Now try to add the same `20px` padding to the top and bottom of the menu.
# --hints--
Test 1
You should not remove the `padding-left` or `padding-right` properties.
```js
const paddingLeft = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-left');
assert(paddingLeft === '20px');
const paddingRight = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-right');
assert(paddingRight === '20px');
```
You should set the `padding-top` property to `20px`.
```js
const hasPaddingTop = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['padding-top'] === '20px');
assert(hasPaddingTop);
```
You should set the `padding-bottom` property to `20px`.
```js
const hasPaddingBottom = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['padding-top'] === '20px');
assert(hasPaddingBottom);
```
Your `.menu` element should have a `padding-top` of `20px`.
```js
const menuPaddingTop = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-top');
assert(menuPaddingTop === '20px');
```
Your `.menu` element should have a `padding-bottom` of `20px`.
```js
const menuPaddingBottom = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-bottom');
assert(menuPaddingBottom === '20px');
```
# --seed--
@ -40,12 +69,12 @@ Test 1
</header>
<main>
<section>
<h2>Coffees</h2>
<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">Carmel Macchiato</p><p class="price">3.75</p>
<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>
@ -80,7 +109,7 @@ Test 1
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
}
h1, h2, p {
@ -93,6 +122,8 @@ h1, h2, p {
background-color: burlywood;
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px;
}
--fcc-editable-region--

View File

@ -1,5 +1,5 @@
---
id: 5f3ef6e050279c7a4a7101d3
id: 5f3ef6e04559b939080db057
title: Part 56
challengeType: 0
dashedName: part-56
@ -7,14 +7,46 @@ dashedName: part-56
# --description--
That looks better. Now try to add the same `20px` padding to the top and bottom of the menu.
Since all 4 sides of the menu have the same internal spacing, go ahead and delete the four properties and use a single `padding` property with the value `20px`.
# --hints--
Test 1
You should remove the `padding-left` property.
```js
assert(!code.match(/padding-left/i));
```
You should remove the `padding-right` property.
```js
assert(!code.match(/padding-right/i));
```
You should remove the `padding-top` property.
```js
assert(!code.match(/padding-top/i));
```
You should remove the `padding-bottom` property.
```js
assert(!code.match(/padding-bottom/i));
```
You should set the `padding` property to `20px`.
```js
const hasPadding = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['padding'] === '20px');
assert(hasPadding);
```
Your `.menu` element should have a `padding` value of `20px`.
```js
const menuPadding = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding');
assert(menuPadding === '20px');
```
# --seed--
@ -38,12 +70,12 @@ Test 1
</header>
<main>
<section>
<h2>Coffees</h2>
<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">Carmel Macchiato</p><p class="price">3.75</p>
<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>
@ -78,7 +110,7 @@ Test 1
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
}
h1, h2, p {
@ -93,6 +125,8 @@ h1, h2, p {
margin-right: auto;
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
padding-bottom: 20px;
}
--fcc-editable-region--

View File

@ -1,5 +1,5 @@
---
id: 5f3ef6e04559b939080db057
id: 5f3ef6e03d719d5ac4738993
title: Part 57
challengeType: 0
dashedName: part-57
@ -7,14 +7,24 @@ dashedName: part-57
# --description--
Since all 4 sides of the menu have the same internal spacing, go ahead and delete the four properties and use a single `padding` property with the value `20px`.
The current width of the menu will always take up 80% of the `body` element's width. On a very wide screen, the coffee and dessert appear far apart from their prices.
Add a `max-width` property to the `menu` class with a value of `500px` to prevent it from growing too wide.
# --hints--
Test 1
You should set the `max-width` property to `500px`.
```js
const hasMaxWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['max-width'] === '500px');
assert(hasMaxWidth);
```
Your `.menu` element should have a `max-width` of `500px`.
```js
const menuMaxWidth = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('max-width');
assert(menuMaxWidth === '500px');
```
# --seed--
@ -38,12 +48,12 @@ Test 1
</header>
<main>
<section>
<h2>Coffees</h2>
<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">Carmel Macchiato</p><p class="price">3.75</p>
<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>
@ -78,7 +88,7 @@ Test 1
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
}
h1, h2, p {
@ -91,10 +101,7 @@ h1, h2, p {
background-color: burlywood;
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
padding-bottom: 20px;
padding: 20px;
}
--fcc-editable-region--

View File

@ -1,5 +1,5 @@
---
id: 5f3ef6e03d719d5ac4738993
id: 5f3ef6e05473f91f948724ab
title: Part 58
challengeType: 0
dashedName: part-58
@ -7,16 +7,23 @@ dashedName: part-58
# --description--
The current width of the menu will always take of 80% of the `body` element's width. On a very wide screen, the coffee and dessert appear far apart from their prices.
You can change the `font-family` of text, to make it look different from the default font of your browser. Each browser has some common fonts available to it.
Add a `max-width` property to the `menu` class with a value of `500px` to prevent it from growing too wide.
Change all the text in your `body`, by adding a `font-family` property with the value `sans-serif`. This is a fairly common font that is very readable.
# --hints--
Test 1
You should set the `font-family` property to `sans-serif`.
```js
const hasFontFamily = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['font-family'] === 'sans-serif');
```
Your `body` should have a `font-family` of `sans-serif`.
```js
const bodyFontFamily = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('font-family');
assert(bodyFontFamily === 'sans-serif');
```
# --seed--
@ -40,12 +47,12 @@ Test 1
</header>
<main>
<section>
<h2>Coffees</h2>
<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">Carmel Macchiato</p><p class="price">3.75</p>
<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>
@ -79,23 +86,24 @@ Test 1
```
```css
--fcc-editable-region--
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
}
--fcc-editable-region--
h1, h2, p {
text-align: center;
}
--fcc-editable-region--
.menu {
width: 80%;
background-color: burlywood;
margin-left: auto;
margin-right: auto;
padding: 20px;
max-width: 500px;
}
--fcc-editable-region--
.item p {
display: inline-block;
@ -111,4 +119,3 @@ h1, h2, p {
width: 25%
}
```

View File

@ -1,5 +1,5 @@
---
id: 5f3ef6e05473f91f948724ab
id: 5f3ef6e056bdde6ae6892ba2
title: Part 59
challengeType: 0
dashedName: part-59
@ -7,16 +7,36 @@ dashedName: part-59
# --description--
You can change the `font-family` of text, to make it look different the the default font of your browser. Each browser has some common fonts available to it.
It is a bit boring for all the text to have the same `font-family`. You can still have the majority of the text `sans-serif` and make just the `h1` and `h2` elements different using a different selector.
Change all the text in your `body`, by adding a `font-family` property with the value `sans-serif`. This is a fairly common font that is very readable.
Style both the `h1` and the `h2` elements so that only these elements' text use `Impact` font.
# --hints--
Test 1
You should use an `h1, h2` selector.
```js
const h1h2Selector = new __helpers.CSSHelp(document).getStyle('h1, h2');
assert(h1h2Selector);
```
You should set the `font-family` to `Impact`.
```js
const hasFontFamily = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['font-family'] === 'Impact');
assert(hasFontFamily);
```
Your `h1` element should have a `font-family` of `Impact`.
```js
assert($('h1').css('font-family').match(/impact/i));
```
Your `h2` element should have a `font-family` of `Impact`.
```js
assert($('h2').css('font-family').match(/impact/i));
```
# --seed--
@ -40,12 +60,12 @@ Test 1
</header>
<main>
<section>
<h2>Coffees</h2>
<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">Carmel Macchiato</p><p class="price">3.75</p>
<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>
@ -79,11 +99,10 @@ Test 1
```
```css
--fcc-editable-region--
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
font-family: sans-serif;
}
--fcc-editable-region--
h1, h2, p {
text-align: center;
@ -98,6 +117,10 @@ h1, h2, p {
max-width: 500px;
}
--fcc-editable-region--
--fcc-editable-region--
.item p {
display: inline-block;
}

View File

@ -1,5 +1,5 @@
---
id: 5f3ef6e056bdde6ae6892ba2
id: 5f3ef6e0e9629bad967cd71e
title: Part 60
challengeType: 0
dashedName: part-60
@ -7,16 +7,17 @@ dashedName: part-60
# --description--
It is a bit boring for all the text to have the same `font-family`. You can still have the majority of the text `sans-serif` and make just the `h1` and `h2` elements different using a different selector.
You can add a <dfn>fallback</dfn> value for the font-family by adding another font name separated by a comma. This second font would be used in case the browser does not have the font built-in to it.
Style both the `h1` and the `h2` elements so that only these elements' text use `Impact` font.
Add the fallback font `serif` after the `Impact` font.
# --hints--
Test 1
You should add `serif` as a fallback for the `Impact` font.
```js
const fontFamily = new __helpers.CSSHelp(document).getStyle('h1, h2')?.getPropertyValue('font-family');
assert(fontFamily === 'Impact, serif');
```
# --seed--
@ -40,12 +41,12 @@ Test 1
</header>
<main>
<section>
<h2>Coffees</h2>
<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">Carmel Macchiato</p><p class="price">3.75</p>
<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>
@ -80,7 +81,7 @@ Test 1
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
font-family: sans-serif;
}
@ -98,7 +99,9 @@ h1, h2, p {
}
--fcc-editable-region--
h1, h2 {
font-family: Impact;
}
--fcc-editable-region--
.item p {

View File

@ -1,5 +1,5 @@
---
id: 5f3ef6e0e9629bad967cd71e
id: 5f3ef6e06d34faac0447fc44
title: Part 61
challengeType: 0
dashedName: part-61
@ -7,16 +7,29 @@ dashedName: part-61
# --description--
You can add a <dfn>fallback</dfn> value for the font-family by adding another font name separated by a comma. This second font would be used in case the browser does not have the font built-in to it.
Add the fallback font `serif` after the `Impact` font.
Make the `Est. 2020` text italicized by creating an `established` class selector and giving it the `font-style` property with the value `italic`.
# --hints--
Test 1
You should have an `.established` selector.
```js
const hasEstablished = new __helpers.CSSHelp(document).getStyle('.established');
assert(hasEstablished);
```
You should set the `font-style` property to `italic`.
```js
const hasFontStyle = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['font-style'] === 'italic');
assert(hasFontStyle);
```
Your `.established` selector should set the `font-style` property to `italic`.
```js
const establishedFontStyle = new __helpers.CSSHelp(document).getStyle('.established')?.getPropertyValue('font-style');
assert(establishedFontStyle === 'italic');
```
# --seed--
@ -40,12 +53,12 @@ Test 1
</header>
<main>
<section>
<h2>Coffees</h2>
<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">Carmel Macchiato</p><p class="price">3.75</p>
<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>
@ -80,10 +93,14 @@ Test 1
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
font-family: sans-serif;
}
--fcc-editable-region--
--fcc-editable-region--
h1, h2, p {
text-align: center;
}
@ -97,11 +114,9 @@ h1, h2, p {
max-width: 500px;
}
--fcc-editable-region--
h1, h2 {
font-family: Impact;
font-family: Impact, serif;
}
--fcc-editable-region--
.item p {
display: inline-block;

View File

@ -1,5 +1,5 @@
---
id: 5f3ef6e06d34faac0447fc44
id: 5f3ef6e087d56ed3ffdc36be
title: Part 62
challengeType: 0
dashedName: part-62
@ -7,14 +7,27 @@ dashedName: part-62
# --description--
Make the `Est. 2020` text italicized by creating an `established` class selector and giving it the `font-style` property with the value `italic`.
Now apply the `established` class to the `Est. 2020` text.
# --hints--
Test 1
You should set the `class` of the `p` element to `established`.
```js
assert(code.match(/<p class=('|")established\1>/i));
```
Your `established` class should be on the element with the text `Est. 2020`.
```js
const established = $('.established');
assert(established[0].innerText.match(/Est\.\s2020/i));
```
Your `established` class element should have italic text.
```js
assert($('.established').css('font-style') === 'italic');
```
# --seed--
@ -32,18 +45,20 @@ Test 1
</head>
<body>
<div class="menu">
--fcc-editable-region--
<header>
<h1>CAMPER CAFE</h1>
<p>Est. 2020</p>
</header>
--fcc-editable-region--
<main>
<section>
<h2>Coffees</h2>
<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">Carmel Macchiato</p><p class="price">3.75</p>
<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>
@ -78,13 +93,13 @@ Test 1
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
font-family: sans-serif;
}
--fcc-editable-region--
--fcc-editable-region--
.established {
font-style: italic;
}
h1, h2, p {
text-align: center;
@ -117,4 +132,3 @@ h1, h2 {
width: 25%
}
```

View File

@ -1,5 +1,5 @@
---
id: 5f3ef6e087d56ed3ffdc36be
id: 5f3ef6e0f8c230bdd2349716
title: Part 63
challengeType: 0
dashedName: part-63
@ -7,14 +7,38 @@ dashedName: part-63
# --description--
Now apply the `established` class to the `Est. 2020` text.
The typography of heading elements (e.g. `h1`, `h2`) is set by default values of users' browsers.
Add two new type selectors (`h1` and `h2`). Use the `font-size` property for both, but use the value `40px` for the `h1` and `30px` for the `h2`.
# --hints--
Test 1
You should use an `h1` selector.
```js
const hasH1 = new __helpers.CSSHelp(document).getStyle('h1');
assert(hasH1);
```
You should use an `h2` selector.
```js
const hasH2 = new __helpers.CSSHelp(document).getStyle('h2');
assert(hasH2);
```
Your `h1` element should have a `font-size` of `40px`.
```js
const h1FontSize = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('font-size');
assert(h1FontSize === '40px');
```
Your `h2` element should have a `font-size` of `30px`.
```js
const h2FontSize = new __helpers.CSSHelp(document).getStyle('h2')?.getPropertyValue('font-size');
assert(h2FontSize === '30px');
```
# --seed--
@ -32,20 +56,18 @@ Test 1
</head>
<body>
<div class="menu">
--fcc-editable-region--
<header>
<h1>CAMPER CAFE</h1>
<p>Est. 2020</p>
<p class="established">Est. 2020</p>
</header>
--fcc-editable-region--
<main>
<section>
<h2>Coffees</h2>
<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">Carmel Macchiato</p><p class="price">3.75</p>
<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>
@ -80,10 +102,14 @@ Test 1
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
font-family: sans-serif;
}
--fcc-editable-region--
--fcc-editable-region--
.established {
font-style: italic;
}
@ -119,4 +145,3 @@ h1, h2 {
width: 25%
}
```

View File

@ -1,5 +1,5 @@
---
id: 5f3ef6e0f8c230bdd2349716
id: 5f3ef6e07276f782bb46b93d
title: Part 64
challengeType: 0
dashedName: part-64
@ -7,16 +7,33 @@ dashedName: part-64
# --description--
The `h1` and `h2` elements' text are set by default values of the user's browser.
Add two new type selectors (`h1` and `h2`). Use the `font-size` property for both, but use the value `40px` for the `h1` and `30px` for the `h2`.
Add a `footer` element below the `main` element, where you can add some additional information.
# --hints--
Test 1
You should have an opening `<footer>` tag.
```js
assert(code.match(/<footer>/i));
```
You should have a closing `</footer>` tag.
```js
assert(code.match(/<\/footer>/i));
```
You should not modify the existing `main` element.
```js
assert($('main').length === 1);
```
Your `footer` element should be below your `main` element.
```js
const footer = $('footer')[0]
assert(footer.previousElementSibling.tagName === 'MAIN');
```
# --seed--
@ -38,14 +55,15 @@ Test 1
<h1>CAMPER CAFE</h1>
<p class="established">Est. 2020</p>
</header>
--fcc-editable-region--
<main>
<section>
<h2>Coffees</h2>
<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">Carmel Macchiato</p><p class="price">3.75</p>
<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>
@ -73,6 +91,7 @@ Test 1
</article>
</section>
</main>
--fcc-editable-region--
</div>
</body>
<html>
@ -80,13 +99,17 @@ Test 1
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
font-family: sans-serif;
}
--fcc-editable-region--
h1 {
font-size: 40px;
}
--fcc-editable-region--
h2 {
font-size: 30px;
}
.established {
font-style: italic;

View File

@ -1,5 +1,5 @@
---
id: 5f3ef6e07276f782bb46b93d
id: 5f3ef6e0a81099d9a697b550
title: Part 65
challengeType: 0
dashedName: part-65
@ -7,14 +7,38 @@ dashedName: part-65
# --description--
Add a `footer` element below the `main` element, where you can some additional information.
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--
Test 1
You should not modify the existing `footer` element.
```js
assert($('footer').length === 1);
```
Your new `p` element should be nested within your `footer` element.
```js
assert($('footer').children('p').length === 1);
```
Your new `a` element should be nested within your new `p` element.
```js
assert($('footer').children('p').children('a').length === 1);
```
Your new `a` element should have the text `Visit our website`.
```js
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.
```js
assert($('footer').find('a').attr('href') === 'https://www.freecodecamp.org');
```
# --seed--
@ -36,15 +60,14 @@ Test 1
<h1>CAMPER CAFE</h1>
<p class="established">Est. 2020</p>
</header>
--fcc-editable-region--
<main>
<section>
<h2>Coffees</h2>
<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">Carmel Macchiato</p><p class="price">3.75</p>
<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>
@ -72,6 +95,9 @@ Test 1
</article>
</section>
</main>
--fcc-editable-region--
<footer>
</footer>
--fcc-editable-region--
</div>
</body>
@ -80,7 +106,7 @@ Test 1
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
font-family: sans-serif;
}

View File

@ -1,5 +1,5 @@
---
id: 5f3ef6e0a81099d9a697b550
id: 5f3ef6e0b431cc215bb16f55
title: Part 66
challengeType: 0
dashedName: part-66
@ -7,14 +7,20 @@ dashedName: part-66
# --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`.
Add a second `p` element below the one with the link and give it the text `123 Free Code Camp Drive`.
# --hints--
Test 1
You should add a second `p` element to your `footer`.
```js
assert($('footer').children('p').length === 2);
```
Your new `p` element should have the text `123 Free Code Camp Drive`. Make sure your new element comes after your existing element.
```js
assert($('footer').children('p').last().text().match(/123 Free Code Camp Drive/i));
```
# --seed--
@ -38,12 +44,12 @@ Test 1
</header>
<main>
<section>
<h2>Coffees</h2>
<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">Carmel Macchiato</p><p class="price">3.75</p>
<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>
@ -71,10 +77,13 @@ Test 1
</article>
</section>
</main>
--fcc-editable-region--
<footer>
</footer>
--fcc-editable-region--
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
--fcc-editable-region--
</footer>
</div>
</body>
<html>
@ -82,7 +91,7 @@ Test 1
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
font-family: sans-serif;
}

View File

@ -1,5 +1,5 @@
---
id: 5f3ef6e0b431cc215bb16f55
id: 5f3ef6e01f288a026d709587
title: Part 67
challengeType: 0
dashedName: part-67
@ -7,14 +7,36 @@ dashedName: part-67
# --description--
Add a second `p` element below the one with the link and give it the text `123 freeCodeCamp Drive`.
You can use an `hr` element to display a divider between sections of different content.
First, add an `hr` element between the first `header` element and the `main` element. Note that `hr` elements are self closing.
# --hints--
Test 1
You should add an `hr` element. `hr` elements are self-closing.
```js
assert(code.match(/<hr\s?\/?>/i));
assert(!code.match(/<\/hr>/i));
```
You should not change your existing `header` element.
```js
assert($('header').length === 1);
```
You should not change your exiting `main` element.
```js
assert($('main').length === 1);
```
Your `hr` element should be between your `header` element and your `main` element.
```js
assert($('hr')[0].previousElementSibling.tagName === 'HEADER');
assert($('hr')[0].nextElementSibling.tagName === 'MAIN');
```
# --seed--
@ -32,18 +54,19 @@ Test 1
</head>
<body>
<div class="menu">
--fcc-editable-region--
<header>
<h1>CAMPER CAFE</h1>
<p class="established">Est. 2020</p>
</header>
<main>
<section>
<h2>Coffees</h2>
<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">Carmel Macchiato</p><p class="price">3.75</p>
<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>
@ -71,12 +94,12 @@ Test 1
</article>
</section>
</main>
<footer>
--fcc-editable-region--
<footer>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
--fcc-editable-region--
<p>123 Free Code Camp Drive</p>
</footer>
</div>
</body>
@ -85,7 +108,7 @@ Test 1
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
font-family: sans-serif;
}

View File

@ -1,5 +1,5 @@
---
id: 5f3ef6e01f288a026d709587
id: 5f3f26fa39591db45e5cd7a0
title: Part 68
challengeType: 0
dashedName: part-68
@ -7,16 +7,31 @@ dashedName: part-68
# --description--
You can use an `hr` element to display a divider between sections of different content.
The default properties of an `hr` element will make it appear as a thin light grey line. You can change the height of the line by specifying a value for the `height` property.
First, add an `hr` element between the first `header` element and the `main` element.
Change the height the `hr` element to be `3px`.
# --hints--
Test 1
You should use the `hr` selector.
```js
const hasHr = new __helpers.CSSHelp(document).getStyle('hr');
assert(hasHr);
```
You should set the `height` property to `3px`.
```js
const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '3px');
assert(hasHeight);
```
Your `hr` element should have a height of `3px`.
```js
const hrHeight = new __helpers.CSSHelp(document).getStyle('hr')?.getPropertyValue('height');
assert(hrHeight === '3px');
```
# --seed--
@ -34,19 +49,19 @@ Test 1
</head>
<body>
<div class="menu">
--fcc-editable-region--
<header>
<h1>CAMPER CAFE</h1>
<p class="established">Est. 2020</p>
</header>
<hr>
<main>
<section>
<h2>Coffees</h2>
<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">Carmel Macchiato</p><p class="price">3.75</p>
<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>
@ -74,7 +89,6 @@ Test 1
</article>
</section>
</main>
--fcc-editable-region--
<footer>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
@ -88,7 +102,7 @@ Test 1
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
font-family: sans-serif;
}
@ -117,6 +131,10 @@ h1, h2, p {
max-width: 500px;
}
--fcc-editable-region--
--fcc-editable-region--
h1, h2 {
font-family: Impact, serif;
}

View File

@ -1,5 +1,5 @@
---
id: 5f3f26fa39591db45e5cd7a0
id: 5f459225127805351a6ad057
title: Part 69
challengeType: 0
dashedName: part-69
@ -7,16 +7,21 @@ dashedName: part-69
# --description--
The default properties of an `hr` element will make it appear as a thin light grey line. You can change the height of the line by specifying a value for the `height` property.
Change the height the `hr` element to be `3px`.
Change the background color of the `hr` element to `brown` so it matches the color of the coffee beans.
# --hints--
Test 1
You should set the value of the `background-color` property to `brown`.
```js
const hasBackgroundColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'brown');
```
Your `hr` element should have a `background-color` of `brown`.
```js
const hrBackgroundColor = new __helpers.CSSHelp(document).getStyle('hr')?.getPropertyValue('background-color');
assert(hrBackgroundColor === 'brown');
```
# --seed--
@ -41,12 +46,12 @@ Test 1
<hr>
<main>
<section>
<h2>Coffees</h2>
<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">Carmel Macchiato</p><p class="price">3.75</p>
<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>
@ -87,7 +92,7 @@ Test 1
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
font-family: sans-serif;
}
@ -117,7 +122,9 @@ h1, h2, p {
}
--fcc-editable-region--
hr {
height: 3px;
}
--fcc-editable-region--
h1, h2 {

View File

@ -1,5 +1,5 @@
---
id: 5f459225127805351a6ad057
id: 5f459a7ceb8b5c446656d88b
title: Part 70
challengeType: 0
dashedName: part-70
@ -7,14 +7,24 @@ dashedName: part-70
# --description--
Change the background color of the `hr` element to `brown` so it matches the color of the coffee beans.
Notice the grey color along the edges of the line. Those edges are known as <dfn>borders</dfn>. Each side of an element can have a different color or they can all be the same.
Make all the edges of the `hr` element the same color as the background of it using the `border-color` property.
# --hints--
Test 1
You should set the `border-color` property to `brown`.
```js
const hasBorderColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-color'] === 'brown');
assert(hasBorderColor);
```
Your `hr` element should have a `border-color` of `brown`.
```js
const hrBorderColor = new __helpers.CSSHelp(document).getStyle('hr')?.getPropertyValue('border-color');
assert(hrBorderColor === 'brown');
```
# --seed--
@ -39,12 +49,12 @@ Test 1
<hr>
<main>
<section>
<h2>Coffees</h2>
<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">Carmel Macchiato</p><p class="price">3.75</p>
<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>
@ -85,7 +95,7 @@ Test 1
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
font-family: sans-serif;
}
@ -117,6 +127,7 @@ h1, h2, p {
--fcc-editable-region--
hr {
height: 3px;
background-color: brown;
}
--fcc-editable-region--

View File

@ -1,5 +1,5 @@
---
id: 5f459a7ceb8b5c446656d88b
id: 5f459cf202c2a3472fae6a9f
title: Part 71
challengeType: 0
dashedName: part-71
@ -7,16 +7,24 @@ dashedName: part-71
# --description--
Notice the grey color along the edges of the line. Those edges are known as <dfn>borders</dfn>. Each side of an element can have a different color or they can all be the same.
Notice how the thickness of the line looks bigger? The default value of a property named `border-width` is `1px` for all edges of `hr` elements. By changing the background to the same color as the background, the total height of the line is `5px` (`3px` plus the top and bottom border width of `1px`).
Make all the edges of the `hr` element the same color as the background of it using the `border-color` property.
Change the `height` property of the `hr` to be `2px`, so the total height of it becomes `4px`.
# --hints--
Test 1
You should set the `height` property to `2px`.
```js
const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '2px');
assert(hasHeight);
```
Your `hr` element should have a `height` of `2px`.
```js
const hrHeight = new __helpers.CSSHelp(document).getStyle('hr')?.getPropertyValue('height');
assert(hrHeight === '2px');
```
# --seed--
@ -41,12 +49,12 @@ Test 1
<hr>
<main>
<section>
<h2>Coffees</h2>
<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">Carmel Macchiato</p><p class="price">3.75</p>
<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>
@ -87,7 +95,7 @@ Test 1
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
font-family: sans-serif;
}
@ -120,6 +128,7 @@ h1, h2, p {
hr {
height: 3px;
background-color: brown;
border-color: brown;
}
--fcc-editable-region--

View File

@ -1,5 +1,5 @@
---
id: 5f459cf202c2a3472fae6a9f
id: 5f459fd48bdc98491ca6d1a3
title: Part 72
challengeType: 0
dashedName: part-72
@ -7,16 +7,21 @@ dashedName: part-72
# --description--
Notice how the thickness of the line looks bigger? The default value of a property named `border-width` is `1px` for all edges of `hr` elements. By changing the background to the same color as the background, the total height of the line is `5px` (`3px` plus the top and bottom border width of `1px`).
Change the `height` property of the `hr` to be `2px`, so the total height of it becomes `4px`.
Go ahead and add another `hr` element between the `main` element and the `footer` element.
# --hints--
Test 1
You should add a second `hr` element.
```js
assert($('hr').length === 2);
```
Your new `hr` element should be between the `main` element and the `footer` element.
```js
assert($('hr')[1].previousElementSibling.tagName === 'MAIN');
assert($('hr')[1].nextElementSibling.tagName === 'FOOTER');
```
# --seed--
@ -39,14 +44,15 @@ Test 1
<p class="established">Est. 2020</p>
</header>
<hr>
--fcc-editable-region--
<main>
<section>
<h2>Coffees</h2>
<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">Carmel Macchiato</p><p class="price">3.75</p>
<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>
@ -80,6 +86,7 @@ Test 1
</p>
<p>123 Free Code Camp Drive</p>
</footer>
--fcc-editable-region--
</div>
</body>
<html>
@ -87,7 +94,7 @@ Test 1
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
font-family: sans-serif;
}
@ -116,13 +123,11 @@ h1, h2, p {
max-width: 500px;
}
--fcc-editable-region--
hr {
height: 3px;
height: 2px;
background-color: brown;
border-color: brown;
}
--fcc-editable-region--
h1, h2 {
font-family: Impact, serif;

View File

@ -1,5 +1,5 @@
---
id: 5f459fd48bdc98491ca6d1a3
id: 5f45a05977e2fa49d9119437
title: Part 73
challengeType: 0
dashedName: part-73
@ -7,14 +7,21 @@ dashedName: part-73
# --description--
Go ahead and add another `hr` element between the `main` element and the `footer` element.
To create a little more room around the menu, add `20px` of space on the inside of the `body` element by using the `padding` property.
# --hints--
Test 1
You should set the `padding` property to `20px`.
```js
assert(code.match(/padding:\s*20px;?/i));
```
Your `body` element should have a `padding` of `20px`.
```js
const bodyPadding = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('padding');
assert(bodyPadding === '20px');
```
# --seed--
@ -37,15 +44,14 @@ Test 1
<p class="established">Est. 2020</p>
</header>
<hr>
--fcc-editable-region--
<main>
<section>
<h2>Coffees</h2>
<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">Carmel Macchiato</p><p class="price">3.75</p>
<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>
@ -73,23 +79,25 @@ Test 1
</article>
</section>
</main>
<hr>
<footer>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p>123 Free Code Camp Drive</p>
</footer>
--fcc-editable-region--
</div>
</body>
<html>
```
```css
--fcc-editable-region--
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
font-family: sans-serif;
}
--fcc-editable-region--
h1 {
font-size: 40px;
@ -140,4 +148,3 @@ h1, h2 {
width: 25%
}
```

View File

@ -1,5 +1,5 @@
---
id: 5f45a05977e2fa49d9119437
id: 5f45a276c093334f0f6e9df4
title: Part 74
challengeType: 0
dashedName: part-74
@ -7,14 +7,45 @@ dashedName: part-74
# --description--
To create a little more room around the menu, add `20px` of space on the inside of the `body` element by using the `padding` property.
Focusing on the menu items and prices, there is a fairly large gap between each line.
Target all the `p` elements nested in elements with the `class` named `item` and set their top and bottom margin to be `5px`.
# --hints--
Test 1
You should set the `margin-top` property to `5px`.
```js
const hasMarginTop = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-top'] === '5px');
assert(hasMarginTop);
```
You should set the `margin-bottom` property to `5px`.
```js
const hasMarginBottom = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-bottom'] === '5px');
assert(hasMarginBottom);
```
You should use the existing `.item p` selector.
```js
const hasOneSelector = new __helpers.CSSHelp(document).getStyleDeclarations('.item p');
assert(hasOneSelector.length === 1);
```
Your `p` elements nested in your `.item` elements should have a `margin-top` of `5px`.
```js
const itemPMarginTop = new __helpers.CSSHelp(document).getStyle('.item p')?.getPropertyValue('margin-top');
assert(itemPMarginTop === '5px');
```
Your `p` elements nested in your `.item` elements should have a `margin-bottom` of `5px`.
```js
const itemPMarginBottom = new __helpers.CSSHelp(document).getStyle('.item p')?.getPropertyValue('margin-bottom');
assert(itemPMarginBottom === '5px');
```
# --seed--
@ -39,12 +70,12 @@ Test 1
<hr>
<main>
<section>
<h2>Coffees</h2>
<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">Carmel Macchiato</p><p class="price">3.75</p>
<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>
@ -85,12 +116,11 @@ Test 1
```
```css
--fcc-editable-region--
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
font-family: sans-serif;
padding: 20px;
}
--fcc-editable-region--
h1 {
font-size: 40px;
@ -123,6 +153,7 @@ hr {
border-color: brown;
}
--fcc-editable-region--
h1, h2 {
font-family: Impact, serif;
}
@ -140,5 +171,6 @@ h1, h2 {
text-align: right;
width: 25%
}
--fcc-editable-region--
```

View File

@ -1,5 +1,5 @@
---
id: 5f45a276c093334f0f6e9df4
id: 5f45a5a7c49a8251f0bdb527
title: Part 75
challengeType: 0
dashedName: part-75
@ -7,16 +7,29 @@ dashedName: part-75
# --description--
Focusing on the menu items and prices, there is a fairly large gap between each line.
Target all the `p` elements nested in elements with the `class` named `item` and set their top and bottom margin to be `5px`.
Using the same style selector in the previous step, make the font size of the items and prices larger by using a value of `18px`.
# --hints--
Test 1
You should set the `font-size` property to `18px`.
```js
const hasFontSize = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['font-size'] === '18px');
assert(hasFontSize);
```
You should use the existing `.item p` selector.
```js
const hasOneSelector = new __helpers.CSSHelp(document).getStyleDeclarations('.item p');
assert(hasOneSelector.length === 1);
```
Your `p` elements nested in your `.item` elements should have a `font-size` of `18px`.
```js
const itemPFontSize = new __helpers.CSSHelp(document).getStyle('.item p')?.getPropertyValue('font-size');
assert(itemPFontSize === '18px');
```
# --seed--
@ -41,12 +54,12 @@ Test 1
<hr>
<main>
<section>
<h2>Coffees</h2>
<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">Carmel Macchiato</p><p class="price">3.75</p>
<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>
@ -88,7 +101,7 @@ Test 1
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
font-family: sans-serif;
padding: 20px;
}
@ -124,14 +137,17 @@ hr {
border-color: brown;
}
--fcc-editable-region--
h1, h2 {
font-family: Impact, serif;
}
--fcc-editable-region--
.item p {
display: inline-block;
margin-top: 5px;
margin-bottom: 5px;
}
--fcc-editable-region--
.flavor, .dessert {
text-align: left;
@ -142,6 +158,5 @@ h1, h2 {
text-align: right;
width: 25%
}
--fcc-editable-region--
```

View File

@ -1,5 +1,5 @@
---
id: 5f45a5a7c49a8251f0bdb527
id: 5f46fc57528aa1c4b5ea7c2e
title: Part 76
challengeType: 0
dashedName: part-76
@ -7,14 +7,31 @@ dashedName: part-76
# --description--
Using the same style selector in the previous step, make the font size of the items and prices larger by using a value of `18px`.
Changing the `bottom-margin` to `5px` looks great. However, now the space between the `Cinnamon Roll` menu item and the second `hr` element does not match the space between the top `hr` element and the `Coffee` heading.
Add some more space by creating a class named `bottom-line` using `25px` for the `margin-top` property.
# --hints--
Test 1
You should add a `.bottom-line` selector.
```js
const hasBottomLine = new __helpers.CSSHelp(document).getStyle('.bottom-line');
assert(hasBottomLine);
```
You should set the `margin-top` property to `25px`.
```js
const hasMarginTop = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-top'] === '25px');
assert(hasMarginTop);
```
Your `.bottom-line` selector should have a `margin-top` of `25px`.
```js
const bottomLineMargin = new __helpers.CSSHelp(document).getStyle('.bottom-line')?.getPropertyValue('margin-top');
assert(bottomLineMargin === '25px');
```
# --seed--
@ -39,12 +56,12 @@ Test 1
<hr>
<main>
<section>
<h2>Coffees</h2>
<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">Carmel Macchiato</p><p class="price">3.75</p>
<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>
@ -86,7 +103,7 @@ Test 1
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
font-family: sans-serif;
padding: 20px;
}
@ -122,17 +139,20 @@ hr {
border-color: brown;
}
--fcc-editable-region--
--fcc-editable-region--
h1, h2 {
font-family: Impact, serif;
}
--fcc-editable-region--
.item p {
display: inline-block;
margin-top: 5px;
margin-bottom: 5px;
font-size: 18px;
}
--fcc-editable-region--
.flavor, .dessert {
text-align: left;

View File

@ -1,5 +1,5 @@
---
id: 5f46fc57528aa1c4b5ea7c2e
id: 5f4701b942c824109626c3d8
title: Part 77
challengeType: 0
dashedName: part-77
@ -7,16 +7,20 @@ dashedName: part-77
# --description--
Changing the `bottom-margin` to `5px` looks great. However, now the space between the `Cinnamon Roll` menu item and the second `hr` element does not match the space between the top `hr` element and the `Coffees` heading.
Add some more space by creating a class named `bottom-line` using `25px` for the `margin-top` property.
Now add the `bottom-line` class to the second `hr` element so the styling is applied.
# --hints--
Test 1
You should apply the `class="bottom-line"` property.
```js
assert(code.match(/class=('|")bottom-line\1/i));
```
Your `bottom-line` class should be applied to your second `hr` element.
```js
assert($('hr')[1].className === 'bottom-line');
```
# --seed--
@ -41,12 +45,12 @@ Test 1
<hr>
<main>
<section>
<h2>Coffees</h2>
<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">Carmel Macchiato</p><p class="price">3.75</p>
<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>
@ -74,7 +78,9 @@ Test 1
</article>
</section>
</main>
--fcc-editable-region--
<hr>
--fcc-editable-region--
<footer>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
@ -88,7 +94,7 @@ Test 1
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
font-family: sans-serif;
padding: 20px;
}
@ -124,9 +130,9 @@ hr {
border-color: brown;
}
--fcc-editable-region--
--fcc-editable-region--
.bottom-line {
margin-top: 25px;
}
h1, h2 {
font-family: Impact, serif;
@ -149,4 +155,3 @@ h1, h2 {
width: 25%
}
```

View File

@ -1,5 +1,5 @@
---
id: 5f4701b942c824109626c3d8
id: 5f46ede1ff8fec5ba656b44c
title: Part 78
challengeType: 0
dashedName: part-78
@ -7,14 +7,14 @@ dashedName: part-78
# --description--
Now add the `bottom-line` class to the second `hr` element so the styling is applied.
Next you are going to be styling the `footer` element. To keep the CSS organized, add a comment at the end `styles.css` with the text `FOOTER`.
# --hints--
Test 1
You should have a CSS comment with the text `FOOTER`.
```js
assert(code.match(/\/\*\s*FOOTER\s*\*\//i));
```
# --seed--
@ -39,12 +39,12 @@ Test 1
<hr>
<main>
<section>
<h2>Coffees</h2>
<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">Carmel Macchiato</p><p class="price">3.75</p>
<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>
@ -72,10 +72,7 @@ Test 1
</article>
</section>
</main>
--fcc-editable-region--
<hr>
--fcc-editable-region--
<footer>
<hr class="bottom-line">
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
@ -88,7 +85,7 @@ Test 1
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
font-family: sans-serif;
padding: 20px;
}
@ -148,5 +145,10 @@ h1, h2 {
text-align: right;
width: 25%
}
--fcc-editable-region--
--fcc-editable-region--
```

View File

@ -1,5 +1,5 @@
---
id: 5f46ede1ff8fec5ba656b44c
id: 5f45a66d4a2b0453301e5a26
title: Part 79
challengeType: 0
dashedName: part-79
@ -7,14 +7,36 @@ dashedName: part-79
# --description--
Next you are going to be styling the `footer` element. To keep the CSS organized, add a comment at the end `styles.css` with the text `FOOTER`.
Moving down to the `footer` element, make all the text have a value of `14px` for the font size.
# --hints--
Test 1
You should have a `footer` selector.
```js
const hasFooter = new __helpers.CSSHelp(document).getStyle('footer');
assert(hasFooter);
```
Your `footer` selector should be below your comment.
```js
assert(code.match(/\/\*\s*FOOTER\s*\*\/\s*footer/i));
```
You should set the `font-size` property to `14px`.
```js
const hasFontSize = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['font-size'] === '14px');
assert(hasFontSize);
```
Your `footer` element should have a `font-size` of `14px`.
```js
const footerFontSize = new __helpers.CSSHelp(document).getStyle('footer')?.getPropertyValue('font-size');
assert(footerFontSize === '14px');
```
# --seed--
@ -39,12 +61,12 @@ Test 1
<hr>
<main>
<section>
<h2>Coffees</h2>
<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">Carmel Macchiato</p><p class="price">3.75</p>
<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>
@ -73,6 +95,7 @@ Test 1
</section>
</main>
<hr class="bottom-line">
<footer>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
@ -85,7 +108,7 @@ Test 1
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
font-family: sans-serif;
padding: 20px;
}
@ -146,8 +169,10 @@ h1, h2 {
width: 25%
}
/* FOOTER */
--fcc-editable-region--
--fcc-editable-region--
```

View File

@ -1,5 +1,5 @@
---
id: 5f45a66d4a2b0453301e5a26
id: 5f45b0731d39e15d54df4dfc
title: Part 80
challengeType: 0
dashedName: part-80
@ -7,14 +7,30 @@ dashedName: part-80
# --description--
Moving down to the `footer` element, make all the text have a value of `14px` for the font size.
The default color of a link that has not yet been clicked on is typically blue. The default color of a link that has already been visited from a page is typically purple.
To make the `footer` links the same color regardless if a link has been visited, use a type selector for the anchor element (`a`) and use the value `black` for the `color` property.
# --hints--
Test 1
You should use an `a` selector.
```js
const hasASelector = new __helpers.CSSHelp(document).getStyle('a');
assert(hasASelector);
```
You should set the `color` property to `black`.
```js
const hasColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.color === 'black');
```
Your `a` element should have a `color` of `black`.
```js
const aColor = new __helpers.CSSHelp(document).getStyle('a')?.getPropertyValue('color');
assert(aColor === 'black');
```
# --seed--
@ -39,12 +55,12 @@ Test 1
<hr>
<main>
<section>
<h2>Coffees</h2>
<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">Carmel Macchiato</p><p class="price">3.75</p>
<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>
@ -86,7 +102,7 @@ Test 1
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
font-family: sans-serif;
padding: 20px;
}
@ -149,8 +165,11 @@ h1, h2 {
/* FOOTER */
footer {
font-size: 14px;
}
--fcc-editable-region--
--fcc-editable-region--
```

View File

@ -1,5 +1,5 @@
---
id: 5f45b0731d39e15d54df4dfc
id: 5f45b25e7ec2405f166b9de1
title: Part 81
challengeType: 0
dashedName: part-81
@ -7,16 +7,31 @@ dashedName: part-81
# --description--
The default color of link that has not yet been clicked on a page is typically blue. The default color of a link that has already been visited from a page is typically purple.
You change properties of a link when the link has actually been visited by using a <dfn>pseudo-selector</dfn> that looks like `a:visited { propertyName: propertyValue; }`.
To make the `footer` links the same color regardless if a link has been visited, use a type selector for the anchor element (`a`) and use the value `black` for the `color` property.
Change the color of the footer `Visit our website` link to be `grey` when a user has visited the link.
# --hints--
Test 1
You should use the `a:visited` pseudoselector.
```js
const hasAVisited = new __helpers.CSSHelp(document).getStyle('a:visited');
assert(hasAVisited);
```
You should set the `color` property to `grey`.
```js
const hasColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.color === 'grey');
assert(hasColor);
```
Your `a:visited` should have a `color` of `grey`.
```js
const aVisitedColor = new __helpers.CSSHelp(document).getStyle('a:visited')?.getPropertyValue('color');
assert(aVisitedColor === 'grey');
```
# --seed--
@ -41,12 +56,12 @@ Test 1
<hr>
<main>
<section>
<h2>Coffees</h2>
<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">Carmel Macchiato</p><p class="price">3.75</p>
<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>
@ -88,7 +103,7 @@ Test 1
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
font-family: sans-serif;
padding: 20px;
}
@ -154,8 +169,14 @@ h1, h2 {
footer {
font-size: 14px;
}
a {
color: black;
}
--fcc-editable-region--
--fcc-editable-region--
```

View File

@ -1,5 +1,5 @@
---
id: 5f45b25e7ec2405f166b9de1
id: 5f45b3c93c027860d9298dbd
title: Part 82
challengeType: 0
dashedName: part-82
@ -7,16 +7,31 @@ dashedName: part-82
# --description--
You change properties of a link when the link has actually been visited by using a <dfn>pseudo-selector</dfn> that looks like `a:visited { propertyName: propertyValue; }`.
You change properties of a link when the mouse hovers them by using a <dfn>pseudo-selector</dfn> that looks like `a:hover { propertyName: propertyValue; }`.
Change the color of the footer `Visit our website` link to be `grey` when a user has visited the link.
Change the color of the footer `Visit our website` link to be `brown` when a user hovers over it.
# --hints--
Test 1
You should use the `a:hover` pseudoselector.
```js
const hasAHover = new __helpers.CSSHelp(document).getStyle('a:hover');
assert(hasAHover);
```
You should set the `color` property to `brown`.
```js
const hasColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.color === 'brown');
assert(hasColor);
```
Your `a:hover` should have a `color` of `brown`.
```js
const aHoverColor = new __helpers.CSSHelp(document).getStyle('a:hover')?.getPropertyValue('color');
assert(aHoverColor === 'brown');
```
# --seed--
@ -41,12 +56,12 @@ Test 1
<hr>
<main>
<section>
<h2>Coffees</h2>
<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">Carmel Macchiato</p><p class="price">3.75</p>
<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>
@ -88,7 +103,7 @@ Test 1
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
font-family: sans-serif;
padding: 20px;
}
@ -159,8 +174,13 @@ a {
color: black;
}
a:visited {
color: grey;
}
--fcc-editable-region--
--fcc-editable-region--
```

View File

@ -1,5 +1,5 @@
---
id: 5f45b3c93c027860d9298dbd
id: 5f45b45d099f3e621fbbb256
title: Part 83
challengeType: 0
dashedName: part-83
@ -7,16 +7,31 @@ dashedName: part-83
# --description--
You change properties of a link when the mouse hovers them by using a <dfn>pseudo-selector</dfn> that looks like `a:hover { propertyName: propertyValue; }`.
You change properties of a link when the link is actually being clicked by using a <dfn>pseudo-selector</dfn> that looks like `a:active { propertyName: propertyValue; }`.
Change the color of the footer `Visit our website` link to be `brown` when a user hovers over it.
Change the color of the footer `Visit our website` link to be `white` when clicked on.
# --hints--
Test 1
You should use the `a:active` pseudo-selector.
```js
const hasAActive = new __helpers.CSSHelp(document).getStyle('a:active');
assert(hasAActive);
```
You should set the `color` property to `white`.
```js
const hasColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.color === 'white');
assert(hasColor);
```
Your `a:active` should have a `color` of `white`.
```js
const aActiveColor = new __helpers.CSSHelp(document).getStyle('a:active')?.getPropertyValue('color');
assert(aActiveColor === 'white');
```
# --seed--
@ -41,12 +56,12 @@ Test 1
<hr>
<main>
<section>
<h2>Coffees</h2>
<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">Carmel Macchiato</p><p class="price">3.75</p>
<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>
@ -88,7 +103,7 @@ Test 1
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
font-family: sans-serif;
padding: 20px;
}
@ -163,8 +178,12 @@ a:visited {
color: grey;
}
a:hover {
color: brown;
}
--fcc-editable-region--
--fcc-editable-region--
```

View File

@ -1,5 +1,5 @@
---
id: 5f45b45d099f3e621fbbb256
id: 5f45b4c81cea7763550e40df
title: Part 84
challengeType: 0
dashedName: part-84
@ -7,16 +7,22 @@ dashedName: part-84
# --description--
You change properties of a link when the link is actually clicked by using a <dfn>pseudo-selector</dfn> that looks like `a:active { propertyName: propertyValue; }`.
Change the color of the footer `Visit our website` link to be `white` when a clicks on it.
To keep with the same color theme you have already been using (black and brown), change the color for when the link is visited to `black` and use `brown` for when the link is actually clicked.
# --hints--
Test 1
You should set the `color` property to `black` when the link is `visited`.
```js
const aVisitedColor = new __helpers.CSSHelp(document).getStyle('a:visited')?.getPropertyValue('color');
assert(aVisitedColor === 'black');
```
You should set the `color` property to `brown` when the link is `active`.
```js
const aActiveColor = new __helpers.CSSHelp(document).getStyle('a:active')?.getPropertyValue('color');
assert(aActiveColor === 'brown');
```
# --seed--
@ -41,12 +47,12 @@ Test 1
<hr>
<main>
<section>
<h2>Coffees</h2>
<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">Carmel Macchiato</p><p class="price">3.75</p>
<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>
@ -88,7 +94,7 @@ Test 1
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
font-family: sans-serif;
padding: 20px;
}
@ -159,6 +165,7 @@ a {
color: black;
}
--fcc-editable-region--
a:visited {
color: grey;
}
@ -167,8 +174,9 @@ a:hover {
color: brown;
}
--fcc-editable-region--
a:active {
color: white;
}
--fcc-editable-region--
```

View File

@ -1,5 +1,5 @@
---
id: 5f45b4c81cea7763550e40df
id: 5f45b715301bbf667badc04a
title: Part 85
challengeType: 0
dashedName: part-85
@ -7,14 +7,24 @@ dashedName: part-85
# --description--
To keep with the same color theme you have already been using (black and brown), change the color for when the link is visited to `black` and use `brown` for when the link is actually clicked.
The menu text `CAMPER CAFE` has a different space from the top than the address at the bottom of the menu. This is due to the browser having some default top margin for the `h1` element.
Change the top margin of the `h1` element to `0` to remove all the top margin.
# --hints--
Test 1
You should set the `margin-top` property to `0`.
```js
const hasMarginTop = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-top'] === '0px');
assert(hasMarginTop);
```
Your `h1` element should have a `margin-top` of `0`.
```js
const h1MarginTop = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('margin-top');
assert(h1MarginTop === '0px');
```
# --seed--
@ -39,12 +49,12 @@ Test 1
<hr>
<main>
<section>
<h2>Coffees</h2>
<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">Carmel Macchiato</p><p class="price">3.75</p>
<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>
@ -86,14 +96,16 @@ Test 1
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
font-family: sans-serif;
padding: 20px;
}
--fcc-editable-region--
h1 {
font-size: 40px;
}
--fcc-editable-region--
h2 {
font-size: 30px;
@ -157,9 +169,8 @@ a {
color: black;
}
--fcc-editable-region--
a:visited {
color: grey;
color: black;
}
a:hover {
@ -167,8 +178,7 @@ a:hover {
}
a:active {
color: white;
color: brown;
}
--fcc-editable-region--
```

View File

@ -1,5 +1,5 @@
---
id: 5f45b715301bbf667badc04a
id: 5f46e270702a8456a664f0df
title: Part 86
challengeType: 0
dashedName: part-86
@ -7,16 +7,22 @@ dashedName: part-86
# --description--
The menu text `CAMPER CAFE` has a different space from the top than the address at the bottom of the menu. This is due to the browser having some default top margin for the `h1` element.
Change the top margin of the `h1` element to `0` to remove all the top margin.
To remove some of the vertical space between the `h1` element and the text `Est. 2020`, change the bottom margin of the `h1` to `15px`.
# --hints--
Test 1
You should set the `margin-bottom` property to `15px`.
```js
const hasMarginBottom = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-bottom'] === '15px');
assert(hasMarginBottom);
```
Your `h1` element should have a `margin-bottom` of `15px`.
```js
const h1MarginBottom = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('margin-bottom');
assert(h1MarginBottom === '15px');
```
# --seed--
@ -41,12 +47,12 @@ Test 1
<hr>
<main>
<section>
<h2>Coffees</h2>
<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">Carmel Macchiato</p><p class="price">3.75</p>
<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>
@ -88,7 +94,7 @@ Test 1
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
font-family: sans-serif;
padding: 20px;
}
@ -96,6 +102,7 @@ body {
--fcc-editable-region--
h1 {
font-size: 40px;
margin-top: 0;
}
--fcc-editable-region--

View File

@ -1,5 +1,5 @@
---
id: 5f46e270702a8456a664f0df
id: 5f46e36e745ead58487aabf2
title: Part 87
challengeType: 0
dashedName: part-87
@ -7,14 +7,31 @@ dashedName: part-87
# --description--
To remove some of the vertical space between the `h1` element and the text `Est. 2020`, change the bottom margin of the `h1` to `15px`.
Now the top spacing looks good. The space below the address at the bottom of the menu is a little bigger than the space at the top of the menu and the `h1` element.
To decrease the default margin space below the address `p` element, create a class selector named `address` and use the value `5px` for the `margin-bottom` property.
# --hints--
Test 1
You should add an `.address` selector.
```js
const hasAddress = new __helpers.CSSHelp(document).getStyle('.address');
assert(hasAddress);
```
You should set the `margin-bottom` property to `5px`.
```js
const hasMarginBottom = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-bottom'] === '5px');
assert(hasMarginBottom);
```
Your `.address` selector should have the `margin-bottom` property set to `5px`.
```js
const addressMarginBottom = new __helpers.CSSHelp(document).getStyle('.address')?.getPropertyValue('margin-bottom');
assert(addressMarginBottom === '5px');
```
# --seed--
@ -39,12 +56,12 @@ Test 1
<hr>
<main>
<section>
<h2>Coffees</h2>
<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">Carmel Macchiato</p><p class="price">3.75</p>
<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>
@ -86,17 +103,16 @@ Test 1
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
font-family: sans-serif;
padding: 20px;
}
--fcc-editable-region--
h1 {
font-size: 40px;
margin-top: 0;
margin-bottom: 15px;
}
--fcc-editable-region--
h2 {
font-size: 30px;
@ -156,6 +172,10 @@ footer {
font-size: 14px;
}
--fcc-editable-region--
--fcc-editable-region--
a {
color: black;
}

View File

@ -1,5 +1,5 @@
---
id: 5f46e36e745ead58487aabf2
id: 5f46e7a4750dd05b5a673920
title: Part 88
challengeType: 0
dashedName: part-88
@ -7,16 +7,26 @@ dashedName: part-88
# --description--
Now the top spacing looks good. The space below the address at the bottom of the menu is a little bigger than the space at the top of the menu and the `h1` element.
To decrease the default margin space below the address `p` element, create a class selector named `address` and use the value `5px` for the `margin-bottom` property.
Now apply the `address` class to the `p` element containing the address.
# --hints--
Test 1
You should apply the `class="address"` attribute.
```js
assert(code.match(/class=('|")address\1/i));
```
Your `.address` element should be your `p` element.
```js
assert($('.address')[0].tagName === 'P');
```
Your `.address` element should have the text `123 freeCodeCamp Drive`.
```js
assert($('.address')[0].innerText.match(/123 Free Code Camp Drive/i));
```
# --seed--
@ -41,12 +51,12 @@ Test 1
<hr>
<main>
<section>
<h2>Coffees</h2>
<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">Carmel Macchiato</p><p class="price">3.75</p>
<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>
@ -75,12 +85,14 @@ Test 1
</section>
</main>
<hr class="bottom-line">
--fcc-editable-region--
<footer>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p>123 Free Code Camp Drive</p>
</footer>
--fcc-editable-region--
</div>
</body>
<html>
@ -88,7 +100,7 @@ Test 1
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
font-family: sans-serif;
padding: 20px;
}
@ -157,9 +169,9 @@ footer {
font-size: 14px;
}
--fcc-editable-region--
--fcc-editable-region--
.address {
margin-bottom: 5px;
}
a {
color: black;
@ -177,4 +189,3 @@ a:active {
color: brown;
}
```

View File

@ -1,5 +1,5 @@
---
id: 5f46e7a4750dd05b5a673920
id: 5f46e8284aae155c83015dee
title: Part 89
challengeType: 0
dashedName: part-89
@ -7,14 +7,28 @@ dashedName: part-89
# --description--
Now apply the `address` class to the `p` element containing the address.
The menu looks good, but other than the coffee beans background image, it is mainly just text.
Under the `Coffee` heading, add an image using the url `https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg`. Give the image an `alt` value of `coffee icon`.
# --hints--
Test 1
You should have an `<img>` tag. Remember that `img` elements are self-closing.
```js
assert($('img').length === 1);
```
Your `img` element should have a `src` attribute of `https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg`.
```js
assert($('img').attr('src') === 'https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg');
```
Your `img` element should have an `alt` attribute of `coffee icon`.
```js
assert($('img').attr('alt').match(/coffee icon/i));
```
# --seed--
@ -39,12 +53,14 @@ Test 1
<hr>
<main>
<section>
<h2>Coffees</h2>
--fcc-editable-region--
<h2>Coffee</h2>
--fcc-editable-region--
<article class="item">
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
</article>
<article class="item">
<p class="flavor">Carmel Macchiato</p><p class="price">3.75</p>
<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>
@ -73,14 +89,12 @@ Test 1
</section>
</main>
<hr class="bottom-line">
--fcc-editable-region--
<footer>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p>123 Free Code Camp Drive</p>
<p class="address">123 Free Code Camp Drive</p>
</footer>
--fcc-editable-region--
</div>
</body>
<html>
@ -88,7 +102,7 @@ Test 1
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
font-family: sans-serif;
padding: 20px;
}

View File

@ -1,5 +1,5 @@
---
id: 5f46e8284aae155c83015dee
id: 5f475bb508746c16c9431d42
title: Part 90
challengeType: 0
dashedName: part-90
@ -7,16 +7,54 @@ dashedName: part-90
# --description--
The menu looks good, but other than the coffee beans background image, it is mainly just text.
The image you added is not centered horizontally like the `Coffee` heading above it. `img` elements are "like" inline elements.
Under the `Coffees` heading, add an image using the url `https://tinyurl.com/cafe-coffee-fcc`. Give the image an `alt` value of `coffee icon`.
To make the image behave like heading elements (which are block-level), create an `img` type selector and use the value `block` for the `display` property and use the applicable `margin-left` and `margin-right` values to center it horizontally.
# --hints--
Test 1
You should use an `img` selector.
```js
const hasImg = new __helpers.CSSHelp(document).getStyle('img');
assert(hasImg);
```
You should set the `display` property to `block`.
```js
const hasDisplay = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.display === 'block');
assert(hasDisplay);
```
You should set the `margin-left` property to `auto`.
```js
const marginLeftFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style['margin-left'] === 'auto');
assert(marginLeftFilter.length === 2);
```
You should set the `margin-right` property to `auto`.
```js
const marginRightFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style['margin-right'] === 'auto');
assert(marginRightFilter.length === 2);
```
Your `img` element should have a `display` of `block`.
```js
const imgDisplay = new __helpers.CSSHelp(document).getStyle('img')?.getPropertyValue('display');
assert(imgDisplay === 'block');
```
Your `img` element should have a `margin-left` and `margin-right` of `auto`.
```js
const imgMarginLeft = new __helpers.CSSHelp(document).getStyle('img')?.getPropertyValue('margin-left');
assert(imgMarginLeft === 'auto');
const imgMarginRight = new __helpers.CSSHelp(document).getStyle('img')?.getPropertyValue('margin-right');
assert(imgMarginRight === 'auto');
```
# --seed--
@ -41,14 +79,13 @@ Test 1
<hr>
<main>
<section>
--fcc-editable-region--
<h2>Coffees</h2>
--fcc-editable-region--
<h2>Coffee</h2>
<img src="https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg" alt="coffee icon"/>
<article class="item">
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
</article>
<article class="item">
<p class="flavor">Carmel Macchiato</p><p class="price">3.75</p>
<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>
@ -90,7 +127,7 @@ Test 1
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
font-family: sans-serif;
padding: 20px;
}
@ -122,6 +159,10 @@ h1, h2, p {
max-width: 500px;
}
--fcc-editable-region--
--fcc-editable-region--
hr {
height: 2px;
background-color: brown;

View File

@ -1,5 +1,5 @@
---
id: 5f475bb508746c16c9431d42
id: 5f475e1c7f71a61d913836c6
title: Part 91
challengeType: 0
dashedName: part-91
@ -7,16 +7,26 @@ dashedName: part-91
# --description--
The image you added is not centered horizontally like the `Coffees` heading above it. `img` elements are "like" inline elements.
To make the image behave like heading elements (which are block-level), create an `img` type selector and use the value `block` for the `display` property and use the applicable `margin-left` and `margin-right` values to center it horizontally.
Add one last image under the `Desserts` heading using the url `https://cdn.freecodecamp.org/curriculum/css-cafe/pie.jpg`. Give the image an `alt` value of `pie icon`.
# --hints--
Test 1
You should add a second `img` element.
```js
assert($('img').length === 2);
```
Your new `img` element should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-cafe/pie.jpg`.
```js
assert($('img').last().attr('src') === 'https://cdn.freecodecamp.org/curriculum/css-cafe/pie.jpg');
```
Your new `img` element should have an `alt` of `pie icon`.
```js
assert($('img').last().attr('alt').match(/pie icon/i));
```
# --seed--
@ -41,13 +51,13 @@ Test 1
<hr>
<main>
<section>
<h2>Coffees</h2>
<img src="https://tinyurl.com/cafe-coffee-fcc" alt="coffee icon"/>
<h2>Coffee</h2>
<img src="https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg" alt="coffee icon"/>
<article class="item">
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
</article>
<article class="item">
<p class="flavor">Carmel Macchiato</p><p class="price">3.75</p>
<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>
@ -60,7 +70,9 @@ Test 1
</article>
</section>
<section>
--fcc-editable-region--
<h2>Desserts</h2>
--fcc-editable-region--
<article class="item">
<p class="dessert">Donut</p><p class="price">1.50</p>
</article>
@ -89,7 +101,7 @@ Test 1
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
font-family: sans-serif;
padding: 20px;
}
@ -121,9 +133,11 @@ h1, h2, p {
max-width: 500px;
}
--fcc-editable-region--
--fcc-editable-region--
img {
display: block;
margin-left: auto;
margin-right: auto;
}
hr {
height: 2px;
@ -153,7 +167,7 @@ h1, h2 {
.price {
text-align: right;
width: 25%
width: 25%;
}
/* FOOTER */

View File

@ -1,5 +1,5 @@
---
id: 5f475e1c7f71a61d913836c6
id: 5f47fe7e31980053a8d4403b
title: Part 92
challengeType: 0
dashedName: part-92
@ -7,14 +7,24 @@ dashedName: part-92
# --description--
Add one last image under the `Desserts` heading using the url `https://tinyurl.com/cafe-pie-fcc`. Give the image an `alt` value of `pie icon`.
It would be nice if the vertical space between the `h2` elements and their associated icons was smaller. The `h2` elements have default top and bottom margin space, so you could change the bottom margin of the `h2` elements to say `0` or another number.
There is an easier way, simply add a negative top margin to the `img` elements to pull them up from their current positions. Negative values are created using a `-` in front of the value. To complete this project, go ahead and use a negative top margin of `25px` in the `img` type selector.
# --hints--
Test 1
You should set the `margin-top` property to `-25px`.
```js
const hasMarginTop = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-top'] === '-25px');
assert(hasMarginTop);
```
Your `img` elements should have a `margin-top` value of `-25px`.
```js
const imgMarginTop = new __helpers.CSSHelp(document).getStyle('img')?.getPropertyValue('margin-top');
assert(imgMarginTop === '-25px');
```
# --seed--
@ -39,13 +49,13 @@ Test 1
<hr>
<main>
<section>
<h2>Coffees</h2>
<img src="https://tinyurl.com/cafe-coffee-fcc" alt="coffee icon"/>
<h2>Coffee</h2>
<img src="https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg" alt="coffee icon"/>
<article class="item">
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
</article>
<article class="item">
<p class="flavor">Carmel Macchiato</p><p class="price">3.75</p>
<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>
@ -58,9 +68,8 @@ Test 1
</article>
</section>
<section>
--fcc-editable-region--
<h2>Desserts</h2>
--fcc-editable-region--
<img src="https://cdn.freecodecamp.org/curriculum/css-cafe/pie.jpg" alt="pie icon"/>
<article class="item">
<p class="dessert">Donut</p><p class="price">1.50</p>
</article>
@ -89,7 +98,7 @@ Test 1
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
font-family: sans-serif;
padding: 20px;
}
@ -121,11 +130,13 @@ h1, h2, p {
max-width: 500px;
}
--fcc-editable-region--
img {
display: block;
margin-left: auto;
margin-right: auto;
}
--fcc-editable-region--
hr {
height: 2px;
@ -185,3 +196,168 @@ a:active {
}
```
# --solutions--
```html
<!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>
<hr>
<main>
<section>
<h2>Coffee</h2>
<img src="https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg" alt="coffee icon"/>
<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>
<img src="https://cdn.freecodecamp.org/curriculum/css-cafe/pie.jpg" alt="pie icon"/>
<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>
<hr class="bottom-line">
<footer>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p class="address">123 Free Code Camp Drive</p>
</footer>
</div>
</body>
<html>
```
```css
body {
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
font-family: sans-serif;
padding: 20px;
}
h1 {
font-size: 40px;
margin-top: 0;
margin-bottom: 15px;
}
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;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: -25px;
}
hr {
height: 2px;
background-color: brown;
border-color: brown;
}
.bottom-line {
margin-top: 25px;
}
h1, h2 {
font-family: Impact, serif;
}
.item p {
display: inline-block;
margin-top: 5px;
margin-bottom: 5px;
font-size: 18px;
}
.flavor, .dessert {
text-align: left;
width: 75%;
}
.price {
text-align: right;
width: 25%;
}
/* FOOTER */
footer {
font-size: 14px;
}
.address {
margin-bottom: 5px;
}
a {
color: black;
}
a:visited {
color: black;
}
a:hover {
color: brown;
}
a:active {
color: brown;
}
```

View File

@ -1,357 +0,0 @@
---
id: 5f47fe7e31980053a8d4403b
title: Part 93
challengeType: 0
dashedName: part-93
---
# --description--
It would be nice if the vertical space between the `h2` elements and their associated icons was smaller. The `h2` elements have default top and bottom margin space, so you could change the bottom margin of the `h2` elements to say `0` or another number.
There is an easier way, simply add a negative top margin to the `img` elements to pull them up from their current positions. Negative values are created using a `-` in front of the value. To complete this project, go ahead and use a negative margin of `25px` in the `img` type selector.
# --hints--
Test 1
```js
```
# --seed--
## --seed-contents--
```html
<!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>
<hr>
<main>
<section>
<h2>Coffees</h2>
<img src="https://tinyurl.com/cafe-coffee-fcc" alt="coffee icon"/>
<article class="item">
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
</article>
<article class="item">
<p class="flavor">Carmel 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>
<img src="https://tinyurl.com/cafe-pie-fcc" alt="pie icon"/>
<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>
<hr class="bottom-line">
<footer>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p class="address">123 Free Code Camp Drive</p>
</footer>
</div>
</body>
<html>
```
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
font-family: sans-serif;
padding: 20px;
}
h1 {
font-size: 40px;
margin-top: 0;
margin-bottom: 15px;
}
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;
}
--fcc-editable-region--
img {
display: block;
margin-left: auto;
margin-right: auto;
}
--fcc-editable-region--
hr {
height: 2px;
background-color: brown;
border-color: brown;
}
.bottom-line {
margin-top: 25px;
}
h1, h2 {
font-family: Impact, serif;
}
.item p {
display: inline-block;
margin-top: 5px;
margin-bottom: 5px;
font-size: 18px;
}
.flavor, .dessert {
text-align: left;
width: 75%;
}
.price {
text-align: right;
width: 25%;
}
/* FOOTER */
footer {
font-size: 14px;
}
.address {
margin-bottom: 5px;
}
a {
color: black;
}
a:visited {
color: black;
}
a:hover {
color: brown;
}
a:active {
color: brown;
}
```
# --solutions--
```html
<!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>
<hr>
<main>
<section>
<h2>Coffees</h2>
<img src="https://tinyurl.com/cafe-coffee-fcc" alt="coffee icon"/>
<article class="item">
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
</article>
<article class="item">
<p class="flavor">Carmel 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>
<img src="https://tinyurl.com/cafe-pie-fcc" alt="pie icon"/>
<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>
<hr class="bottom-line">
<footer>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p class="address">123 Free Code Camp Drive</p>
</footer>
</div>
</body>
<html>
```
---
```css
body {
background-image: url(https://tinyurl.com/coffee-beans-fcc);
font-family: sans-serif;
padding: 20px;
}
h1 {
font-size: 40px;
margin-top: 0;
margin-bottom: 15px;
}
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;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: -25px;
}
hr {
height: 2px;
background-color: brown;
border-color: brown;
}
.bottom-line {
margin-top: 25px;
}
h1, h2 {
font-family: Impact, serif;
}
.item p {
display: inline-block;
margin-top: 5px;
margin-bottom: 5px;
font-size: 18px;
}
.flavor, .dessert {
text-align: left;
width: 75%;
}
.price {
text-align: right;
width: 25%;
}
/* FOOTER */
footer {
font-size: 14px;
}
.address {
margin-bottom: 5px;
}
a {
color: black;
}
a:visited {
color: black;
}
a:hover {
color: brown;
}
a:active {
color: brown;
}
```