mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-01-20 03:02:02 -05:00
chore(curriculum): add nutritional label workshop (#56715)
This commit is contained in:
Dario-DC
@@ -1950,7 +1950,13 @@
|
||||
"Test what you've learned in this quiz of using flexbox in CSS."
|
||||
]
|
||||
},
|
||||
"vqut": { "title": "83", "intro": [] },
|
||||
"workshop-nutritional-label": {
|
||||
"title": "Build a Nutritional Label",
|
||||
"intro": [
|
||||
"Typography is the art of styling your text to be easily readable and suit its purpose.",
|
||||
"In this workshop, you'll use typography to build a nutrition label webpage. You'll practice how to style text, adjust line height, and position your text using CSS."
|
||||
]
|
||||
},
|
||||
"ujcf": { "title": "84", "intro": [] },
|
||||
"lab-newspaper-article": {
|
||||
"title": "Build a Newspaper Article",
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
---
|
||||
title: Introduction to the Build a Nutritional Label
|
||||
block: workshop-nutritional-label
|
||||
superBlock: front-end-development
|
||||
---
|
||||
|
||||
## Introduction to the Build a Nutritional Label
|
||||
|
||||
Typography is the art of styling your text to be easily readable and suit its purpose.
|
||||
|
||||
In this workshop, you'll use typography to build a nutrition label webpage. You'll practice how to style text, adjust line height, and position your text using CSS.
|
||||
285
curriculum/challenges/_meta/workshop-nutritional-label/meta.json
Normal file
285
curriculum/challenges/_meta/workshop-nutritional-label/meta.json
Normal file
@@ -0,0 +1,285 @@
|
||||
{
|
||||
"name": "Build a Nutritional Label",
|
||||
"blockType": "workshop",
|
||||
"isUpcomingChange": true,
|
||||
"usesMultifileEditor": true,
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "workshop-nutritional-label",
|
||||
"order": 83,
|
||||
"superBlock": "front-end-development",
|
||||
"challengeOrder": [
|
||||
{
|
||||
"id": "615f2abbe7d18d49a1e0e1c8",
|
||||
"title": "Step 1"
|
||||
},
|
||||
{
|
||||
"id": "615f2d4150fe0d4cbd0f2628",
|
||||
"title": "Step 2"
|
||||
},
|
||||
{
|
||||
"id": "615f34948891834dd77655a6",
|
||||
"title": "Step 3"
|
||||
},
|
||||
{
|
||||
"id": "615f34ecc1091b4fd5a8a484",
|
||||
"title": "Step 4"
|
||||
},
|
||||
{
|
||||
"id": "615f357957e370510f21ea16",
|
||||
"title": "Step 5"
|
||||
},
|
||||
{
|
||||
"id": "615f378014c2da526a109c81",
|
||||
"title": "Step 6"
|
||||
},
|
||||
{
|
||||
"id": "615f38279e5c3d53692ea441",
|
||||
"title": "Step 7"
|
||||
},
|
||||
{
|
||||
"id": "615f38cabc64e3556f98cc1a",
|
||||
"title": "Step 8"
|
||||
},
|
||||
{
|
||||
"id": "615f3949f58e12577dcefb00",
|
||||
"title": "Step 9"
|
||||
},
|
||||
{
|
||||
"id": "615f39d7da41b15851fa3fb9",
|
||||
"title": "Step 10"
|
||||
},
|
||||
{
|
||||
"id": "615f3b091162165948e1cb33",
|
||||
"title": "Step 11"
|
||||
},
|
||||
{
|
||||
"id": "615f3cafd794015aa9547a6d",
|
||||
"title": "Step 12"
|
||||
},
|
||||
{
|
||||
"id": "615f3d9e59db4b5b8e960762",
|
||||
"title": "Step 13"
|
||||
},
|
||||
{
|
||||
"id": "615f3e1b7233ee5c7595771f",
|
||||
"title": "Step 14"
|
||||
},
|
||||
{
|
||||
"id": "615f3e4af8008c5d494d3afe",
|
||||
"title": "Step 15"
|
||||
},
|
||||
{
|
||||
"id": "615f3ed16592445e57941aec",
|
||||
"title": "Step 16"
|
||||
},
|
||||
{
|
||||
"id": "615f405b89a7ec5f8e2d11f4",
|
||||
"title": "Step 17"
|
||||
},
|
||||
{
|
||||
"id": "615f40b01f680e608d360ed4",
|
||||
"title": "Step 18"
|
||||
},
|
||||
{
|
||||
"id": "615f4172e9eec061d6456221",
|
||||
"title": "Step 19"
|
||||
},
|
||||
{
|
||||
"id": "615f41c979787462e76dab90",
|
||||
"title": "Step 20"
|
||||
},
|
||||
{
|
||||
"id": "615f423cf65d5864132a0956",
|
||||
"title": "Step 21"
|
||||
},
|
||||
{
|
||||
"id": "615f42a021625f656101ef93",
|
||||
"title": "Step 22"
|
||||
},
|
||||
{
|
||||
"id": "615f4bfb9de4a16703b56eb6",
|
||||
"title": "Step 23"
|
||||
},
|
||||
{
|
||||
"id": "615f4ce9d877b668417c0c42",
|
||||
"title": "Step 24"
|
||||
},
|
||||
{
|
||||
"id": "615f4dde9d72e3694cb9ee3b",
|
||||
"title": "Step 25"
|
||||
},
|
||||
{
|
||||
"id": "615f4ec58334106a4170c2a8",
|
||||
"title": "Step 26"
|
||||
},
|
||||
{
|
||||
"id": "615f4f9e4a40566b776a8f38",
|
||||
"title": "Step 27"
|
||||
},
|
||||
{
|
||||
"id": "615f50473cc0196c6dd3892a",
|
||||
"title": "Step 28"
|
||||
},
|
||||
{
|
||||
"id": "615f51257a8a516d80b6c743",
|
||||
"title": "Step 29"
|
||||
},
|
||||
{
|
||||
"id": "615f51e4e5b24a6e80eccce1",
|
||||
"title": "Step 30"
|
||||
},
|
||||
{
|
||||
"id": "615f522dea4f776f64dc3e91",
|
||||
"title": "Step 31"
|
||||
},
|
||||
{
|
||||
"id": "6395d33ab5d91bf317107c48",
|
||||
"title": "Step 32"
|
||||
},
|
||||
{
|
||||
"id": "615f5486b8fd4b71633f69b0",
|
||||
"title": "Step 33"
|
||||
},
|
||||
{
|
||||
"id": "6396e33fe478dd264ebbf278",
|
||||
"title": "Step 34"
|
||||
},
|
||||
{
|
||||
"id": "615f575b50b91e72af079480",
|
||||
"title": "Step 35"
|
||||
},
|
||||
{
|
||||
"id": "615f5af373a68e744a3c5a76",
|
||||
"title": "Step 36"
|
||||
},
|
||||
{
|
||||
"id": "615f5fd85d0062761f288364",
|
||||
"title": "Step 37"
|
||||
},
|
||||
{
|
||||
"id": "615f61338c8ca176d6445574",
|
||||
"title": "Step 38"
|
||||
},
|
||||
{
|
||||
"id": "615f666ac5edea782feb7e75",
|
||||
"title": "Step 39"
|
||||
},
|
||||
{
|
||||
"id": "615f671b6d1919792745aa5d",
|
||||
"title": "Step 40"
|
||||
},
|
||||
{
|
||||
"id": "635bde33c91c80540eae239b",
|
||||
"title": "Step 41"
|
||||
},
|
||||
{
|
||||
"id": "615f6823d0815b7a991f2a75",
|
||||
"title": "Step 42"
|
||||
},
|
||||
{
|
||||
"id": "615f6b2d164f81809efd9bdc",
|
||||
"title": "Step 43"
|
||||
},
|
||||
{
|
||||
"id": "667d1bb875f5961913176069",
|
||||
"title": "Step 44"
|
||||
},
|
||||
{
|
||||
"id": "615f6cc778f7698258467596",
|
||||
"title": "Step 45"
|
||||
},
|
||||
{
|
||||
"id": "615f6fddaac1e083502d3e6a",
|
||||
"title": "Step 46"
|
||||
},
|
||||
{
|
||||
"id": "615f70077a4ff98424236c1e",
|
||||
"title": "Step 47"
|
||||
},
|
||||
{
|
||||
"id": "615f72a872354a850d4f533e",
|
||||
"title": "Step 48"
|
||||
},
|
||||
{
|
||||
"id": "615f74a71f1e498619e38ee8",
|
||||
"title": "Step 49"
|
||||
},
|
||||
{
|
||||
"id": "615f7ad94380408d971d14f6",
|
||||
"title": "Step 50"
|
||||
},
|
||||
{
|
||||
"id": "615f7bc680f7168ea01ebf99",
|
||||
"title": "Step 51"
|
||||
},
|
||||
{
|
||||
"id": "615f7c71eab8218f846e4503",
|
||||
"title": "Step 52"
|
||||
},
|
||||
{
|
||||
"id": "615f7d489a581590d1350288",
|
||||
"title": "Step 53"
|
||||
},
|
||||
{
|
||||
"id": "615f7de4487b64919bb4aa5e",
|
||||
"title": "Step 54"
|
||||
},
|
||||
{
|
||||
"id": "615f7e7281626a92bbd62da8",
|
||||
"title": "Step 55"
|
||||
},
|
||||
{
|
||||
"id": "615f7ecb09de9a938ef94756",
|
||||
"title": "Step 56"
|
||||
},
|
||||
{
|
||||
"id": "615f7fa959ab75948f96a0d6",
|
||||
"title": "Step 57"
|
||||
},
|
||||
{
|
||||
"id": "615f808d85793195b0f53be9",
|
||||
"title": "Step 58"
|
||||
},
|
||||
{
|
||||
"id": "615f829d07b18f96f6f6684b",
|
||||
"title": "Step 59"
|
||||
},
|
||||
{
|
||||
"id": "615f83ef928ec9982b785b6a",
|
||||
"title": "Step 60"
|
||||
},
|
||||
{
|
||||
"id": "615f84f246e8ba98e3cd97be",
|
||||
"title": "Step 61"
|
||||
},
|
||||
{
|
||||
"id": "615f887466db4ba14b5342cc",
|
||||
"title": "Step 62"
|
||||
},
|
||||
{
|
||||
"id": "615f89e055040ba294719d2f",
|
||||
"title": "Step 63"
|
||||
},
|
||||
{
|
||||
"id": "615f8bfe0f30a1a3c340356b",
|
||||
"title": "Step 64"
|
||||
},
|
||||
{
|
||||
"id": "615f8f1223601fa546e93f31",
|
||||
"title": "Step 65"
|
||||
},
|
||||
{
|
||||
"id": "615f905fbd1017a65ca224eb",
|
||||
"title": "Step 66"
|
||||
},
|
||||
{
|
||||
"id": "615f94786869e1a7fec54375",
|
||||
"title": "Step 67"
|
||||
},
|
||||
{
|
||||
"id": "615f951dff9317a900ef683f",
|
||||
"title": "Step 68"
|
||||
}
|
||||
],
|
||||
"helpCategory": "HTML-CSS"
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
---
|
||||
id: 615f2abbe7d18d49a1e0e1c8
|
||||
title: Step 1
|
||||
challengeType: 0
|
||||
dashedName: step-1
|
||||
demoType: onLoad
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You've been provided with a basic HTML boilerplate.
|
||||
|
||||
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,62 @@
|
||||
---
|
||||
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,63 @@
|
||||
---
|
||||
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,88 @@
|
||||
---
|
||||
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--
|
||||
|
||||
Your code should have two `link` elements.
|
||||
|
||||
```js
|
||||
assert.strictEqual(document.querySelectorAll('link').length, 2);
|
||||
```
|
||||
|
||||
Your `link` elements should be void elements, they should not have a end tag `</link>`.
|
||||
|
||||
```js
|
||||
assert.notMatch(code, /<\/link>/);
|
||||
```
|
||||
|
||||
Your two `link` elements should be inside the `head` element.
|
||||
|
||||
```js
|
||||
const headContentRegex = /(?<=<head\s*>)[\S|\s]*(?=<\/head\s*>)/;
|
||||
const headElementContent = code.match(headContentRegex);
|
||||
|
||||
const headElement = document.createElement("head");
|
||||
headElement.innerHTML = headElementContent;
|
||||
assert.strictEqual(headElement.querySelectorAll('link').length, 2);
|
||||
```
|
||||
|
||||
Both of your `link` elements should have the `rel` attribute set to `stylesheet`.
|
||||
|
||||
```js
|
||||
const links = [...document.querySelectorAll('link')];
|
||||
assert.isTrue(links.every(link => link.getAttribute('rel') === 'stylesheet'));
|
||||
```
|
||||
|
||||
One of your `link` elements should have an `href` attribute set to `styles.css`.
|
||||
|
||||
```js
|
||||
const styleElement = document.querySelector('[data-href]');
|
||||
assert.isNotNull(styleElement);
|
||||
```
|
||||
|
||||
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.exists(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>
|
||||
<p>Serving size 2/3 cup (55g)</p>
|
||||
</body>
|
||||
</html>
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@@ -0,0 +1,55 @@
|
||||
---
|
||||
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,57 @@
|
||||
---
|
||||
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,66 @@
|
||||
---
|
||||
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,65 @@
|
||||
---
|
||||
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,61 @@
|
||||
---
|
||||
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,66 @@
|
||||
---
|
||||
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,72 @@
|
||||
---
|
||||
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,76 @@
|
||||
---
|
||||
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,70 @@
|
||||
---
|
||||
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,71 @@
|
||||
---
|
||||
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,80 @@
|
||||
---
|
||||
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,96 @@
|
||||
---
|
||||
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,91 @@
|
||||
---
|
||||
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,84 @@
|
||||
---
|
||||
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,91 @@
|
||||
---
|
||||
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,104 @@
|
||||
---
|
||||
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,86 @@
|
||||
---
|
||||
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,100 @@
|
||||
---
|
||||
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.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a new `span` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('span'));
|
||||
```
|
||||
|
||||
Your `span` element should have the text `2/3 cup (55g)`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('span')?.textContent?.trim() === '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,92 @@
|
||||
---
|
||||
id: 615f4bfb9de4a16703b56eb6
|
||||
title: Step 23
|
||||
challengeType: 0
|
||||
dashedName: step-23
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now we can add the horizontal spacing using `flex`. In your `p` selector, add a `display` property set to `flex` and a `justify-content` property set to `space-between`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `p` selector should have a `display` property set to `flex`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('p')?.display === 'flex');
|
||||
```
|
||||
|
||||
Your `p` selector should have a `justify-content` property set to `space-between`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('p')?.justifyContent === 'space-between');
|
||||
```
|
||||
|
||||
# --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>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
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.divider {
|
||||
border-bottom: 1px solid #888989;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: 800;
|
||||
}
|
||||
```
|
||||
@@ -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>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;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-bottom: 1px solid #888989;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: 800;
|
||||
}
|
||||
```
|
||||
@@ -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>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;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-bottom: 1px solid #888989;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: 800;
|
||||
}
|
||||
```
|
||||
@@ -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 large`.
|
||||
|
||||
# --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 large`.
|
||||
|
||||
```js
|
||||
const div = document.querySelector('.label')?.lastElementChild;
|
||||
assert(div?.classList?.contains('divider'));
|
||||
assert(div?.classList?.contains('large'));
|
||||
```
|
||||
|
||||
# --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>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;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-bottom: 1px solid #888989;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: 800;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,111 @@
|
||||
---
|
||||
id: 615f4f9e4a40566b776a8f38
|
||||
title: Step 27
|
||||
challengeType: 0
|
||||
dashedName: step-27
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create a new `.large` selector and give it a `height` property set to `10px`. Also create an `.large, .medium` selector and set the `background-color` property to `black`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a new `.large` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.large'));
|
||||
```
|
||||
|
||||
Your `.large` selector should have a `height` property set to `10px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.large')?.height === '10px');
|
||||
```
|
||||
|
||||
You should have a new `.large, .medium` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.large, .medium'));
|
||||
```
|
||||
|
||||
Your `.large, .medium` selector should have a `background-color` property set to `black`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.large, .medium')?.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>2/3 cup (55g)</span></p>
|
||||
</header>
|
||||
<div class="divider large"></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;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-bottom: 1px solid #888989;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,101 @@
|
||||
---
|
||||
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 `.large` element. To reset this, give your `.large, .medium` selector a `border` property set to `0`.
|
||||
|
||||
Note: the `medium`(medium) class will be utilized later for the thinner bars of the nutrition label.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.large, .medium` selector should have a `border` property set to `0`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.large, .medium')?.borderWidth === '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>2/3 cup (55g)</span></p>
|
||||
</header>
|
||||
<div class="divider large"></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;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-bottom: 1px solid #888989;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.large {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.large, .medium {
|
||||
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 `.large` 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 `.large` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.label')?.lastElementChild?.previousElementSibling?.classList?.contains('large'));
|
||||
```
|
||||
|
||||
# --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>2/3 cup (55g)</span></p>
|
||||
</header>
|
||||
<div class="divider large"></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;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-bottom: 1px solid #888989;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.large {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.large, .medium {
|
||||
background-color: black;
|
||||
border: 0;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,128 @@
|
||||
---
|
||||
id: 615f51e4e5b24a6e80eccce1
|
||||
title: Step 30
|
||||
challengeType: 0
|
||||
dashedName: step-30
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Within your `.calories-info` element, create a `div` element. Give that `div` element a `class` attribute set to `left-container`. Within the newly created `div` element, create a `h2` element with the text `Amount per serving`. Give the `h2` element a `class` attribute set to `bold small-text`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a new `div` element within your `.calories-info` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.calories-info')?.children?.[0]?.localName === 'div');
|
||||
```
|
||||
|
||||
Your new `div` element should have a `class` attribute set to `left-container`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.calories-info')?.children?.[0]?.classList.contains('left-container'));
|
||||
```
|
||||
|
||||
You should create a new `h2` element within your `.left-container` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.left-container')?.children?.[0]?.localName === 'h2');
|
||||
```
|
||||
|
||||
Your new `h2` element should have a `class` attribute set to `bold small-text`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.left-container')?.children?.[0]?.classList.contains('bold'));
|
||||
assert(document.querySelector('.left-container')?.children?.[0]?.classList.contains('small-text'));
|
||||
```
|
||||
|
||||
Your new `h2` element should have the text `Amount per serving`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.left-container')?.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>2/3 cup (55g)</span></p>
|
||||
</header>
|
||||
<div class="divider large"></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;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-bottom: 1px solid #888989;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.large {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.large, .medium {
|
||||
background-color: black;
|
||||
border: 0;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,115 @@
|
||||
---
|
||||
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 a `.small-text` selector and set the `font-size` to `0.85rem`, which would calculate to roughly `13.6px` (remember that you set your `html` to have a `font-size` of `16px`).
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have an `.small-text` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.small-text'));
|
||||
```
|
||||
|
||||
Your `.small-text` selector should have a `font-size` property set to `0.85rem`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.small-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>2/3 cup (55g)</span></p>
|
||||
</header>
|
||||
<div class="divider large"></div>
|
||||
<div class="calories-info">
|
||||
<div class="left-container">
|
||||
<h2 class="bold small-text">Amount per serving</h2>
|
||||
</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;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-bottom: 1px solid #888989;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.large {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.large, .medium {
|
||||
background-color: black;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,143 @@
|
||||
---
|
||||
id: 615f5486b8fd4b71633f69b0
|
||||
title: Step 33
|
||||
challengeType: 0
|
||||
dashedName: step-33
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Below your `.small-text` element, create a new `p` element with the text `Calories`. Also below the `.left-container` element, create a new `span` element with the text `230`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a new `p` element within your `.calories-info` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.calories-info')?.querySelector('p'))
|
||||
```
|
||||
|
||||
You should have a new `span` element within your `.calories-info` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.calories-info')?.querySelector('span'))
|
||||
```
|
||||
|
||||
Your `p` element should come after your `.small-text` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.small-text')?.nextElementSibling?.localName === 'p');
|
||||
```
|
||||
|
||||
Your `span` element should come after your `.left-container` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.left-container')?.nextElementSibling?.localName ==='span');
|
||||
```
|
||||
|
||||
Your `p` element should have the text `Calories`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.small-text')?.nextElementSibling?.innerText === 'Calories');
|
||||
```
|
||||
|
||||
Your `span` element should have the text `230`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.left-container')?.nextElementSibling?.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>2/3 cup (55g)</span></p>
|
||||
</header>
|
||||
<div class="divider large"></div>
|
||||
--fcc-editable-region--
|
||||
<div class="calories-info">
|
||||
<div class="left-container">
|
||||
<h2 class="bold small-text">Amount per serving</h2>
|
||||
</div>
|
||||
</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;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-bottom: 1px solid #888989;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.large {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.large, .medium {
|
||||
background-color: black;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.calories-info h2 {
|
||||
margin: 0;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,144 @@
|
||||
---
|
||||
id: 615f575b50b91e72af079480
|
||||
title: Step 35
|
||||
challengeType: 0
|
||||
dashedName: step-35
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create a new `.left-container p` selector setting the top and bottom margin to `-5px`, and the left and right margin to `-2px`. Also set the `font-size` to `2em` and `font-weight` to `700`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a new `.left-container p` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.left-container p'));
|
||||
```
|
||||
|
||||
Your new `.left-container p` selector should have a `margin` property set to `-5px -2px`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.left-container p')?.marginTop, '-5px');
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.left-container p')?.marginBottom, '-5px');
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.left-container p')?.marginLeft, '-2px');
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.left-container p')?.marginRight, '-2px');
|
||||
```
|
||||
|
||||
Your new `.left-container p` selector should have a `font-size` property set to `2em`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.left-container p')?.fontSize === '2em');
|
||||
```
|
||||
|
||||
Your new `.left-container p` selector should have a `font-weight` property set to `700`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.left-container p')?.fontWeight === '700');
|
||||
```
|
||||
|
||||
# --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>2/3 cup (55g)</span></p>
|
||||
</header>
|
||||
<div class="divider large"></div>
|
||||
<div class="calories-info">
|
||||
<div class="left-container">
|
||||
<h2 class="bold small-text">Amount per serving</h2>
|
||||
<p>Calories</p>
|
||||
</div>
|
||||
<span>230</span>
|
||||
</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;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-bottom: 1px solid #888989;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.large {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.large, .medium {
|
||||
background-color: black;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.calories-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.calories-info h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,141 @@
|
||||
---
|
||||
id: 615f5af373a68e744a3c5a76
|
||||
title: Step 36
|
||||
challengeType: 0
|
||||
dashedName: step-36
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create a `.calories-info span` selector, set its `font-size` to `2.4em` and `font-weight` to `700`.
|
||||
|
||||
# --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 `2.4em`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.calories-info span')?.fontSize === '2.4em');
|
||||
```
|
||||
|
||||
Your `.calories-info span` selector should have a `font-weight` property set to `700`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.calories-info span')?.fontWeight === '700');
|
||||
```
|
||||
|
||||
# --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>2/3 cup (55g)</span></p>
|
||||
</header>
|
||||
<div class="divider large"></div>
|
||||
<div class="calories-info">
|
||||
<div class="left-container">
|
||||
<h2 class="bold small-text">Amount per serving</h2>
|
||||
<p>Calories</p>
|
||||
</div>
|
||||
<span>230</span>
|
||||
</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;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-bottom: 1px solid #888989;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.large {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.large, .medium {
|
||||
background-color: black;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.calories-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.calories-info h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.left-container p {
|
||||
margin: -5px -2px;
|
||||
font-size: 2em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,134 @@
|
||||
---
|
||||
id: 615f5fd85d0062761f288364
|
||||
title: Step 37
|
||||
challengeType: 0
|
||||
dashedName: step-37
|
||||
---
|
||||
|
||||
# --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` set to `-7px -2px`. This will shift your `230` text into place.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.calories-info span` selector should have a `margin` set to `-7px -2px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.calories-info span')?.margin === '-7px -2px');
|
||||
```
|
||||
|
||||
# --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>2/3 cup (55g)</span></p>
|
||||
</header>
|
||||
<div class="divider large"></div>
|
||||
<div class="calories-info">
|
||||
<div class="left-container">
|
||||
<h2 class="bold small-text">Amount per serving</h2>
|
||||
<p>Calories</p>
|
||||
</div>
|
||||
<span>230</span>
|
||||
</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;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-bottom: 1px solid #888989;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.large {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.large, .medium {
|
||||
background-color: black;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.calories-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.calories-info h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.left-container p {
|
||||
margin: -5px -2px;
|
||||
font-size: 2em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.calories-info span {
|
||||
font-size: 2.4em;
|
||||
font-weight: 700;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,141 @@
|
||||
---
|
||||
id: 615f61338c8ca176d6445574
|
||||
title: Step 38
|
||||
challengeType: 0
|
||||
dashedName: step-38
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Below your `.calories-info` element, add a `div` with the `class` attribute set to `divider medium`.
|
||||
|
||||
# --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 medium`. 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('medium'));
|
||||
```
|
||||
|
||||
# --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>2/3 cup (55g)</span></p>
|
||||
</header>
|
||||
<div class="divider large"></div>
|
||||
<div class="calories-info">
|
||||
<div class="left-container">
|
||||
<h2 class="bold small-text">Amount per serving</h2>
|
||||
<p>Calories</p>
|
||||
</div>
|
||||
<span>230</span>
|
||||
</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;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-bottom: 1px solid #888989;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.large {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.large, .medium {
|
||||
background-color: black;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.calories-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.calories-info h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.left-container p {
|
||||
margin: -5px -2px;
|
||||
font-size: 2em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.calories-info span {
|
||||
margin: -7px -2px;
|
||||
font-size: 2.4em;
|
||||
font-weight: 700;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,142 @@
|
||||
---
|
||||
id: 615f666ac5edea782feb7e75
|
||||
title: Step 39
|
||||
challengeType: 0
|
||||
dashedName: step-39
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create an `.medium` selector and give it a `height` property of `5px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create an `.medium` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.medium'));
|
||||
```
|
||||
|
||||
Your `.medium` selector should have a `height` property set to `5px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.medium')?.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>2/3 cup (55g)</span></p>
|
||||
</header>
|
||||
<div class="divider large"></div>
|
||||
<div class="calories-info">
|
||||
<div class="left-container">
|
||||
<h2 class="bold small-text">Amount per serving</h2>
|
||||
<p>Calories</p>
|
||||
</div>
|
||||
<span>230</span>
|
||||
</div>
|
||||
<div class="divider medium"></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;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-bottom: 1px solid #888989;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.large {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.large, .medium {
|
||||
background-color: black;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.small-text {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.calories-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.calories-info h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.left-container p {
|
||||
margin: -5px -2px;
|
||||
font-size: 2em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.calories-info span {
|
||||
margin: -7px -2px;
|
||||
font-size: 2.4em;
|
||||
font-weight: 700;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,167 @@
|
||||
---
|
||||
id: 615f671b6d1919792745aa5d
|
||||
title: Step 40
|
||||
challengeType: 0
|
||||
dashedName: step-40
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create a new `div` element below your `.medium` element. Give it a `class` attribute set to `daily-value small-text`. Within this new `div`, add a `p` element with the text `% Daily Value *`, and set the `class` attribute to `bold right`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a new `div` element after your `.medium` 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('medium'));
|
||||
```
|
||||
|
||||
Your new `div` should have a `class` attribute set to `daily-value small-text`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('daily-value'));
|
||||
assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('small-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 `bold right`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.classList?.contains('bold'));
|
||||
assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.classList?.contains('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>2/3 cup (55g)</span></p>
|
||||
</header>
|
||||
<div class="divider large"></div>
|
||||
<div class="calories-info">
|
||||
<div class="left-container">
|
||||
<h2 class="bold small-text">Amount per serving</h2>
|
||||
<p>Calories</p>
|
||||
</div>
|
||||
<span>230</span>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="divider medium"></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;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-bottom: 1px solid #888989;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.large {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.large, .medium {
|
||||
background-color: black;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.medium {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.calories-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.calories-info h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.left-container p {
|
||||
margin: -5px -2px;
|
||||
font-size: 2em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.calories-info span {
|
||||
margin: -7px -2px;
|
||||
font-size: 2.4em;
|
||||
font-weight: 700;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,157 @@
|
||||
---
|
||||
id: 615f6823d0815b7a991f2a75
|
||||
title: Step 42
|
||||
challengeType: 0
|
||||
dashedName: step-42
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
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` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.daily-value.small-text > div')?.length === 1)
|
||||
```
|
||||
|
||||
Your new `div` should have the `class` attribute set to `divider`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-text > div')?.classList?.contains('divider'))
|
||||
```
|
||||
|
||||
Your new `div` should come after your `p` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-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>2/3 cup (55g)</span></p>
|
||||
</header>
|
||||
<div class="divider large"></div>
|
||||
<div class="calories-info">
|
||||
<div class="left-container">
|
||||
<h2 class="bold small-text">Amount per serving</h2>
|
||||
<p>Calories</p>
|
||||
</div>
|
||||
<span>230</span>
|
||||
</div>
|
||||
<div class="divider medium"></div>
|
||||
--fcc-editable-region--
|
||||
<div class="daily-value small-text">
|
||||
<p class="bold right">% 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;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-bottom: 1px solid #888989;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.large {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.large, .medium {
|
||||
background-color: black;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.medium {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.calories-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.calories-info h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.left-container p {
|
||||
margin: -5px -2px;
|
||||
font-size: 2em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.calories-info span {
|
||||
margin: -7px -2px;
|
||||
font-size: 2.4em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,182 @@
|
||||
---
|
||||
id: 615f6b2d164f81809efd9bdc
|
||||
title: Step 43
|
||||
challengeType: 0
|
||||
dashedName: step-43
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
After your last `.divider` element, create a `p` element and give it the text `Total Fat 8g 10%`. Then, wrap the text `Total Fat` in one `span` element, the text `10%` in another, and give them each a class of `bold`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a new `p` element at the end of your `.daily-value` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
|
||||
```
|
||||
|
||||
Your new `p` element should have the text `Total Fat 8g 10%`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Total Fat[\s|\n]+8g[\s|\n]+10%/));
|
||||
```
|
||||
|
||||
Your `p` element should have two `span` elements.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 2);
|
||||
```
|
||||
|
||||
One `span` element should wrap the text `Total Fat`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span')?.innerText === 'Total Fat');
|
||||
```
|
||||
|
||||
The `span` element around `Total Fat` should have the `class` set to `bold`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span')?.className === 'bold');
|
||||
```
|
||||
|
||||
A `span` element should wrap the text `10%`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span + span')?.innerText === '10%');
|
||||
```
|
||||
|
||||
The `span` element around `10%` should have the `class` set to `bold`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.[1]?.className === '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>2/3 cup (55g)</span></p>
|
||||
</header>
|
||||
<div class="divider large"></div>
|
||||
<div class="calories-info">
|
||||
<div class="left-container">
|
||||
<h2 class="bold small-text">Amount per serving</h2>
|
||||
<p>Calories</p>
|
||||
</div>
|
||||
<span>230</span>
|
||||
</div>
|
||||
<div class="divider medium"></div>
|
||||
--fcc-editable-region--
|
||||
<div class="daily-value small-text">
|
||||
<p class="bold right">% Daily Value *</p>
|
||||
<div class="divider"></div>
|
||||
</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;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-bottom: 1px solid #888989;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.large {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.large, .medium {
|
||||
background-color: black;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.medium {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.calories-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.calories-info h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.left-container p {
|
||||
margin: -5px -2px;
|
||||
font-size: 2em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.calories-info span {
|
||||
margin: -7px -2px;
|
||||
font-size: 2.4em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,172 @@
|
||||
---
|
||||
id: 615f6cc778f7698258467596
|
||||
title: Step 45
|
||||
challengeType: 0
|
||||
dashedName: step-45
|
||||
---
|
||||
|
||||
# --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`. In this case this is enough to align the percentage to `5%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a new `p` element below your element with the `Total Fat` text.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
|
||||
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.innerText.match(/Total Fat 8g\s*10%/));
|
||||
```
|
||||
|
||||
Your new `p` element should have the text `Saturated Fat 1g 5%`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText.match(/Saturated Fat 1g\s*5%/));
|
||||
```
|
||||
|
||||
Your new `p` element should have a `span` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.localName === 'span');
|
||||
```
|
||||
|
||||
Your `span` element should have the `class` attribute set to `bold`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold'));
|
||||
```
|
||||
|
||||
Your `span` element should wrap the `5%` text.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-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>2/3 cup (55g)</span></p>
|
||||
</header>
|
||||
<div class="divider large"></div>
|
||||
<div class="calories-info">
|
||||
<div class="left-container">
|
||||
<h2 class="bold small-text">Amount per serving</h2>
|
||||
<p>Calories</p>
|
||||
</div>
|
||||
<span>230</span>
|
||||
</div>
|
||||
<div class="divider medium"></div>
|
||||
--fcc-editable-region--
|
||||
<div class="daily-value small-text">
|
||||
<p class="bold right">% Daily Value *</p>
|
||||
<div class="divider"></div>
|
||||
<p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</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;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-bottom: 1px solid #888989;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.large {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.large, .medium {
|
||||
background-color: black;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.medium {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.calories-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.calories-info h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.left-container p {
|
||||
margin: -5px -2px;
|
||||
font-size: 2em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.calories-info span {
|
||||
margin: -7px -2px;
|
||||
font-size: 2.4em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,148 @@
|
||||
---
|
||||
id: 615f6fddaac1e083502d3e6a
|
||||
title: Step 46
|
||||
challengeType: 0
|
||||
dashedName: step-46
|
||||
---
|
||||
|
||||
# --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.small-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>2/3 cup (55g)</span></p>
|
||||
</header>
|
||||
<div class="divider large"></div>
|
||||
<div class="calories-info">
|
||||
<div class="left-container">
|
||||
<h2 class="bold small-text">Amount per serving</h2>
|
||||
<p>Calories</p>
|
||||
</div>
|
||||
<span>230</span>
|
||||
</div>
|
||||
<div class="divider medium"></div>
|
||||
--fcc-editable-region--
|
||||
<div class="daily-value small-text">
|
||||
<p class="bold right">% Daily Value *</p>
|
||||
<div class="divider"></div>
|
||||
<p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
|
||||
<p>Saturated Fat 1g <span class="bold">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;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-bottom: 1px solid #888989;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.large {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.large, .medium {
|
||||
background-color: black;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.medium {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.calories-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.calories-info h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.left-container p {
|
||||
margin: -5px -2px;
|
||||
font-size: 2em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.calories-info span {
|
||||
margin: -7px -2px;
|
||||
font-size: 2.4em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,163 @@
|
||||
---
|
||||
id: 615f70077a4ff98424236c1e
|
||||
title: Step 47
|
||||
challengeType: 0
|
||||
dashedName: step-47
|
||||
---
|
||||
|
||||
# --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.isNotNull(new __helpers.CSSHelp(document).getStyle('.indent'));
|
||||
```
|
||||
|
||||
Your `.indent` selector should have a `margin-left` property set to `1em`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.indent')?.marginLeft, '1em');
|
||||
```
|
||||
|
||||
Your `.indent` selector should only set the `margin-left` property, not other margin properties.
|
||||
|
||||
```js
|
||||
const { marginTop, marginRight, marginBottom } = new __helpers.CSSHelp(document).getStyle('.indent') ?? {};
|
||||
assert.isTrue([marginTop, marginRight, marginBottom].every(prop => prop === ''));
|
||||
```
|
||||
|
||||
# --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>2/3 cup (55g)</span></p>
|
||||
</header>
|
||||
<div class="divider large"></div>
|
||||
<div class="calories-info">
|
||||
<div class="left-container">
|
||||
<h2 class="bold small-text">Amount per serving</h2>
|
||||
<p>Calories</p>
|
||||
</div>
|
||||
<span>230</span>
|
||||
</div>
|
||||
<div class="divider medium"></div>
|
||||
<div class="daily-value small-text">
|
||||
<p class="bold right">% Daily Value *</p>
|
||||
<div class="divider"></div>
|
||||
<p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
|
||||
<p class="indent">Saturated Fat 1g <span class="bold">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;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-bottom: 1px solid #888989;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.large {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.large, .medium {
|
||||
background-color: black;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.medium {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.calories-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.calories-info h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.left-container p {
|
||||
margin: -5px -2px;
|
||||
font-size: 2em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.calories-info span {
|
||||
margin: -7px -2px;
|
||||
font-size: 2.4em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,160 @@
|
||||
---
|
||||
id: 615f72a872354a850d4f533e
|
||||
title: Step 48
|
||||
challengeType: 0
|
||||
dashedName: step-48
|
||||
---
|
||||
|
||||
# --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>2/3 cup (55g)</span></p>
|
||||
</header>
|
||||
<div class="divider large"></div>
|
||||
<div class="calories-info">
|
||||
<div class="left-container">
|
||||
<h2 class="bold small-text">Amount per serving</h2>
|
||||
<p>Calories</p>
|
||||
</div>
|
||||
<span>230</span>
|
||||
</div>
|
||||
<div class="divider medium"></div>
|
||||
<div class="daily-value small-text">
|
||||
<p class="bold right">% Daily Value *</p>
|
||||
<div class="divider"></div>
|
||||
<p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
|
||||
<p class="indent">Saturated Fat 1g <span class="bold">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;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-bottom: 1px solid #888989;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.large {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.large, .medium {
|
||||
background-color: black;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.medium {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.calories-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.calories-info h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.left-container p {
|
||||
margin: -5px -2px;
|
||||
font-size: 2em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.calories-info span {
|
||||
margin: -7px -2px;
|
||||
font-size: 2.4em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.indent {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,166 @@
|
||||
---
|
||||
id: 615f74a71f1e498619e38ee8
|
||||
title: Step 49
|
||||
challengeType: 0
|
||||
dashedName: step-49
|
||||
---
|
||||
|
||||
# --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.small-text')?.firstElementChild;
|
||||
assert(p?.classList?.contains('no-divider'));
|
||||
assert(p?.classList?.contains('bold'));
|
||||
```
|
||||
|
||||
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.small-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>2/3 cup (55g)</span></p>
|
||||
</header>
|
||||
<div class="divider large"></div>
|
||||
<div class="calories-info">
|
||||
<div class="left-container">
|
||||
<h2 class="bold small-text">Amount per serving</h2>
|
||||
<p>Calories</p>
|
||||
</div>
|
||||
<span>230</span>
|
||||
</div>
|
||||
<div class="divider medium"></div>
|
||||
--fcc-editable-region--
|
||||
<div class="daily-value small-text">
|
||||
<p class="bold right">% Daily Value *</p>
|
||||
<div class="divider"></div>
|
||||
<p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
|
||||
<p class="indent">Saturated Fat 1g <span class="bold">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;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-bottom: 1px solid #888989;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.large {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.large, .medium {
|
||||
background-color: black;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.medium {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.calories-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.calories-info h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.left-container p {
|
||||
margin: -5px -2px;
|
||||
font-size: 2em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.calories-info span {
|
||||
margin: -7px -2px;
|
||||
font-size: 2.4em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.indent {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.daily-value p {
|
||||
border-bottom: 1px solid #888989;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,181 @@
|
||||
---
|
||||
id: 615f7ad94380408d971d14f6
|
||||
title: Step 50
|
||||
challengeType: 0
|
||||
dashedName: step-50
|
||||
---
|
||||
|
||||
# --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>2/3 cup (55g)</span></p>
|
||||
</header>
|
||||
<div class="divider large"></div>
|
||||
<div class="calories-info">
|
||||
<div class="left-container">
|
||||
<h2 class="bold small-text">Amount per serving</h2>
|
||||
<p>Calories</p>
|
||||
</div>
|
||||
<span>230</span>
|
||||
</div>
|
||||
<div class="divider medium"></div>
|
||||
<div class="daily-value small-text">
|
||||
<p class="bold right no-divider">% Daily Value *</p>
|
||||
<div class="divider"></div>
|
||||
<p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
|
||||
<p class="indent no-divider">Saturated Fat 1g <span class="bold">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;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-bottom: 1px solid #888989;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.large {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.large, .medium {
|
||||
background-color: black;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.medium {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
|
||||
.calories-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.calories-info h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.left-container p {
|
||||
margin: -5px -2px;
|
||||
font-size: 2em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.calories-info span {
|
||||
margin: -7px -2px;
|
||||
font-size: 2.4em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.indent {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.daily-value p {
|
||||
border-bottom: 1px solid #888989;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,165 @@
|
||||
---
|
||||
id: 615f7bc680f7168ea01ebf99
|
||||
title: Step 51
|
||||
challengeType: 0
|
||||
dashedName: step-51
|
||||
---
|
||||
|
||||
# --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` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'div');
|
||||
```
|
||||
|
||||
Your new `div` should have the `class` attribute set to `divider`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-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>2/3 cup (55g)</span></p>
|
||||
</header>
|
||||
<div class="divider large"></div>
|
||||
<div class="calories-info">
|
||||
<div class="left-container">
|
||||
<h2 class="bold small-text">Amount per serving</h2>
|
||||
<p>Calories</p>
|
||||
</div>
|
||||
<span>230</span>
|
||||
</div>
|
||||
<div class="divider medium"></div>
|
||||
--fcc-editable-region--
|
||||
<div class="daily-value small-text">
|
||||
<p class="bold right no-divider">% Daily Value *</p>
|
||||
<div class="divider"></div>
|
||||
<p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
|
||||
<p class="indent no-divider">Saturated Fat 1g <span class="bold">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;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-bottom: 1px solid #888989;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.large {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.large, .medium {
|
||||
background-color: black;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.medium {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
|
||||
.calories-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.calories-info h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.left-container p {
|
||||
margin: -5px -2px;
|
||||
font-size: 2em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.calories-info span {
|
||||
margin: -7px -2px;
|
||||
font-size: 2.4em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.indent {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.daily-value p:not(.no-divider) {
|
||||
border-bottom: 1px solid #888989;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,196 @@
|
||||
---
|
||||
id: 615f7c71eab8218f846e4503
|
||||
title: Step 52
|
||||
challengeType: 0
|
||||
dashedName: step-52
|
||||
---
|
||||
|
||||
# --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`. Wrap `Trans Fat 0g` in a `span` element for alignment.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a new `p` element at the end of your `.daily-value` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
|
||||
```
|
||||
|
||||
Your new `p` element should have the text `Trans Fat 0g`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-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.small-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.small-text')?.lastElementChild?.querySelector('i'));
|
||||
```
|
||||
|
||||
Your `i` element should wrap the text `Trans`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('i')?.innerText === 'Trans');
|
||||
```
|
||||
|
||||
Your new `p` element should have a `span` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span'));
|
||||
```
|
||||
|
||||
Your `span` element should wrap the text `Trans Fat 0g`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span')?.innerText?.match(/Trans[\s|\n]+Fat 0g/));
|
||||
```
|
||||
|
||||
# --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>2/3 cup (55g)</span></p>
|
||||
</header>
|
||||
<div class="divider large"></div>
|
||||
<div class="calories-info">
|
||||
<div class="left-container">
|
||||
<h2 class="bold small-text">Amount per serving</h2>
|
||||
<p>Calories</p>
|
||||
</div>
|
||||
<span>230</span>
|
||||
</div>
|
||||
<div class="divider medium"></div>
|
||||
--fcc-editable-region--
|
||||
<div class="daily-value small-text">
|
||||
<p class="bold right no-divider">% Daily Value *</p>
|
||||
<div class="divider"></div>
|
||||
<p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
|
||||
<p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
|
||||
<div class="divider"></div>
|
||||
</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;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-bottom: 1px solid #888989;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.large {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.large, .medium {
|
||||
background-color: black;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.medium {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
|
||||
.calories-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.calories-info h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.left-container p {
|
||||
margin: -5px -2px;
|
||||
font-size: 2em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.calories-info span {
|
||||
margin: -7px -2px;
|
||||
font-size: 2.4em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.indent {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.daily-value p:not(.no-divider) {
|
||||
border-bottom: 1px solid #888989;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,165 @@
|
||||
---
|
||||
id: 615f7d489a581590d1350288
|
||||
title: Step 53
|
||||
challengeType: 0
|
||||
dashedName: step-53
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create another `.divider` after your last `p` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a new `div` element at the end of your `.daily-value` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'div');
|
||||
```
|
||||
|
||||
Your new `div` element should have the `class` attribute set to `divider`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-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>2/3 cup (55g)</span></p>
|
||||
</header>
|
||||
<div class="divider large"></div>
|
||||
<div class="calories-info">
|
||||
<div class="left-container">
|
||||
<h2 class="bold small-text">Amount per serving</h2>
|
||||
<p>Calories</p>
|
||||
</div>
|
||||
<span>230</span>
|
||||
</div>
|
||||
<div class="divider medium"></div>
|
||||
--fcc-editable-region--
|
||||
<div class="daily-value small-text">
|
||||
<p class="bold right no-divider">% Daily Value *</p>
|
||||
<div class="divider"></div>
|
||||
<p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
|
||||
<p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
|
||||
<div class="divider"></div>
|
||||
<p class="indent no-divider"><span><i>Trans</i> Fat 0g</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;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-bottom: 1px solid #888989;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.large {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.large, .medium {
|
||||
background-color: black;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.medium {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
|
||||
.calories-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.calories-info h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.left-container p {
|
||||
margin: -5px -2px;
|
||||
font-size: 2em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.calories-info span {
|
||||
margin: -7px -2px;
|
||||
font-size: 2.4em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.indent {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.daily-value p:not(.no-divider) {
|
||||
border-bottom: 1px solid #888989;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,215 @@
|
||||
---
|
||||
id: 615f7de4487b64919bb4aa5e
|
||||
title: Step 54
|
||||
challengeType: 0
|
||||
dashedName: step-54
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
After your last `.divider`, create a new `p` element with the text `Cholesterol 0mg 0%`. Then, wrap the text `Cholesterol` in a `span` element, `0%` in another, and give each of them a class of `bold`.
|
||||
|
||||
Finally, nest the `span` element containing the text `Cholesterol` along with the text `0mg`, in an additional `span` element for alignment.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a new `p` element at the end of your `.daily-value` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
|
||||
```
|
||||
|
||||
Your new `p` element should have the text `Cholesterol 0mg 0%`.
|
||||
|
||||
```js
|
||||
const text = document.querySelector('.daily-value.small-text')?.lastElementChild?.textContent?.trim()?.replace(/\n/g, ' ')?.replace(/\s\s+/g, ' ');
|
||||
assert(text === 'Cholesterol 0mg 0%');
|
||||
```
|
||||
|
||||
Your new `p` element should have exactly three `span` elements.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 3);
|
||||
```
|
||||
|
||||
The text `Cholesterol` should be nested in a `span`.
|
||||
|
||||
```js
|
||||
const spans = [...document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')];
|
||||
const cholesterolSpan = spans.filter(span => span?.innerHTML?.match(/^[\s\n]*Cholesterol[\s\n]*$/));
|
||||
assert(cholesterolSpan.length === 1);
|
||||
```
|
||||
|
||||
Your `Cholesterol` `span` should have the `class` attribute set to `bold`.
|
||||
|
||||
```js
|
||||
const spans = [...document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')];
|
||||
const cholesterolSpan = spans.filter(span => span?.innerHTML?.match(/^[\s\n]*Cholesterol[\s\n]*$/));
|
||||
assert(cholesterolSpan[0]?.classList?.contains('bold'));
|
||||
```
|
||||
|
||||
The text `0%` should be nested in a `span`.
|
||||
|
||||
```js
|
||||
const spans = [...document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')];
|
||||
const zeroPercentSpan = spans.filter(span => span?.innerHTML?.match(/^[\s\n]*0%[\s\n]*$/));
|
||||
assert(zeroPercentSpan.length === 1);
|
||||
```
|
||||
|
||||
Your `0%` `span` should have the `class` attribute set to `bold`.
|
||||
|
||||
```js
|
||||
const spans = [...document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')];
|
||||
const zeroPercentSpan = spans.filter(span => span?.innerHTML?.match(/^[\s\n]*0%[\s\n]*$/));
|
||||
assert(zeroPercentSpan[0]?.classList?.contains('bold'));
|
||||
```
|
||||
|
||||
Your `Cholesterol` `span` and your `0mg` text should be wrapped in a `span`.
|
||||
|
||||
```js
|
||||
const spans = [...document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')];
|
||||
const cholesterolZeroSpan = spans.filter(span => span?.innerText === 'Cholesterol 0mg');
|
||||
assert(cholesterolZeroSpan.length === 1);
|
||||
```
|
||||
|
||||
# --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>2/3 cup (55g)</span></p>
|
||||
</header>
|
||||
<div class="divider large"></div>
|
||||
<div class="calories-info">
|
||||
<div class="left-container">
|
||||
<h2 class="bold small-text">Amount per serving</h2>
|
||||
<p>Calories</p>
|
||||
</div>
|
||||
<span>230</span>
|
||||
</div>
|
||||
<div class="divider medium"></div>
|
||||
--fcc-editable-region--
|
||||
<div class="daily-value small-text">
|
||||
<p class="bold right no-divider">% Daily Value *</p>
|
||||
<div class="divider"></div>
|
||||
<p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
|
||||
<p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
|
||||
<div class="divider"></div>
|
||||
<p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
|
||||
<div class="divider"></div>
|
||||
</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;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-bottom: 1px solid #888989;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.large {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.large, .medium {
|
||||
background-color: black;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.medium {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
|
||||
.calories-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.calories-info h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.left-container p {
|
||||
margin: -5px -2px;
|
||||
font-size: 2em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.calories-info span {
|
||||
margin: -7px -2px;
|
||||
font-size: 2.4em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.indent {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.daily-value p:not(.no-divider) {
|
||||
border-bottom: 1px solid #888989;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,205 @@
|
||||
---
|
||||
id: 615f7e7281626a92bbd62da8
|
||||
title: Step 55
|
||||
challengeType: 0
|
||||
dashedName: step-55
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Below your last `p` element, create another `p` element with the text `Sodium 160mg 7%`. Put `Sodium` and `7%` each in their own `span` with a class of a `bold` like you did with the others.
|
||||
|
||||
Then, add an additional `span` element around `Sodium 160mg` for alignment again.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a new `p` element at the end of your `.daily-value` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
|
||||
```
|
||||
|
||||
Your new `p` element should have the text `Sodium 160mg 7%`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Sodium[\s|\n]160mg[\s|\n]+7%/));
|
||||
```
|
||||
|
||||
Your new `p` element should have three `span` elements.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 3);
|
||||
```
|
||||
|
||||
A `span` element should wrap the text `Sodium 160mg`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.innerText?.match(/Sodium[\s|\n]160mg/));
|
||||
```
|
||||
|
||||
A `span` element should wrap the text `Sodium`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.firstElementChild?.innerText === "Sodium");
|
||||
```
|
||||
|
||||
The `span` around `Sodium` should have the `class` attribute set to `bold`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.firstElementChild?.classList?.contains('bold'));
|
||||
```
|
||||
|
||||
A `span` element should wrap the text `7%`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.innerText === '7%');
|
||||
```
|
||||
|
||||
The `span` element around `7%` should have the `class` attribute set to `bold`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.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>2/3 cup (55g)</span></p>
|
||||
</header>
|
||||
<div class="divider large"></div>
|
||||
<div class="calories-info">
|
||||
<div class="left-container">
|
||||
<h2 class="bold small-text">Amount per serving</h2>
|
||||
<p>Calories</p>
|
||||
</div>
|
||||
<span>230</span>
|
||||
</div>
|
||||
<div class="divider medium"></div>
|
||||
--fcc-editable-region--
|
||||
<div class="daily-value small-text">
|
||||
<p class="bold right no-divider">% Daily Value *</p>
|
||||
<div class="divider"></div>
|
||||
<p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
|
||||
<p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
|
||||
<div class="divider"></div>
|
||||
<p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
|
||||
<div class="divider"></div>
|
||||
<p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</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;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-bottom: 1px solid #888989;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.large {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.large, .medium {
|
||||
background-color: black;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.medium {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
|
||||
.calories-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.calories-info h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.left-container p {
|
||||
margin: -5px -2px;
|
||||
font-size: 2em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.calories-info span {
|
||||
margin: -7px -2px;
|
||||
font-size: 2.4em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.indent {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.daily-value p:not(.no-divider) {
|
||||
border-bottom: 1px solid #888989;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,210 @@
|
||||
---
|
||||
id: 615f7ecb09de9a938ef94756
|
||||
title: Step 56
|
||||
challengeType: 0
|
||||
dashedName: step-56
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Below your last `p` element, add another `p` element with the text `Total Carbohydrate 37g 13%`. Like before, use `span` elements to make the text `Total Carbohydrate` and `13%` bold. Then, wrap the nutrient and amount in a `span` for alignment again.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a new `p` element at the end of your `.daily-value` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
|
||||
```
|
||||
|
||||
Your new `p` element should have the text `Total Carbohydrate 37g 13%`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Total Carbohydrate[\s|\n]+37g[\s|\n]+13%/));
|
||||
```
|
||||
|
||||
Your new `p` element should have three `span` elements.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 3);
|
||||
```
|
||||
|
||||
One `span` element should wrap the text `Total Carbohydrate 37g`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.innerText?.match(/Total Carbohydrate[\s|\n]+37g/));
|
||||
```
|
||||
|
||||
One `span` element should wrap the text `Total Carbohydrate`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.firstElementChild?.innerText === 'Total Carbohydrate');
|
||||
```
|
||||
|
||||
The `span` element around `Total Carbohydrate` should have the `class` attribute set to `bold`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.firstElementChild?.classList?.contains('bold'));
|
||||
```
|
||||
|
||||
A `span` element should wrap the text `13%`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.innerText === '13%');
|
||||
```
|
||||
|
||||
The `span` element around `13%` should have the `class` attribute set to `bold`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold'));
|
||||
```
|
||||
|
||||
Your second `span` element should wrap the text `13%`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-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>2/3 cup (55g)</span></p>
|
||||
</header>
|
||||
<div class="divider large"></div>
|
||||
<div class="calories-info">
|
||||
<div class="left-container">
|
||||
<h2 class="bold small-text">Amount per serving</h2>
|
||||
<p>Calories</p>
|
||||
</div>
|
||||
<span>230</span>
|
||||
</div>
|
||||
<div class="divider medium"></div>
|
||||
--fcc-editable-region--
|
||||
<div class="daily-value small-text">
|
||||
<p class="bold right no-divider">% Daily Value *</p>
|
||||
<div class="divider"></div>
|
||||
<p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
|
||||
<p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
|
||||
<div class="divider"></div>
|
||||
<p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
|
||||
<div class="divider"></div>
|
||||
<p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
|
||||
<p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</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;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-bottom: 1px solid #888989;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.large {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.large, .medium {
|
||||
background-color: black;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.medium {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
|
||||
.calories-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.calories-info h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.left-container p {
|
||||
margin: -5px -2px;
|
||||
font-size: 2em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.calories-info span {
|
||||
margin: -7px -2px;
|
||||
font-size: 2.4em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.indent {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.daily-value p:not(.no-divider) {
|
||||
border-bottom: 1px solid #888989;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,183 @@
|
||||
---
|
||||
id: 615f7fa959ab75948f96a0d6
|
||||
title: Step 57
|
||||
challengeType: 0
|
||||
dashedName: step-57
|
||||
---
|
||||
|
||||
# --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` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.localName === 'p');
|
||||
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'div');
|
||||
```
|
||||
|
||||
Your new `p` element should have the text `Dietary Fiber 4g`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-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.small-text p:last-of-type')?.classList?.contains('indent'));
|
||||
assert(document.querySelector('.daily-value.small-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.small-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>2/3 cup (55g)</span></p>
|
||||
</header>
|
||||
<div class="divider large"></div>
|
||||
<div class="calories-info">
|
||||
<div class="left-container">
|
||||
<h2 class="bold small-text">Amount per serving</h2>
|
||||
<p>Calories</p>
|
||||
</div>
|
||||
<span>230</span>
|
||||
</div>
|
||||
<div class="divider medium"></div>
|
||||
--fcc-editable-region--
|
||||
<div class="daily-value small-text">
|
||||
<p class="bold right no-divider">% Daily Value *</p>
|
||||
<div class="divider"></div>
|
||||
<p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
|
||||
<p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
|
||||
<div class="divider"></div>
|
||||
<p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
|
||||
<div class="divider"></div>
|
||||
<p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
|
||||
<p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
|
||||
<p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</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;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-bottom: 1px solid #888989;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.large {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.large, .medium {
|
||||
background-color: black;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.medium {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
|
||||
.calories-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.calories-info h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.left-container p {
|
||||
margin: -5px -2px;
|
||||
font-size: 2em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.calories-info span {
|
||||
margin: -7px -2px;
|
||||
font-size: 2.4em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.indent {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.daily-value p:not(.no-divider) {
|
||||
border-bottom: 1px solid #888989;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,185 @@
|
||||
---
|
||||
id: 615f808d85793195b0f53be9
|
||||
title: Step 58
|
||||
challengeType: 0
|
||||
dashedName: step-58
|
||||
---
|
||||
|
||||
# --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` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.localName === 'p');
|
||||
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'div');
|
||||
```
|
||||
|
||||
Your new `p` element should have the text `Total Sugars 12g`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-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.small-text p:last-of-type')?.classList?.contains('indent'));
|
||||
assert(document.querySelector('.daily-value.small-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.small-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>2/3 cup (55g)</span></p>
|
||||
</header>
|
||||
<div class="divider large"></div>
|
||||
<div class="calories-info">
|
||||
<div class="left-container">
|
||||
<h2 class="bold small-text">Amount per serving</h2>
|
||||
<p>Calories</p>
|
||||
</div>
|
||||
<span>230</span>
|
||||
</div>
|
||||
<div class="divider medium"></div>
|
||||
--fcc-editable-region--
|
||||
<div class="daily-value small-text">
|
||||
<p class="bold right no-divider">% Daily Value *</p>
|
||||
<div class="divider"></div>
|
||||
<p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
|
||||
<p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
|
||||
<div class="divider"></div>
|
||||
<p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
|
||||
<div class="divider"></div>
|
||||
<p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
|
||||
<p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
|
||||
<p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
|
||||
<p class="indent no-divider">Dietary Fiber 4g</p>
|
||||
<div class="divider"></div>
|
||||
</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;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-bottom: 1px solid #888989;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.large {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.large, .medium {
|
||||
background-color: black;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.medium {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
|
||||
.calories-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.calories-info h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.left-container p {
|
||||
margin: -5px -2px;
|
||||
font-size: 2em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.calories-info span {
|
||||
margin: -7px -2px;
|
||||
font-size: 2.4em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.indent {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.daily-value p:not(.no-divider) {
|
||||
border-bottom: 1px solid #888989;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,169 @@
|
||||
---
|
||||
id: 615f829d07b18f96f6f6684b
|
||||
title: Step 59
|
||||
challengeType: 0
|
||||
dashedName: step-59
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The advantage to creating these dividers is that you can apply specific classes to style them individually. Add `double-indent` to the `class` for your last `.divider`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your last `.divider` element should have `double-indent` added to the `class`. Do not remove the existing value.
|
||||
|
||||
```js
|
||||
const last = document.querySelector('.daily-value.small-text')?.lastElementChild;
|
||||
assert(last?.classList?.contains('double-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>2/3 cup (55g)</span></p>
|
||||
</header>
|
||||
<div class="divider large"></div>
|
||||
<div class="calories-info">
|
||||
<div class="left-container">
|
||||
<h2 class="bold small-text">Amount per serving</h2>
|
||||
<p>Calories</p>
|
||||
</div>
|
||||
<span>230</span>
|
||||
</div>
|
||||
<div class="divider medium"></div>
|
||||
<div class="daily-value small-text">
|
||||
<p class="bold right no-divider">% Daily Value *</p>
|
||||
<div class="divider"></div>
|
||||
<p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
|
||||
<p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
|
||||
<div class="divider"></div>
|
||||
<p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
|
||||
<div class="divider"></div>
|
||||
<p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
|
||||
<p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
|
||||
<p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="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>
|
||||
--fcc-editable-region--
|
||||
<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;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-bottom: 1px solid #888989;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.large {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.large, .medium {
|
||||
background-color: black;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.medium {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
|
||||
.calories-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.calories-info h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.left-container p {
|
||||
margin: -5px -2px;
|
||||
font-size: 2em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.calories-info span {
|
||||
margin: -7px -2px;
|
||||
font-size: 2.4em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.indent {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.daily-value p:not(.no-divider) {
|
||||
border-bottom: 1px solid #888989;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,182 @@
|
||||
---
|
||||
id: 615f83ef928ec9982b785b6a
|
||||
title: Step 60
|
||||
challengeType: 0
|
||||
dashedName: step-60
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create a `.double-indent` selector and give it a left margin of `2em`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a new `.double-indent` selector.
|
||||
|
||||
```js
|
||||
assert.isNotNull(new __helpers.CSSHelp(document).getStyle('.double-indent'));
|
||||
```
|
||||
|
||||
Your `.double-indent` selector should have a `margin-left` property set to `2em`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.double-indent')?.marginLeft, '2em');
|
||||
```
|
||||
|
||||
Your `.double-indent` selector should only set the `margin-left` property, not other margin properties.
|
||||
|
||||
```js
|
||||
const { marginTop, marginRight, marginBottom } = new __helpers.CSSHelp(document).getStyle('.double-indent') ?? {};
|
||||
assert.isTrue([marginTop, marginRight, marginBottom].every(prop => prop === ''));
|
||||
```
|
||||
|
||||
# --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>2/3 cup (55g)</span></p>
|
||||
</header>
|
||||
<div class="divider large"></div>
|
||||
<div class="calories-info">
|
||||
<div class="left-container">
|
||||
<h2 class="bold small-text">Amount per serving</h2>
|
||||
<p>Calories</p>
|
||||
</div>
|
||||
<span>230</span>
|
||||
</div>
|
||||
<div class="divider medium"></div>
|
||||
<div class="daily-value small-text">
|
||||
<p class="bold right no-divider">% Daily Value *</p>
|
||||
<div class="divider"></div>
|
||||
<p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
|
||||
<p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
|
||||
<div class="divider"></div>
|
||||
<p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
|
||||
<div class="divider"></div>
|
||||
<p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
|
||||
<p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
|
||||
<p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="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 double-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;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-bottom: 1px solid #888989;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.large {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.large, .medium {
|
||||
background-color: black;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.medium {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
|
||||
.calories-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.calories-info h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.left-container p {
|
||||
margin: -5px -2px;
|
||||
font-size: 2em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.calories-info span {
|
||||
margin: -7px -2px;
|
||||
font-size: 2.4em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.indent {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.daily-value p:not(.no-divider) {
|
||||
border-bottom: 1px solid #888989;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,211 @@
|
||||
---
|
||||
id: 615f84f246e8ba98e3cd97be
|
||||
title: Step 61
|
||||
challengeType: 0
|
||||
dashedName: step-61
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Below your `.double-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` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.localName === 'p');
|
||||
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'div');
|
||||
```
|
||||
|
||||
Your new `p` element should have the text `Includes 10g Added Sugars 20%`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-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 `double-indent no-divider`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('double-indent'));
|
||||
assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('no-divider'));
|
||||
```
|
||||
|
||||
Your new `p` element should have a `span` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-text p:last-of-type')?.firstElementChild?.localName === 'span');
|
||||
```
|
||||
|
||||
Your `span` element should have the `class` attribute set to `bold`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-text p:last-of-type')?.firstElementChild?.classList?.contains('bold'));
|
||||
```
|
||||
|
||||
Your `span` element should wrap the text `20%`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-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.small-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>2/3 cup (55g)</span></p>
|
||||
</header>
|
||||
<div class="divider large"></div>
|
||||
<div class="calories-info">
|
||||
<div class="left-container">
|
||||
<h2 class="bold small-text">Amount per serving</h2>
|
||||
<p>Calories</p>
|
||||
</div>
|
||||
<span>230</span>
|
||||
</div>
|
||||
<div class="divider medium"></div>
|
||||
--fcc-editable-region--
|
||||
<div class="daily-value small-text">
|
||||
<p class="bold right no-divider">% Daily Value *</p>
|
||||
<div class="divider"></div>
|
||||
<p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
|
||||
<p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
|
||||
<div class="divider"></div>
|
||||
<p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
|
||||
<div class="divider"></div>
|
||||
<p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
|
||||
<p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
|
||||
<p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="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 double-indent"></div>
|
||||
</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;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-bottom: 1px solid #888989;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.large {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.large, .medium {
|
||||
background-color: black;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.medium {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
|
||||
.calories-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.calories-info h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.left-container p {
|
||||
margin: -5px -2px;
|
||||
font-size: 2em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.calories-info span {
|
||||
margin: -7px -2px;
|
||||
font-size: 2.4em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.indent {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.double-indent {
|
||||
margin-left: 2em;
|
||||
}
|
||||
|
||||
.daily-value p:not(.no-divider) {
|
||||
border-bottom: 1px solid #888989;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,208 @@
|
||||
---
|
||||
id: 615f887466db4ba14b5342cc
|
||||
title: Step 62
|
||||
challengeType: 0
|
||||
dashedName: step-62
|
||||
---
|
||||
|
||||
# --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. Then wrap the text `Protein 3g` including the new `span` element, in a new `span` element.
|
||||
|
||||
Following this element, create a large divider.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a new `p` and `div` element at the end of your `.daily-value` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.localName === 'p');
|
||||
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'div');
|
||||
```
|
||||
|
||||
Your new `p` element should have the text `Protein 3g`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-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.small-text p:last-of-type')?.classList?.contains('no-divider'));
|
||||
```
|
||||
|
||||
You should have a `span` element with the class `bold` around the text `Protein`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-text p:last-of-type span.bold')?.innerText === 'Protein');
|
||||
```
|
||||
|
||||
You should have a `span` element around the text `Protein 3g`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-text > p:last-of-type > span > span.bold')?.innerText === 'Protein');
|
||||
assert(document.querySelector('.daily-value.small-text > p:last-of-type > span')?.innerText === 'Protein 3g');
|
||||
```
|
||||
|
||||
Your new `div` should have the `class` attribute set to `divider large`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('divider'));
|
||||
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('large'));
|
||||
```
|
||||
|
||||
# --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>2/3 cup (55g)</span></p>
|
||||
</header>
|
||||
<div class="divider large"></div>
|
||||
<div class="calories-info">
|
||||
<div class="left-container">
|
||||
<h2 class="bold small-text">Amount per serving</h2>
|
||||
<p>Calories</p>
|
||||
</div>
|
||||
<span>230</span>
|
||||
</div>
|
||||
<div class="divider medium"></div>
|
||||
--fcc-editable-region--
|
||||
<div class="daily-value small-text">
|
||||
<p class="bold right no-divider">% Daily Value *</p>
|
||||
<div class="divider"></div>
|
||||
<p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
|
||||
<p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
|
||||
<div class="divider"></div>
|
||||
<p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
|
||||
<div class="divider"></div>
|
||||
<p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
|
||||
<p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
|
||||
<p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="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 double-indent"></div>
|
||||
<p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
|
||||
<div class="divider"></div>
|
||||
</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;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-bottom: 1px solid #888989;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.large {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.large, .medium {
|
||||
background-color: black;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.medium {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
|
||||
.calories-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.calories-info h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.left-container p {
|
||||
margin: -5px -2px;
|
||||
font-size: 2em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.calories-info span {
|
||||
margin: -7px -2px;
|
||||
font-size: 2.4em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.indent {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.double-indent {
|
||||
margin-left: 2em;
|
||||
}
|
||||
|
||||
.daily-value p:not(.no-divider) {
|
||||
border-bottom: 1px solid #888989;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,195 @@
|
||||
---
|
||||
id: 615f89e055040ba294719d2f
|
||||
title: Step 63
|
||||
challengeType: 0
|
||||
dashedName: step-63
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create another `p` element below your large divider. Give the `p` element the text `Vitamin D 2mcg 10%`.
|
||||
|
||||
The `p` element contains only text, you can wrap the percentage in a `span` element so that it is considered a separate entity from the rest of the text, and it's moved to the right.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a new `p` element at the end of your `.daily-value` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
|
||||
```
|
||||
|
||||
Your new `p` element should have the text `Vitamin D 2mcg 10%`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-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.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 1);
|
||||
```
|
||||
|
||||
Your `span` element should not be bold.
|
||||
|
||||
```js
|
||||
assert(!document.querySelector('.daily-value.small-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>2/3 cup (55g)</span></p>
|
||||
</header>
|
||||
<div class="divider large"></div>
|
||||
<div class="calories-info">
|
||||
<div class="left-container">
|
||||
<h2 class="bold small-text">Amount per serving</h2>
|
||||
<p>Calories</p>
|
||||
</div>
|
||||
<span>230</span>
|
||||
</div>
|
||||
<div class="divider medium"></div>
|
||||
--fcc-editable-region--
|
||||
<div class="daily-value small-text">
|
||||
<p class="bold right no-divider">% Daily Value *</p>
|
||||
<div class="divider"></div>
|
||||
<p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
|
||||
<p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
|
||||
<div class="divider"></div>
|
||||
<p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
|
||||
<div class="divider"></div>
|
||||
<p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
|
||||
<p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
|
||||
<p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="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 double-indent"></div>
|
||||
<p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
|
||||
<div class="divider"></div>
|
||||
<p class="no-divider"><span><span class="bold">Protein</span> 3g</span></p>
|
||||
<div class="divider large"></div>
|
||||
</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;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-bottom: 1px solid #888989;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.large {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.large, .medium {
|
||||
background-color: black;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.medium {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
|
||||
.calories-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.calories-info h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.left-container p {
|
||||
margin: -5px -2px;
|
||||
font-size: 2em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.calories-info span {
|
||||
margin: -7px -2px;
|
||||
font-size: 2.4em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.indent {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.double-indent {
|
||||
margin-left: 2em;
|
||||
}
|
||||
|
||||
.daily-value p:not(.no-divider) {
|
||||
border-bottom: 1px solid #888989;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,219 @@
|
||||
---
|
||||
id: 615f8bfe0f30a1a3c340356b
|
||||
title: Step 64
|
||||
challengeType: 0
|
||||
dashedName: step-64
|
||||
---
|
||||
|
||||
# --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` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
|
||||
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.localName === 'p');
|
||||
```
|
||||
|
||||
Your first new `p` element should have the text `Calcium 260mg 20%`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-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.small-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.localName === 'span');
|
||||
```
|
||||
|
||||
Your first `span` element should not be bold.
|
||||
|
||||
```js
|
||||
assert(!document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.classList?.contains('bold'));
|
||||
```
|
||||
|
||||
Your first `span` element should wrap the text `20%`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.innerText === '20%');
|
||||
```
|
||||
|
||||
Your second new `p` element should have the text `Iron 8mg 45%`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-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.small-text')?.lastElementChild?.firstElementChild?.localName === 'span');
|
||||
```
|
||||
|
||||
Your second `span` element should not be bold.
|
||||
|
||||
```js
|
||||
assert(!document.querySelector('.daily-value.small-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>2/3 cup (55g)</span></p>
|
||||
</header>
|
||||
<div class="divider large"></div>
|
||||
<div class="calories-info">
|
||||
<div class="left-container">
|
||||
<h2 class="bold small-text">Amount per serving</h2>
|
||||
<p>Calories</p>
|
||||
</div>
|
||||
<span>230</span>
|
||||
</div>
|
||||
<div class="divider medium"></div>
|
||||
--fcc-editable-region--
|
||||
<div class="daily-value small-text">
|
||||
<p class="bold right no-divider">% Daily Value *</p>
|
||||
<div class="divider"></div>
|
||||
<p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
|
||||
<p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
|
||||
<div class="divider"></div>
|
||||
<p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
|
||||
<div class="divider"></div>
|
||||
<p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
|
||||
<p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
|
||||
<p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="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 double-indent"></div>
|
||||
<p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
|
||||
<div class="divider"></div>
|
||||
<p class="no-divider"><span><span class="bold">Protein</span> 3g</span></p>
|
||||
<div class="divider large"></div>
|
||||
<p>Vitamin D 2mcg <span>10%</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;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-bottom: 1px solid #888989;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.large {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.large, .medium {
|
||||
background-color: black;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.medium {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
|
||||
.calories-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.calories-info h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.left-container p {
|
||||
margin: -5px -2px;
|
||||
font-size: 2em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.calories-info span {
|
||||
margin: -7px -2px;
|
||||
font-size: 2.4em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.indent {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.double-indent {
|
||||
margin-left: 2em;
|
||||
}
|
||||
|
||||
.daily-value p:not(.no-divider) {
|
||||
border-bottom: 1px solid #888989;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,202 @@
|
||||
---
|
||||
id: 615f8f1223601fa546e93f31
|
||||
title: Step 65
|
||||
challengeType: 0
|
||||
dashedName: step-65
|
||||
---
|
||||
|
||||
# --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` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
|
||||
```
|
||||
|
||||
Your new `p` element should have the `class` attribute set to `no-divider`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('no-divider'));
|
||||
```
|
||||
|
||||
Your new `p` element should have the text `Potassium 235mg 6%`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Potassium 235mg[\s|\n]+6%/));
|
||||
```
|
||||
|
||||
Your new `p` element should have a `span` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 1);
|
||||
```
|
||||
|
||||
Your `span` element should not be bold.
|
||||
|
||||
```js
|
||||
assert(!document.querySelector('.daily-value.small-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>2/3 cup (55g)</span></p>
|
||||
</header>
|
||||
<div class="divider large"></div>
|
||||
<div class="calories-info">
|
||||
<div class="left-container">
|
||||
<h2 class="bold small-text">Amount per serving</h2>
|
||||
<p>Calories</p>
|
||||
</div>
|
||||
<span>230</span>
|
||||
</div>
|
||||
<div class="divider medium"></div>
|
||||
--fcc-editable-region--
|
||||
<div class="daily-value small-text">
|
||||
<p class="bold right no-divider">% Daily Value *</p>
|
||||
<div class="divider"></div>
|
||||
<p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
|
||||
<p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
|
||||
<div class="divider"></div>
|
||||
<p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
|
||||
<div class="divider"></div>
|
||||
<p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
|
||||
<p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
|
||||
<p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="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 double-indent"></div>
|
||||
<p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
|
||||
<div class="divider"></div>
|
||||
<p class="no-divider"><span><span class="bold">Protein</span> 3g</span></p>
|
||||
<div class="divider large"></div>
|
||||
<p>Vitamin D 2mcg <span>10%</span></p>
|
||||
<p>Calcium 260mg <span>20%</span></p>
|
||||
<p>Iron 8mg <span>45%</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;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-bottom: 1px solid #888989;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.large {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.large, .medium {
|
||||
background-color: black;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.medium {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
|
||||
.calories-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.calories-info h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.left-container p {
|
||||
margin: -5px -2px;
|
||||
font-size: 2em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.calories-info span {
|
||||
margin: -7px -2px;
|
||||
font-size: 2.4em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.indent {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.double-indent {
|
||||
margin-left: 2em;
|
||||
}
|
||||
|
||||
.daily-value p:not(.no-divider) {
|
||||
border-bottom: 1px solid #888989;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,211 @@
|
||||
---
|
||||
id: 615f905fbd1017a65ca224eb
|
||||
title: Step 66
|
||||
challengeType: 0
|
||||
dashedName: step-66
|
||||
---
|
||||
|
||||
# --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:
|
||||
|
||||
```markup
|
||||
* 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 medium`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value')?.nextElementSibling?.classList?.contains('divider'));
|
||||
assert(document.querySelector('.daily-value')?.nextElementSibling?.classList?.contains('medium'));
|
||||
```
|
||||
|
||||
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.equal(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>2/3 cup (55g)</span></p>
|
||||
</header>
|
||||
<div class="divider large"></div>
|
||||
<div class="calories-info">
|
||||
<div class="left-container">
|
||||
<h2 class="bold small-text">Amount per serving</h2>
|
||||
<p>Calories</p>
|
||||
</div>
|
||||
<span>230</span>
|
||||
</div>
|
||||
<div class="divider medium"></div>
|
||||
<div class="daily-value small-text">
|
||||
<p class="bold right no-divider">% Daily Value *</p>
|
||||
<div class="divider"></div>
|
||||
<p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
|
||||
<p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
|
||||
<div class="divider"></div>
|
||||
<p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
|
||||
<div class="divider"></div>
|
||||
<p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
|
||||
<p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
|
||||
<p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="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 double-indent"></div>
|
||||
<p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
|
||||
<div class="divider"></div>
|
||||
<p class="no-divider"><span><span class="bold">Protein</span> 3g</span></p>
|
||||
<div class="divider large"></div>
|
||||
<p>Vitamin D 2mcg <span>10%</span></p>
|
||||
<p>Calcium 260mg <span>20%</span></p>
|
||||
<p>Iron 8mg <span>45%</span></p>
|
||||
<p class="no-divider">Potassium 235mg <span>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;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-bottom: 1px solid #888989;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.large {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.large, .medium {
|
||||
background-color: black;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.medium {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
|
||||
.calories-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.calories-info h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.left-container p {
|
||||
margin: -5px -2px;
|
||||
font-size: 2em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.calories-info span {
|
||||
margin: -7px -2px;
|
||||
font-size: 2.4em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.indent {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.double-indent {
|
||||
margin-left: 2em;
|
||||
}
|
||||
|
||||
.daily-value p:not(.no-divider) {
|
||||
border-bottom: 1px solid #888989;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,196 @@
|
||||
---
|
||||
id: 615f94786869e1a7fec54375
|
||||
title: Step 67
|
||||
challengeType: 0
|
||||
dashedName: step-67
|
||||
---
|
||||
|
||||
# --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>2/3 cup (55g)</span></p>
|
||||
</header>
|
||||
<div class="divider large"></div>
|
||||
<div class="calories-info">
|
||||
<div class="left-container">
|
||||
<h2 class="bold small-text">Amount per serving</h2>
|
||||
<p>Calories</p>
|
||||
</div>
|
||||
<span>230</span>
|
||||
</div>
|
||||
<div class="divider medium"></div>
|
||||
<div class="daily-value small-text">
|
||||
<p class="bold right no-divider">% Daily Value *</p>
|
||||
<div class="divider"></div>
|
||||
<p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
|
||||
<p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
|
||||
<div class="divider"></div>
|
||||
<p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
|
||||
<div class="divider"></div>
|
||||
<p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
|
||||
<p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
|
||||
<p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="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 double-indent"></div>
|
||||
<p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
|
||||
<div class="divider"></div>
|
||||
<p class="no-divider"><span><span class="bold">Protein</span> 3g</span></p>
|
||||
<div class="divider large"></div>
|
||||
<p>Vitamin D 2mcg <span>10%</span></p>
|
||||
<p>Calcium 260mg <span>20%</span></p>
|
||||
<p>Iron 8mg <span>45%</span></p>
|
||||
<p class="no-divider">Potassium 235mg <span>6%</span></p>
|
||||
</div>
|
||||
<div class="divider medium"></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;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-bottom: 1px solid #888989;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.large {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.large, .medium {
|
||||
background-color: black;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.medium {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
|
||||
.calories-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.calories-info h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.left-container p {
|
||||
margin: -5px -2px;
|
||||
font-size: 2em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.calories-info span {
|
||||
margin: -7px -2px;
|
||||
font-size: 2.4em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.indent {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.double-indent {
|
||||
margin-left: 2em;
|
||||
}
|
||||
|
||||
.daily-value p:not(.no-divider) {
|
||||
border-bottom: 1px solid #888989;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,365 @@
|
||||
---
|
||||
id: 615f951dff9317a900ef683f
|
||||
title: Step 68
|
||||
challengeType: 0
|
||||
dashedName: step-68
|
||||
---
|
||||
|
||||
# --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.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingTop, '0px');
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingBottom, '0px');
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingLeft, '8px');
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingRight, '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>2/3 cup (55g)</span></p>
|
||||
</header>
|
||||
<div class="divider large"></div>
|
||||
<div class="calories-info">
|
||||
<div class="left-container">
|
||||
<h2 class="bold small-text">Amount per serving</h2>
|
||||
<p>Calories</p>
|
||||
</div>
|
||||
<span>230</span>
|
||||
</div>
|
||||
<div class="divider medium"></div>
|
||||
<div class="daily-value small-text">
|
||||
<p class="bold right no-divider">% Daily Value *</p>
|
||||
<div class="divider"></div>
|
||||
<p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
|
||||
<p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
|
||||
<div class="divider"></div>
|
||||
<p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
|
||||
<div class="divider"></div>
|
||||
<p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
|
||||
<p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
|
||||
<p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="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 double-indent"></div>
|
||||
<p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
|
||||
<div class="divider"></div>
|
||||
<p class="no-divider"><span><span class="bold">Protein</span> 3g</span></p>
|
||||
<div class="divider large"></div>
|
||||
<p>Vitamin D 2mcg <span>10%</span></p>
|
||||
<p>Calcium 260mg <span>20%</span></p>
|
||||
<p>Iron 8mg <span>45%</span></p>
|
||||
<p class="no-divider">Potassium 235mg <span>6%</span></p>
|
||||
</div>
|
||||
<div class="divider medium"></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;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-bottom: 1px solid #888989;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.large {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.large, .medium {
|
||||
background-color: black;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.medium {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
|
||||
.calories-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.calories-info h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.left-container p {
|
||||
margin: -5px -2px;
|
||||
font-size: 2em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.calories-info span {
|
||||
margin: -7px -2px;
|
||||
font-size: 2.4em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.indent {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.double-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--
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```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>2/3 cup (55g)</span></p>
|
||||
</header>
|
||||
<div class="divider large"></div>
|
||||
<div class="calories-info">
|
||||
<div class="left-container">
|
||||
<h2 class="bold small-text">Amount per serving</h2>
|
||||
<p>Calories</p>
|
||||
</div>
|
||||
<span>230</span>
|
||||
</div>
|
||||
<div class="divider medium"></div>
|
||||
<div class="daily-value small-text">
|
||||
<p class="bold right no-divider">% Daily Value *</p>
|
||||
<div class="divider"></div>
|
||||
<p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
|
||||
<p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
|
||||
<div class="divider"></div>
|
||||
<p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
|
||||
<div class="divider"></div>
|
||||
<p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
|
||||
<p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
|
||||
<p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="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 double-indent"></div>
|
||||
<p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
|
||||
<div class="divider"></div>
|
||||
<p class="no-divider"><span><span class="bold">Protein</span> 3g</span></p>
|
||||
<div class="divider large"></div>
|
||||
<p>Vitamin D 2mcg <span>10%</span></p>
|
||||
<p>Calcium 260mg <span>20%</span></p>
|
||||
<p>Iron 8mg <span>45%</span></p>
|
||||
<p class="no-divider">Potassium 235mg <span>6%</span></p>
|
||||
</div>
|
||||
<div class="divider medium"></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;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-bottom: 1px solid #888989;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.large {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.large, .medium {
|
||||
background-color: black;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.medium {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
|
||||
.calories-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.calories-info h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.left-container p {
|
||||
margin: -5px -2px;
|
||||
font-size: 2em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.calories-info span {
|
||||
margin: -7px -2px;
|
||||
font-size: 2.4em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.indent {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.double-indent {
|
||||
margin-left: 2em;
|
||||
}
|
||||
|
||||
.daily-value p:not(.no-divider) {
|
||||
border-bottom: 1px solid #888989;
|
||||
}
|
||||
|
||||
.note {
|
||||
font-size: 0.6rem;
|
||||
margin: 5px 0;
|
||||
padding: 0 8px;
|
||||
text-indent: -8px;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,153 @@
|
||||
---
|
||||
id: 635bde33c91c80540eae239b
|
||||
title: Step 41
|
||||
challengeType: 0
|
||||
dashedName: step-41
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The text `% Daily Value *` should be aligned to the right. Create a `.right` selector and use the `justify-content` property to do it.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.right` selector.
|
||||
|
||||
```js
|
||||
const hasRight = new __helpers.CSSHelp(document).getStyle('.right');
|
||||
assert(hasRight);
|
||||
|
||||
```
|
||||
|
||||
The `.right` selector should have the `justify-content` property set to `flex-end`.
|
||||
|
||||
```js
|
||||
const rightJustifyContent = new __helpers.CSSHelp(document).getStyle('.right')?.getPropertyValue('justify-content');
|
||||
assert(rightJustifyContent === 'flex-end');
|
||||
|
||||
```
|
||||
|
||||
# --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>2/3 cup (55g)</span></p>
|
||||
</header>
|
||||
<div class="divider large"></div>
|
||||
<div class="calories-info">
|
||||
<div class="left-container">
|
||||
<h2 class="bold small-text">Amount per serving</h2>
|
||||
<p>Calories</p>
|
||||
</div>
|
||||
<span>230</span>
|
||||
</div>
|
||||
<div class="divider medium"></div>
|
||||
<div class="daily-value small-text">
|
||||
<p class="bold right">% Daily Value *</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;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-bottom: 1px solid #888989;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.large {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.large, .medium {
|
||||
background-color: black;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.medium {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.calories-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.calories-info h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.left-container p {
|
||||
margin: -5px -2px;
|
||||
font-size: 2em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.calories-info span {
|
||||
margin: -7px -2px;
|
||||
font-size: 2.4em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,117 @@
|
||||
---
|
||||
id: 6395d33ab5d91bf317107c48
|
||||
title: Step 32
|
||||
challengeType: 0
|
||||
dashedName: step-32
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create a `.calories-info h2` selector and remove all margins.
|
||||
|
||||
# --hints--
|
||||
|
||||
Create a `.calories-info h2` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.calories-info h2'));
|
||||
```
|
||||
|
||||
Your `.calories-info h2` selector should have a `margin` set to `0`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.calories-info h2')?.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">
|
||||
<header>
|
||||
<h1 class="bold">Nutrition Facts</h1>
|
||||
<div class="divider"></div>
|
||||
<p>8 servings per container</p>
|
||||
<p class="bold">Serving size <span>2/3 cup (55g)</span></p>
|
||||
</header>
|
||||
<div class="divider large"></div>
|
||||
<div class="calories-info">
|
||||
<div class="left-container">
|
||||
<h2 class="bold small-text">Amount per serving</h2>
|
||||
</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;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-bottom: 1px solid #888989;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.large {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.large, .medium {
|
||||
background-color: black;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,135 @@
|
||||
---
|
||||
id: 6396e33fe478dd264ebbf278
|
||||
title: Step 34
|
||||
challengeType: 0
|
||||
dashedName: step-34
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create a new `.calories-info` selector and give it a `display` property set to `flex`. Also give it a `justify-content` property set to `space-between` and `align-items` property set to `flex-end`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a `.calories-info` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.calories-info'));
|
||||
```
|
||||
|
||||
Your `.calories-info` selector should have a `display` property set to `flex`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.calories-info')?.display === 'flex');
|
||||
```
|
||||
|
||||
Your `.calories-info` selector should have a `justify-content` property set to `space-between`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.calories-info')?.justifyContent === 'space-between');
|
||||
```
|
||||
|
||||
Your `.calories-info` selector should have a `align-items` property set to `flex-end`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.calories-info')?.alignItems === 'flex-end');
|
||||
```
|
||||
|
||||
# --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>2/3 cup (55g)</span></p>
|
||||
</header>
|
||||
<div class="divider large"></div>
|
||||
<div class="calories-info">
|
||||
<div class="left-container">
|
||||
<h2 class="bold small-text">Amount per serving</h2>
|
||||
<p>Calories</p>
|
||||
</div>
|
||||
<span>230</span>
|
||||
</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;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-bottom: 1px solid #888989;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.large {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.large, .medium {
|
||||
background-color: black;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.calories-info h2 {
|
||||
margin: 0;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,147 @@
|
||||
---
|
||||
id: 667d1bb875f5961913176069
|
||||
title: Step 44
|
||||
challengeType: 0
|
||||
dashedName: step-44
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Notice how the text `8g` appears centered in the preview. Nest the `span` element containing the text `Total Fat` along with the text `8g`, in an additional `span` element for alignment.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `span` element around the code `<span class="bold">Total Fat</span> 8g`.
|
||||
|
||||
```js
|
||||
assert.match(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span')?.innerHTML, /^<span class=("|')bold\1>Total Fat<\/span> 8g\s?$/);
|
||||
```
|
||||
|
||||
# --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>2/3 cup (55g)</span></p>
|
||||
</header>
|
||||
<div class="divider large"></div>
|
||||
<div class="calories-info">
|
||||
<div class="left-container">
|
||||
<h2 class="bold small-text">Amount per serving</h2>
|
||||
<p>Calories</p>
|
||||
</div>
|
||||
<span>230</span>
|
||||
</div>
|
||||
<div class="divider medium"></div>
|
||||
<div class="daily-value small-text">
|
||||
<p class="bold right">% Daily Value *</p>
|
||||
<div class="divider"></div>
|
||||
--fcc-editable-region--
|
||||
<p><span class="bold">Total Fat</span> 8g <span class="bold">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;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-bottom: 1px solid #888989;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.large {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.large, .medium {
|
||||
background-color: black;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.medium {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.calories-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.calories-info h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.left-container p {
|
||||
margin: -5px -2px;
|
||||
font-size: 2em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.calories-info span {
|
||||
margin: -7px -2px;
|
||||
font-size: 2.4em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
```
|
||||
@@ -116,7 +116,74 @@ const duplicatedProjectIds = [
|
||||
// Flexbox Photo Gallery
|
||||
|
||||
// Nutrition Label
|
||||
|
||||
'615f2abbe7d18d49a1e0e1c8',
|
||||
'615f2d4150fe0d4cbd0f2628',
|
||||
'615f34948891834dd77655a6',
|
||||
'615f34ecc1091b4fd5a8a484',
|
||||
'615f357957e370510f21ea16',
|
||||
'615f378014c2da526a109c81',
|
||||
'615f38279e5c3d53692ea441',
|
||||
'615f38cabc64e3556f98cc1a',
|
||||
'615f3949f58e12577dcefb00',
|
||||
'615f39d7da41b15851fa3fb9',
|
||||
'615f3b091162165948e1cb33',
|
||||
'615f3cafd794015aa9547a6d',
|
||||
'615f3d9e59db4b5b8e960762',
|
||||
'615f3e1b7233ee5c7595771f',
|
||||
'615f3e4af8008c5d494d3afe',
|
||||
'615f3ed16592445e57941aec',
|
||||
'615f405b89a7ec5f8e2d11f4',
|
||||
'615f40b01f680e608d360ed4',
|
||||
'615f4172e9eec061d6456221',
|
||||
'615f41c979787462e76dab90',
|
||||
'615f423cf65d5864132a0956',
|
||||
'615f42a021625f656101ef93',
|
||||
'615f4bfb9de4a16703b56eb6',
|
||||
'615f4ce9d877b668417c0c42',
|
||||
'615f4dde9d72e3694cb9ee3b',
|
||||
'615f4ec58334106a4170c2a8',
|
||||
'615f4f9e4a40566b776a8f38',
|
||||
'615f50473cc0196c6dd3892a',
|
||||
'615f51257a8a516d80b6c743',
|
||||
'615f51e4e5b24a6e80eccce1',
|
||||
'615f522dea4f776f64dc3e91',
|
||||
'6395d33ab5d91bf317107c48',
|
||||
'615f5486b8fd4b71633f69b0',
|
||||
'6396e33fe478dd264ebbf278',
|
||||
'615f575b50b91e72af079480',
|
||||
'615f5af373a68e744a3c5a76',
|
||||
'615f5fd85d0062761f288364',
|
||||
'615f61338c8ca176d6445574',
|
||||
'615f666ac5edea782feb7e75',
|
||||
'615f671b6d1919792745aa5d',
|
||||
'635bde33c91c80540eae239b',
|
||||
'615f6823d0815b7a991f2a75',
|
||||
'615f6b2d164f81809efd9bdc',
|
||||
'667d1bb875f5961913176069',
|
||||
'615f6cc778f7698258467596',
|
||||
'615f6fddaac1e083502d3e6a',
|
||||
'615f70077a4ff98424236c1e',
|
||||
'615f72a872354a850d4f533e',
|
||||
'615f74a71f1e498619e38ee8',
|
||||
'615f7ad94380408d971d14f6',
|
||||
'615f7bc680f7168ea01ebf99',
|
||||
'615f7c71eab8218f846e4503',
|
||||
'615f7d489a581590d1350288',
|
||||
'615f7de4487b64919bb4aa5e',
|
||||
'615f7e7281626a92bbd62da8',
|
||||
'615f7ecb09de9a938ef94756',
|
||||
'615f7fa959ab75948f96a0d6',
|
||||
'615f808d85793195b0f53be9',
|
||||
'615f829d07b18f96f6f6684b',
|
||||
'615f83ef928ec9982b785b6a',
|
||||
'615f84f246e8ba98e3cd97be',
|
||||
'615f887466db4ba14b5342cc',
|
||||
'615f89e055040ba294719d2f',
|
||||
'615f8bfe0f30a1a3c340356b',
|
||||
'615f8f1223601fa546e93f31',
|
||||
'615f905fbd1017a65ca224eb',
|
||||
'615f94786869e1a7fec54375',
|
||||
'615f951dff9317a900ef683f',
|
||||
// Accessibility Quiz
|
||||
|
||||
// Tribute Page
|
||||
|
||||
Reference in New Issue
Block a user