jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-03-28 23:01:57 -04:00
Code Issues Projects Releases Wiki Activity

fix(curriculum): delineate span elements in typography (#55348)

Browse Source 
Co-authored-by: Tom <20648924+moT01@users.noreply.github.com>
This commit is contained in:
Supravisor
2024-08-05 19:22:09 +12:00
committed by GitHub
parent 19a200e2c4
commit acae8cd6b2
27 changed files with 235 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
curriculum/challenges/_meta/learn-typography-by-building-a-nutrition-label/meta.json
View File

@@ -181,100 +181,104 @@
"title": "Step 43"
},
{
"id": "615f6cc778f7698258467596",
"id": "667d1bb875f5961913176069",
"title": "Step 44"
},
{
"id": "615f6fddaac1e083502d3e6a",
"id": "615f6cc778f7698258467596",
"title": "Step 45"
},
{
"id": "615f70077a4ff98424236c1e",
"id": "615f6fddaac1e083502d3e6a",
"title": "Step 46"
},
{
"id": "615f72a872354a850d4f533e",
"id": "615f70077a4ff98424236c1e",
"title": "Step 47"
},
{
"id": "615f74a71f1e498619e38ee8",
"id": "615f72a872354a850d4f533e",
"title": "Step 48"
},
{
"id": "615f7ad94380408d971d14f6",
"id": "615f74a71f1e498619e38ee8",
"title": "Step 49"
},
{
"id": "615f7bc680f7168ea01ebf99",
"id": "615f7ad94380408d971d14f6",
"title": "Step 50"
},
{
"id": "615f7c71eab8218f846e4503",
"id": "615f7bc680f7168ea01ebf99",
"title": "Step 51"
},
{
"id": "615f7d489a581590d1350288",
"id": "615f7c71eab8218f846e4503",
"title": "Step 52"
},
{
"id": "615f7de4487b64919bb4aa5e",
"id": "615f7d489a581590d1350288",
"title": "Step 53"
},
{
"id": "615f7e7281626a92bbd62da8",
"id": "615f7de4487b64919bb4aa5e",
"title": "Step 54"
},
{
"id": "615f7ecb09de9a938ef94756",
"id": "615f7e7281626a92bbd62da8",
"title": "Step 55"
},
{
"id": "615f7fa959ab75948f96a0d6",
"id": "615f7ecb09de9a938ef94756",
"title": "Step 56"
},
{
"id": "615f808d85793195b0f53be9",
"id": "615f7fa959ab75948f96a0d6",
"title": "Step 57"
},
{
"id": "615f829d07b18f96f6f6684b",
"id": "615f808d85793195b0f53be9",
"title": "Step 58"
},
{
"id": "615f83ef928ec9982b785b6a",
"id": "615f829d07b18f96f6f6684b",
"title": "Step 59"
},
{
"id": "615f84f246e8ba98e3cd97be",
"id": "615f83ef928ec9982b785b6a",
"title": "Step 60"
},
{
"id": "615f887466db4ba14b5342cc",
"id": "615f84f246e8ba98e3cd97be",
"title": "Step 61"
},
{
"id": "615f89e055040ba294719d2f",
"id": "615f887466db4ba14b5342cc",
"title": "Step 62"
},
{
"id": "615f8bfe0f30a1a3c340356b",
"id": "615f89e055040ba294719d2f",
"title": "Step 63"
},
{
"id": "615f8f1223601fa546e93f31",
"id": "615f8bfe0f30a1a3c340356b",
"title": "Step 64"
},
{
"id": "615f905fbd1017a65ca224eb",
"id": "615f8f1223601fa546e93f31",
"title": "Step 65"
},
{
"id": "615f94786869e1a7fec54375",
"id": "615f905fbd1017a65ca224eb",
"title": "Step 66"
},
{
"id": "615f951dff9317a900ef683f",
"id": "615f94786869e1a7fec54375",
"title": "Step 67"
},
{
"id": "615f951dff9317a900ef683f",
"title": "Step 68"
}
]
}

16
curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6b2d164f81809efd9bdc.md
View File

@@ -7,7 +7,7 @@ dashedName: step-43
# --description--
After your last `.divider` element, create a `p` element and give it the text `Total Fat 8g 10%`. Wrap the text `Total Fat` in a `span` element with the `class` of `bold`. Wrap the text `10%` in another `span` element with the `class` of `bold`. Finally, nest the `Total Fat` `span` element and the text `8g` in an additional `span` element for alignment.
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--
@@ -23,22 +23,22 @@ Your new `p` element should have the text `Total Fat 8g 10%`.
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Total Fat[\s|\n]+8g[\s|\n]+10%/));
```
Your `p` element should have three `span` elements.
Your `p` element should have two `span` elements.
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 3);
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 > span')?.innerText === 'Total Fat');
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 > span')?.className === 'bold');
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span')?.className === 'bold');
```
A `span` element should wrap the text `10%`.
@@ -53,12 +53,6 @@ The `span` element around `10%` should have the `class` set to `bold`.
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.[1]?.className === 'bold');
```
A `span` element should have the text `Total Fat 8g`.
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Total Fat[\s|\n]+8g/));
```
# --seed--
## --seed-contents--

4
curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6cc778f7698258467596.md
View File

@@ -1,8 +1,8 @@
---
id: 615f6cc778f7698258467596
title: Step 44
title: Step 45
challengeType: 0
dashedName: step-44
dashedName: step-45
---
# --description--

4
curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6fddaac1e083502d3e6a.md
View File

@@ -1,8 +1,8 @@
---
id: 615f6fddaac1e083502d3e6a
title: Step 45
title: Step 46
challengeType: 0
dashedName: step-45
dashedName: step-46
---
# --description--

4
curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f70077a4ff98424236c1e.md
View File

@@ -1,8 +1,8 @@
---
id: 615f70077a4ff98424236c1e
title: Step 46
title: Step 47
challengeType: 0
dashedName: step-46
dashedName: step-47
---
# --description--

4
curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f72a872354a850d4f533e.md
View File

@@ -1,8 +1,8 @@
---
id: 615f72a872354a850d4f533e
title: Step 47
title: Step 48
challengeType: 0
dashedName: step-47
dashedName: step-48
---
# --description--

4
curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f74a71f1e498619e38ee8.md
View File

@@ -1,8 +1,8 @@
---
id: 615f74a71f1e498619e38ee8
title: Step 48
title: Step 49
challengeType: 0
dashedName: step-48
dashedName: step-49
---
# --description--

4
curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ad94380408d971d14f6.md
View File

@@ -1,8 +1,8 @@
---
id: 615f7ad94380408d971d14f6
title: Step 49
title: Step 50
challengeType: 0
dashedName: step-49
dashedName: step-50
---
# --description--

4
curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7bc680f7168ea01ebf99.md
View File

@@ -1,8 +1,8 @@
---
id: 615f7bc680f7168ea01ebf99
title: Step 50
title: Step 51
challengeType: 0
dashedName: step-50
dashedName: step-51
---
# --description--

4
curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7c71eab8218f846e4503.md
View File

@@ -1,8 +1,8 @@
---
id: 615f7c71eab8218f846e4503
title: Step 51
title: Step 52
challengeType: 0
dashedName: step-51
dashedName: step-52
---
# --description--

4
curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7d489a581590d1350288.md
View File

@@ -1,8 +1,8 @@
---
id: 615f7d489a581590d1350288
title: Step 52
title: Step 53
challengeType: 0
dashedName: step-52
dashedName: step-53
---
# --description--

8
curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7de4487b64919bb4aa5e.md
View File

@@ -1,13 +1,15 @@
---
id: 615f7de4487b64919bb4aa5e
title: Step 53
title: Step 54
challengeType: 0
dashedName: step-53
dashedName: step-54
---
# --description--
After your last `.divider`, create a new `p` element with the text `Cholesterol 0mg 0%`. Wrap the text `Cholesterol` in a `span` element, and give that `span` element the `class` of `bold`. Wrap the text `0%` in another `span` element, with the `class` of `bold`. Finally, nest the `Cholesterol` `span` element and the text `0mg` in an additional `span` element for alignment.
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--

8
curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md
View File

@@ -1,13 +1,15 @@
---
id: 615f7e7281626a92bbd62da8
title: Step 54
title: Step 55
challengeType: 0
dashedName: step-54
dashedName: step-55
---
# --description--
Below your last `p` element, create another `p` element with the text `Sodium 160mg 7%`. Wrap the text `Sodium` in a `span` element with a `class` attribute set to `bold`. Wrap the `7%` text in another `span` element with the `class` set to `bold`. Also add an additional `span` element around `Sodium 160mg` for aligning it correctly.
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--

6
curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ecb09de9a938ef94756.md
View File

@@ -1,13 +1,13 @@
---
id: 615f7ecb09de9a938ef94756
title: Step 55
title: Step 56
challengeType: 0
dashedName: step-55
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. Also add an additional `span` element around the `Total Carbohydrate 37g` text to have it aligned to the left and `13%` to the right.
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--

4
curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7fa959ab75948f96a0d6.md
View File

@@ -1,8 +1,8 @@
---
id: 615f7fa959ab75948f96a0d6
title: Step 56
title: Step 57
challengeType: 0
dashedName: step-56
dashedName: step-57
---
# --description--

4
curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f808d85793195b0f53be9.md
View File

@@ -1,8 +1,8 @@
---
id: 615f808d85793195b0f53be9
title: Step 57
title: Step 58
challengeType: 0
dashedName: step-57
dashedName: step-58
---
# --description--

4
curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f829d07b18f96f6f6684b.md
View File

@@ -1,8 +1,8 @@
---
id: 615f829d07b18f96f6f6684b
title: Step 58
title: Step 59
challengeType: 0
dashedName: step-58
dashedName: step-59
---
# --description--

4
curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f83ef928ec9982b785b6a.md
View File

@@ -1,8 +1,8 @@
---
id: 615f83ef928ec9982b785b6a
title: Step 59
title: Step 60
challengeType: 0
dashedName: step-59
dashedName: step-60
---
# --description--

4
curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f84f246e8ba98e3cd97be.md
View File

@@ -1,8 +1,8 @@
---
id: 615f84f246e8ba98e3cd97be
title: Step 60
title: Step 61
challengeType: 0
dashedName: step-60
dashedName: step-61
---
# --description--

4
curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f887466db4ba14b5342cc.md
View File

@@ -1,8 +1,8 @@
---
id: 615f887466db4ba14b5342cc
title: Step 61
title: Step 62
challengeType: 0
dashedName: step-61
dashedName: step-62
---
# --description--

4
curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f89e055040ba294719d2f.md
View File

@@ -1,8 +1,8 @@
---
id: 615f89e055040ba294719d2f
title: Step 62
title: Step 63
challengeType: 0
dashedName: step-62
dashedName: step-63
---
# --description--

4
curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8bfe0f30a1a3c340356b.md
View File

@@ -1,8 +1,8 @@
---
id: 615f8bfe0f30a1a3c340356b
title: Step 63
title: Step 64
challengeType: 0
dashedName: step-63
dashedName: step-64
---
# --description--

4
curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8f1223601fa546e93f31.md
View File

@@ -1,8 +1,8 @@
---
id: 615f8f1223601fa546e93f31
title: Step 64
title: Step 65
challengeType: 0
dashedName: step-64
dashedName: step-65
---
# --description--

4
curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f905fbd1017a65ca224eb.md
View File

@@ -1,8 +1,8 @@
---
id: 615f905fbd1017a65ca224eb
title: Step 65
title: Step 66
challengeType: 0
dashedName: step-65
dashedName: step-66
---
# --description--

4
curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f94786869e1a7fec54375.md
View File

@@ -1,8 +1,8 @@
---
id: 615f94786869e1a7fec54375
title: Step 66
title: Step 67
challengeType: 0
dashedName: step-66
dashedName: step-67
---
# --description--

4
curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f951dff9317a900ef683f.md
View File

@@ -1,8 +1,8 @@
---
id: 615f951dff9317a900ef683f
title: Step 67
title: Step 68
challengeType: 0
dashedName: step-67
dashedName: step-68
---
# --description--

147
curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/667d1bb875f5961913176069.md Normal file
View File

@@ -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;
}
```