jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-03-06 06:39:18 -05:00
Code Issues Projects Releases Wiki Activity

feat: use semantic address element in cafe menu workshop (#58041)

Browse Source
This commit is contained in:
Ilenia
2025-01-10 18:43:56 +01:00
committed by GitHub
parent f82aff217b
commit 1013708de8
31 changed files with 639 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
curriculum/challenges/_meta/workshop-cafe-menu/meta.json
View File

@@ -261,116 +261,124 @@
"title": "Step 63"
},
{
"id": "5f3ef6e0a81099d9a697b550",
"id": "6780e8ef4153930b965cd7b7",
"title": "Step 64"
},
{
"id": "5f3ef6e0b431cc215bb16f55",
"id": "5f3ef6e0a81099d9a697b550",
"title": "Step 65"
},
{
"id": "5f3ef6e01f288a026d709587",
"id": "5f3ef6e0b431cc215bb16f55",
"title": "Step 66"
},
{
"id": "5f3f26fa39591db45e5cd7a0",
"id": "5f3ef6e01f288a026d709587",
"title": "Step 67"
},
{
"id": "5f459225127805351a6ad057",
"id": "5f3f26fa39591db45e5cd7a0",
"title": "Step 68"
},
{
"id": "5f459a7ceb8b5c446656d88b",
"id": "5f459225127805351a6ad057",
"title": "Step 69"
},
{
"id": "5f459cf202c2a3472fae6a9f",
"id": "5f459a7ceb8b5c446656d88b",
"title": "Step 70"
},
{
"id": "5f459fd48bdc98491ca6d1a3",
"id": "5f459cf202c2a3472fae6a9f",
"title": "Step 71"
},
{
"id": "5f45a05977e2fa49d9119437",
"id": "5f459fd48bdc98491ca6d1a3",
"title": "Step 72"
},
{
"id": "5f45a276c093334f0f6e9df4",
"id": "5f45a05977e2fa49d9119437",
"title": "Step 73"
},
{
"id": "5f45a5a7c49a8251f0bdb527",
"id": "5f45a276c093334f0f6e9df4",
"title": "Step 74"
},
{
"id": "5f46fc57528aa1c4b5ea7c2e",
"id": "5f45a5a7c49a8251f0bdb527",
"title": "Step 75"
},
{
"id": "5f4701b942c824109626c3d8",
"id": "5f46fc57528aa1c4b5ea7c2e",
"title": "Step 76"
},
{
"id": "5f46ede1ff8fec5ba656b44c",
"id": "5f4701b942c824109626c3d8",
"title": "Step 77"
},
{
"id": "5f45a66d4a2b0453301e5a26",
"id": "5f46ede1ff8fec5ba656b44c",
"title": "Step 78"
},
{
"id": "5f45b0731d39e15d54df4dfc",
"id": "5f45a66d4a2b0453301e5a26",
"title": "Step 79"
},
{
"id": "5f45b25e7ec2405f166b9de1",
"id": "6780f0d898362873ac425dc8",
"title": "Step 80"
},
{
"id": "5f45b3c93c027860d9298dbd",
"id": "5f45b0731d39e15d54df4dfc",
"title": "Step 81"
},
{
"id": "5f45b45d099f3e621fbbb256",
"id": "5f45b25e7ec2405f166b9de1",
"title": "Step 82"
},
{
"id": "5f45b4c81cea7763550e40df",
"id": "5f45b3c93c027860d9298dbd",
"title": "Step 83"
},
{
"id": "5f45b715301bbf667badc04a",
"id": "5f45b45d099f3e621fbbb256",
"title": "Step 84"
},
{
"id": "5f46e270702a8456a664f0df",
"id": "5f45b4c81cea7763550e40df",
"title": "Step 85"
},
{
"id": "5f46e36e745ead58487aabf2",
"id": "5f45b715301bbf667badc04a",
"title": "Step 86"
},
{
"id": "5f46e7a4750dd05b5a673920",
"id": "5f46e270702a8456a664f0df",
"title": "Step 87"
},
{
"id": "5f46e8284aae155c83015dee",
"id": "5f46e36e745ead58487aabf2",
"title": "Step 88"
},
{
"id": "5f475bb508746c16c9431d42",
"id": "5f46e7a4750dd05b5a673920",
"title": "Step 89"
},
{
"id": "5f475e1c7f71a61d913836c6",
"id": "5f46e8284aae155c83015dee",
"title": "Step 90"
},
{
"id": "5f47fe7e31980053a8d4403b",
"id": "5f475bb508746c16c9431d42",
"title": "Step 91"
},
{
"id": "5f475e1c7f71a61d913836c6",
"title": "Step 92"
},
{
"id": "5f47fe7e31980053a8d4403b",
"title": "Step 93"
}
],
"helpCategory": "HTML-CSS"

14
curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3ef6e01f288a026d709587.md
View File

@@ -1,8 +1,8 @@
---
id: 5f3ef6e01f288a026d709587
title: Step 66
title: Step 67
challengeType: 0
dashedName: step-66
dashedName: step-67
---
# --description--
@@ -102,10 +102,12 @@ assert.strictEqual(hrElement?.nextElementSibling?.tagName, 'SECTION');
</main>
--fcc-editable-region--
<footer>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p>123 Free Code Camp Drive</p>
<address>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p>123 Free Code Camp Drive</p>
</address>
</footer>
</div>
</body>

28
curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3ef6e0a81099d9a697b550.md
View File

@@ -1,13 +1,13 @@
---
id: 5f3ef6e0a81099d9a697b550
title: Step 64
title: Step 65
challengeType: 0
dashedName: step-64
dashedName: step-65
---
# --description--
Inside the `footer`, add a `p` element. Then, nest an anchor (`a`) element in the `p` that links to `https://www.freecodecamp.org` and has the text `Visit our website`.
Inside the `address`, add a `p` element. Then, nest an anchor (`a`) element in the `p` that links to `https://www.freecodecamp.org` and has the text `Visit our website`.
Make sure that the link opens in a new tab by adding a `target` attribute with the value `_blank`.
@@ -19,36 +19,42 @@ You should not modify the existing `footer` element.
assert(document.querySelectorAll("footer").length === 1);
```
Your new `p` element should be nested within your `footer` element. You should have exactly one `p` element.
You should not modify the existing `address` element.
```js
assert(document.querySelectorAll("footer > p").length === 1);
assert(document.querySelectorAll("address").length === 1);
```
Your new `p` element should be nested within your `address` element. You should have exactly one `p` element.
```js
assert(document.querySelectorAll("footer > address > p").length === 1);
assert(document.querySelectorAll("footer p").length === 1);
```
Your new `a` element should be nested within your new `p` element. You should have exactly one `a` element.
```js
assert(document.querySelectorAll("footer > p > a").length === 1);
assert(document.querySelectorAll("footer > address > p > a").length === 1);
assert(document.querySelectorAll("footer a").length === 1);
```
Your new `a` element should have the text `Visit our website`.
```js
assert(document.querySelector("footer > p > a")?.innerText === "Visit our website");
assert(document.querySelector("footer > address > p > a")?.innerText === "Visit our website");
```
Your new `a` element should link to `https://www.freecodecamp.org`. Remember that `a` elements use the `href` attribute to create a link.
```js
assert(document.querySelector("footer > p > a")?.href === "https://www.freecodecamp.org/");
assert(document.querySelector("footer > address > p > a")?.href === "https://www.freecodecamp.org/");
```
Your new `a` element should have the `target` attribute set to `_blank`.
```js
assert.equal(document.querySelector("footer > p > a")?.target, "_blank");
assert.equal(document.querySelector("footer > address > p > a")?.target, "_blank");
```
# --seed--
@@ -105,7 +111,9 @@ assert.equal(document.querySelector("footer > p > a")?.target, "_blank");
</main>
--fcc-editable-region--
<footer>
<address>
</address>
</footer>
--fcc-editable-region--
</div>

22
curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3ef6e0b431cc215bb16f55.md
View File

@@ -1,8 +1,8 @@
---
id: 5f3ef6e0b431cc215bb16f55
title: Step 65
title: Step 66
challengeType: 0
dashedName: step-65
dashedName: step-66
---
# --description--
@@ -11,19 +11,19 @@ Add a second `p` element below the one with the link and give it the text `123 F
# --hints--
You should add a second `p` element to your `footer`.
You should add a second `p` element to your `address`.
```js
const footer = document.querySelector('footer');
const children = footer?.querySelectorAll(`:scope ${'p'}`);
const address = document.querySelector('address');
const children = address?.querySelectorAll(`:scope ${'p'}`);
assert.lengthOf(children , 2);
```
Your new `p` element should have the text `123 Free Code Camp Drive`. Make sure your new element comes after your existing element.
```js
const footer = document.querySelector('footer');
const children = footer.querySelectorAll(`:scope ${'p'}`) || [];
const address = document.querySelector('address');
const children = address.querySelectorAll(`:scope ${'p'}`) || [];
const lastChild = [...children]?.at(-1);
assert.match(lastChild?.textContent, /123 Free Code Camp Drive/i);
```
@@ -82,9 +82,11 @@ assert.match(lastChild?.textContent, /123 Free Code Camp Drive/i);
</main>
<footer>
--fcc-editable-region--
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<address>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
</address>
--fcc-editable-region--
</footer>
</div>

14
curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3f26fa39591db45e5cd7a0.md
View File

@@ -1,8 +1,8 @@
---
id: 5f3f26fa39591db45e5cd7a0
title: Step 67
title: Step 68
challengeType: 0
dashedName: step-67
dashedName: step-68
---
# --description--
@@ -88,10 +88,12 @@ assert(hrHeight === '3px');
</section>
</main>
<footer>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p>123 Free Code Camp Drive</p>
<address>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p>123 Free Code Camp Drive</p>
</address>
</footer>
</div>
</body>

14
curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f459225127805351a6ad057.md
View File

@@ -1,8 +1,8 @@
---
id: 5f459225127805351a6ad057
title: Step 68
title: Step 69
challengeType: 0
dashedName: step-68
dashedName: step-69
---
# --description--
@@ -78,10 +78,12 @@ assert(hrBackgroundColor === 'brown');
</section>
</main>
<footer>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p>123 Free Code Camp Drive</p>
<address>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p>123 Free Code Camp Drive</p>
</address>
</footer>
</div>
</body>

14
curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f459a7ceb8b5c446656d88b.md
View File

@@ -1,8 +1,8 @@
---
id: 5f459a7ceb8b5c446656d88b
title: Step 69
title: Step 70
challengeType: 0
dashedName: step-69
dashedName: step-70
---
# --description--
@@ -81,10 +81,12 @@ assert(hrBorderColor === 'brown');
</section>
</main>
<footer>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p>123 Free Code Camp Drive</p>
<address>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p>123 Free Code Camp Drive</p>
</address>
</footer>
</div>
</body>

14
curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f459cf202c2a3472fae6a9f.md
View File

@@ -1,8 +1,8 @@
---
id: 5f459cf202c2a3472fae6a9f
title: Step 70
title: Step 71
challengeType: 0
dashedName: step-70
dashedName: step-71
---
# --description--
@@ -81,10 +81,12 @@ assert(hrHeight === '2px');
</section>
</main>
<footer>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p>123 Free Code Camp Drive</p>
<address>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p>123 Free Code Camp Drive</p>
</address>
</footer>
</div>
</body>

14
curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f459fd48bdc98491ca6d1a3.md
View File

@@ -1,8 +1,8 @@
---
id: 5f459fd48bdc98491ca6d1a3
title: Step 71
title: Step 72
challengeType: 0
dashedName: step-71
dashedName: step-72
---
# --description--
@@ -79,10 +79,12 @@ assert.equal(document.querySelectorAll('hr')?.[1]?.nextElementSibling?.tagName,
</section>
</main>
<footer>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p>123 Free Code Camp Drive</p>
<address>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p>123 Free Code Camp Drive</p>
</address>
</footer>
--fcc-editable-region--
</div>

14
curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f45a05977e2fa49d9119437.md
View File

@@ -1,8 +1,8 @@
---
id: 5f45a05977e2fa49d9119437
title: Step 72
title: Step 73
challengeType: 0
dashedName: step-72
dashedName: step-73
---
# --description--
@@ -79,10 +79,12 @@ assert(bodyPadding === '20px');
</main>
<hr>
<footer>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p>123 Free Code Camp Drive</p>
<address>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p>123 Free Code Camp Drive</p>
</address>
</footer>
</div>
</body>

14
curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f45a276c093334f0f6e9df4.md
View File

@@ -1,8 +1,8 @@
---
id: 5f45a276c093334f0f6e9df4
title: Step 73
title: Step 74
challengeType: 0
dashedName: step-73
dashedName: step-74
---
# --description--
@@ -117,10 +117,12 @@ assert(!itemPMarginRight);
</main>
<hr>
<footer>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p>123 Free Code Camp Drive</p>
<address>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p>123 Free Code Camp Drive</p>
</address>
</footer>
</div>
</body>

14
curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f45a5a7c49a8251f0bdb527.md
View File

@@ -1,8 +1,8 @@
---
id: 5f45a5a7c49a8251f0bdb527
title: Step 74
title: Step 75
challengeType: 0
dashedName: step-74
dashedName: step-75
---
# --description--
@@ -87,10 +87,12 @@ assert(itemPFontSize === '18px');
</main>
<hr>
<footer>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p>123 Free Code Camp Drive</p>
<address>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p>123 Free Code Camp Drive</p>
</address>
</footer>
</div>
</body>

14
curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f45a66d4a2b0453301e5a26.md
View File

@@ -1,8 +1,8 @@
---
id: 5f45a66d4a2b0453301e5a26
title: Step 78
title: Step 79
challengeType: 0
dashedName: step-78
dashedName: step-79
---
# --description--
@@ -94,10 +94,12 @@ assert(footerFontSize === '14px');
</main>
<hr class="bottom-line">
<footer>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p>123 Free Code Camp Drive</p>
<address>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p>123 Free Code Camp Drive</p>
</address>
</footer>
</div>
</body>

19
curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f45b0731d39e15d54df4dfc.md
View File

@@ -1,8 +1,8 @@
---
id: 5f45b0731d39e15d54df4dfc
title: Step 79
title: Step 81
challengeType: 0
dashedName: step-79
dashedName: step-81
---
# --description--
@@ -88,10 +88,12 @@ assert(aColor === 'black');
</main>
<hr class="bottom-line">
<footer>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p>123 Free Code Camp Drive</p>
<address>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p>123 Free Code Camp Drive</p>
</address>
</footer>
</div>
</body>
@@ -166,6 +168,11 @@ h1, h2 {
footer {
font-size: 14px;
}
address {
font-style: normal;
}
--fcc-editable-region--
--fcc-editable-region--

18
curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f45b25e7ec2405f166b9de1.md
View File

@@ -1,8 +1,8 @@
---
id: 5f45b25e7ec2405f166b9de1
title: Step 80
title: Step 82
challengeType: 0
dashedName: step-80
dashedName: step-82
---
# --description--
@@ -89,10 +89,12 @@ assert(aVisitedColor === 'grey' || aVisitedColor === 'gray');
</main>
<hr class="bottom-line">
<footer>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p>123 Free Code Camp Drive</p>
<address>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p>123 Free Code Camp Drive</p>
</address>
</footer>
</div>
</body>
@@ -168,6 +170,10 @@ footer {
font-size: 14px;
}
address {
font-style: normal;
}
a {
color: black;
}

18
curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f45b3c93c027860d9298dbd.md
View File

@@ -1,8 +1,8 @@
---
id: 5f45b3c93c027860d9298dbd
title: Step 81
title: Step 83
challengeType: 0
dashedName: step-81
dashedName: step-83
---
# --description--
@@ -89,10 +89,12 @@ assert(aHoverColor === 'brown');
</main>
<hr class="bottom-line">
<footer>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p>123 Free Code Camp Drive</p>
<address>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p>123 Free Code Camp Drive</p>
</address>
</footer>
</div>
</body>
@@ -168,6 +170,10 @@ footer {
font-size: 14px;
}
address {
font-style: normal;
}
a {
color: black;
}

18
curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f45b45d099f3e621fbbb256.md
View File

@@ -1,8 +1,8 @@
---
id: 5f45b45d099f3e621fbbb256
title: Step 82
title: Step 84
challengeType: 0
dashedName: step-82
dashedName: step-84
---
# --description--
@@ -89,10 +89,12 @@ assert(aActiveColor === 'white');
</main>
<hr class="bottom-line">
<footer>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p>123 Free Code Camp Drive</p>
<address>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p>123 Free Code Camp Drive</p>
</address>
</footer>
</div>
</body>
@@ -168,6 +170,10 @@ footer {
font-size: 14px;
}
address {
font-style: normal;
}
a {
color: black;
}

18
curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f45b4c81cea7763550e40df.md
View File

@@ -1,8 +1,8 @@
---
id: 5f45b4c81cea7763550e40df
title: Step 83
title: Step 85
challengeType: 0
dashedName: step-83
dashedName: step-85
---
# --description--
@@ -80,10 +80,12 @@ assert(aActiveColor === 'brown');
</main>
<hr class="bottom-line">
<footer>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p>123 Free Code Camp Drive</p>
<address>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p>123 Free Code Camp Drive</p>
</address>
</footer>
</div>
</body>
@@ -159,6 +161,10 @@ footer {
font-size: 14px;
}
address {
font-style: normal;
}
a {
color: black;
}

18
curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f45b715301bbf667badc04a.md
View File

@@ -1,8 +1,8 @@
---
id: 5f45b715301bbf667badc04a
title: Step 84
title: Step 86
challengeType: 0
dashedName: step-84
dashedName: step-86
---
# --description--
@@ -82,10 +82,12 @@ assert(h1MarginTop === '0px');
</main>
<hr class="bottom-line">
<footer>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p>123 Free Code Camp Drive</p>
<address>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p>123 Free Code Camp Drive</p>
</address>
</footer>
</div>
</body>
@@ -163,6 +165,10 @@ footer {
font-size: 14px;
}
address {
font-style: normal;
}
a {
color: black;
}

18
curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f46e270702a8456a664f0df.md
View File

@@ -1,8 +1,8 @@
---
id: 5f46e270702a8456a664f0df
title: Step 85
title: Step 87
challengeType: 0
dashedName: step-85
dashedName: step-87
---
# --description--
@@ -80,10 +80,12 @@ assert(h1MarginBottom === '15px');
</main>
<hr class="bottom-line">
<footer>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p>123 Free Code Camp Drive</p>
<address>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p>123 Free Code Camp Drive</p>
</address>
</footer>
</div>
</body>
@@ -162,6 +164,10 @@ footer {
font-size: 14px;
}
address {
font-style: normal;
}
a {
color: black;
}

18
curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f46e36e745ead58487aabf2.md
View File

@@ -1,8 +1,8 @@
---
id: 5f46e36e745ead58487aabf2
title: Step 86
title: Step 88
challengeType: 0
dashedName: step-86
dashedName: step-88
---
# --description--
@@ -89,10 +89,12 @@ assert(addressMarginBottom === '5px');
</main>
<hr class="bottom-line">
<footer>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p>123 Free Code Camp Drive</p>
<address>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p>123 Free Code Camp Drive</p>
</address>
</footer>
</div>
</body>
@@ -170,6 +172,10 @@ footer {
font-size: 14px;
}
address {
font-style: normal;
}
--fcc-editable-region--
--fcc-editable-region--

18
curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f46e7a4750dd05b5a673920.md
View File

@@ -1,8 +1,8 @@
---
id: 5f46e7a4750dd05b5a673920
title: Step 87
title: Step 89
challengeType: 0
dashedName: step-87
dashedName: step-89
---
# --description--
@@ -85,10 +85,12 @@ assert.match(document.querySelector('.address')?.innerText, /123 Free Code Camp
<hr class="bottom-line">
--fcc-editable-region--
<footer>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p>123 Free Code Camp Drive</p>
<address>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p>123 Free Code Camp Drive</p>
</address>
</footer>
--fcc-editable-region--
</div>
@@ -167,6 +169,10 @@ footer {
font-size: 14px;
}
address {
font-style: normal;
}
.address {
margin-bottom: 5px;
}

19
curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f46e8284aae155c83015dee.md
View File

@@ -1,8 +1,8 @@
---
id: 5f46e8284aae155c83015dee
title: Step 88
title: Step 90
challengeType: 0
dashedName: step-88
dashedName: step-90
---
# --description--
@@ -97,12 +97,13 @@ assert.match(imageAltValue, /coffee icon/i);
</main>
<hr class="bottom-line">
<footer>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p class="address">123 Free Code Camp Drive</p>
<address>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p class="address">123 Free Code Camp Drive</p>
</address>
</footer>
</div>
</body>
</html>
```
@@ -178,6 +179,10 @@ footer {
font-size: 14px;
}
address {
font-style: normal;
}
.address {
margin-bottom: 5px;
}

14
curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f46ede1ff8fec5ba656b44c.md
View File

@@ -1,8 +1,8 @@
---
id: 5f46ede1ff8fec5ba656b44c
title: Step 77
title: Step 78
challengeType: 0
dashedName: step-77
dashedName: step-78
---
# --description--
@@ -72,10 +72,12 @@ assert(code.match(/\/\*\s*FOOTER\s*\*\//i));
</main>
<hr class="bottom-line">
<footer>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p>123 Free Code Camp Drive</p>
<address>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p>123 Free Code Camp Drive</p>
</address>
</footer>
</div>
</body>

14
curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f46fc57528aa1c4b5ea7c2e.md
View File

@@ -1,8 +1,8 @@
---
id: 5f46fc57528aa1c4b5ea7c2e
title: Step 75
title: Step 76
challengeType: 0
dashedName: step-75
dashedName: step-76
---
# --description--
@@ -89,10 +89,12 @@ assert(bottomLineMargin === '25px');
</main>
<hr>
<footer>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p>123 Free Code Camp Drive</p>
<address>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p>123 Free Code Camp Drive</p>
</address>
</footer>
</div>
</body>

14
curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f4701b942c824109626c3d8.md
View File

@@ -1,8 +1,8 @@
---
id: 5f4701b942c824109626c3d8
title: Step 76
title: Step 77
challengeType: 0
dashedName: step-76
dashedName: step-77
---
# --description--
@@ -81,10 +81,12 @@ assert.isTrue(hrList?.[1]?.classList?.contains('bottom-line'));
<hr>
--fcc-editable-region--
<footer>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p>123 Free Code Camp Drive</p>
<address>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p>123 Free Code Camp Drive</p>
</address>
</footer>
</div>
</body>

19
curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f475bb508746c16c9431d42.md
View File

@@ -1,8 +1,8 @@
---
id: 5f475bb508746c16c9431d42
title: Step 89
title: Step 91
challengeType: 0
dashedName: step-89
dashedName: step-91
---
# --description--
@@ -113,12 +113,13 @@ assert(imgMarginRight === 'auto');
</main>
<hr class="bottom-line">
<footer>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p class="address">123 Free Code Camp Drive</p>
<address>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p class="address">123 Free Code Camp Drive</p>
</address>
</footer>
</div>
</body>
</html>
```
@@ -198,6 +199,10 @@ footer {
font-size: 14px;
}
address {
font-style: normal;
}
.address {
margin-bottom: 5px;
}

19
curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f475e1c7f71a61d913836c6.md
View File

@@ -1,8 +1,8 @@
---
id: 5f475e1c7f71a61d913836c6
title: Step 90
title: Step 92
challengeType: 0
dashedName: step-90
dashedName: step-92
---
# --description--
@@ -89,12 +89,13 @@ assert.match(lastImage?.alt,/pie icon/i);
</main>
<hr class="bottom-line">
<footer>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p class="address">123 Free Code Camp Drive</p>
<address>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p class="address">123 Free Code Camp Drive</p>
</address>
</footer>
</div>
</body>
</html>
```
@@ -176,6 +177,10 @@ footer {
font-size: 14px;
}
address {
font-style: normal;
}
.address {
margin-bottom: 5px;
}

32
curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f47fe7e31980053a8d4403b.md
View File

@@ -1,8 +1,8 @@
---
id: 5f47fe7e31980053a8d4403b
title: Step 91
title: Step 93
challengeType: 0
dashedName: step-91
dashedName: step-93
---
# --description--
@@ -86,10 +86,12 @@ assert(imgMarginTop === '-25px');
</main>
<hr class="bottom-line">
<footer>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p class="address">123 Free Code Camp Drive</p>
<address>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p class="address">123 Free Code Camp Drive</p>
</address>
</footer>
</div>
</body>
@@ -175,6 +177,10 @@ footer {
font-size: 14px;
}
address {
font-style: normal;
}
.address {
margin-bottom: 5px;
}
@@ -251,10 +257,12 @@ a:active {
</main>
<hr class="bottom-line">
<footer>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p class="address">123 Free Code Camp Drive</p>
<address>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p class="address">123 Free Code Camp Drive</p>
</address>
</footer>
</div>
</body>
@@ -339,6 +347,10 @@ footer {
font-size: 14px;
}
address {
font-style: normal;
}
.address {
margin-bottom: 5px;
}

130
curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/6780e8ef4153930b965cd7b7.md Normal file
View File

@@ -0,0 +1,130 @@
---
id: 6780e8ef4153930b965cd7b7
title: Step 64
challengeType: 0
dashedName: step-64
---
# --description--
Inside the `footer`, add an `address` element. You will add contact information to this element in the next few steps.
# --hints--
You should add an `address` element inside the `footer`.
```js
assert.isNotNull(document.querySelector('footer > address'));
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cafe Menu</title>
<link href="styles.css" rel="stylesheet"/>
</head>
<body>
<div class="menu">
<main>
<h1>CAMPER CAFE</h1>
<p class="established">Est. 2020</p>
<section>
<h2>Coffee</h2>
<article class="item">
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
</article>
<article class="item">
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
</article>
<article class="item">
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
</article>
<article class="item">
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
</article>
<article class="item">
<p class="flavor">Mocha</p><p class="price">4.50</p>
</article>
</section>
<section>
<h2>Desserts</h2>
<article class="item">
<p class="dessert">Donut</p><p class="price">1.50</p>
</article>
<article class="item">
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
</article>
<article class="item">
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
</article>
<article class="item">
<p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
</article>
</section>
</main>
--fcc-editable-region--
<footer>
</footer>
--fcc-editable-region--
</div>
</body>
</html>
```
```css
body {
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
font-family: sans-serif;
}
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
.established {
font-style: italic;
}
h1, h2, p {
text-align: center;
}
.menu {
width: 80%;
background-color: burlywood;
margin-left: auto;
margin-right: auto;
padding: 20px;
max-width: 500px;
}
h1, h2 {
font-family: Impact, serif;
}
.item p {
display: inline-block;
}
.flavor, .dessert {
text-align: left;
width: 75%;
}
.price {
text-align: right;
width: 25%
}
```

172
curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/6780f0d898362873ac425dc8.md Normal file
View File

@@ -0,0 +1,172 @@
---
id: 6780f0d898362873ac425dc8
title: Step 80
challengeType: 0
dashedName: step-80
---
# --description--
The default styling of the `address` element is to have `font-style` set to `italic`. Add a selector for the `address` element and set its `font-style` to `normal`.
# --hints--
You should have a selector for the `address` element.
```js
assert.isNotNull(new __helpers.CSSHelp(document).getStyle('address'));
```
The `address` selector should set the `font-style` property.
```js
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('address').getPropVal('font-style'));
```
The `font-style` property should bet set to `normal`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('address').getPropVal('font-style'), 'normal');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cafe Menu</title>
<link href="styles.css" rel="stylesheet"/>
</head>
<body>
<div class="menu">
<main>
<h1>CAMPER CAFE</h1>
<p class="established">Est. 2020</p>
<hr>
<section>
<h2>Coffee</h2>
<article class="item">
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
</article>
<article class="item">
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
</article>
<article class="item">
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
</article>
<article class="item">
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
</article>
<article class="item">
<p class="flavor">Mocha</p><p class="price">4.50</p>
</article>
</section>
<section>
<h2>Desserts</h2>
<article class="item">
<p class="dessert">Donut</p><p class="price">1.50</p>
</article>
<article class="item">
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
</article>
<article class="item">
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
</article>
<article class="item">
<p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
</article>
</section>
</main>
<hr class="bottom-line">
<footer>
<address>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p>123 Free Code Camp Drive</p>
</address>
</footer>
</div>
</body>
</html>
```
```css
body {
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
font-family: sans-serif;
padding: 20px;
}
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
.established {
font-style: italic;
}
h1, h2, p {
text-align: center;
}
.menu {
width: 80%;
background-color: burlywood;
margin-left: auto;
margin-right: auto;
padding: 20px;
max-width: 500px;
}
hr {
height: 2px;
background-color: brown;
border-color: brown;
}
.bottom-line {
margin-top: 25px;
}
h1, h2 {
font-family: Impact, serif;
}
.item p {
display: inline-block;
margin-top: 5px;
margin-bottom: 5px;
font-size: 18px;
}
.flavor, .dessert {
text-align: left;
width: 75%;
}
.price {
text-align: right;
width: 25%
}
/* FOOTER */
footer {
font-size: 14px;
}
--fcc-editable-region--
--fcc-editable-region--
```