feat: nutrition label (#43852)
* feat: initial infra * feat: break down steps * feat: tests 1-30 * feat: tests 31 to end * chore: apply gikf's review suggestions Co-authored-by: Krzysztof <60067306+gikf@users.noreply.github.com> * feat: actually testing things helps * chore: apply review suggestions Co-authored-by: Sem Bauke <46919888+Sembauke@users.noreply.github.com> * chore: take the part, put it in a step * chore: apply shaun's review suggestions Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * chore: missed one Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * chore: clarify verbiage Co-authored-by: Krzysztof <60067306+gikf@users.noreply.github.com> Co-authored-by: Sem Bauke <46919888+Sembauke@users.noreply.github.com> Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>
This commit is contained in:
Nicholas Carrigan (he/him)
committed by
GitHub
GitHub
parent
e7523dd6d1
commit
0d33dff597
@ -97,7 +97,11 @@
|
|||||||
},
|
},
|
||||||
"css-piano": { "title": "CSS Piano", "intro": ["", ""] },
|
"css-piano": { "title": "CSS Piano", "intro": ["", ""] },
|
||||||
"css-photo-gallery": { "title": "CSS Photo Gallery", "intro": ["", ""] },
|
"css-photo-gallery": { "title": "CSS Photo Gallery", "intro": ["", ""] },
|
||||||
"css-grid-magazine": { "title": "CSS Grid Magazine", "intro": ["", ""] }
|
"css-grid-magazine": { "title": "CSS Grid Magazine", "intro": ["", ""] },
|
||||||
|
"css-nutrition-label": {
|
||||||
|
"title": "CSS Nutrition Label",
|
||||||
|
"intro": ["", ""]
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"javascript-algorithms-and-data-structures": {
|
"javascript-algorithms-and-data-structures": {
|
||||||
|
|||||||
@ -0,0 +1,10 @@
|
|||||||
|
---
|
||||||
|
title: Introduction to the CSS Nutrition Label
|
||||||
|
block: css-nutrition-label
|
||||||
|
superBlock: Responsive Web Design
|
||||||
|
isBeta: true
|
||||||
|
---
|
||||||
|
|
||||||
|
## Introduction to the CSS Nutrition Label
|
||||||
|
|
||||||
|
This is a test for the new project-based curriculum.
|
||||||
@ -80,5 +80,6 @@
|
|||||||
"accessibility-quiz": "HTML-CSS",
|
"accessibility-quiz": "HTML-CSS",
|
||||||
"registration-form": "HTML-CSS",
|
"registration-form": "HTML-CSS",
|
||||||
"css-photo-gallery": "HTML-CSS",
|
"css-photo-gallery": "HTML-CSS",
|
||||||
"css-grid-magazine": "HTML-CSS"
|
"css-grid-magazine": "HTML-CSS",
|
||||||
|
"css-nutrition-label": "HTML-CSS"
|
||||||
}
|
}
|
||||||
|
|||||||
278
curriculum/challenges/_meta/css-nutrition-label/meta.json
Normal file
278
curriculum/challenges/_meta/css-nutrition-label/meta.json
Normal file
@ -0,0 +1,278 @@
|
|||||||
|
{
|
||||||
|
"name": "CSS Nutrition Label",
|
||||||
|
"isUpcomingChange": true,
|
||||||
|
"dashedName": "css-nutrition-label",
|
||||||
|
"order": 25,
|
||||||
|
"time": "5 hours",
|
||||||
|
"template": "",
|
||||||
|
"required": [],
|
||||||
|
"superBlock": "responsive-web-design",
|
||||||
|
"superOrder": 1,
|
||||||
|
"isBeta": true,
|
||||||
|
"challengeOrder": [
|
||||||
|
[
|
||||||
|
"615f2abbe7d18d49a1e0e1c8",
|
||||||
|
"Step 1"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f2d4150fe0d4cbd0f2628",
|
||||||
|
"Step 2"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f34948891834dd77655a6",
|
||||||
|
"Step 3"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f34ecc1091b4fd5a8a484",
|
||||||
|
"Step 4"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f357957e370510f21ea16",
|
||||||
|
"Step 5"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f378014c2da526a109c81",
|
||||||
|
"Step 6"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f38279e5c3d53692ea441",
|
||||||
|
"Step 7"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f38cabc64e3556f98cc1a",
|
||||||
|
"Step 8"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f3949f58e12577dcefb00",
|
||||||
|
"Step 9"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f39d7da41b15851fa3fb9",
|
||||||
|
"Step 10"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f3b091162165948e1cb33",
|
||||||
|
"Step 11"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f3cafd794015aa9547a6d",
|
||||||
|
"Step 12"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f3d9e59db4b5b8e960762",
|
||||||
|
"Step 13"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f3e1b7233ee5c7595771f",
|
||||||
|
"Step 14"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f3e4af8008c5d494d3afe",
|
||||||
|
"Step 15"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f3ed16592445e57941aec",
|
||||||
|
"Step 16"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f405b89a7ec5f8e2d11f4",
|
||||||
|
"Step 17"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f40b01f680e608d360ed4",
|
||||||
|
"Step 18"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f4172e9eec061d6456221",
|
||||||
|
"Step 19"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f41c979787462e76dab90",
|
||||||
|
"Step 20"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f423cf65d5864132a0956",
|
||||||
|
"Step 21"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f42a021625f656101ef93",
|
||||||
|
"Step 22"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f4bfb9de4a16703b56eb6",
|
||||||
|
"Step 23"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f4ce9d877b668417c0c42",
|
||||||
|
"Step 24"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f4dde9d72e3694cb9ee3b",
|
||||||
|
"Step 25"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f4ec58334106a4170c2a8",
|
||||||
|
"Step 26"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f4f9e4a40566b776a8f38",
|
||||||
|
"Step 27"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f50473cc0196c6dd3892a",
|
||||||
|
"Step 28"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f51257a8a516d80b6c743",
|
||||||
|
"Step 29"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f51e4e5b24a6e80eccce1",
|
||||||
|
"Step 30"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f522dea4f776f64dc3e91",
|
||||||
|
"Step 31"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f5486b8fd4b71633f69b0",
|
||||||
|
"Step 32"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f575b50b91e72af079480",
|
||||||
|
"Step 33"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f5af373a68e744a3c5a76",
|
||||||
|
"Step 34"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f5c1cb7575c7551ed8a40",
|
||||||
|
"Step 35"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f5fd85d0062761f288364",
|
||||||
|
"Step 36"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f61338c8ca176d6445574",
|
||||||
|
"Step 37"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f666ac5edea782feb7e75",
|
||||||
|
"Step 38"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f671b6d1919792745aa5d",
|
||||||
|
"Step 39"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f6823d0815b7a991f2a75",
|
||||||
|
"Step 40"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f6a7d4ba8037bc086c2c7",
|
||||||
|
"Step 41"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f6b2d164f81809efd9bdc",
|
||||||
|
"Step 42"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f6cc778f7698258467596",
|
||||||
|
"Step 43"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f6fddaac1e083502d3e6a",
|
||||||
|
"Step 44"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f70077a4ff98424236c1e",
|
||||||
|
"Step 45"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f72a872354a850d4f533e",
|
||||||
|
"Step 46"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f74a71f1e498619e38ee8",
|
||||||
|
"Step 47"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f7ad94380408d971d14f6",
|
||||||
|
"Step 48"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f7bc680f7168ea01ebf99",
|
||||||
|
"Step 49"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f7c71eab8218f846e4503",
|
||||||
|
"Step 50"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f7d489a581590d1350288",
|
||||||
|
"Step 51"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f7de4487b64919bb4aa5e",
|
||||||
|
"Step 52"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f7e7281626a92bbd62da8",
|
||||||
|
"Step 53"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f7ecb09de9a938ef94756",
|
||||||
|
"Step 54"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f7fa959ab75948f96a0d6",
|
||||||
|
"Step 55"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f808d85793195b0f53be9",
|
||||||
|
"Step 56"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f829d07b18f96f6f6684b",
|
||||||
|
"Step 57"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f83ef928ec9982b785b6a",
|
||||||
|
"Step 58"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f84f246e8ba98e3cd97be",
|
||||||
|
"Step 59"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f887466db4ba14b5342cc",
|
||||||
|
"Step 60"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f89e055040ba294719d2f",
|
||||||
|
"Step 61"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f8bfe0f30a1a3c340356b",
|
||||||
|
"Step 62"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f8f1223601fa546e93f31",
|
||||||
|
"Step 63"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f905fbd1017a65ca224eb",
|
||||||
|
"Step 64"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f94786869e1a7fec54375",
|
||||||
|
"Step 65"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"615f951dff9317a900ef683f",
|
||||||
|
"Step 66"
|
||||||
|
]
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -0,0 +1,55 @@
|
|||||||
|
---
|
||||||
|
id: 615f2abbe7d18d49a1e0e1c8
|
||||||
|
title: Step 1
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-1
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
We've provided a basic HTML boilerplate for you.
|
||||||
|
|
||||||
|
Create an `h1` element within your `body` element and give it the text `Nutrition Facts`.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
You should add a new `h1` element.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert.exists(document.querySelector('h1'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your `h1` element should be within your `body` element.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('h1')?.parentElement?.localName === 'body');
|
||||||
|
```
|
||||||
|
|
||||||
|
Your `h1` element should have the text `Nutrition Facts`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('h1')?.innerText === 'Nutrition Facts');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
--fcc-editable-region--
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
--fcc-editable-region--
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
|
||||||
|
```
|
||||||
@ -0,0 +1,60 @@
|
|||||||
|
---
|
||||||
|
id: 615f2d4150fe0d4cbd0f2628
|
||||||
|
title: Step 2
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-2
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Below your `h1` element, add a `p` element with the text `8 servings per container`.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
You should add a new `p` element.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert.exists(document.querySelector('p'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your `p` element should be within your `body` element.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('p')?.parentElement?.localName === 'body');
|
||||||
|
```
|
||||||
|
|
||||||
|
Your `p` element should come after your `h1` element.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('p')?.previousElementSibling?.localName === 'h1');
|
||||||
|
```
|
||||||
|
|
||||||
|
Your `p` element should have the text `8 servings per container`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('p')?.innerText === '8 servings per container');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
--fcc-editable-region--
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Nutrition Facts</h1>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
--fcc-editable-region--
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
|
||||||
|
```
|
||||||
@ -0,0 +1,61 @@
|
|||||||
|
---
|
||||||
|
id: 615f34948891834dd77655a6
|
||||||
|
title: Step 3
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-3
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Add a second `p` element with the text `Serving size 2/3 cup (55g)`.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
You should have a second `p` element.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelectorAll('p')?.length === 2);
|
||||||
|
```
|
||||||
|
|
||||||
|
Your second `p` element should be within your `body` element.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelectorAll('p')?.[1]?.parentElement?.localName === 'body');
|
||||||
|
```
|
||||||
|
|
||||||
|
Your second `p` element should come after your existing `p` element.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelectorAll('p')?.[1]?.previousElementSibling?.localName === 'p');
|
||||||
|
```
|
||||||
|
|
||||||
|
Your second `p` element should have the text `Serving size 2/3 cup (55g)`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelectorAll('p')?.[1]?.innerText === 'Serving size 2/3 cup (55g)');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
--fcc-editable-region--
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Nutrition Facts</h1>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
--fcc-editable-region--
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
|
||||||
|
```
|
||||||
@ -0,0 +1,66 @@
|
|||||||
|
---
|
||||||
|
id: 615f34ecc1091b4fd5a8a484
|
||||||
|
title: Step 4
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-4
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Within your `head` element, add a `link` element with the `rel` attribute set to `stylesheet` and the `href` attribute set to `https://fonts.googleapis.com/css?family=Open+Sans:400,700,800`.
|
||||||
|
|
||||||
|
This will import the `Open Sans` font family, with the font weight values `400`, `700`, and `800`.
|
||||||
|
|
||||||
|
Also add a `link` element to link your `styles.css` file.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
You should have two `link` elements.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/<link/g)?.length === 2);
|
||||||
|
```
|
||||||
|
|
||||||
|
Both of your `link` elements should have the `rel` attribute set to `stylesheet`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/<link[\s\S]*?rel=('|"|`)stylesheet\1/)?.length === 2);
|
||||||
|
```
|
||||||
|
|
||||||
|
One of your `link` elements should have an `href` attribute set to `./styles.css`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/<link[\s\S]*?href=('|"|`)(\.\/)?styles\.css\1/g)?.length === 1);
|
||||||
|
```
|
||||||
|
|
||||||
|
One of your `link` elements should have an `href` attribute set to `https://fonts.googleapis.com/css?family=Open+Sans:400,700,800`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
const links = [...document.querySelectorAll('link')]
|
||||||
|
assert(links.find(link => link?.getAttribute('href') === 'https://fonts.googleapis.com/css?family=Open+Sans:400,700,800'));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
--fcc-editable-region--
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Nutrition Facts</h1>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
--fcc-editable-region--
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
|
||||||
|
```
|
||||||
@ -0,0 +1,53 @@
|
|||||||
|
---
|
||||||
|
id: 615f357957e370510f21ea16
|
||||||
|
title: Step 5
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-5
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Create a `body` selector and give it a `font-family` set to `Open Sans` with a fallback of `sans-serif`.
|
||||||
|
|
||||||
|
Remember that fonts with spaces in the name must be wrapped in quotes for CSS.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
You should have a `body` selector.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('body'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your `body` selector should have a `font-family` property set to `"Open Sans", sans-serif`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily === '"Open Sans", sans-serif');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Nutrition Facts</h1>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p>Serving size 2/3 cup (55g)</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
--fcc-editable-region--
|
||||||
|
|
||||||
|
--fcc-editable-region--
|
||||||
|
```
|
||||||
@ -0,0 +1,55 @@
|
|||||||
|
---
|
||||||
|
id: 615f378014c2da526a109c81
|
||||||
|
title: Step 6
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-6
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
The font is a bit small. Create an `html` selector and set the font to have a size of `16px`.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
You should have an `html` selector.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('html'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your `html` selector should have a `font-size` property set to `16px`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('html')?.fontSize === '16px');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Nutrition Facts</h1>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p>Serving size 2/3 cup (55g)</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
--fcc-editable-region--
|
||||||
|
|
||||||
|
--fcc-editable-region--
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
```
|
||||||
@ -0,0 +1,64 @@
|
|||||||
|
---
|
||||||
|
id: 615f38279e5c3d53692ea441
|
||||||
|
title: Step 7
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-7
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Wrap your `h1` and `p` elements in a `div` element. Give that `div` a `class` attribute set to `label`.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
You should create a new `div` element.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('div'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your new `div` element should have the `class` attribute set to `label`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('div')?.classList?.contains('label'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your `h1` and `p` elements should be within your new `.label` element.
|
||||||
|
|
||||||
|
```js
|
||||||
|
const children = [...document.querySelectorAll('h1'), ...document.querySelectorAll('p')];
|
||||||
|
assert(children?.every(child => child?.parentElement?.classList?.contains('label')));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
--fcc-editable-region--
|
||||||
|
<body>
|
||||||
|
<h1>Nutrition Facts</h1>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p>Serving size 2/3 cup (55g)</p>
|
||||||
|
</body>
|
||||||
|
--fcc-editable-region--
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
```
|
||||||
@ -0,0 +1,63 @@
|
|||||||
|
---
|
||||||
|
id: 615f38cabc64e3556f98cc1a
|
||||||
|
title: Step 8
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-8
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Borders can be used to group and prioritize content.
|
||||||
|
|
||||||
|
Create a `.label` selector and give it a `border` set to `2px solid black`.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
You should have a `.label` selector.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('.label'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your `.label` selector should have a `border` property set to `2px solid black`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('.label')?.border === '2px solid black');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="label">
|
||||||
|
<h1>Nutrition Facts</h1>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p>Serving size 2/3 cup (55g)</p>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
--fcc-editable-region--
|
||||||
|
|
||||||
|
--fcc-editable-region--
|
||||||
|
```
|
||||||
@ -0,0 +1,59 @@
|
|||||||
|
---
|
||||||
|
id: 615f3949f58e12577dcefb00
|
||||||
|
title: Step 9
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-9
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Good use of white space can bring focus to the important elements of your page, and help guide your user's eyes through your text.
|
||||||
|
|
||||||
|
Give your `.label` selector a `width` property set to `270px`.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Your `.label` selector should have a `width` property set to `270px`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('.label')?.width === '270px');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="label">
|
||||||
|
<h1>Nutrition Facts</h1>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p>Serving size 2/3 cup (55g)</p>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
--fcc-editable-region--
|
||||||
|
.label {
|
||||||
|
border: 2px solid black;
|
||||||
|
}
|
||||||
|
--fcc-editable-region--
|
||||||
|
```
|
||||||
@ -0,0 +1,64 @@
|
|||||||
|
---
|
||||||
|
id: 615f39d7da41b15851fa3fb9
|
||||||
|
title: Step 10
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-10
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Give your `.label` selector a `margin` property set to `20px auto`, and a `padding` property set to `0 7px`.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Your `.label` selector should have a `margin` property set to `20px auto`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('.label')?.margin === '20px auto');
|
||||||
|
```
|
||||||
|
|
||||||
|
Your `.label` selector should have a `padding` property set to `0 7px`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('.label')?.padding === '0px 7px');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="label">
|
||||||
|
<h1>Nutrition Facts</h1>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p>Serving size 2/3 cup (55g)</p>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
--fcc-editable-region--
|
||||||
|
.label {
|
||||||
|
border: 2px solid black;
|
||||||
|
width: 270px;
|
||||||
|
}
|
||||||
|
--fcc-editable-region--
|
||||||
|
```
|
||||||
@ -0,0 +1,70 @@
|
|||||||
|
---
|
||||||
|
id: 615f3b091162165948e1cb33
|
||||||
|
title: Step 11
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-11
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
If you inspect your `.label` element with your browser's developer tools, you may notice that it's actually 288 pixels wide instead of 270. This is because, by default, the browser includes the border and padding when determining an element's size.
|
||||||
|
|
||||||
|
To solve this, reset the box model by creating a `*` selector and giving it a `box-sizing` property of `border-box`.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
You should create a `*` selector.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('*'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your `*` selector should have a `box-sizing` property set to `border-box`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing === 'border-box');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="label">
|
||||||
|
<h1>Nutrition Facts</h1>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p>Serving size 2/3 cup (55g)</p>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
--fcc-editable-region--
|
||||||
|
|
||||||
|
--fcc-editable-region--
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
border: 2px solid black;
|
||||||
|
width: 270px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 7px;
|
||||||
|
}
|
||||||
|
```
|
||||||
@ -0,0 +1,74 @@
|
|||||||
|
---
|
||||||
|
id: 615f3cafd794015aa9547a6d
|
||||||
|
title: Step 12
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-12
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Remember that the use of `h1`, `h2`, and similar tags determine the semantic structure of your HTML. However, you can adjust the CSS of these elements to control the visual flow and hierarchy.
|
||||||
|
|
||||||
|
Create an `h1` rule and set the `font-weight` property to `800`. This will make your `h1` text bolder.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
You should create an `h1` selector.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('h1'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your `h1` selector should have a `font-weight` property set to `800`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('h1')?.fontWeight === '800');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="label">
|
||||||
|
<h1>Nutrition Facts</h1>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p>Serving size 2/3 cup (55g)</p>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
border: 2px solid black;
|
||||||
|
width: 270px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
--fcc-editable-region--
|
||||||
|
|
||||||
|
--fcc-editable-region--
|
||||||
|
```
|
||||||
@ -0,0 +1,68 @@
|
|||||||
|
---
|
||||||
|
id: 615f3d9e59db4b5b8e960762
|
||||||
|
title: Step 13
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-13
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Give your `h1` selector a `text-align` property of `center`.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Your `h1` selector should have a `text-align` property set to `center`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('h1')?.textAlign === 'center');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="label">
|
||||||
|
<h1>Nutrition Facts</h1>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p>Serving size 2/3 cup (55g)</p>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
border: 2px solid black;
|
||||||
|
width: 270px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
--fcc-editable-region--
|
||||||
|
h1 {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
--fcc-editable-region--
|
||||||
|
```
|
||||||
@ -0,0 +1,69 @@
|
|||||||
|
---
|
||||||
|
id: 615f3e1b7233ee5c7595771f
|
||||||
|
title: Step 14
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-14
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Fine-tune the placement of your `h1` by giving it a top and bottom margin of `-4px` and a left and right margin of `0`.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Your `h1` selector should have a `margin` property set to `-4px 0`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('h1')?.margin === '-4px 0px');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="label">
|
||||||
|
<h1>Nutrition Facts</h1>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p>Serving size 2/3 cup (55g)</p>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
border: 2px solid black;
|
||||||
|
width: 270px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
--fcc-editable-region--
|
||||||
|
h1 {
|
||||||
|
font-weight: 800;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
--fcc-editable-region--
|
||||||
|
```
|
||||||
@ -0,0 +1,78 @@
|
|||||||
|
---
|
||||||
|
id: 615f3e4af8008c5d494d3afe
|
||||||
|
title: Step 15
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-15
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Create a `p` selector and remove all margins.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
You should create a `p` selector.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('p'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your `p` selector should have a `margin` property set to `0`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('p')?.margin === '0px');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="label">
|
||||||
|
<h1>Nutrition Facts</h1>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p>Serving size 2/3 cup (55g)</p>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
border: 2px solid black;
|
||||||
|
width: 270px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-weight: 800;
|
||||||
|
text-align: center;
|
||||||
|
margin: -4px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
--fcc-editable-region--
|
||||||
|
|
||||||
|
--fcc-editable-region--
|
||||||
|
```
|
||||||
@ -0,0 +1,94 @@
|
|||||||
|
---
|
||||||
|
id: 615f3ed16592445e57941aec
|
||||||
|
title: Step 16
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-16
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Lines can help separate and group important content, especially when space is limited.
|
||||||
|
|
||||||
|
Create a `div` element below your `h1` element, and give it a `class` attribute set to `divider`.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
You should create a new `div`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelectorAll('div')?.length === 2);
|
||||||
|
```
|
||||||
|
|
||||||
|
Your new `div` should have the `class` attribute set to `divider`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelectorAll('div')?.[1]?.classList?.contains('divider'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your `.divider` element should be within your `.label` element.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.label')?.querySelector('.divider'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your `.divider` element should come after your `h1` element.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.divider')?.previousElementSibling?.localName === 'h1');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
--fcc-editable-region--
|
||||||
|
<div class="label">
|
||||||
|
<h1>Nutrition Facts</h1>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p>Serving size 2/3 cup (55g)</p>
|
||||||
|
</div>
|
||||||
|
--fcc-editable-region--
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
border: 2px solid black;
|
||||||
|
width: 270px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-weight: 800;
|
||||||
|
text-align: center;
|
||||||
|
margin: -4px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
```
|
||||||
@ -0,0 +1,89 @@
|
|||||||
|
---
|
||||||
|
id: 615f405b89a7ec5f8e2d11f4
|
||||||
|
title: Step 17
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-17
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Create a selector for your new `.divider` and set the `border-bottom` property to `1px solid #888989`. Also give it a top and bottom margin of `2px`. It should not have any left or right margin.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
You should create a `.divider` selector.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('.divider'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your `.divider` selector should have a `border-bottom` property set to `1px solid #888989`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('.divider')?.borderBottom === '1px solid rgb(136, 137, 137)');
|
||||||
|
```
|
||||||
|
|
||||||
|
Your `.divider` selector should have a `margin` property set to `2px 0`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('.divider')?.margin === '2px 0px');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="label">
|
||||||
|
<h1>Nutrition Facts</h1>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p>Serving size 2/3 cup (55g)</p>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
border: 2px solid black;
|
||||||
|
width: 270px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-weight: 800;
|
||||||
|
text-align: center;
|
||||||
|
margin: -4px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
--fcc-editable-region--
|
||||||
|
|
||||||
|
--fcc-editable-region--
|
||||||
|
```
|
||||||
@ -0,0 +1,82 @@
|
|||||||
|
---
|
||||||
|
id: 615f40b01f680e608d360ed4
|
||||||
|
title: Step 18
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-18
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
The `letter-spacing` property can be used to adjust the space between each character of text in an element.
|
||||||
|
|
||||||
|
Give your `h1` selector a `letter-spacing` property set to `0.15px` to space them out a bit more.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Your `h1` selector should have a `letter-spacing` property set to `0.15px`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('h1')?.letterSpacing === '0.15px');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="label">
|
||||||
|
<h1>Nutrition Facts</h1>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p>Serving size 2/3 cup (55g)</p>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
border: 2px solid black;
|
||||||
|
width: 270px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
--fcc-editable-region--
|
||||||
|
h1 {
|
||||||
|
font-weight: 800;
|
||||||
|
text-align: center;
|
||||||
|
margin: -4px 0;
|
||||||
|
}
|
||||||
|
--fcc-editable-region--
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
margin: 2px 0;
|
||||||
|
}
|
||||||
|
```
|
||||||
@ -0,0 +1,89 @@
|
|||||||
|
---
|
||||||
|
id: 615f4172e9eec061d6456221
|
||||||
|
title: Step 19
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-19
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Nutrition labels have a lot of bold text to draw attention to important information. Rather than targeting each element that needs to be bold, it is more efficient to use a class to apply the bold styling to every element.
|
||||||
|
|
||||||
|
Give your second `p` element a `class` attribute set to `bold`.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Your second `p` element should have a `class` attribute set to `bold`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelectorAll('p')?.[1]?.classList?.contains('bold'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your first `p` element should not have a `class` attribute set to `bold`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(!document.querySelector('p')?.classList?.contains('bold'));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
--fcc-editable-region--
|
||||||
|
<div class="label">
|
||||||
|
<h1>Nutrition Facts</h1>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p>Serving size 2/3 cup (55g)</p>
|
||||||
|
</div>
|
||||||
|
--fcc-editable-region--
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
border: 2px solid black;
|
||||||
|
width: 270px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-weight: 800;
|
||||||
|
text-align: center;
|
||||||
|
margin: -4px 0;
|
||||||
|
letter-spacing: 0.15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
margin: 2px 0;
|
||||||
|
}
|
||||||
|
```
|
||||||
@ -0,0 +1,102 @@
|
|||||||
|
---
|
||||||
|
id: 615f41c979787462e76dab90
|
||||||
|
title: Step 20
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-20
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Your new class does not have any styling yet. Create a `.bold` selector and give it a `font-weight` property set to `800` to make the text bold.
|
||||||
|
|
||||||
|
Go ahead and remove the `font-weight` property from your `h1` selector as well.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
You should have a `.bold` selector.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('.bold'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your `.bold` selector should have a `font-weight` property set to `800`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('.bold')?.fontWeight === '800');
|
||||||
|
```
|
||||||
|
|
||||||
|
Your `h1` selector should not have a `font-weight` property.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('h1')?.fontWeight === "");
|
||||||
|
```
|
||||||
|
|
||||||
|
You should not remove your `h1` selector.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('h1'));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="label">
|
||||||
|
<h1>Nutrition Facts</h1>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p class="bold">Serving size 2/3 cup (55g)</p>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
border: 2px solid black;
|
||||||
|
width: 270px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
--fcc-editable-region--
|
||||||
|
h1 {
|
||||||
|
font-weight: 800;
|
||||||
|
text-align: center;
|
||||||
|
margin: -4px 0;
|
||||||
|
letter-spacing: 0.15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
margin: 2px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
--fcc-editable-region--
|
||||||
|
```
|
||||||
@ -0,0 +1,84 @@
|
|||||||
|
---
|
||||||
|
id: 615f423cf65d5864132a0956
|
||||||
|
title: Step 21
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-21
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Give your `h1` element a `class` attribute set to `bold`. This will make the text bold again.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Your `h1` element should have a `class` attribute set to `bold`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('h1')?.classList?.contains('bold'));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
--fcc-editable-region--
|
||||||
|
<div class="label">
|
||||||
|
<h1>Nutrition Facts</h1>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p class="bold">Serving size 2/3 cup (55g)</p>
|
||||||
|
</div>
|
||||||
|
--fcc-editable-region--
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
border: 2px solid black;
|
||||||
|
width: 270px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin: -4px 0;
|
||||||
|
letter-spacing: 0.15px
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
margin: 2px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bold {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
```
|
||||||
@ -0,0 +1,104 @@
|
|||||||
|
---
|
||||||
|
id: 615f42a021625f656101ef93
|
||||||
|
title: Step 22
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-22
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Horizontal spacing between equally important elements can increase the readability of your text.
|
||||||
|
|
||||||
|
Wrap the text `2/3 cup (55g)` in a `span` element, and give it a `class` attribute set to `right`.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
You should create a new `span` element.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('span'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your new `span` element should have the `class` attribute set to `right`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('span')?.classList?.contains('right'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your `.right` element should have the text `2/3 cup (55g)`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('span')?.textContent === '2/3 cup (55g)');
|
||||||
|
```
|
||||||
|
|
||||||
|
Your `p` element should still have the text `Serving size 2/3 cup (55g)`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelectorAll('p')?.[1]?.innerText === 'Serving size 2/3 cup (55g)');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
--fcc-editable-region--
|
||||||
|
<div class="label">
|
||||||
|
<h1 class="bold">Nutrition Facts</h1>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p class="bold">Serving size 2/3 cup (55g)</p>
|
||||||
|
</div>
|
||||||
|
--fcc-editable-region--
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
border: 2px solid black;
|
||||||
|
width: 270px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin: -4px 0;
|
||||||
|
letter-spacing: 0.15px
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
margin: 2px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bold {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
```
|
||||||
@ -0,0 +1,94 @@
|
|||||||
|
---
|
||||||
|
id: 615f4bfb9de4a16703b56eb6
|
||||||
|
title: Step 23
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-23
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
The `float` property is used to place an element on the left or right of its container, allowing other content (such as text) to wrap around it.
|
||||||
|
|
||||||
|
Create a new `.right` selector and set the `float` property to `right`.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
You should create a new `.right` selector.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('.right'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your `.right` selector should have a `float` property set to `right`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('.right')?.float === 'right');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="label">
|
||||||
|
<h1 class="bold">Nutrition Facts</h1>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
border: 2px solid black;
|
||||||
|
width: 270px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin: -4px 0;
|
||||||
|
letter-spacing: 0.15px
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
margin: 2px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bold {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
--fcc-editable-region--
|
||||||
|
|
||||||
|
--fcc-editable-region--
|
||||||
|
```
|
||||||
@ -0,0 +1,104 @@
|
|||||||
|
---
|
||||||
|
id: 615f4ce9d877b668417c0c42
|
||||||
|
title: Step 24
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-24
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Wrap everything within the `.label` element in a new `header` element.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
You should create a new `header` element.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('header'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your `header` element should be within your `.label` element.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('header')?.parentElement?.classList?.contains('label'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your `h1`, `div`, and `p` elements should be within your new `header` element.
|
||||||
|
|
||||||
|
```js
|
||||||
|
const children = document.querySelector('header')?.children;
|
||||||
|
assert(children?.[0]?.localName === 'h1');
|
||||||
|
assert(children?.[1]?.localName === 'div');
|
||||||
|
assert(children?.[2]?.localName === 'p');
|
||||||
|
assert(children?.[3]?.localName === 'p');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
--fcc-editable-region--
|
||||||
|
<div class="label">
|
||||||
|
<h1 class="bold">Nutrition Facts</h1>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
|
||||||
|
</div>
|
||||||
|
--fcc-editable-region--
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
border: 2px solid black;
|
||||||
|
width: 270px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin: -4px 0;
|
||||||
|
letter-spacing: 0.15px
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
margin: 2px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bold {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
```
|
||||||
@ -0,0 +1,105 @@
|
|||||||
|
---
|
||||||
|
id: 615f4dde9d72e3694cb9ee3b
|
||||||
|
title: Step 25
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-25
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Now update your `h1` selector to be `header h1`, to specifically target your `h1` element within your new `header`.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
You should have a `header h1` selector.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('header h1'));
|
||||||
|
```
|
||||||
|
|
||||||
|
You should not have an `h1` selector.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert.isNull(new __helpers.CSSHelp(document).getStyle('h1'));
|
||||||
|
```
|
||||||
|
|
||||||
|
You should not change any properties in the selector.
|
||||||
|
|
||||||
|
```js
|
||||||
|
const style = new __helpers.CSSHelp(document).getStyle('header h1');
|
||||||
|
assert(style?.textAlign === 'center');
|
||||||
|
assert(style?.margin === '-4px 0px');
|
||||||
|
assert(style?.letterSpacing === '0.15px');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="label">
|
||||||
|
<header>
|
||||||
|
<h1 class="bold">Nutrition Facts</h1>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
|
||||||
|
</header>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
border: 2px solid black;
|
||||||
|
width: 270px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
--fcc-editable-region--
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin: -4px 0;
|
||||||
|
letter-spacing: 0.15px
|
||||||
|
}
|
||||||
|
--fcc-editable-region--
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
margin: 2px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bold {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
```
|
||||||
@ -0,0 +1,105 @@
|
|||||||
|
---
|
||||||
|
id: 615f4ec58334106a4170c2a8
|
||||||
|
title: Step 26
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-26
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Create a new `div` element below your `header` element, and give it a `class` attribute set to `divider lg`.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
You should create a new `div` element.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelectorAll('div')?.length === 3);
|
||||||
|
```
|
||||||
|
|
||||||
|
Your new `div` element should come after your `header` element.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.label')?.lastElementChild?.localName === 'div');
|
||||||
|
```
|
||||||
|
|
||||||
|
Your new `div` element should have the `class` attribute set to `divider lg`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
const div = document.querySelector('.label')?.lastElementChild;
|
||||||
|
assert(div?.classList?.contains('divider'));
|
||||||
|
assert(div?.classList?.contains('lg'));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="label">
|
||||||
|
<header>
|
||||||
|
<h1 class="bold">Nutrition Facts</h1>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
|
||||||
|
</header>
|
||||||
|
--fcc-editable-region--
|
||||||
|
|
||||||
|
--fcc-editable-region--
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
border: 2px solid black;
|
||||||
|
width: 270px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin: -4px 0;
|
||||||
|
letter-spacing: 0.15px
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
margin: 2px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bold {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
```
|
||||||
@ -0,0 +1,111 @@
|
|||||||
|
---
|
||||||
|
id: 615f4f9e4a40566b776a8f38
|
||||||
|
title: Step 27
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-27
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Create a new `.lg` selector and give it a `height` property set to `10px`. Also create an `.lg, .md` selector and set the `background-color` property to `black`.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
You should have a new `.lg` selector.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('.lg'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your `.lg` selector should have a `height` property set to `10px`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('.lg')?.height === '10px');
|
||||||
|
```
|
||||||
|
|
||||||
|
You should have a new `.lg, .md` selector.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('.lg, .md'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your `.lg, .md` selector should have a `background-color` property set to `black`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('.lg, .md')?.backgroundColor === 'black');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="label">
|
||||||
|
<header>
|
||||||
|
<h1 class="bold">Nutrition Facts</h1>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
|
||||||
|
</header>
|
||||||
|
<div class="divider lg"></div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
border: 2px solid black;
|
||||||
|
width: 270px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin: -4px 0;
|
||||||
|
letter-spacing: 0.15px
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
margin: 2px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bold {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
--fcc-editable-region--
|
||||||
|
|
||||||
|
--fcc-editable-region--
|
||||||
|
```
|
||||||
@ -0,0 +1,99 @@
|
|||||||
|
---
|
||||||
|
id: 615f50473cc0196c6dd3892a
|
||||||
|
title: Step 28
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-28
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
You may notice there is still a small border at the bottom of your `.lg` element. To reset this, give your `.lg, .md` selector a `border` property set to `0`.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Your `.lg, .md` selector should have a `border` property set to `0`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('.lg, .md')?.border === '0px');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="label">
|
||||||
|
<header>
|
||||||
|
<h1 class="bold">Nutrition Facts</h1>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
|
||||||
|
</header>
|
||||||
|
<div class="divider lg"></div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
border: 2px solid black;
|
||||||
|
width: 270px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin: -4px 0;
|
||||||
|
letter-spacing: 0.15px
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
margin: 2px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bold {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg {
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
--fcc-editable-region--
|
||||||
|
.lg, .md {
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
--fcc-editable-region--
|
||||||
|
```
|
||||||
@ -0,0 +1,113 @@
|
|||||||
|
---
|
||||||
|
id: 615f51257a8a516d80b6c743
|
||||||
|
title: Step 29
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-29
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Create a new `div` below your `.lg` element and give it a `class` attribute set to `calories-info`.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
You should create another `div` element.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelectorAll('div')?.length === 4);
|
||||||
|
```
|
||||||
|
|
||||||
|
Your new `div` should have a `class` attribute set to `calories-info`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('calories-info'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your new `div` should come after the `.lg` element.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.label')?.lastElementChild?.previousElementSibling?.classList?.contains('lg'));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="label">
|
||||||
|
<header>
|
||||||
|
<h1 class="bold">Nutrition Facts</h1>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
|
||||||
|
</header>
|
||||||
|
<div class="divider lg"></div>
|
||||||
|
--fcc-editable-region--
|
||||||
|
|
||||||
|
--fcc-editable-region--
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
border: 2px solid black;
|
||||||
|
width: 270px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin: -4px 0;
|
||||||
|
letter-spacing: 0.15px
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
margin: 2px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bold {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg {
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg, .md {
|
||||||
|
background-color: black;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
```
|
||||||
@ -0,0 +1,116 @@
|
|||||||
|
---
|
||||||
|
id: 615f51e4e5b24a6e80eccce1
|
||||||
|
title: Step 30
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-30
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Within your `.calories-info` element, create a `p` element. Give that `p` element a `class` attribute set to `bold sm-text`, and the text `Amount per serving`.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
You should create a new `p` element within your `.calories-info` element.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.calories-info')?.children?.[0]?.localName === 'p');
|
||||||
|
```
|
||||||
|
|
||||||
|
Your new `p` element should have a `class` attribute set to `bold sm-text`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.calories-info')?.children?.[0]?.classList.contains('bold'));
|
||||||
|
assert(document.querySelector('.calories-info')?.children?.[0]?.classList.contains('sm-text'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your new `p` element should have the text `Amount per serving`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.calories-info')?.children?.[0]?.innerText === 'Amount per serving');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="label">
|
||||||
|
<header>
|
||||||
|
<h1 class="bold">Nutrition Facts</h1>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
|
||||||
|
</header>
|
||||||
|
<div class="divider lg"></div>
|
||||||
|
--fcc-editable-region--
|
||||||
|
<div class="calories-info">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
--fcc-editable-region--
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
border: 2px solid black;
|
||||||
|
width: 270px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin: -4px 0;
|
||||||
|
letter-spacing: 0.15px
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
margin: 2px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bold {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg {
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg, .md {
|
||||||
|
background-color: black;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
```
|
||||||
@ -0,0 +1,113 @@
|
|||||||
|
---
|
||||||
|
id: 615f522dea4f776f64dc3e91
|
||||||
|
title: Step 31
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-31
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
The `rem` unit stands for `root em`, and is relative to the font size of the `html` element.
|
||||||
|
|
||||||
|
Create an `.sm-text` selector and set the `font-size` to `0.85rem`, which would calculate to be roughly `13.6px` (remember that you set your `html` to have a `font-size` of `16px`).
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
You should have an `.sm-text` selector.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('.sm-text'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your `.sm-text` selector should have a `font-size` property set to `0.85rem`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('.sm-text')?.fontSize === '0.85rem');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="label">
|
||||||
|
<header>
|
||||||
|
<h1 class="bold">Nutrition Facts</h1>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
|
||||||
|
</header>
|
||||||
|
<div class="divider lg"></div>
|
||||||
|
<div class="calories-info">
|
||||||
|
<p class="bold sm-text">Amount per serving</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
border: 2px solid black;
|
||||||
|
width: 270px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin: -4px 0;
|
||||||
|
letter-spacing: 0.15px
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
margin: 2px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bold {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg {
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg, .md {
|
||||||
|
background-color: black;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
--fcc-editable-region--
|
||||||
|
|
||||||
|
--fcc-editable-region--
|
||||||
|
```
|
||||||
@ -0,0 +1,138 @@
|
|||||||
|
---
|
||||||
|
id: 615f5486b8fd4b71633f69b0
|
||||||
|
title: Step 32
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-32
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Below your `.sm-text` element, create a new `h1` element with the text `Calories 230`. Wrap the `230` portion of the text in a `span` element with the `class` set to `right`.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
You should have a new `h1` element within your `.calories-info` element.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.calories-info')?.querySelector('h1'))
|
||||||
|
```
|
||||||
|
|
||||||
|
Your `h1` element should come after your `.sm-text` element.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.sm-text')?.nextElementSibling?.localName === 'h1');
|
||||||
|
```
|
||||||
|
|
||||||
|
Your `h1` element should have the text `Calories 230`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
// the float: right property does weird things to the inner text.
|
||||||
|
assert(document.querySelector('.calories-info')?.lastElementChild?.innerText.match(/Calories[\s|\n]*230/));
|
||||||
|
```
|
||||||
|
|
||||||
|
You should create a `span` element within your new `h1` element.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.calories-info')?.lastElementChild?.querySelector('span'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your `span` element should have the `class` set to `right`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.calories-info')?.lastElementChild?.querySelector('span')?.classList?.contains('right'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your `span` element should have the text `230`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.calories-info')?.lastElementChild?.querySelector('span')?.innerText === '230');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="label">
|
||||||
|
<header>
|
||||||
|
<h1 class="bold">Nutrition Facts</h1>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
|
||||||
|
</header>
|
||||||
|
<div class="divider lg"></div>
|
||||||
|
--fcc-editable-region--
|
||||||
|
<div class="calories-info">
|
||||||
|
<p class="bold sm-text">Amount per serving</p>
|
||||||
|
</div>
|
||||||
|
--fcc-editable-region--
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
border: 2px solid black;
|
||||||
|
width: 270px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin: -4px 0;
|
||||||
|
letter-spacing: 0.15px
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
margin: 2px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bold {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg {
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg, .md {
|
||||||
|
background-color: black;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm-text {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
```
|
||||||
@ -0,0 +1,116 @@
|
|||||||
|
---
|
||||||
|
id: 615f575b50b91e72af079480
|
||||||
|
title: Step 33
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-33
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Create a new `.calories-info h1` selector setting the top and bottom margin to `-5px`, and removing the left and right margin.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
You should have a new `.calories-info h1` selector.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('.calories-info h1'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your new `.calories-info h1` selector should have a `margin` property set to `-5px 0`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('.calories-info h1')?.margin === '-5px 0px');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="label">
|
||||||
|
<header>
|
||||||
|
<h1 class="bold">Nutrition Facts</h1>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
|
||||||
|
</header>
|
||||||
|
<div class="divider lg"></div>
|
||||||
|
<div class="calories-info">
|
||||||
|
<p class="bold sm-text">Amount per serving</p>
|
||||||
|
<h1>Calories <span class="right">230</span></h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
border: 2px solid black;
|
||||||
|
width: 270px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin: -4px 0;
|
||||||
|
letter-spacing: 0.15px
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
margin: 2px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bold {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg {
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg, .md {
|
||||||
|
background-color: black;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm-text {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
--fcc-editable-region--
|
||||||
|
|
||||||
|
--fcc-editable-region--
|
||||||
|
```
|
||||||
@ -0,0 +1,120 @@
|
|||||||
|
---
|
||||||
|
id: 615f5af373a68e744a3c5a76
|
||||||
|
title: Step 34
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-34
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Create a `.calories-info span` selector and set the `font-size` to `1.2em`.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
You should create a `.calories-info span` selector.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('.calories-info span'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your `.calories-info span` selector should have a `font-size` property set to `1.2em`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('.calories-info span')?.fontSize === '1.2em');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="label">
|
||||||
|
<header>
|
||||||
|
<h1 class="bold">Nutrition Facts</h1>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
|
||||||
|
</header>
|
||||||
|
<div class="divider lg"></div>
|
||||||
|
<div class="calories-info">
|
||||||
|
<p class="bold sm-text">Amount per serving</p>
|
||||||
|
<h1>Calories <span class="right">230</span></h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
border: 2px solid black;
|
||||||
|
width: 270px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin: -4px 0;
|
||||||
|
letter-spacing: 0.15px
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
margin: 2px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bold {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg {
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg, .md {
|
||||||
|
background-color: black;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm-text {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info h1 {
|
||||||
|
margin: -5px -2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
--fcc-editable-region--
|
||||||
|
|
||||||
|
--fcc-editable-region--
|
||||||
|
```
|
||||||
@ -0,0 +1,116 @@
|
|||||||
|
---
|
||||||
|
id: 615f5c1cb7575c7551ed8a40
|
||||||
|
title: Step 35
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-35
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
The larger font size of the number `230` is causing it to overflow. Give the `.calories-info h1` an `overflow` property set to `hidden` to avoid this.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Your `.calories-info h1` selector should have an `overflow` property set to `hidden`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('.calories-info h1')?.overflow === 'hidden');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="label">
|
||||||
|
<header>
|
||||||
|
<h1 class="bold">Nutrition Facts</h1>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
|
||||||
|
</header>
|
||||||
|
<div class="divider lg"></div>
|
||||||
|
<div class="calories-info">
|
||||||
|
<p class="bold sm-text">Amount per serving</p>
|
||||||
|
<h1>Calories <span class="right">230</span></h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
border: 2px solid black;
|
||||||
|
width: 270px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin: -4px 0;
|
||||||
|
letter-spacing: 0.15px
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
margin: 2px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bold {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg {
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg, .md {
|
||||||
|
background-color: black;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm-text {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
--fcc-editable-region--
|
||||||
|
.calories-info h1 {
|
||||||
|
margin: -5px -2px;
|
||||||
|
}
|
||||||
|
--fcc-editable-region--
|
||||||
|
|
||||||
|
.calories-info span {
|
||||||
|
font-size: 1.2em;
|
||||||
|
}
|
||||||
|
```
|
||||||
@ -0,0 +1,119 @@
|
|||||||
|
---
|
||||||
|
id: 615f5fd85d0062761f288364
|
||||||
|
title: Step 36
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-36
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Typography is often more art than science. You may have to tweak things like alignment until it looks correct.
|
||||||
|
|
||||||
|
Give your `.calories-info span` selector a `margin-top` set to `-7px`. This will shift your `230` text into place.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Your `.calories-info span` selector should have a `margin-top` set to `-7px`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('.calories-info span')?.marginTop === '-7px');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="label">
|
||||||
|
<header>
|
||||||
|
<h1 class="bold">Nutrition Facts</h1>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
|
||||||
|
</header>
|
||||||
|
<div class="divider lg"></div>
|
||||||
|
<div class="calories-info">
|
||||||
|
<p class="bold sm-text">Amount per serving</p>
|
||||||
|
<h1>Calories <span class="right">230</span></h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
border: 2px solid black;
|
||||||
|
width: 270px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin: -4px 0;
|
||||||
|
letter-spacing: 0.15px
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
margin: 2px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bold {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg {
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg, .md {
|
||||||
|
background-color: black;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm-text {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info h1 {
|
||||||
|
margin: -5px -2px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
--fcc-editable-region--
|
||||||
|
.calories-info span {
|
||||||
|
font-size: 1.2em;
|
||||||
|
}
|
||||||
|
--fcc-editable-region--
|
||||||
|
```
|
||||||
@ -0,0 +1,126 @@
|
|||||||
|
---
|
||||||
|
id: 615f61338c8ca176d6445574
|
||||||
|
title: Step 37
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-37
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Below your `.calories-info` element, add a `div` with the `class` attribute set to `divider md`.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
You should create a new `div` within your `.label` element.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelectorAll('.label > div')?.length === 3)
|
||||||
|
```
|
||||||
|
|
||||||
|
Your new `div` should have the `class` attribute set to `divider md`. This div should be the last element in your `.label` element.
|
||||||
|
|
||||||
|
```js
|
||||||
|
const div = document.querySelector('.label')?.lastElementChild;
|
||||||
|
assert(div?.classList?.contains('divider') && div?.classList?.contains('md'));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="label">
|
||||||
|
<header>
|
||||||
|
<h1 class="bold">Nutrition Facts</h1>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
|
||||||
|
</header>
|
||||||
|
<div class="divider lg"></div>
|
||||||
|
<div class="calories-info">
|
||||||
|
<p class="bold sm-text">Amount per serving</p>
|
||||||
|
<h1>Calories <span class="right">230</span></h1>
|
||||||
|
</div>
|
||||||
|
--fcc-editable-region--
|
||||||
|
|
||||||
|
--fcc-editable-region--
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
border: 2px solid black;
|
||||||
|
width: 270px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin: -4px 0;
|
||||||
|
letter-spacing: 0.15px
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
margin: 2px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bold {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg {
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg, .md {
|
||||||
|
background-color: black;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm-text {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info h1 {
|
||||||
|
margin: -5px -2px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info span {
|
||||||
|
font-size: 1.2em;
|
||||||
|
margin-top: -7px;
|
||||||
|
}
|
||||||
|
```
|
||||||
@ -0,0 +1,127 @@
|
|||||||
|
---
|
||||||
|
id: 615f666ac5edea782feb7e75
|
||||||
|
title: Step 38
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-38
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Create an `.md` selector and give it a `height` property of `5px`.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
You should create an `.md` selector.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('.md'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your `.md` selector should have a `height` property set to `5px`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('.md')?.height === '5px');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="label">
|
||||||
|
<header>
|
||||||
|
<h1 class="bold">Nutrition Facts</h1>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
|
||||||
|
</header>
|
||||||
|
<div class="divider lg"></div>
|
||||||
|
<div class="calories-info">
|
||||||
|
<p class="bold sm-text">Amount per serving</p>
|
||||||
|
<h1>Calories <span class="right">230</span></h1>
|
||||||
|
</div>
|
||||||
|
<div class="divider md"></div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
border: 2px solid black;
|
||||||
|
width: 270px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin: -4px 0;
|
||||||
|
letter-spacing: 0.15px
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
margin: 2px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bold {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg {
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg, .md {
|
||||||
|
background-color: black;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
--fcc-editable-region--
|
||||||
|
|
||||||
|
--fcc-editable-region--
|
||||||
|
|
||||||
|
.sm-text {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info h1 {
|
||||||
|
margin: -5px -2px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info span {
|
||||||
|
font-size: 1.2em;
|
||||||
|
margin-top: -7px;
|
||||||
|
}
|
||||||
|
```
|
||||||
@ -0,0 +1,153 @@
|
|||||||
|
---
|
||||||
|
id: 615f671b6d1919792745aa5d
|
||||||
|
title: Step 39
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-39
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Create a new `div` element below your `.md` element. Give it a `class` attribute set to `daily-value sm-text`. Within this new `div`, add a `p` element with the text `% Daily Value *`, and set the `class` attribute to `right bold`.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
You should create a new `div` element after your `.md` element.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.label')?.lastElementChild?.localName === 'div');
|
||||||
|
assert(document.querySelector('.label')?.lastElementChild?.previousElementSibling?.classList?.contains('divider'));
|
||||||
|
assert(document.querySelector('.label')?.lastElementChild?.previousElementSibling?.classList?.contains('md'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your new `div` should have a `class` attribute set to `daily-value sm-text`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('daily-value'));
|
||||||
|
assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('sm-text'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your new `div` element should have a `p` element.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.localName === 'p');
|
||||||
|
```
|
||||||
|
|
||||||
|
Your new `p` element should have the text `% Daily Value *`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.textContent === '% Daily Value *');
|
||||||
|
```
|
||||||
|
|
||||||
|
Your new `p` element should have a `class` attribute set to `right bold`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.classList?.contains('right'));
|
||||||
|
assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.classList?.contains('bold'));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="label">
|
||||||
|
<header>
|
||||||
|
<h1 class="bold">Nutrition Facts</h1>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
|
||||||
|
</header>
|
||||||
|
<div class="divider lg"></div>
|
||||||
|
<div class="calories-info">
|
||||||
|
<p class="bold sm-text">Amount per serving</p>
|
||||||
|
<h1>Calories <span class="right">230</span></h1>
|
||||||
|
</div>
|
||||||
|
<div class="divider md"></div>
|
||||||
|
--fcc-editable-region--
|
||||||
|
|
||||||
|
--fcc-editable-region--
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
border: 2px solid black;
|
||||||
|
width: 270px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin: -4px 0;
|
||||||
|
letter-spacing: 0.15px
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
margin: 2px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bold {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg {
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg, .md {
|
||||||
|
background-color: black;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md {
|
||||||
|
height: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm-text {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info h1 {
|
||||||
|
margin: -5px -2px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info span {
|
||||||
|
font-size: 1.2em;
|
||||||
|
margin-top: -7px;
|
||||||
|
}
|
||||||
|
```
|
||||||
@ -0,0 +1,139 @@
|
|||||||
|
---
|
||||||
|
id: 615f6823d0815b7a991f2a75
|
||||||
|
title: Step 40
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-40
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
The `float` styling is causing the new `p` element to be outside of the label's border. Use your existing `.divider` element as an example to add a new divider after the `p` element.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
You should create a new `div` within your `.daily-value.sm-text` element.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelectorAll('.daily-value.sm-text > div')?.length === 1)
|
||||||
|
```
|
||||||
|
|
||||||
|
Your new `div` should have the `class` attribute set to `divider`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text > div')?.classList?.contains('divider'))
|
||||||
|
```
|
||||||
|
|
||||||
|
Your new `div` should come after your `p` element.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text > div')?.previousElementSibling?.localName === 'p');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="label">
|
||||||
|
<header>
|
||||||
|
<h1 class="bold">Nutrition Facts</h1>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
|
||||||
|
</header>
|
||||||
|
<div class="divider lg"></div>
|
||||||
|
<div class="calories-info">
|
||||||
|
<p class="bold sm-text">Amount per serving</p>
|
||||||
|
<h1>Calories <span class="right">230</span></h1>
|
||||||
|
</div>
|
||||||
|
<div class="divider md"></div>
|
||||||
|
--fcc-editable-region--
|
||||||
|
<div class="daily-value sm-text">
|
||||||
|
<p class="right bold">% Daily Value *</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
--fcc-editable-region--
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
border: 2px solid black;
|
||||||
|
width: 270px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin: -4px 0;
|
||||||
|
letter-spacing: 0.15px
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
margin: 2px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bold {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg {
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg, .md {
|
||||||
|
background-color: black;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md {
|
||||||
|
height: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm-text {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info h1 {
|
||||||
|
margin: -5px -2px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info span {
|
||||||
|
font-size: 1.2em;
|
||||||
|
margin-top: -7px;
|
||||||
|
}
|
||||||
|
```
|
||||||
@ -0,0 +1,127 @@
|
|||||||
|
---
|
||||||
|
id: 615f6a7d4ba8037bc086c2c7
|
||||||
|
title: Step 41
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-41
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Give the `.divider` selector a `clear` property set to `right`. This will clear the `float` property, pushing the divider and any following content down below the `float` text.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Your `.divider` selector should have a `clear` property set to `right`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('.divider')?.clear === 'right');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="label">
|
||||||
|
<header>
|
||||||
|
<h1 class="bold">Nutrition Facts</h1>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
|
||||||
|
</header>
|
||||||
|
<div class="divider lg"></div>
|
||||||
|
<div class="calories-info">
|
||||||
|
<p class="bold sm-text">Amount per serving</p>
|
||||||
|
<h1>Calories <span class="right">230</span></h1>
|
||||||
|
</div>
|
||||||
|
<div class="divider md"></div>
|
||||||
|
<div class="daily-value sm-text">
|
||||||
|
<p class="right bold">% Daily Value *</p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
border: 2px solid black;
|
||||||
|
width: 270px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin: -4px 0;
|
||||||
|
letter-spacing: 0.15px
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
--fcc-editable-region--
|
||||||
|
.divider {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
margin: 2px 0;
|
||||||
|
}
|
||||||
|
--fcc-editable-region--
|
||||||
|
|
||||||
|
.bold {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg {
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg, .md {
|
||||||
|
background-color: black;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md {
|
||||||
|
height: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm-text {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info h1 {
|
||||||
|
margin: -5px -2px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info span {
|
||||||
|
font-size: 1.2em;
|
||||||
|
margin-top: -7px;
|
||||||
|
}
|
||||||
|
```
|
||||||
@ -0,0 +1,165 @@
|
|||||||
|
---
|
||||||
|
id: 615f6b2d164f81809efd9bdc
|
||||||
|
title: Step 42
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-42
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
After your last `.divider` element, create a `p` element and give it the text `Total Fat 8g 10%`. Wrap `Total Fat` in a `span` element with the `class` set to `bold`. Wrap `10%` in another `span` element with the `class` set to `bold right`.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
You should create a new `p` element at the end of your `.daily-value` element.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p');
|
||||||
|
```
|
||||||
|
|
||||||
|
Your new `p` element should have the text `Total Fat 8g 10%`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Total Fat 8g[\s|\n]+10%/));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your `p` element should have two `span` elements.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.length === 2);
|
||||||
|
```
|
||||||
|
|
||||||
|
Your first `span` element should wrap the text `Total Fat`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelector('span')?.innerText === 'Total Fat');
|
||||||
|
```
|
||||||
|
|
||||||
|
Your first `span` element should have the `class` set to `bold`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelector('span')?.className === 'bold');
|
||||||
|
```
|
||||||
|
|
||||||
|
Your second `span` element should wrap the text `10%`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.[1]?.innerText === '10%');
|
||||||
|
```
|
||||||
|
|
||||||
|
Your second `span` element should have the `class` set to `bold right`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.[1]?.className === 'bold right');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="label">
|
||||||
|
<header>
|
||||||
|
<h1 class="bold">Nutrition Facts</h1>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
|
||||||
|
</header>
|
||||||
|
<div class="divider lg"></div>
|
||||||
|
<div class="calories-info">
|
||||||
|
<p class="bold sm-text">Amount per serving</p>
|
||||||
|
<h1>Calories <span class="right">230</span></h1>
|
||||||
|
</div>
|
||||||
|
<div class="divider md"></div>
|
||||||
|
<div class="daily-value sm-text">
|
||||||
|
<p class="right bold">% Daily Value *</p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
--fcc-editable-region--
|
||||||
|
|
||||||
|
--fcc-editable-region--
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
border: 2px solid black;
|
||||||
|
width: 270px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin: -4px 0;
|
||||||
|
letter-spacing: 0.15px
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
margin: 2px 0;
|
||||||
|
clear: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bold {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg {
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg, .md {
|
||||||
|
background-color: black;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md {
|
||||||
|
height: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm-text {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info h1 {
|
||||||
|
margin: -5px -2px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info span {
|
||||||
|
font-size: 1.2em;
|
||||||
|
margin-top: -7px;
|
||||||
|
}
|
||||||
|
```
|
||||||
@ -0,0 +1,156 @@
|
|||||||
|
---
|
||||||
|
id: 615f6cc778f7698258467596
|
||||||
|
title: Step 43
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-43
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Below your element with the `Total Fat` text, create a new `p` element with the text `Saturated Fat 1g 5%`. Wrap the `5%` in a `span` with the `class` attribute set to `bold right`.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
You should create a new `p` element below your element with the `Total Fat` text.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p');
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.innerText.match(/Total Fat 8g[\s|\n]+10%/));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your new `p` element should have the text `Saturated Fat 1g 5%`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText.match(/Saturated Fat 1g[\s|\n]+5%/));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your new `p` element should have a `span` element.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.localName === 'span');
|
||||||
|
```
|
||||||
|
|
||||||
|
Your `span` element should have the `class` attribute set to `bold right`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold'));
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('right'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your `span` element should wrap the `5%` text.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.innerText === "5%");
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="label">
|
||||||
|
<header>
|
||||||
|
<h1 class="bold">Nutrition Facts</h1>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
|
||||||
|
</header>
|
||||||
|
<div class="divider lg"></div>
|
||||||
|
<div class="calories-info">
|
||||||
|
<p class="bold sm-text">Amount per serving</p>
|
||||||
|
<h1>Calories <span class="right">230</span></h1>
|
||||||
|
</div>
|
||||||
|
<div class="divider md"></div>
|
||||||
|
<div class="daily-value sm-text">
|
||||||
|
<p class="right bold">% Daily Value *</p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
|
||||||
|
--fcc-editable-region--
|
||||||
|
|
||||||
|
--fcc-editable-region--
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
border: 2px solid black;
|
||||||
|
width: 270px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin: -4px 0;
|
||||||
|
letter-spacing: 0.15px
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
margin: 2px 0;
|
||||||
|
clear: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bold {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg {
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg, .md {
|
||||||
|
background-color: black;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md {
|
||||||
|
height: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm-text {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info h1 {
|
||||||
|
margin: -5px -2px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info span {
|
||||||
|
font-size: 1.2em;
|
||||||
|
margin-top: -7px;
|
||||||
|
}
|
||||||
|
```
|
||||||
@ -0,0 +1,130 @@
|
|||||||
|
---
|
||||||
|
id: 615f6fddaac1e083502d3e6a
|
||||||
|
title: Step 44
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-44
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
This new `p` element will need to be indented. Give it a `class` set to `indent`.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Your `p` element with the text `Saturated Fat 1g 5%` should have a `class` attribute set to `indent`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('indent'));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="label">
|
||||||
|
<header>
|
||||||
|
<h1 class="bold">Nutrition Facts</h1>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
|
||||||
|
</header>
|
||||||
|
<div class="divider lg"></div>
|
||||||
|
<div class="calories-info">
|
||||||
|
<p class="bold sm-text">Amount per serving</p>
|
||||||
|
<h1>Calories <span class="right">230</span></h1>
|
||||||
|
</div>
|
||||||
|
<div class="divider md"></div>
|
||||||
|
<div class="daily-value sm-text">
|
||||||
|
<p class="right bold">% Daily Value *</p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
|
||||||
|
--fcc-editable-region--
|
||||||
|
<p>Saturated Fat 1g <span class="bold right">5%</span></p>
|
||||||
|
--fcc-editable-region--
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
border: 2px solid black;
|
||||||
|
width: 270px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin: -4px 0;
|
||||||
|
letter-spacing: 0.15px
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
margin: 2px 0;
|
||||||
|
clear: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bold {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg {
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg, .md {
|
||||||
|
background-color: black;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md {
|
||||||
|
height: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm-text {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info h1 {
|
||||||
|
margin: -5px -2px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info span {
|
||||||
|
font-size: 1.2em;
|
||||||
|
margin-top: -7px;
|
||||||
|
}
|
||||||
|
```
|
||||||
@ -0,0 +1,138 @@
|
|||||||
|
---
|
||||||
|
id: 615f70077a4ff98424236c1e
|
||||||
|
title: Step 45
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-45
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Create a new `.indent` selector and give it a `margin-left` property set to `1em`.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
You should have a new `.indent` selector.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('.indent'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your new `.indent` selector should have a `margin-left` property set to `1em`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('.indent')?.marginLeft === '1em');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="label">
|
||||||
|
<header>
|
||||||
|
<h1 class="bold">Nutrition Facts</h1>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
|
||||||
|
</header>
|
||||||
|
<div class="divider lg"></div>
|
||||||
|
<div class="calories-info">
|
||||||
|
<p class="bold sm-text">Amount per serving</p>
|
||||||
|
<h1>Calories <span class="right">230</span></h1>
|
||||||
|
</div>
|
||||||
|
<div class="divider md"></div>
|
||||||
|
<div class="daily-value sm-text">
|
||||||
|
<p class="right bold">% Daily Value *</p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
|
||||||
|
<p class="indent">Saturated Fat 1g <span class="bold right">5%</span></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
border: 2px solid black;
|
||||||
|
width: 270px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin: -4px 0;
|
||||||
|
letter-spacing: 0.15px
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
margin: 2px 0;
|
||||||
|
clear: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bold {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg {
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg, .md {
|
||||||
|
background-color: black;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md {
|
||||||
|
height: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm-text {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info h1 {
|
||||||
|
margin: -5px -2px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info span {
|
||||||
|
font-size: 1.2em;
|
||||||
|
margin-top: -7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
--fcc-editable-region--
|
||||||
|
|
||||||
|
--fcc-editable-region--
|
||||||
|
```
|
||||||
@ -0,0 +1,142 @@
|
|||||||
|
---
|
||||||
|
id: 615f72a872354a850d4f533e
|
||||||
|
title: Step 46
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-46
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Create a `.daily-value p` selector to target all of your `p` elements in the `daily-value` section. Give this new selector a `border-bottom` set to `1px solid #888989`.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
You should have a new `.daily-value p` selector.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('.daily-value p'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your `.daily-value p` selector should have a `border-bottom` property set to `1px solid #888989`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('.daily-value p')?.borderBottom === '1px solid rgb(136, 137, 137)');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="label">
|
||||||
|
<header>
|
||||||
|
<h1 class="bold">Nutrition Facts</h1>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
|
||||||
|
</header>
|
||||||
|
<div class="divider lg"></div>
|
||||||
|
<div class="calories-info">
|
||||||
|
<p class="bold sm-text">Amount per serving</p>
|
||||||
|
<h1>Calories <span class="right">230</span></h1>
|
||||||
|
</div>
|
||||||
|
<div class="divider md"></div>
|
||||||
|
<div class="daily-value sm-text">
|
||||||
|
<p class="right bold">% Daily Value *</p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
|
||||||
|
<p class="indent">Saturated Fat 1g <span class="bold right">5%</span></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
border: 2px solid black;
|
||||||
|
width: 270px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin: -4px 0;
|
||||||
|
letter-spacing: 0.15px
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
margin: 2px 0;
|
||||||
|
clear: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bold {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg {
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg, .md {
|
||||||
|
background-color: black;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md {
|
||||||
|
height: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm-text {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info h1 {
|
||||||
|
margin: -5px -2px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info span {
|
||||||
|
font-size: 1.2em;
|
||||||
|
margin-top: -7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indent {
|
||||||
|
margin-left: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
--fcc-editable-region--
|
||||||
|
|
||||||
|
--fcc-editable-region--
|
||||||
|
```
|
||||||
@ -0,0 +1,149 @@
|
|||||||
|
---
|
||||||
|
id: 615f74a71f1e498619e38ee8
|
||||||
|
title: Step 47
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-47
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
The bottom borders under your `% Daily Value *` and `Saturated Fat 1g 5%` elements do not extend the full width of the label. Add `no-divider` to the `class` for these two elements.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Your `p` element with the text `% Daily Value *` should have `no-divider` added to the `class` attribute. Do not remove the existing classes.
|
||||||
|
|
||||||
|
```js
|
||||||
|
const p = document.querySelector('.daily-value.sm-text')?.firstElementChild;
|
||||||
|
assert(p?.classList?.contains('no-divider'));
|
||||||
|
assert(p?.classList?.contains('bold'));
|
||||||
|
assert(p?.classList?.contains('right'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your `p` element with the text `Saturated Fat 1g 5%` should have `no-divider` added to the `class` attribute. Do not remove the existing classes.
|
||||||
|
|
||||||
|
```js
|
||||||
|
const p = document.querySelector('.daily-value.sm-text')?.lastElementChild;
|
||||||
|
assert(p?.classList?.contains('no-divider'));
|
||||||
|
assert(p?.classList?.contains('indent'));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="label">
|
||||||
|
<header>
|
||||||
|
<h1 class="bold">Nutrition Facts</h1>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
|
||||||
|
</header>
|
||||||
|
<div class="divider lg"></div>
|
||||||
|
<div class="calories-info">
|
||||||
|
<p class="bold sm-text">Amount per serving</p>
|
||||||
|
<h1>Calories <span class="right">230</span></h1>
|
||||||
|
</div>
|
||||||
|
<div class="divider md"></div>
|
||||||
|
--fcc-editable-region--
|
||||||
|
<div class="daily-value sm-text">
|
||||||
|
<p class="right bold">% Daily Value *</p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
|
||||||
|
<p class="indent">Saturated Fat 1g <span class="bold right">5%</span></p>
|
||||||
|
</div>
|
||||||
|
--fcc-editable-region--
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
border: 2px solid black;
|
||||||
|
width: 270px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin: -4px 0;
|
||||||
|
letter-spacing: 0.15px
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
margin: 2px 0;
|
||||||
|
clear: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bold {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg {
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg, .md {
|
||||||
|
background-color: black;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md {
|
||||||
|
height: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm-text {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info h1 {
|
||||||
|
margin: -5px -2px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info span {
|
||||||
|
font-size: 1.2em;
|
||||||
|
margin-top: -7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indent {
|
||||||
|
margin-left: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.daily-value p {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
}
|
||||||
|
```
|
||||||
@ -0,0 +1,161 @@
|
|||||||
|
---
|
||||||
|
id: 615f7ad94380408d971d14f6
|
||||||
|
title: Step 48
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-48
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
The `:not` pseudo-selector can be used to select all elements that do not match the given CSS rule.
|
||||||
|
|
||||||
|
```css
|
||||||
|
div:not(#example) {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
The above selects all `div` elements without an `id` of `example`.
|
||||||
|
|
||||||
|
Modify your `.daily-value p` selector to exclude the `.no-divider` elements.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
You should have a `.daily-value p:not(.no-divider)` selector.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('.daily-value p:not(.no-divider)'));
|
||||||
|
```
|
||||||
|
|
||||||
|
You should not have a `.daily-value p` selector.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(!new __helpers.CSSHelp(document).getStyle('.daily-value p'));
|
||||||
|
```
|
||||||
|
|
||||||
|
You should not change the properties in the `.daily-value p:not(.no-divider)` selector.
|
||||||
|
|
||||||
|
```js
|
||||||
|
const style = new __helpers.CSSHelp(document).getStyle('.daily-value p:not(.no-divider)');
|
||||||
|
assert(style?.borderBottom === '1px solid rgb(136, 137, 137)');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="label">
|
||||||
|
<header>
|
||||||
|
<h1 class="bold">Nutrition Facts</h1>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
|
||||||
|
</header>
|
||||||
|
<div class="divider lg"></div>
|
||||||
|
<div class="calories-info">
|
||||||
|
<p class="bold sm-text">Amount per serving</p>
|
||||||
|
<h1>Calories <span class="right">230</span></h1>
|
||||||
|
</div>
|
||||||
|
<div class="divider md"></div>
|
||||||
|
<div class="daily-value sm-text">
|
||||||
|
<p class="right bold no-divider">% Daily Value *</p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
|
||||||
|
<p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
border: 2px solid black;
|
||||||
|
width: 270px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin: -4px 0;
|
||||||
|
letter-spacing: 0.15px
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
margin: 2px 0;
|
||||||
|
clear: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bold {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg {
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg, .md {
|
||||||
|
background-color: black;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md {
|
||||||
|
height: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm-text {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info h1 {
|
||||||
|
margin: -5px -2px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info span {
|
||||||
|
font-size: 1.2em;
|
||||||
|
margin-top: -7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indent {
|
||||||
|
margin-left: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
--fcc-editable-region--
|
||||||
|
.daily-value p {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
}
|
||||||
|
--fcc-editable-region--
|
||||||
|
```
|
||||||
@ -0,0 +1,146 @@
|
|||||||
|
---
|
||||||
|
id: 615f7bc680f7168ea01ebf99
|
||||||
|
title: Step 49
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-49
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Now you will have to add separate dividers below your `.no-divider` elements.
|
||||||
|
|
||||||
|
Your first `.no-divider` element has a `.divider` after it. Create another `.divider` after your second `.no-divider` element.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
You should create a new `div` at the end of your `.daily-value.sm-text` element.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'div');
|
||||||
|
```
|
||||||
|
|
||||||
|
Your new `div` should have the `class` attribute set to `divider`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('divider'));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="label">
|
||||||
|
<header>
|
||||||
|
<h1 class="bold">Nutrition Facts</h1>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
|
||||||
|
</header>
|
||||||
|
<div class="divider lg"></div>
|
||||||
|
<div class="calories-info">
|
||||||
|
<p class="bold sm-text">Amount per serving</p>
|
||||||
|
<h1>Calories <span class="right">230</span></h1>
|
||||||
|
</div>
|
||||||
|
<div class="divider md"></div>
|
||||||
|
<div class="daily-value sm-text">
|
||||||
|
--fcc-editable-region--
|
||||||
|
<p class="right bold no-divider">% Daily Value *</p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
|
||||||
|
<p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
|
||||||
|
--fcc-editable-region--
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
border: 2px solid black;
|
||||||
|
width: 270px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin: -4px 0;
|
||||||
|
letter-spacing: 0.15px
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
margin: 2px 0;
|
||||||
|
clear: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bold {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg {
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg, .md {
|
||||||
|
background-color: black;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md {
|
||||||
|
height: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm-text {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info h1 {
|
||||||
|
margin: -5px -2px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info span {
|
||||||
|
font-size: 1.2em;
|
||||||
|
margin-top: -7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indent {
|
||||||
|
margin-left: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.daily-value p:not(.no-divider) {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
}
|
||||||
|
```
|
||||||
@ -0,0 +1,165 @@
|
|||||||
|
---
|
||||||
|
id: 615f7c71eab8218f846e4503
|
||||||
|
title: Step 50
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-50
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
After your last `.divider`, create another `p` element with the text `Trans Fat 0g`. Italicize the word `Trans` by wrapping it in an `i` element. Give the new `p` element the `class` attribute set to `indent no-divider`.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
You should create a new `p` element at the end of your `.daily-value.sm-text` element.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p');
|
||||||
|
```
|
||||||
|
|
||||||
|
Your new `p` element should have the text `Trans Fat 0g`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText === 'Trans Fat 0g');
|
||||||
|
```
|
||||||
|
|
||||||
|
Your new `p` element should have the `class` attribute set to `indent no-divider`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
const p = document.querySelector('.daily-value.sm-text')?.lastElementChild;
|
||||||
|
assert(p?.classList?.contains('indent'));
|
||||||
|
assert(p?.classList?.contains('no-divider'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your new `p` element should have an `i` element.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.localName === 'i');
|
||||||
|
```
|
||||||
|
|
||||||
|
Your `i` element should wrap the text `Trans`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.innerText === 'Trans');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="label">
|
||||||
|
<header>
|
||||||
|
<h1 class="bold">Nutrition Facts</h1>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
|
||||||
|
</header>
|
||||||
|
<div class="divider lg"></div>
|
||||||
|
<div class="calories-info">
|
||||||
|
<p class="bold sm-text">Amount per serving</p>
|
||||||
|
<h1>Calories <span class="right">230</span></h1>
|
||||||
|
</div>
|
||||||
|
<div class="divider md"></div>
|
||||||
|
<div class="daily-value sm-text">
|
||||||
|
--fcc-editable-region--
|
||||||
|
<p class="right bold no-divider">% Daily Value *</p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
|
||||||
|
<p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
--fcc-editable-region--
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
border: 2px solid black;
|
||||||
|
width: 270px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin: -4px 0;
|
||||||
|
letter-spacing: 0.15px
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
margin: 2px 0;
|
||||||
|
clear: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bold {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg {
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg, .md {
|
||||||
|
background-color: black;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md {
|
||||||
|
height: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm-text {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info h1 {
|
||||||
|
margin: -5px -2px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info span {
|
||||||
|
font-size: 1.2em;
|
||||||
|
margin-top: -7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indent {
|
||||||
|
margin-left: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.daily-value p:not(.no-divider) {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
}
|
||||||
|
```
|
||||||
@ -0,0 +1,146 @@
|
|||||||
|
---
|
||||||
|
id: 615f7d489a581590d1350288
|
||||||
|
title: Step 51
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-51
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Create another `.divider` after your last `p` element.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
You should create a new `div` element at the end of your `.daily-value.sm-text` element.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'div');
|
||||||
|
```
|
||||||
|
|
||||||
|
Your new `div` element should have the `class` attribute set to `divider`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('divider'));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="label">
|
||||||
|
<header>
|
||||||
|
<h1 class="bold">Nutrition Facts</h1>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
|
||||||
|
</header>
|
||||||
|
<div class="divider lg"></div>
|
||||||
|
<div class="calories-info">
|
||||||
|
<p class="bold sm-text">Amount per serving</p>
|
||||||
|
<h1>Calories <span class="right">230</span></h1>
|
||||||
|
</div>
|
||||||
|
<div class="divider md"></div>
|
||||||
|
<div class="daily-value sm-text">
|
||||||
|
--fcc-editable-region--
|
||||||
|
<p class="right bold no-divider">% Daily Value *</p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
|
||||||
|
<p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p class="indent no-divider"><i>Trans</i> Fat 0g</p>
|
||||||
|
--fcc-editable-region--
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
border: 2px solid black;
|
||||||
|
width: 270px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin: -4px 0;
|
||||||
|
letter-spacing: 0.15px
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
margin: 2px 0;
|
||||||
|
clear: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bold {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg {
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg, .md {
|
||||||
|
background-color: black;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md {
|
||||||
|
height: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm-text {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info h1 {
|
||||||
|
margin: -5px -2px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info span {
|
||||||
|
font-size: 1.2em;
|
||||||
|
margin-top: -7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indent {
|
||||||
|
margin-left: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.daily-value p:not(.no-divider) {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
}
|
||||||
|
```
|
||||||
@ -0,0 +1,178 @@
|
|||||||
|
---
|
||||||
|
id: 615f7de4487b64919bb4aa5e
|
||||||
|
title: Step 52
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-52
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
After your last `.divider`, create a new `p` element with the text `Cholesterol 0mg 0%`. Wrap the text `Cholesterol` in a `span` element, and give that `span` element the `class` attribute set to `bold`. Wrap the text `0%` in another `span` element, with the `class` set to `bold right`.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
You should create a new `p` element at the end of your `.daily-value.sm-text` element.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p');
|
||||||
|
```
|
||||||
|
|
||||||
|
Your new `p` element should have the text `Cholesterol 0mg 0%`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Cholesterol 0mg[\s|\n]+0%/));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your new `p` element should have two `span` elements.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.length === 2);
|
||||||
|
```
|
||||||
|
|
||||||
|
Your first `span` element should have the `class` attribute set to `bold.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.classList?.contains('bold'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your first `span` element should wrap the text `Cholesterol`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.innerText === 'Cholesterol');
|
||||||
|
```
|
||||||
|
|
||||||
|
Your second `span` element should have the `class` attribute set to `bold right`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold'));
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('right'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your second `span` element should wrap the text `0%`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.innerText === '0%');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="label">
|
||||||
|
<header>
|
||||||
|
<h1 class="bold">Nutrition Facts</h1>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
|
||||||
|
</header>
|
||||||
|
<div class="divider lg"></div>
|
||||||
|
<div class="calories-info">
|
||||||
|
<p class="bold sm-text">Amount per serving</p>
|
||||||
|
<h1>Calories <span class="right">230</span></h1>
|
||||||
|
</div>
|
||||||
|
<div class="divider md"></div>
|
||||||
|
<div class="daily-value sm-text">
|
||||||
|
--fcc-editable-region--
|
||||||
|
<p class="right bold no-divider">% Daily Value *</p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
|
||||||
|
<p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p class="indent no-divider"><i>Trans</i> Fat 0g</p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
--fcc-editable-region--
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
border: 2px solid black;
|
||||||
|
width: 270px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin: -4px 0;
|
||||||
|
letter-spacing: 0.15px
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
margin: 2px 0;
|
||||||
|
clear: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bold {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg {
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg, .md {
|
||||||
|
background-color: black;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md {
|
||||||
|
height: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm-text {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info h1 {
|
||||||
|
margin: -5px -2px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info span {
|
||||||
|
font-size: 1.2em;
|
||||||
|
margin-top: -7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indent {
|
||||||
|
margin-left: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.daily-value p:not(.no-divider) {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
}
|
||||||
|
```
|
||||||
@ -0,0 +1,179 @@
|
|||||||
|
---
|
||||||
|
id: 615f7e7281626a92bbd62da8
|
||||||
|
title: Step 53
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-53
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Below your last `p` element, create another `p` element with the text `Sodium 160mg 7%`. Wrap the text `sodium` in a `span` element with a `class` attribute set to `bold`. Wrap the `7%` text in another `span` element with the `class` set to `bold right`.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
You should create a new `p` element at the end of your `.daily-value.sm-text` element.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p');
|
||||||
|
```
|
||||||
|
|
||||||
|
Your new `p` element should have the text `Sodium 160mg 7%`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Sodium 160mg[\s|\n]+7%/));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your new `p` element should have two `span` elements.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.length === 2);
|
||||||
|
```
|
||||||
|
|
||||||
|
Your first `span` element should have the `class` attribute set to `bold`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.classList?.contains('bold'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your first `span` element should wrap the text `Sodium`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.innerText === 'Sodium');
|
||||||
|
```
|
||||||
|
|
||||||
|
Your second `span` element should have the `class` attribute set to `bold right`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold'));
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('right'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your second `span` element should wrap the text `7%`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.innerText === '7%');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="label">
|
||||||
|
<header>
|
||||||
|
<h1 class="bold">Nutrition Facts</h1>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
|
||||||
|
</header>
|
||||||
|
<div class="divider lg"></div>
|
||||||
|
<div class="calories-info">
|
||||||
|
<p class="bold sm-text">Amount per serving</p>
|
||||||
|
<h1>Calories <span class="right">230</span></h1>
|
||||||
|
</div>
|
||||||
|
<div class="divider md"></div>
|
||||||
|
<div class="daily-value sm-text">
|
||||||
|
--fcc-editable-region--
|
||||||
|
<p class="right bold no-divider">% Daily Value *</p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
|
||||||
|
<p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p class="indent no-divider"><i>Trans</i> Fat 0g</p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p><span class="bold">Cholesterol</span> 0mg <span class="right bold">0%</span></p>
|
||||||
|
--fcc-editable-region--
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
border: 2px solid black;
|
||||||
|
width: 270px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin: -4px 0;
|
||||||
|
letter-spacing: 0.15px
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
margin: 2px 0;
|
||||||
|
clear: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bold {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg {
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg, .md {
|
||||||
|
background-color: black;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md {
|
||||||
|
height: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm-text {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info h1 {
|
||||||
|
margin: -5px -2px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info span {
|
||||||
|
font-size: 1.2em;
|
||||||
|
margin-top: -7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indent {
|
||||||
|
margin-left: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.daily-value p:not(.no-divider) {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
}
|
||||||
|
```
|
||||||
@ -0,0 +1,180 @@
|
|||||||
|
---
|
||||||
|
id: 615f7ecb09de9a938ef94756
|
||||||
|
title: Step 54
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-54
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Add another `p` element with the text `Total Carbohydrate 37g 13%`. Like before, use `span` elements to make the text `Total Carbohydrate` bold, and the text `13%` bold and right aligned.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
You should create a new `p` element at the end of your `.daily-value.sm-text` element.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p');
|
||||||
|
```
|
||||||
|
|
||||||
|
Your new `p` element should have the text `Total Carbohydrate 37g 13%`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Total Carbohydrate 37g[\s|\n]+13%/));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your new `p` element should have two `span` elements.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.length === 2);
|
||||||
|
```
|
||||||
|
|
||||||
|
Your first `span` element should have the `class` attribute set to `bold`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.classList?.contains('bold'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your first `span` element should wrap the text `Total Carbohydrate`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.innerText === 'Total Carbohydrate');
|
||||||
|
```
|
||||||
|
|
||||||
|
Your second `span` element should have the `class` attribute set to `bold right`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold'));
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('right'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your second `span` element should wrap the text `13%`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.innerText === '13%');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="label">
|
||||||
|
<header>
|
||||||
|
<h1 class="bold">Nutrition Facts</h1>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
|
||||||
|
</header>
|
||||||
|
<div class="divider lg"></div>
|
||||||
|
<div class="calories-info">
|
||||||
|
<p class="bold sm-text">Amount per serving</p>
|
||||||
|
<h1>Calories <span class="right">230</span></h1>
|
||||||
|
</div>
|
||||||
|
<div class="divider md"></div>
|
||||||
|
<div class="daily-value sm-text">
|
||||||
|
--fcc-editable-region--
|
||||||
|
<p class="right bold no-divider">% Daily Value *</p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
|
||||||
|
<p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p class="indent no-divider"><i>Trans</i> Fat 0g</p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p><span class="bold">Cholesterol</span> 0mg <span class="right bold">0%</span></p>
|
||||||
|
<p><span class="bold">Sodium</span> 160mg <span class="right bold">7%</span></p>
|
||||||
|
--fcc-editable-region--
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
border: 2px solid black;
|
||||||
|
width: 270px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin: -4px 0;
|
||||||
|
letter-spacing: 0.15px
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
margin: 2px 0;
|
||||||
|
clear: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bold {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg {
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg, .md {
|
||||||
|
background-color: black;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md {
|
||||||
|
height: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm-text {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info h1 {
|
||||||
|
margin: -5px -2px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info span {
|
||||||
|
font-size: 1.2em;
|
||||||
|
margin-top: -7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indent {
|
||||||
|
margin-left: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.daily-value p:not(.no-divider) {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
}
|
||||||
|
```
|
||||||
@ -0,0 +1,164 @@
|
|||||||
|
---
|
||||||
|
id: 615f7fa959ab75948f96a0d6
|
||||||
|
title: Step 55
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-55
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Below your last `p` element, add another `p` element with the text `Dietary Fiber 4g`. Give the `p` element the `class` necessary to indent it and remove the dividing border. Then create a divider below that `p` element.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
You should create a new `p` and `div` element at the end of your `.daily-value.sm-text` element.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.localName === 'p');
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'div');
|
||||||
|
```
|
||||||
|
|
||||||
|
Your new `p` element should have the text `Dietary Fiber 4g`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.innerText.match(/Dietary Fiber[\s|\n]+4g/));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your new `p` element should have the `class` attribute set to `indent no-divider`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('indent'));
|
||||||
|
assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('no-divider'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your new `div` should have the `class` attribute set to `divider`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('divider'));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="label">
|
||||||
|
<header>
|
||||||
|
<h1 class="bold">Nutrition Facts</h1>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
|
||||||
|
</header>
|
||||||
|
<div class="divider lg"></div>
|
||||||
|
<div class="calories-info">
|
||||||
|
<p class="bold sm-text">Amount per serving</p>
|
||||||
|
<h1>Calories <span class="right">230</span></h1>
|
||||||
|
</div>
|
||||||
|
<div class="divider md"></div>
|
||||||
|
<div class="daily-value sm-text">
|
||||||
|
--fcc-editable-region--
|
||||||
|
<p class="right bold no-divider">% Daily Value *</p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
|
||||||
|
<p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p class="indent no-divider"><i>Trans</i> Fat 0g</p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p><span class="bold">Cholesterol</span> 0mg <span class="right bold">0%</span></p>
|
||||||
|
<p><span class="bold">Sodium</span> 160mg <span class="right bold">7%</span></p>
|
||||||
|
<p><span class="bold">Total Carbohydrate</span> 37g <span class="right bold">13%</span></p>
|
||||||
|
--fcc-editable-region--
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
border: 2px solid black;
|
||||||
|
width: 270px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin: -4px 0;
|
||||||
|
letter-spacing: 0.15px
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
margin: 2px 0;
|
||||||
|
clear: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bold {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg {
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg, .md {
|
||||||
|
background-color: black;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md {
|
||||||
|
height: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm-text {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info h1 {
|
||||||
|
margin: -5px -2px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info span {
|
||||||
|
font-size: 1.2em;
|
||||||
|
margin-top: -7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indent {
|
||||||
|
margin-left: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.daily-value p:not(.no-divider) {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
}
|
||||||
|
```
|
||||||
@ -0,0 +1,166 @@
|
|||||||
|
---
|
||||||
|
id: 615f808d85793195b0f53be9
|
||||||
|
title: Step 56
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-56
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Create another `p` element after your last `.divider`, and give it the text `Total Sugars 12g`. Assign that `p` element the `class` values necessary to indent it and remove the bottom border. Then create another `.divider` below your new `p` element.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
You should create a new `p` and `div` element at the end of your `.daily-value.sm-text` element.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.localName === 'p');
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'div');
|
||||||
|
```
|
||||||
|
|
||||||
|
Your new `p` element should have the text `Total Sugars 12g`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.innerText.match(/Total Sugars[\s|\n]+12g/));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your new `p` element should have the `class` attribute set to `indent no-divider`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('indent'));
|
||||||
|
assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('no-divider'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your new `div` should have the `class` attribute set to `divider`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('divider'));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="label">
|
||||||
|
<header>
|
||||||
|
<h1 class="bold">Nutrition Facts</h1>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
|
||||||
|
</header>
|
||||||
|
<div class="divider lg"></div>
|
||||||
|
<div class="calories-info">
|
||||||
|
<p class="bold sm-text">Amount per serving</p>
|
||||||
|
<h1>Calories <span class="right">230</span></h1>
|
||||||
|
</div>
|
||||||
|
<div class="divider md"></div>
|
||||||
|
<div class="daily-value sm-text">
|
||||||
|
--fcc-editable-region--
|
||||||
|
<p class="right bold no-divider">% Daily Value *</p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
|
||||||
|
<p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p class="indent no-divider"><i>Trans</i> Fat 0g</p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p><span class="bold">Cholesterol</span> 0mg <span class="right bold">0%</span></p>
|
||||||
|
<p><span class="bold">Sodium</span> 160mg <span class="right bold">7%</span></p>
|
||||||
|
<p><span class="bold">Total Carbohydrate</span> 37g <span class="right bold">13%</span></p>
|
||||||
|
<p class="indent no-divider">Dietary Fiber 4g</p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
--fcc-editable-region--
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
border: 2px solid black;
|
||||||
|
width: 270px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin: -4px 0;
|
||||||
|
letter-spacing: 0.15px
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
margin: 2px 0;
|
||||||
|
clear: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bold {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg {
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg, .md {
|
||||||
|
background-color: black;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md {
|
||||||
|
height: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm-text {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info h1 {
|
||||||
|
margin: -5px -2px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info span {
|
||||||
|
font-size: 1.2em;
|
||||||
|
margin-top: -7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indent {
|
||||||
|
margin-left: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.daily-value p:not(.no-divider) {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
}
|
||||||
|
```
|
||||||
@ -0,0 +1,150 @@
|
|||||||
|
---
|
||||||
|
id: 615f829d07b18f96f6f6684b
|
||||||
|
title: Step 57
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-57
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
The advantage to creating these dividers is that you can apply specific classes to style them individually. Add `dbl-indent` to the `class` for your last `.divider`.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Your last `.divider` element should have `dbl-indent` added to the `class`. Do not remove the existing value.
|
||||||
|
|
||||||
|
```js
|
||||||
|
const last = document.querySelector('.daily-value.sm-text')?.lastElementChild;
|
||||||
|
assert(last?.classList?.contains('dbl-indent'));
|
||||||
|
assert(last?.classList?.contains('divider'));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="label">
|
||||||
|
<header>
|
||||||
|
<h1 class="bold">Nutrition Facts</h1>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
|
||||||
|
</header>
|
||||||
|
<div class="divider lg"></div>
|
||||||
|
<div class="calories-info">
|
||||||
|
<p class="bold sm-text">Amount per serving</p>
|
||||||
|
<h1>Calories <span class="right">230</span></h1>
|
||||||
|
</div>
|
||||||
|
<div class="divider md"></div>
|
||||||
|
<div class="daily-value sm-text">
|
||||||
|
--fcc-editable-region--
|
||||||
|
<p class="right bold no-divider">% Daily Value *</p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
|
||||||
|
<p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p class="indent no-divider"><i>Trans</i> Fat 0g</p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p><span class="bold">Cholesterol</span> 0mg <span class="right bold">0%</span></p>
|
||||||
|
<p><span class="bold">Sodium</span> 160mg <span class="right bold">7%</span></p>
|
||||||
|
<p><span class="bold">Total Carbohydrate</span> 37g <span class="right bold">13%</span></p>
|
||||||
|
<p class="indent no-divider">Dietary Fiber 4g</p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p class="indent no-divider">Total Sugars 12g</p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
--fcc-editable-region--
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
border: 2px solid black;
|
||||||
|
width: 270px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin: -4px 0;
|
||||||
|
letter-spacing: 0.15px
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
margin: 2px 0;
|
||||||
|
clear: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bold {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg {
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg, .md {
|
||||||
|
background-color: black;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md {
|
||||||
|
height: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm-text {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info h1 {
|
||||||
|
margin: -5px -2px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info span {
|
||||||
|
font-size: 1.2em;
|
||||||
|
margin-top: -7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indent {
|
||||||
|
margin-left: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.daily-value p:not(.no-divider) {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
}
|
||||||
|
```
|
||||||
@ -0,0 +1,156 @@
|
|||||||
|
---
|
||||||
|
id: 615f83ef928ec9982b785b6a
|
||||||
|
title: Step 58
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-58
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Create a `.dbl-indent` selector and give it a left margin of `2em`.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
You should have a new `.dbl-indent` selector.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('.dbl-indent'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your `.dbl-indent` selector should have a `margin-left` property set to `2em`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('.dbl-indent')?.marginLeft === '2em');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="label">
|
||||||
|
<header>
|
||||||
|
<h1 class="bold">Nutrition Facts</h1>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
|
||||||
|
</header>
|
||||||
|
<div class="divider lg"></div>
|
||||||
|
<div class="calories-info">
|
||||||
|
<p class="bold sm-text">Amount per serving</p>
|
||||||
|
<h1>Calories <span class="right">230</span></h1>
|
||||||
|
</div>
|
||||||
|
<div class="divider md"></div>
|
||||||
|
<div class="daily-value sm-text">
|
||||||
|
<p class="right bold no-divider">% Daily Value *</p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
|
||||||
|
<p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p class="indent no-divider"><i>Trans</i> Fat 0g</p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p><span class="bold">Cholesterol</span> 0mg <span class="right bold">0%</span></p>
|
||||||
|
<p><span class="bold">Sodium</span> 160mg <span class="right bold">7%</span></p>
|
||||||
|
<p><span class="bold">Total Carbohydrate</span> 37g <span class="right bold">13%</span></p>
|
||||||
|
<p class="indent no-divider">Dietary Fiber 4g</p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p class="indent no-divider">Total Sugars 12g</p>
|
||||||
|
<div class="divider dbl-indent"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
border: 2px solid black;
|
||||||
|
width: 270px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin: -4px 0;
|
||||||
|
letter-spacing: 0.15px
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
margin: 2px 0;
|
||||||
|
clear: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bold {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg {
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg, .md {
|
||||||
|
background-color: black;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md {
|
||||||
|
height: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm-text {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info h1 {
|
||||||
|
margin: -5px -2px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info span {
|
||||||
|
font-size: 1.2em;
|
||||||
|
margin-top: -7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indent {
|
||||||
|
margin-left: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
--fcc-editable-region--
|
||||||
|
|
||||||
|
--fcc-editable-region--
|
||||||
|
|
||||||
|
.daily-value p:not(.no-divider) {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
}
|
||||||
|
```
|
||||||
@ -0,0 +1,193 @@
|
|||||||
|
---
|
||||||
|
id: 615f84f246e8ba98e3cd97be
|
||||||
|
title: Step 59
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-59
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Below your `.dbl-indent` element, add a new `p` element with the text `Includes 10g Added Sugars 20%`. Your new `p` element should also be double indented, and have no bottom border. Use a `span` to make the `20%` bold and right aligned.
|
||||||
|
|
||||||
|
Then create another divider after that `p` element.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
You should create a new `p` and `div` element at the end of your `.daily-value.sm-text` element.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.localName === 'p');
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'div');
|
||||||
|
```
|
||||||
|
|
||||||
|
Your new `p` element should have the text `Includes 10g Added Sugars 20%`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.innerText.match(/Includes 10g Added Sugars[\s|\n]+20%/));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your new `p` element should have the `class` attribute set to `dbl-indent no-divider`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('dbl-indent'));
|
||||||
|
assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('no-divider'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your new `p` element should have a `span` element.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.firstElementChild?.localName === 'span');
|
||||||
|
```
|
||||||
|
|
||||||
|
Your `span` element should have the `class` attribute set to `bold right`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.firstElementChild?.classList?.contains('bold'));
|
||||||
|
assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.firstElementChild?.classList?.contains('right'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your `span` element should wrap the text `20%`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text p:last-of-type span')?.innerText === '20%');
|
||||||
|
```
|
||||||
|
|
||||||
|
Your new `div` should have the `class` attribute set to `divider`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('divider'));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="label">
|
||||||
|
<header>
|
||||||
|
<h1 class="bold">Nutrition Facts</h1>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
|
||||||
|
</header>
|
||||||
|
<div class="divider lg"></div>
|
||||||
|
<div class="calories-info">
|
||||||
|
<p class="bold sm-text">Amount per serving</p>
|
||||||
|
<h1>Calories <span class="right">230</span></h1>
|
||||||
|
</div>
|
||||||
|
<div class="divider md"></div>
|
||||||
|
<div class="daily-value sm-text">
|
||||||
|
--fcc-editable-region--
|
||||||
|
<p class="right bold no-divider">% Daily Value *</p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
|
||||||
|
<p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p class="indent no-divider"><i>Trans</i> Fat 0g</p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p><span class="bold">Cholesterol</span> 0mg <span class="right bold">0%</span></p>
|
||||||
|
<p><span class="bold">Sodium</span> 160mg <span class="right bold">7%</span></p>
|
||||||
|
<p><span class="bold">Total Carbohydrate</span> 37g <span class="right bold">13%</span></p>
|
||||||
|
<p class="indent no-divider">Dietary Fiber 4g</p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p class="indent no-divider">Total Sugars 12g</p>
|
||||||
|
<div class="divider dbl-indent"></div>
|
||||||
|
--fcc-editable-region--
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
border: 2px solid black;
|
||||||
|
width: 270px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin: -4px 0;
|
||||||
|
letter-spacing: 0.15px
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
margin: 2px 0;
|
||||||
|
clear: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bold {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg {
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg, .md {
|
||||||
|
background-color: black;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md {
|
||||||
|
height: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm-text {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info h1 {
|
||||||
|
margin: -5px -2px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info span {
|
||||||
|
font-size: 1.2em;
|
||||||
|
margin-top: -7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indent {
|
||||||
|
margin-left: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dbl-indent {
|
||||||
|
margin-left: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.daily-value p:not(.no-divider) {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
}
|
||||||
|
```
|
||||||
@ -0,0 +1,176 @@
|
|||||||
|
---
|
||||||
|
id: 615f887466db4ba14b5342cc
|
||||||
|
title: Step 60
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-60
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
After your last divider, create another `p` element with the text `Protein 3g`. Use the necessary classes to remove the bottom border, and a `span` to make the `Protein` bold.
|
||||||
|
|
||||||
|
Following this element, create a large divider.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
You should create a new `p` and `div` element at the end of your `.daily-value.sm-text` element.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.localName === 'p');
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'div');
|
||||||
|
```
|
||||||
|
|
||||||
|
Your new `p` element should have the text `Protein 3g`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.innerText.match(/Protein[\s|\n]+3g/));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your new `p` element should have the `class` attribute set to `no-divider`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('no-divider'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your new `div` should have the `class` attribute set to `divider lg`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('divider'));
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('lg'));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="label">
|
||||||
|
<header>
|
||||||
|
<h1 class="bold">Nutrition Facts</h1>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
|
||||||
|
</header>
|
||||||
|
<div class="divider lg"></div>
|
||||||
|
<div class="calories-info">
|
||||||
|
<p class="bold sm-text">Amount per serving</p>
|
||||||
|
<h1>Calories <span class="right">230</span></h1>
|
||||||
|
</div>
|
||||||
|
<div class="divider md"></div>
|
||||||
|
<div class="daily-value sm-text">
|
||||||
|
--fcc-editable-region--
|
||||||
|
<p class="right bold no-divider">% Daily Value *</p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
|
||||||
|
<p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p class="indent no-divider"><i>Trans</i> Fat 0g</p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p><span class="bold">Cholesterol</span> 0mg <span class="right bold">0%</span></p>
|
||||||
|
<p><span class="bold">Sodium</span> 160mg <span class="right bold">7%</span></p>
|
||||||
|
<p><span class="bold">Total Carbohydrate</span> 37g <span class="right bold">13%</span></p>
|
||||||
|
<p class="indent no-divider">Dietary Fiber 4g</p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p class="indent no-divider">Total Sugars 12g</p>
|
||||||
|
<div class="divider dbl-indent"></div>
|
||||||
|
<p class="dbl-indent no-divider">Includes 10g Added Sugars <span class="right bold">20%</span>
|
||||||
|
<div class="divider"></div>
|
||||||
|
--fcc-editable-region--
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
border: 2px solid black;
|
||||||
|
width: 270px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin: -4px 0;
|
||||||
|
letter-spacing: 0.15px
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
margin: 2px 0;
|
||||||
|
clear: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bold {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg {
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg, .md {
|
||||||
|
background-color: black;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md {
|
||||||
|
height: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm-text {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info h1 {
|
||||||
|
margin: -5px -2px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info span {
|
||||||
|
font-size: 1.2em;
|
||||||
|
margin-top: -7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indent {
|
||||||
|
margin-left: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dbl-indent {
|
||||||
|
margin-left: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.daily-value p:not(.no-divider) {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
}
|
||||||
|
```
|
||||||
@ -0,0 +1,175 @@
|
|||||||
|
---
|
||||||
|
id: 615f89e055040ba294719d2f
|
||||||
|
title: Step 61
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-61
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Create another `p` element below your large divider. Give the `p` element the text `Vitamin D 2mcg 10%`. Use a `span` to make the `10%` align to the right, but do not make it bold.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
You should create a new `p` element at the end of your `.daily-value.sm-text` element.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p');
|
||||||
|
```
|
||||||
|
|
||||||
|
Your new `p` element should have the text `Vitamin D 2mcg 10%`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Vitamin D 2mcg[\s|\n]+10%/));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your new `p` element should have a `span` element.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.length === 1);
|
||||||
|
```
|
||||||
|
|
||||||
|
Your `span` element should have the `class` set to `right`. Remember you should not make it bold.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelector('span')?.classList?.contains('right'));
|
||||||
|
assert(!document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelector('span')?.classList?.contains('bold'));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="label">
|
||||||
|
<header>
|
||||||
|
<h1 class="bold">Nutrition Facts</h1>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
|
||||||
|
</header>
|
||||||
|
<div class="divider lg"></div>
|
||||||
|
<div class="calories-info">
|
||||||
|
<p class="bold sm-text">Amount per serving</p>
|
||||||
|
<h1>Calories <span class="right">230</span></h1>
|
||||||
|
</div>
|
||||||
|
<div class="divider md"></div>
|
||||||
|
<div class="daily-value sm-text">
|
||||||
|
--fcc-editable-region--
|
||||||
|
<p class="right bold no-divider">% Daily Value *</p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
|
||||||
|
<p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p class="indent no-divider"><i>Trans</i> Fat 0g</p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p><span class="bold">Cholesterol</span> 0mg <span class="right bold">0%</span></p>
|
||||||
|
<p><span class="bold">Sodium</span> 160mg <span class="right bold">7%</span></p>
|
||||||
|
<p><span class="bold">Total Carbohydrate</span> 37g <span class="right bold">13%</span></p>
|
||||||
|
<p class="indent no-divider">Dietary Fiber 4g</p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p class="indent no-divider">Total Sugars 12g</p>
|
||||||
|
<div class="divider dbl-indent"></div>
|
||||||
|
<p class="dbl-indent no-divider">Includes 10g Added Sugars <span class="right bold">20%</span>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p class="no-divider"><span class="bold">Protein</span> 3g</p>
|
||||||
|
<div class="divider lg"></div>
|
||||||
|
--fcc-editable-region--
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
border: 2px solid black;
|
||||||
|
width: 270px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin: -4px 0;
|
||||||
|
letter-spacing: 0.15px
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
margin: 2px 0;
|
||||||
|
clear: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bold {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg {
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg, .md {
|
||||||
|
background-color: black;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md {
|
||||||
|
height: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm-text {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info h1 {
|
||||||
|
margin: -5px -2px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info span {
|
||||||
|
font-size: 1.2em;
|
||||||
|
margin-top: -7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indent {
|
||||||
|
margin-left: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dbl-indent {
|
||||||
|
margin-left: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.daily-value p:not(.no-divider) {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
}
|
||||||
|
```
|
||||||
@ -0,0 +1,202 @@
|
|||||||
|
---
|
||||||
|
id: 615f8bfe0f30a1a3c340356b
|
||||||
|
title: Step 62
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-62
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Create another `p` element, give it the text `Calcium 260mg 20%`. Align `20%` to the right. Below that, create a `p` element with the text `Iron 8mg 45%`, aligning the `45%` to the right.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
You should create two new `p` elements at the end of your `.daily-value.sm-text` element.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p');
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.localName === 'p');
|
||||||
|
```
|
||||||
|
|
||||||
|
Your first new `p` element should have the text `Calcium 260mg 20%`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.innerText?.match(/Calcium 260mg[\s|\n]+20%/));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your first new `p` element should have a `span` element.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.localName === 'span');
|
||||||
|
```
|
||||||
|
|
||||||
|
Your first `span` element should have the `class` attribute set to `right`. Remember, do not make it bold.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.classList?.contains('right'));
|
||||||
|
assert(!document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.classList?.contains('bold'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your first `span` element should wrap the text `20%`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.innerText === '20%');
|
||||||
|
```
|
||||||
|
|
||||||
|
Your second new `p` element should have the text `Iron 8mg 45%`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Iron 8mg[\s|\n]+45%/));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your second new `p` element should have a `span` element.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.localName === 'span');
|
||||||
|
```
|
||||||
|
|
||||||
|
Your second `span` element should have the `class` attribute set to `right`. Remember, do not make it bold.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.classList?.contains('right'));
|
||||||
|
assert(!document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.classList?.contains('bold'));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="label">
|
||||||
|
<header>
|
||||||
|
<h1 class="bold">Nutrition Facts</h1>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
|
||||||
|
</header>
|
||||||
|
<div class="divider lg"></div>
|
||||||
|
<div class="calories-info">
|
||||||
|
<p class="bold sm-text">Amount per serving</p>
|
||||||
|
<h1>Calories <span class="right">230</span></h1>
|
||||||
|
</div>
|
||||||
|
<div class="divider md"></div>
|
||||||
|
<div class="daily-value sm-text">
|
||||||
|
--fcc-editable-region--
|
||||||
|
<p class="right bold no-divider">% Daily Value *</p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
|
||||||
|
<p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p class="indent no-divider"><i>Trans</i> Fat 0g</p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p><span class="bold">Cholesterol</span> 0mg <span class="right bold">0%</span></p>
|
||||||
|
<p><span class="bold">Sodium</span> 160mg <span class="right bold">7%</span></p>
|
||||||
|
<p><span class="bold">Total Carbohydrate</span> 37g <span class="right bold">13%</span></p>
|
||||||
|
<p class="indent no-divider">Dietary Fiber 4g</p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p class="indent no-divider">Total Sugars 12g</p>
|
||||||
|
<div class="divider dbl-indent"></div>
|
||||||
|
<p class="dbl-indent no-divider">Includes 10g Added Sugars <span class="right bold">20%</span>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p class="no-divider"><span class="bold">Protein</span> 3g</p>
|
||||||
|
<div class="divider lg"></div>
|
||||||
|
<p>Vitamin D 2mcg <span class="right">10%</span></p>
|
||||||
|
--fcc-editable-region--
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
border: 2px solid black;
|
||||||
|
width: 270px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin: -4px 0;
|
||||||
|
letter-spacing: 0.15px
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
margin: 2px 0;
|
||||||
|
clear: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bold {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg {
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg, .md {
|
||||||
|
background-color: black;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md {
|
||||||
|
height: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm-text {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info h1 {
|
||||||
|
margin: -5px -2px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info span {
|
||||||
|
font-size: 1.2em;
|
||||||
|
margin-top: -7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indent {
|
||||||
|
margin-left: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dbl-indent {
|
||||||
|
margin-left: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.daily-value p:not(.no-divider) {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
}
|
||||||
|
```
|
||||||
@ -0,0 +1,184 @@
|
|||||||
|
---
|
||||||
|
id: 615f8f1223601fa546e93f31
|
||||||
|
title: Step 63
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-63
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Create the final `p` element for your `.daily-value` section. Give it the text `Potassium 235mg 6%`. Align the `6%` text to the right, and remove the bottom border of the `p` element.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
You should create a new `p` element at the end of your `.daily-value.sm-text` element.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p');
|
||||||
|
```
|
||||||
|
|
||||||
|
Your new `p` element should have the `class` attribute set to `no-divider`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('no-divider'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your new `p` element should have the text `Potassium 235mg 6%`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Potassium 235mg[\s|\n]+6%/));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your new `p` element should have a `span` element.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.length === 1);
|
||||||
|
```
|
||||||
|
|
||||||
|
Your `span` element should have the `class` set to `right`. Remember you should not make it bold.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelector('span')?.classList?.contains('right'));
|
||||||
|
assert(!document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelector('span')?.classList?.contains('bold'));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="label">
|
||||||
|
<header>
|
||||||
|
<h1 class="bold">Nutrition Facts</h1>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
|
||||||
|
</header>
|
||||||
|
<div class="divider lg"></div>
|
||||||
|
<div class="calories-info">
|
||||||
|
<p class="bold sm-text">Amount per serving</p>
|
||||||
|
<h1>Calories <span class="right">230</span></h1>
|
||||||
|
</div>
|
||||||
|
<div class="divider md"></div>
|
||||||
|
<div class="daily-value sm-text">
|
||||||
|
--fcc-editable-region--
|
||||||
|
<p class="right bold no-divider">% Daily Value *</p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
|
||||||
|
<p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p class="indent no-divider"><i>Trans</i> Fat 0g</p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p><span class="bold">Cholesterol</span> 0mg <span class="right bold">0%</span></p>
|
||||||
|
<p><span class="bold">Sodium</span> 160mg <span class="right bold">7%</span></p>
|
||||||
|
<p><span class="bold">Total Carbohydrate</span> 37g <span class="right bold">13%</span></p>
|
||||||
|
<p class="indent no-divider">Dietary Fiber 4g</p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p class="indent no-divider">Total Sugars 12g</p>
|
||||||
|
<div class="divider dbl-indent"></div>
|
||||||
|
<p class="dbl-indent no-divider">Includes 10g Added Sugars <span class="right bold">20%</span>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p class="no-divider"><span class="bold">Protein</span> 3g</p>
|
||||||
|
<div class="divider lg"></div>
|
||||||
|
<p>Vitamin D 2mcg <span class="right">10%</span></p>
|
||||||
|
<p>Calcium 260mg <span class="right">20%</span></p>
|
||||||
|
<p>Iron 8mg <span class="right">45%</span></p>
|
||||||
|
--fcc-editable-region--
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
border: 2px solid black;
|
||||||
|
width: 270px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin: -4px 0;
|
||||||
|
letter-spacing: 0.15px
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
margin: 2px 0;
|
||||||
|
clear: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bold {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg {
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg, .md {
|
||||||
|
background-color: black;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md {
|
||||||
|
height: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm-text {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info h1 {
|
||||||
|
margin: -5px -2px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info span {
|
||||||
|
font-size: 1.2em;
|
||||||
|
margin-top: -7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indent {
|
||||||
|
margin-left: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dbl-indent {
|
||||||
|
margin-left: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.daily-value p:not(.no-divider) {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
}
|
||||||
|
```
|
||||||
@ -0,0 +1,192 @@
|
|||||||
|
---
|
||||||
|
id: 615f905fbd1017a65ca224eb
|
||||||
|
title: Step 64
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-64
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Add a medium divider after your `.daily-value` element. Below that new divider, create a `p` element with the `class` attribute set to `note`.
|
||||||
|
|
||||||
|
Give the `p` element the following text:
|
||||||
|
|
||||||
|
```
|
||||||
|
The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.
|
||||||
|
```
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
You should create a new `div` after your `.daily-value` element.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value').nextElementSibling?.localName === 'div');
|
||||||
|
```
|
||||||
|
|
||||||
|
Your new `div` should have the `class` set to `divider md`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.daily-value')?.nextElementSibling?.classList?.contains('divider'));
|
||||||
|
assert(document.querySelector('.daily-value')?.nextElementSibling?.classList?.contains('md'));
|
||||||
|
```
|
||||||
|
|
||||||
|
You should create a `p` element after your new `div` element.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.label')?.lastElementChild?.localName === 'p');
|
||||||
|
```
|
||||||
|
|
||||||
|
Your new `p` element should have the `class` set to `note`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('note'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your new `p` element should have the provided text.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('.label')?.lastElementChild?.innerText === 'The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="label">
|
||||||
|
<header>
|
||||||
|
<h1 class="bold">Nutrition Facts</h1>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
|
||||||
|
</header>
|
||||||
|
<div class="divider lg"></div>
|
||||||
|
<div class="calories-info">
|
||||||
|
<p class="bold sm-text">Amount per serving</p>
|
||||||
|
<h1>Calories <span class="right">230</span></h1>
|
||||||
|
</div>
|
||||||
|
<div class="divider md"></div>
|
||||||
|
<div class="daily-value sm-text">
|
||||||
|
<p class="right bold no-divider">% Daily Value *</p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
|
||||||
|
<p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p class="indent no-divider"><i>Trans</i> Fat 0g</p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p><span class="bold">Cholesterol</span> 0mg <span class="right bold">0%</span></p>
|
||||||
|
<p><span class="bold">Sodium</span> 160mg <span class="right bold">7%</span></p>
|
||||||
|
<p><span class="bold">Total Carbohydrate</span> 37g <span class="right bold">13%</span></p>
|
||||||
|
<p class="indent no-divider">Dietary Fiber 4g</p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p class="indent no-divider">Total Sugars 12g</p>
|
||||||
|
<div class="divider dbl-indent"></div>
|
||||||
|
<p class="dbl-indent no-divider">Includes 10g Added Sugars <span class="right bold">20%</span>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p class="no-divider"><span class="bold">Protein</span> 3g</p>
|
||||||
|
<div class="divider lg"></div>
|
||||||
|
<p>Vitamin D 2mcg <span class="right">10%</span></p>
|
||||||
|
<p>Calcium 260mg <span class="right">20%</span></p>
|
||||||
|
<p>Iron 8mg <span class="right">45%</span></p>
|
||||||
|
<p class="no-divider">Potassium 235mg <span class="right">6%</span></p>
|
||||||
|
</div>
|
||||||
|
--fcc-editable-region--
|
||||||
|
|
||||||
|
--fcc-editable-region--
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
border: 2px solid black;
|
||||||
|
width: 270px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin: -4px 0;
|
||||||
|
letter-spacing: 0.15px
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
margin: 2px 0;
|
||||||
|
clear: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bold {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg {
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg, .md {
|
||||||
|
background-color: black;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md {
|
||||||
|
height: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm-text {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info h1 {
|
||||||
|
margin: -5px -2px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info span {
|
||||||
|
font-size: 1.2em;
|
||||||
|
margin-top: -7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indent {
|
||||||
|
margin-left: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dbl-indent {
|
||||||
|
margin-left: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.daily-value p:not(.no-divider) {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
}
|
||||||
|
```
|
||||||
@ -0,0 +1,176 @@
|
|||||||
|
---
|
||||||
|
id: 615f94786869e1a7fec54375
|
||||||
|
title: Step 65
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-65
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Create a `.note` selector, and set the size of the font to `0.6rem`. Also set the top and bottom margins to `5px`, removing the left and right margins.
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
You should have a new `.note` selector.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('.note'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Your `.note` selector should have a `font-size` property set to `0.6rem`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('.note')?.fontSize === '0.6rem');
|
||||||
|
```
|
||||||
|
|
||||||
|
Your `.note` selector should have a `margin` property set to `5px 0`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('.note')?.margin === '5px 0px');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="label">
|
||||||
|
<header>
|
||||||
|
<h1 class="bold">Nutrition Facts</h1>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
|
||||||
|
</header>
|
||||||
|
<div class="divider lg"></div>
|
||||||
|
<div class="calories-info">
|
||||||
|
<p class="bold sm-text">Amount per serving</p>
|
||||||
|
<h1>Calories <span class="right">230</span></h1>
|
||||||
|
</div>
|
||||||
|
<div class="divider md"></div>
|
||||||
|
<div class="daily-value sm-text">
|
||||||
|
<p class="right bold no-divider">% Daily Value *</p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p><span class="bold">Total Fat</span> 8g <span class="bold right">10%</span></p>
|
||||||
|
<p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p class="indent no-divider"><i>Trans</i> Fat 0g</p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p><span class="bold">Cholesterol</span> 0mg <span class="right bold">0%</span></p>
|
||||||
|
<p><span class="bold">Sodium</span> 160mg <span class="right bold">7%</span></p>
|
||||||
|
<p><span class="bold">Total Carbohydrate</span> 37g <span class="right bold">13%</span></p>
|
||||||
|
<p class="indent no-divider">Dietary Fiber 4g</p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p class="indent no-divider">Total Sugars 12g</p>
|
||||||
|
<div class="divider dbl-indent"></div>
|
||||||
|
<p class="dbl-indent no-divider">Includes 10g Added Sugars <span class="right bold">20%</span>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p class="no-divider"><span class="bold">Protein</span> 3g</p>
|
||||||
|
<div class="divider lg"></div>
|
||||||
|
<p>Vitamin D 2mcg <span class="right">10%</span></p>
|
||||||
|
<p>Calcium 260mg <span class="right">20%</span></p>
|
||||||
|
<p>Iron 8mg <span class="right">45%</span></p>
|
||||||
|
<p class="no-divider">Potassium 235mg <span class="right">6%</span></p>
|
||||||
|
</div>
|
||||||
|
<div class="divider md"></div>
|
||||||
|
<p class="note">* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.</p>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
border: 2px solid black;
|
||||||
|
width: 270px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin: -4px 0;
|
||||||
|
letter-spacing: 0.15px
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
margin: 2px 0;
|
||||||
|
clear: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bold {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg {
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg, .md {
|
||||||
|
background-color: black;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md {
|
||||||
|
height: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm-text {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info h1 {
|
||||||
|
margin: -5px -2px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info span {
|
||||||
|
font-size: 1.2em;
|
||||||
|
margin-top: -7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indent {
|
||||||
|
margin-left: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dbl-indent {
|
||||||
|
margin-left: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.daily-value p:not(.no-divider) {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
}
|
||||||
|
|
||||||
|
--fcc-editable-region--
|
||||||
|
|
||||||
|
--fcc-editable-region--
|
||||||
|
```
|
||||||
@ -0,0 +1,175 @@
|
|||||||
|
---
|
||||||
|
id: 615f951dff9317a900ef683f
|
||||||
|
title: Step 66
|
||||||
|
challengeType: 0
|
||||||
|
dashedName: step-66
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
Give the `.note` selector a left and right padding of `8px`, removing the top and bottom padding. Also set the `text-indent` property to `-8px`.
|
||||||
|
|
||||||
|
With these last changes, your nutrition label is complete!
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
Your `.note` selector should have a `padding` property set to `0 8px`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('.note')?.padding === '0px 8px');
|
||||||
|
```
|
||||||
|
|
||||||
|
Your `.note` selector should have a `text-indent` property set to `-8px`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('.note')?.textIndent === '-8px');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nutrition Label</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
|
||||||
|
<link href="./styles.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="label">
|
||||||
|
<header>
|
||||||
|
<h1 class="bold">Nutrition Facts</h1>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p>8 servings per container</p>
|
||||||
|
<p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
|
||||||
|
</header>
|
||||||
|
<div class="divider lg"></div>
|
||||||
|
<div class="calories-info">
|
||||||
|
<p class="bold sm-text">Amount per serving</p>
|
||||||
|
<h1>Calories <span class="right">230</span></h1>
|
||||||
|
</div>
|
||||||
|
<div class="divider md"></div>
|
||||||
|
<div class="daily-value sm-text">
|
||||||
|
<p class="right bold no-divider">% Daily Value *</p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p><span class="bold">Total Fat</span> 8g <span class="bold right">10%</span></p>
|
||||||
|
<p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p class="indent no-divider"><i>Trans</i> Fat 0g</p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p><span class="bold">Cholesterol</span> 0mg <span class="right bold">0%</span></p>
|
||||||
|
<p><span class="bold">Sodium</span> 160mg <span class="right bold">7%</span></p>
|
||||||
|
<p><span class="bold">Total Carbohydrate</span> 37g <span class="right bold">13%</span></p>
|
||||||
|
<p class="indent no-divider">Dietary Fiber 4g</p>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p class="indent no-divider">Total Sugars 12g</p>
|
||||||
|
<div class="divider dbl-indent"></div>
|
||||||
|
<p class="dbl-indent no-divider">Includes 10g Added Sugars <span class="right bold">20%</span>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<p class="no-divider"><span class="bold">Protein</span> 3g</p>
|
||||||
|
<div class="divider lg"></div>
|
||||||
|
<p>Vitamin D 2mcg <span class="right">10%</span></p>
|
||||||
|
<p>Calcium 260mg <span class="right">20%</span></p>
|
||||||
|
<p>Iron 8mg <span class="right">45%</span></p>
|
||||||
|
<p class="no-divider">Potassium 235mg <span class="right">6%</span></p>
|
||||||
|
</div>
|
||||||
|
<div class="divider md"></div>
|
||||||
|
<p class="note">* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.</p>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
border: 2px solid black;
|
||||||
|
width: 270px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 0 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin: -4px 0;
|
||||||
|
letter-spacing: 0.15px
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
margin: 2px 0;
|
||||||
|
clear: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bold {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg {
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg, .md {
|
||||||
|
background-color: black;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md {
|
||||||
|
height: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm-text {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info h1 {
|
||||||
|
margin: -5px -2px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calories-info span {
|
||||||
|
font-size: 1.2em;
|
||||||
|
margin-top: -7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indent {
|
||||||
|
margin-left: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dbl-indent {
|
||||||
|
margin-left: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.daily-value p:not(.no-divider) {
|
||||||
|
border-bottom: 1px solid #888989;
|
||||||
|
}
|
||||||
|
|
||||||
|
--fcc-editable-region--
|
||||||
|
.note {
|
||||||
|
font-size: 0.6rem;
|
||||||
|
margin: 5px 0;
|
||||||
|
}
|
||||||
|
--fcc-editable-region--
|
||||||
|
```
|
||||||
@ -29,5 +29,6 @@
|
|||||||
"d3-dashboard": "D3 Dashboard",
|
"d3-dashboard": "D3 Dashboard",
|
||||||
"registration-form": "Registration Form",
|
"registration-form": "Registration Form",
|
||||||
"css-photo-gallery": "CSS Photo Gallery",
|
"css-photo-gallery": "CSS Photo Gallery",
|
||||||
"css-grid-magazine": "CSS Grid Magazine"
|
"css-grid-magazine": "CSS Grid Magazine",
|
||||||
|
"css-nutrition-label": "CSS Nutrition Label"
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user