Skip to content

Commit 792757d

Browse files
jdwilkin4Dario-DC
jdwilkin4
and
Dario-DC
authored
feat(curriculum): adding tablist workshop (freeCodeCamp#61063)
Co-authored-by: Dario-DC <[email protected]>
1 parent 28bd4ac commit 792757d

25 files changed

+2426
-0
lines changed

‎client/i18n/locales/english/intro.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3426,6 +3426,12 @@
34263426
"Test your knowledge of DOM manipulation and click events in JavaScript with this quiz."
34273427
]
34283428
},
3429+
"workshop-planets-tablist": {
3430+
"title": "Build a Planets Tablist",
3431+
"intro": [
3432+
"In this workshop, you will build a dynamic tabbed interface that showcases facts about the planets in the solar system."
3433+
]
3434+
},
34293435
"review-js-a11y": {
34303436
"title": "JavaScript and Accessibility Review",
34313437
"intro": [

‎client/src/pages/learn/full-stack-developer/workshop-planets-tablist/index.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
title: Introduction to the Build a Planets Tablist
3+
block: workshop-planets-tablist
4+
superBlock: full-stack-developer
5+
---
6+
7+
## Introduction to the Build a Planets Tablist
8+
9+
In this workshop, you will build a dynamic tabbed interface that showcases facts about the planets in the solar system.

‎curriculum/challenges/_meta/workshop-planets-tablist/meta.json‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
{
2+
"name": "Build a Planets Tablist",
3+
"blockType": "workshop",
4+
"blockLayout": "challenge-grid",
5+
"isUpcomingChange": true,
6+
"dashedName": "workshop-planets-tablist",
7+
"superBlock": "full-stack-developer",
8+
"helpCategory": "JavaScript",
9+
"usesMultifileEditor": true,
10+
"hasEditableBoundaries": true,
11+
"challengeOrder": [
12+
{
13+
"id": "685db0bd1280154ae85bcf9f",
14+
"title": "Step 1"
15+
},
16+
{
17+
"id": "685976a92ffab8b2dc744b72",
18+
"title": "Step 2"
19+
},
20+
{
21+
"id": "68599633407374c0d574587b",
22+
"title": "Step 3"
23+
},
24+
{
25+
"id": "68599af28ead38c22590a89d",
26+
"title": "Step 4"
27+
},
28+
{
29+
"id": "68599d0fcd5f6ac313d05908",
30+
"title": "Step 5"
31+
},
32+
{
33+
"id": "68599e9259c0eec3e78c52fd",
34+
"title": "Step 6"
35+
},
36+
{
37+
"id": "68599f9df77791c4a311cc5f",
38+
"title": "Step 7"
39+
},
40+
{
41+
"id": "6859a1270ac255c571352189",
42+
"title": "Step 8"
43+
},
44+
{
45+
"id": "6859a484a55387c6543ab2c0",
46+
"title": "Step 9"
47+
},
48+
{
49+
"id": "6859a4c514603bc6d95a80da",
50+
"title": "Step 10"
51+
},
52+
{
53+
"id": "6859ab9ba7a915c84fa69851",
54+
"title": "Step 11"
55+
},
56+
{
57+
"id": "6859acc690736fc911a70967",
58+
"title": "Step 12"
59+
},
60+
{
61+
"id": "6859ae3ef795c4c9d4badf9c",
62+
"title": "Step 13"
63+
},
64+
{
65+
"id": "685c3e887d32ea71964cd981",
66+
"title": "Step 14"
67+
},
68+
{
69+
"id": "685c454eb1e7fb7341f1c6ae",
70+
"title": "Step 15"
71+
},
72+
{
73+
"id": "685c49c6e1db1c74a9762eae",
74+
"title": "Step 16"
75+
},
76+
{
77+
"id": "685c4b88d56b107579124d3d",
78+
"title": "Step 17"
79+
},
80+
{
81+
"id": "685c52352f98cc76d66714dd",
82+
"title": "Step 18"
83+
},
84+
{
85+
"id": "685c539a33f20877c4ef59d2",
86+
"title": "Step 19"
87+
},
88+
{
89+
"id": "685c560bfde79c78a3f01a64",
90+
"title": "Step 20"
91+
},
92+
{
93+
"id": "685c57ae785a337969745135",
94+
"title": "Step 21"
95+
}
96+
]
97+
}

‎curriculum/challenges/english/25-front-end-development/workshop-planets-tablist/685976a92ffab8b2dc744b72.md‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
---
2+
id: 685976a92ffab8b2dc744b72
3+
title: Step 2
4+
challengeType: 0
5+
dashedName: step-2
6+
---
7+
8+
# --description--
9+
10+
Inside of your `.tabs` element, add a `div` element with a `role` attribute set to `"tablist"` and an `aria-labelledby` attribute set to `"tabs-title"`.
11+
12+
The `aria-labelledby` attribute is needed here to associate the tablist with a visible label, helping assistive technologies like screen readers announce the purpose of the tablist to users.
13+
14+
# --hints--
15+
16+
You should have a `div` element inside of your `.tabs` element.
17+
18+
```js
19+
assert.exists(document.querySelector(".tabs div"));
20+
```
21+
22+
Your `div` element should have a `role` attribute set to `"tablist"`.
23+
24+
```js
25+
assert.equal(document.querySelector(".tabs div").getAttribute("role"), "tablist");
26+
```
27+
28+
Your `div` element should have an `aria-labelledby` attribute set to `"tabs-title"`.
29+
30+
```js
31+
assert.equal(document.querySelector(".tabs div").getAttribute("aria-labelledby"), "tabs-title");
32+
```
33+
34+
# --seed--
35+
36+
## --seed-contents--
37+
38+
```html
39+
<!DOCTYPE html>
40+
<html lang="en">
41+
<head>
42+
<meta charset="UTF-8" />
43+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
44+
<title>Planets Facts</title>
45+
<link rel="stylesheet" href="./styles.css" />
46+
</head>
47+
<body>
48+
<div class="tabs">
49+
<h2 id="tabs-title">Planets</h2>
50+
51+
--fcc-editable-region--
52+
53+
--fcc-editable-region--
54+
</div>
55+
56+
<script src="./script.js"></script>
57+
</body>
58+
</html>
59+
```
60+
61+
```css
62+
.tabs [role="tablist"] {
63+
display: flex;
64+
gap: 0.5rem;
65+
margin-bottom: 1rem;
66+
}
67+
68+
[role="tab"] {
69+
padding: 0.5rem 1rem;
70+
background: #eee;
71+
border: 1px solid #ccc;
72+
cursor: pointer;
73+
font-weight: bold;
74+
}
75+
76+
[role="tab"][aria-selected="true"] {
77+
background: #fff;
78+
border-bottom: 2px solid dodgerblue;
79+
}
80+
81+
[role="tabpanel"] {
82+
border: 1px solid #ccc;
83+
padding: 1rem;
84+
}
85+
```

‎curriculum/challenges/english/25-front-end-development/workshop-planets-tablist/68599633407374c0d574587b.md‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
---
2+
id: 68599633407374c0d574587b
3+
title: Step 3
4+
challengeType: 0
5+
dashedName: step-3
6+
---
7+
8+
# --description--
9+
10+
The next step is to add the buttons that will be responsible for switching between the different planets and their facts.
11+
12+
Inside of the `tablist` element, add three `button` elements each with a `role` attribute set to `"tab"`. The first `button` element should have the text `🌍 Earth`. The second `button` should have the text `🪐 Saturn`. The third `button` element should have the text `🔴 Mars`.
13+
14+
# --hints--
15+
16+
You should have three `button` elements inside of the `tablist` element.
17+
18+
```js
19+
const btns = document.querySelectorAll("div[role='tablist'] button");
20+
assert.lengthOf(btns, 3);
21+
```
22+
23+
Each of your `button` elements should have a `role` attribute set to `"tab"`.
24+
25+
```js
26+
const btns = document.querySelectorAll("div[role='tablist'] button[role='tab']");
27+
assert.lengthOf(btns, 3);
28+
```
29+
30+
Your first `button` element should have the text `🌍 Earth`.
31+
32+
```js
33+
const firstBtn = document.querySelector("[role='tab']");
34+
assert.equal(firstBtn.textContent, "🌍 Earth");
35+
```
36+
37+
Your second `button` element should have the text `🪐 Saturn`.
38+
39+
```js
40+
const secondBtn = document.querySelectorAll("[role='tab']")[1];
41+
assert.equal(secondBtn.textContent, "🪐 Saturn")
42+
```
43+
44+
Your third `button` element should have the text `🔴 Mars`.
45+
46+
```js
47+
const thirdBtn = document.querySelectorAll("[role='tab']")[2]
48+
assert.equal(thirdBtn.textContent, "🔴 Mars");
49+
```
50+
51+
# --seed--
52+
53+
## --seed-contents--
54+
55+
```html
56+
<!DOCTYPE html>
57+
<html lang="en">
58+
<head>
59+
<meta charset="UTF-8" />
60+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
61+
<title>Planets Facts</title>
62+
<link rel="stylesheet" href="./style.css" />
63+
</head>
64+
<body>
65+
<div class="tabs">
66+
<h2 id="tabs-title">Planets</h2>
67+
<div role="tablist" aria-labelledby="tabs-title">
68+
--fcc-editable-region--
69+
70+
--fcc-editable-region--
71+
</div>
72+
</div>
73+
74+
<script src="./script.js"></script>
75+
</body>
76+
</html>
77+
```
78+
79+
```css
80+
.tabs [role="tablist"] {
81+
display: flex;
82+
gap: 0.5rem;
83+
margin-bottom: 1rem;
84+
}
85+
86+
[role="tab"] {
87+
padding: 0.5rem 1rem;
88+
background: #eee;
89+
border: 1px solid #ccc;
90+
cursor: pointer;
91+
font-weight: bold;
92+
}
93+
94+
[role="tab"][aria-selected="true"] {
95+
background: #fff;
96+
border-bottom: 2px solid dodgerblue;
97+
}
98+
99+
[role="tabpanel"] {
100+
border: 1px solid #ccc;
101+
padding: 1rem;
102+
}
103+
```

0 commit comments

Comments
 (0)