Skip to content

Commit d9997a3

Browse files
Dario-DCDario-DC
authored
chore(curriculum): add fcc authors page workshop to FSD cert (freeCodeCamp#57054)
1 parent 2e76ea1 commit d9997a3

34 files changed

+5337
-2
lines changed

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2796,7 +2796,13 @@
27962796
]
27972797
},
27982798
"mjbe": { "title": "251", "intro": [] },
2799-
"byqx": { "title": "252", "intro": [] },
2799+
"workshop-fcc-authors-page": {
2800+
"title": "Build an fCC Authors Page",
2801+
"intro": [
2802+
"One common aspect of web development is learning how to fetch data from an external API, then work with asynchronous JavaScript.",
2803+
"In this workshop you will practice how to use the fetch method, dynamically update the DOM to display the fetched data and paginate your data so you can load results in batches."
2804+
]
2805+
},
28002806
"alda": { "title": "253", "intro": [] },
28012807
"cvaf": { "title": "254", "intro": [] },
28022808
"review-asynchronous-javascript": {

‎client/src/pages/learn/full-stack-developer/workshop-fcc-authors-page/index.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
title: Introduction to the Build an fCC Authors Page
3+
block: workshop-fcc-authors-page
4+
superBlock: full-stack-developer
5+
---
6+
7+
## Introduction to the Build an fCC Authors Page
8+
9+
One common aspect of web development is learning how to fetch data from an external API, then work with asynchronous JavaScript.
10+
11+
In this workshop you will practice how to use the fetch method, dynamically update the DOM to display the fetched data and paginate your data so you can load results in batches.

‎curriculum/challenges/_meta/workshop-fcc-authors-page/meta.json‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
{
2+
"name": "Build an fCC Authors Page",
3+
"blockType": "workshop",
4+
"blockLayout": "challenge-grid",
5+
"isUpcomingChange": true,
6+
"usesMultifileEditor": true,
7+
"hasEditableBoundaries": true,
8+
"dashedName": "workshop-fcc-authors-page",
9+
"superBlock": "full-stack-developer",
10+
"challengeOrder": [
11+
{
12+
"id": "641d9a19bff38d34d5a5edb8",
13+
"title": "Step 1"
14+
},
15+
{
16+
"id": "641da3c6b6fbd742bff6ee40",
17+
"title": "Step 2"
18+
},
19+
{
20+
"id": "641da42481d90c4314c99e94",
21+
"title": "Step 3"
22+
},
23+
{
24+
"id": "641da465273051435d332b15",
25+
"title": "Step 4"
26+
},
27+
{
28+
"id": "641da4b16937be43ba24c63d",
29+
"title": "Step 5"
30+
},
31+
{
32+
"id": "641da51a9810e74411262fcc",
33+
"title": "Step 6"
34+
},
35+
{
36+
"id": "641da5462576784453146ec2",
37+
"title": "Step 7"
38+
},
39+
{
40+
"id": "641da5abaac81844a54adb03",
41+
"title": "Step 8"
42+
},
43+
{
44+
"id": "641da5dd6cd6db44f58b7787",
45+
"title": "Step 9"
46+
},
47+
{
48+
"id": "641da615af82bf454215a992",
49+
"title": "Step 10"
50+
},
51+
{
52+
"id": "641da6570acf7545931ce477",
53+
"title": "Step 11"
54+
},
55+
{
56+
"id": "641da6dcb6e4c9463d54c75b",
57+
"title": "Step 12"
58+
},
59+
{
60+
"id": "641da7071d0d45467cd59977",
61+
"title": "Step 13"
62+
},
63+
{
64+
"id": "641da73b09e7f046c758e0ed",
65+
"title": "Step 14"
66+
},
67+
{
68+
"id": "641da791d0c34a472b8d15b6",
69+
"title": "Step 15"
70+
},
71+
{
72+
"id": "641da7bfbc7f0f477438ad8a",
73+
"title": "Step 16"
74+
},
75+
{
76+
"id": "641da803d9892447d059804e",
77+
"title": "Step 17"
78+
},
79+
{
80+
"id": "641da836581c254815f785fe",
81+
"title": "Step 18"
82+
},
83+
{
84+
"id": "641da86294fd9f485d3c2bf0",
85+
"title": "Step 19"
86+
},
87+
{
88+
"id": "641da895fb7ec648a5bdf19c",
89+
"title": "Step 20"
90+
},
91+
{
92+
"id": "641da8db2a036048ebe6999e",
93+
"title": "Step 21"
94+
},
95+
{
96+
"id": "641da97c987a514959ada414",
97+
"title": "Step 22"
98+
},
99+
{
100+
"id": "641da9aceb788e49a73ebcc9",
101+
"title": "Step 23"
102+
},
103+
{
104+
"id": "641da9ea9b847a49fe6ee9b6",
105+
"title": "Step 24"
106+
},
107+
{
108+
"id": "641daa5ea050f24a7cade6e6",
109+
"title": "Step 25"
110+
},
111+
{
112+
"id": "641daa8c2c3e364ac3650b37",
113+
"title": "Step 26"
114+
},
115+
{
116+
"id": "641daabed8d0584b1150c953",
117+
"title": "Step 27"
118+
},
119+
{
120+
"id": "641daae5e18eae4b562633e4",
121+
"title": "Step 28"
122+
},
123+
{
124+
"id": "641dab13c1b6f14b9828e6b1",
125+
"title": "Step 29"
126+
}
127+
],
128+
"helpCategory": "JavaScript"
129+
}

‎curriculum/challenges/english/25-front-end-development/workshop-fcc-authors-page/641d9a19bff38d34d5a5edb8.md‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
---
2+
id: 641d9a19bff38d34d5a5edb8
3+
title: Step 1
4+
challengeType: 0
5+
dashedName: step-1
6+
demoType: onLoad
7+
---
8+
9+
# --description--
10+
11+
All the HTML and CSS for this project has been provided for you. You can take a look at the two files to familiarize yourself with them.
12+
13+
Start by getting the `#author-container` and `#load-more-btn` elements with the `.getElementById()` method. Assign them to the variables `authorContainer` and `loadMoreBtn`, respectively.
14+
15+
The variables will not change, so use `const` to declare them.
16+
17+
# --hints--
18+
19+
You should use `document.getElementById()` to get the `#author-container` element.
20+
21+
```js
22+
assert.match(code, /document\.getElementById\(\s*('|"|`)author\-container\1\s*\)/);
23+
```
24+
25+
You should assign the `#author-container` element to the variable `authorContainer`. Don't forget to use `const` to declare the variable.
26+
27+
```js
28+
assert.match(code, /const\s+authorContainer\s*\=\s*document\.getElementById\(\s*('|"|`)author\-container\1\s*\)/);
29+
```
30+
31+
You should use `document.getElementById()` to get the `#load-more-btn` element.
32+
33+
```js
34+
assert.match(code, /document\.getElementById\(\s*('|"|`)load\-more\-btn\1\s*\)/);
35+
```
36+
37+
You should assign the `#load-more-btn` element to the variable `loadMoreBtn`. Don't forget to use `const` to declare the variable.
38+
39+
```js
40+
assert.match(code, /const\s+loadMoreBtn\s*\=\s*document\.getElementById\(\s*('|"|`)load\-more\-btn\1\s*\)/);
41+
```
42+
43+
# --seed--
44+
45+
## --seed-contents--
46+
47+
```html
48+
<!DOCTYPE html>
49+
<html lang="en">
50+
<head>
51+
<meta charset="UTF-8" />
52+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
53+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
54+
<title>freeCodeCamp News Author Page</title>
55+
<link rel="stylesheet" href="./styles.css" />
56+
</head>
57+
<body>
58+
<h1 class="title">freeCodeCamp News Author Page</h1>
59+
60+
<main>
61+
<div id="author-container"></div>
62+
<button class="btn" id="load-more-btn">Load More Authors</button>
63+
</main>
64+
65+
<script src="./script.js"></script>
66+
</body>
67+
</html>
68+
```
69+
70+
```css
71+
* {
72+
margin: 0;
73+
padding: 0;
74+
box-sizing: border-box;
75+
}
76+
77+
:root {
78+
--main-bg-color: #1b1b32;
79+
--light-grey: #f5f6f7;
80+
--dark-purple: #5a01a7;
81+
--golden-yellow: #feac32;
82+
}
83+
84+
body {
85+
background-color: var(--main-bg-color);
86+
text-align: center;
87+
}
88+
89+
.title {
90+
color: var(--light-grey);
91+
margin: 20px 0;
92+
}
93+
94+
#author-container {
95+
display: flex;
96+
flex-wrap: wrap;
97+
justify-content: center;
98+
}
99+
100+
.user-card {
101+
border-radius: 15px;
102+
width: 300px;
103+
height: 350px;
104+
background-color: var(--light-grey);
105+
margin: 20px;
106+
}
107+
108+
.user-img {
109+
width: 150px;
110+
height: 150px;
111+
object-fit: cover;
112+
}
113+
114+
.purple-divider {
115+
background-color: var(--dark-purple);
116+
width: 100%;
117+
height: 15px;
118+
}
119+
120+
.author-name {
121+
margin: 10px;
122+
}
123+
124+
.bio {
125+
margin: 20px;
126+
}
127+
128+
.error-msg {
129+
color: var(--light-grey);
130+
}
131+
132+
.btn {
133+
cursor: pointer;
134+
width: 200px;
135+
margin: 10px;
136+
color: var(--main-bg-color);
137+
font-size: 14px;
138+
background-color: var(--golden-yellow);
139+
background-image: linear-gradient(#fecc4c, #ffac33);
140+
border-color: var(--golden-yellow);
141+
border-width: 3px;
142+
}
143+
```
144+
145+
```js
146+
--fcc-editable-region--
147+
148+
--fcc-editable-region--
149+
```

0 commit comments

Comments
 (0)