Skip to content

Commit 7b885c0

Browse files
zairahiraDario-DCjdwilkin4
authored
feat: add story telling workshop (freeCodeCamp#56978)
Co-authored-by: Dario-DC <[email protected]> Co-authored-by: Jessica Wilkins <[email protected]>
1 parent 26d4b0e commit 7b885c0

File tree

20 files changed

+2961
-0
lines changed

20 files changed

+2961
-0
lines changed

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2815,6 +2815,12 @@
28152815
]
28162816
},
28172817
"gibb": { "title": "188", "intro": [] },
2818+
"workshop-storytelling-app": {
2819+
"title": "Build a Storytelling App",
2820+
"intro": [
2821+
"In this workshop, you will build a storytelling app that will allow you to list different stories based on genre."
2822+
]
2823+
},
28182824
"lab-favorite-icon-toggler": {
28192825
"title": "Build a Favorite Icon Toggler",
28202826
"intro": [

‎client/src/pages/learn/full-stack-developer/workshop-storytelling-app/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 Storytelling App
3+
block: workshop-storytelling-app
4+
superBlock: full-stack-developer
5+
---
6+
7+
## Introduction to the Build a Storytelling App
8+
9+
In this workshop, you will Build a Storytelling App that will allow you to list different stories based on genre.

‎curriculum/challenges/_meta/workshop-storytelling-app/meta.json‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
{
2+
"name": "Build a Storytelling App",
3+
"isUpcomingChange": true,
4+
"usesMultifileEditor": true,
5+
"hasEditableBoundaries": true,
6+
"blockType": "workshop",
7+
"blockLayout": "challenge-grid",
8+
"dashedName": "workshop-storytelling-app",
9+
"superBlock": "full-stack-developer",
10+
"challengeOrder": [
11+
{
12+
"id": "671f99a5dc221afb86fa2dc0",
13+
"title": "Step 1"
14+
},
15+
{
16+
"id": "671fa1717ba9ea1a5fa028e0",
17+
"title": "Step 2"
18+
},
19+
{
20+
"id": "671fa22e99042b1e91fe9d2e",
21+
"title": "Step 3"
22+
},
23+
{
24+
"id": "671fa3adf532d9231b2c25b8",
25+
"title": "Step 4"
26+
},
27+
{
28+
"id": "671fa47e415d88263d349a10",
29+
"title": "Step 5"
30+
},
31+
{
32+
"id": "671fa537114e412950b62089",
33+
"title": "Step 6"
34+
},
35+
{
36+
"id": "671fa769540d152e53327f4b",
37+
"title": "Step 7"
38+
},
39+
{
40+
"id": "671fa7ed8364b130b5c55d2e",
41+
"title": "Step 8"
42+
},
43+
{
44+
"id": "671fa82dc39e4c320352f371",
45+
"title": "Step 9"
46+
},
47+
{
48+
"id": "671fa93b5eee8737af8bafde",
49+
"title": "Step 10"
50+
},
51+
{
52+
"id": "671fae2d8e402a405a930e44",
53+
"title": "Step 11"
54+
},
55+
{
56+
"id": "671faec4b3733242b2c10989",
57+
"title": "Step 12"
58+
},
59+
{
60+
"id": "671faf18fd8b7b448a308bf3",
61+
"title": "Step 13"
62+
},
63+
{
64+
"id": "671faf4ac1e19245df4db7f5",
65+
"title": "Step 14"
66+
},
67+
{
68+
"id": "6724da4a41a727b89d2541c3",
69+
"title": "Step 15"
70+
},
71+
{
72+
"id": "671fafbae959c048d82bac8d",
73+
"title": "Step 16"
74+
}
75+
],
76+
"helpCategory": "HTML-CSS"
77+
}

‎curriculum/challenges/english/25-front-end-development/workshop-storytelling-app/671f99a5dc221afb86fa2dc0.md‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
---
2+
id: 671f99a5dc221afb86fa2dc0
3+
title: Step 1
4+
challengeType: 0
5+
dashedName: step-1
6+
demoType: onLoad
7+
---
8+
9+
# --description--
10+
11+
In this workshop, you will build a storytelling app that allows users to select a type of story and display a short story of that type. The CSS and the HTML boilerplate has been provided for you.
12+
13+
Begin by creating an `h1` element and give it a text `Want to hear a short story?`.
14+
15+
# --hints--
16+
17+
You should have an `h1` with the text `Want to hear a short story?`.
18+
19+
```js
20+
assert.exists(document.querySelector('h1'));
21+
assert.equal(document.querySelector('h1').textContent, 'Want to hear a short story?');
22+
```
23+
24+
# --seed--
25+
26+
## --seed-contents--
27+
28+
```html
29+
<!DOCTYPE html>
30+
<html lang="en">
31+
32+
<head>
33+
<meta charset="UTF-8" />
34+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
35+
<title>Storytelling App</title>
36+
<link rel="stylesheet" href="./styles.css" />
37+
</head>
38+
<body>
39+
--fcc-editable-region--
40+
41+
--fcc-editable-region--
42+
</body>
43+
</html>
44+
```
45+
46+
```css
47+
*,
48+
*::before,
49+
*::after {
50+
margin: 0;
51+
padding: 0;
52+
box-sizing: border-box;
53+
}
54+
55+
:root {
56+
--dark-grey: #1b1b32;
57+
--black: #000;
58+
--white: #fff;
59+
--golden-yellow: #fecc4c;
60+
--yellow: #ffcc4c;
61+
--gold: #feac32;
62+
--orange: #ffac33;
63+
--dark-orange: #f89808;
64+
}
65+
66+
body {
67+
background-color: var(--dark-grey);
68+
color: var(--white);
69+
}
70+
71+
h1,
72+
#result {
73+
text-align: center;
74+
}
75+
76+
h1 {
77+
margin: 10px 0 15px;
78+
}
79+
80+
.story-container {
81+
margin: auto;
82+
padding: 10px;
83+
width: 80%;
84+
border-style: double;
85+
border-width: 14px;
86+
border-color: var(--white);
87+
}
88+
89+
.btn-container {
90+
display: flex;
91+
flex-direction: column;
92+
justify-content: center;
93+
align-items: center;
94+
}
95+
96+
@media (min-width: 760px) {
97+
.btn-container {
98+
flex-direction: row;
99+
}
100+
}
101+
102+
#result {
103+
margin-top: 15px;
104+
font-size: 1.2rem;
105+
line-height: 30px;
106+
}
107+
108+
.btn {
109+
cursor: pointer;
110+
width: 200px;
111+
margin: 10px 0 10px 0.5rem;
112+
color: var(--black);
113+
background-color: var(--gold);
114+
background-image: linear-gradient(var(--golden-yellow), var(--orange));
115+
border-color: var(--gold);
116+
border-width: 3px;
117+
}
118+
119+
.btn:hover {
120+
background-image: linear-gradient(var(--yellow), var(--dark-orange));
121+
}
122+
```
123+

‎curriculum/challenges/english/25-front-end-development/workshop-storytelling-app/671fa1717ba9ea1a5fa028e0.md‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
---
2+
id: 671fa1717ba9ea1a5fa028e0
3+
title: Step 2
4+
challengeType: 0
5+
dashedName: step-2
6+
---
7+
8+
# --description--
9+
10+
Create a `main` element with a class of `story-container`. Inside the `story-container`, create a `div` with a class of `btn-container`.
11+
12+
# --hints--
13+
14+
You should have a `main` element with a class of `story-container`.
15+
16+
```js
17+
assert.exists(document.querySelector('main.story-container'));
18+
```
19+
20+
Inside the `story-container` element, you should have a `div` with a class of `btn-container`.
21+
22+
```js
23+
assert.exists(document.querySelector('main.story-container div.btn-container'));
24+
```
25+
26+
# --seed--
27+
28+
## --seed-contents--
29+
30+
```html
31+
<!DOCTYPE html>
32+
<html lang="en">
33+
34+
<head>
35+
<meta charset="UTF-8" />
36+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
37+
<title>Storytelling App</title>
38+
<link rel="stylesheet" href="./styles.css" />
39+
</head>
40+
41+
<body>
42+
<h1>Want to hear a short story?</h1>
43+
--fcc-editable-region--
44+
45+
--fcc-editable-region--
46+
</body>
47+
48+
</html>
49+
```
50+
51+
```css
52+
*,
53+
*::before,
54+
*::after {
55+
margin: 0;
56+
padding: 0;
57+
box-sizing: border-box;
58+
}
59+
60+
:root {
61+
--dark-grey: #1b1b32;
62+
--black: #000;
63+
--white: #fff;
64+
--golden-yellow: #fecc4c;
65+
--yellow: #ffcc4c;
66+
--gold: #feac32;
67+
--orange: #ffac33;
68+
--dark-orange: #f89808;
69+
}
70+
71+
body {
72+
background-color: var(--dark-grey);
73+
color: var(--white);
74+
}
75+
76+
h1,
77+
#result {
78+
text-align: center;
79+
}
80+
81+
h1 {
82+
margin: 10px 0 15px;
83+
}
84+
85+
.story-container {
86+
margin: auto;
87+
padding: 10px;
88+
width: 80%;
89+
border-style: double;
90+
border-width: 14px;
91+
border-color: var(--white);
92+
}
93+
94+
.btn-container {
95+
display: flex;
96+
flex-direction: column;
97+
justify-content: center;
98+
align-items: center;
99+
}
100+
101+
@media (min-width: 760px) {
102+
.btn-container {
103+
flex-direction: row;
104+
}
105+
}
106+
107+
#result {
108+
margin-top: 15px;
109+
font-size: 1.2rem;
110+
line-height: 30px;
111+
}
112+
113+
.btn {
114+
cursor: pointer;
115+
width: 200px;
116+
margin: 10px 0 10px 0.5rem;
117+
color: var(--black);
118+
background-color: var(--gold);
119+
background-image: linear-gradient(var(--golden-yellow), var(--orange));
120+
border-color: var(--gold);
121+
border-width: 3px;
122+
}
123+
124+
.btn:hover {
125+
background-image: linear-gradient(var(--yellow), var(--dark-orange));
126+
}
127+
```

0 commit comments

Comments
 (0)