gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Feat: add new Markdown parser (#39800)

Browse Source 
and change all the challenges to new `md` format.
This commit is contained in:
Oliver Eyton-Williams
2020-11-27 19:02:05 +01:00
committed by GitHub
parent a07f84c8ec
commit 0bd52f8bd1
2580 changed files with 113436 additions and 111979 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
curriculum/challenges/english/10-coding-interview-prep/take-home-projects/build-a-camper-leaderboard.md
View File

@ -5,43 +5,31 @@ challengeType: 3
forumTopicId: 302349
---
## Description
<section id='description'>
<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/JqdoMV' target='_blank'>https://codepen.io/freeCodeCamp/full/JqdoMV</a>.
Fulfill the below <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.
<strong>User Story:</strong> I can see a list of the most recent posts on the freeCodeCamp forum.
<strong>User Story:</strong> For each topic, I can see the title and a list of links to users who have recently posted in it.
<strong>User Story:</strong> I can see the number of replies and views that each topic has had, and a timestamp of when the topic was last active.
<strong>Hint:</strong> To get the 30 most recent forum posts: <a href='https://forum-proxy.freecodecamp.rocks/latest' target='_blank'>https://forum-proxy.freecodecamp.rocks/latest</a>.
# --description--
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/JqdoMV>.
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story). Use whichever libraries or APIs you need. Give it your own personal style.
**User Story:** I can see a list of the most recent posts on the freeCodeCamp forum.
**User Story:** For each topic, I can see the title and a list of links to users who have recently posted in it.
**User Story:** I can see the number of replies and views that each topic has had, and a timestamp of when the topic was last active.
**Hint:** To get the 30 most recent forum posts: <https://forum-proxy.freecodecamp.rocks/latest>.
When you are finished, include a link to your project on CodePen and click the "I've completed this challenge" button.
You can get feedback on your project by sharing it on the <a href='https://forum.freecodecamp.org/c/project-feedback/409' target='_blank'>freeCodeCamp forum</a>.
</section>
## Instructions
<section id='instructions'>
You can get feedback on your project by sharing it on the [freeCodeCamp forum](https://forum.freecodecamp.org/c/project-feedback/409).
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests: []
# --seed--
```
</section>
## Challenge Seed
<section id='challengeSeed'>
</section>
## Solution
<section id='solution'>
# --solutions--
```js
// solution required
```
</section>

57
curriculum/challenges/english/10-coding-interview-prep/take-home-projects/build-a-light-bright-app.md
View File

@ -5,46 +5,37 @@ challengeType: 3
forumTopicId: 302350
---
## Description
<section id='description'>
<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/eyLYXE' target='_blank'>https://codepen.io/freeCodeCamp/full/eyLYXE</a>.
<strong>Rule #1:</strong> Don't look at the example project's code. Figure it out for yourself.
<strong>Rule #2:</strong> Fulfill the below <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.
<strong>User Story:</strong> I can click or drag the mouse cursor to color the circles.
<strong>User Story:</strong> I can double-click on a colored circle to remove the color.
<strong>User Story:</strong> I can click on a colored circle to change its color.
<strong>User Story:</strong> I should get a circle of different color on each click.
<strong>User Story:</strong> I can click on the 'Reset' button to remove the recent color.
<strong>User Story:</strong> I can click on the 'Reset All' button to remove all the colors from the circles.
# --description--
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/eyLYXE>.
**Rule #1:** Don't look at the example project's code. Figure it out for yourself.
**Rule #2:** Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story). Use whichever libraries or APIs you need. Give it your own personal style.
**User Story:** I can click or drag the mouse cursor to color the circles.
**User Story:** I can double-click on a colored circle to remove the color.
**User Story:** I can click on a colored circle to change its color.
**User Story:** I should get a circle of different color on each click.
**User Story:** I can click on the 'Reset' button to remove the recent color.
**User Story:** I can click on the 'Reset All' button to remove all the colors from the circles.
When you are finished, include a link to your project on CodePen and click the "I've completed this challenge" button.
You can get feedback on your project by sharing it on the <a href='https://forum.freecodecamp.org/c/project-feedback/409' target='_blank'>freeCodeCamp forum</a>.
</section>
## Instructions
<section id='instructions'>
You can get feedback on your project by sharing it on the [freeCodeCamp forum](https://forum.freecodecamp.org/c/project-feedback/409).
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests: []
# --seed--
```
</section>
## Challenge Seed
<section id='challengeSeed'>
</section>
## Solution
<section id='solution'>
# --solutions--
```js
// solution required
```
</section>

40
curriculum/challenges/english/10-coding-interview-prep/take-home-projects/build-a-nightlife-coordination-app.md
View File

@ -5,43 +5,31 @@ challengeType: 4
forumTopicId: 302351
---
## Description
<section id='description'>
Build a full stack JavaScript app that is functionally similar to this: <a href='https://yoyo44.herokuapp.com/' target='_blank'>https://yoyo44.herokuapp.com/</a>. Use a site builder of your choice to complete the project.
# --description--
Build a full stack JavaScript app that is functionally similar to this: <https://yoyo44.herokuapp.com/>. Use a site builder of your choice to complete the project.
Here are the specific user stories you should implement for this project:
<strong>User Story:</strong> As an unauthenticated user, you can view all bars in my area.
<strong>User Story:</strong> As an authenticated user, you can add myself to a bar to indicate you am going there tonight.
<strong>User Story:</strong> As an authenticated user, you can remove myself from a bar if you no longer want to go there.
<strong>User Story:</strong> As an unauthenticated user, when you login you should not have to search again.
<strong>Hint:</strong> Try using the <a href='https://www.yelp.com/developers/documentation/v3' target='_blank'>Yelp API</a> to find venues in the cities your users search for. If you use Yelp's API, be sure to mention so in your app.
When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field.
</section>
## Instructions
<section id='instructions'>
**User Story:** As an unauthenticated user, you can view all bars in my area.
</section>
**User Story:** As an authenticated user, you can add myself to a bar to indicate you am going there tonight.
## Tests
<section id='tests'>
**User Story:** As an authenticated user, you can remove myself from a bar if you no longer want to go there.
```yml
tests: []
**User Story:** As an unauthenticated user, when you login you should not have to search again.
```
**Hint:** Try using the [Yelp API](https://www.yelp.com/developers/documentation/v3) to find venues in the cities your users search for. If you use Yelp's API, be sure to mention so in your app.
</section>
When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the \`Solution Link\` field. Optionally, also submit a link to your project's source code in the \`GitHub Link\` field.
## Challenge Seed
<section id='challengeSeed'>
# --hints--
</section>
## Solution
<section id='solution'>
# --seed--
# --solutions--
```js
// solution required
```
</section>

57
curriculum/challenges/english/10-coding-interview-prep/take-home-projects/build-a-pinterest-clone.md
View File

@ -5,46 +5,37 @@ challengeType: 4
forumTopicId: 302352
---
## Description
<section id='description'>
<strong>Objective:</strong> Build a <a href='https://repl.it/' target='_blank'>Repl.it</a> app that is functionally similar to this: <a href='https://build-a-pinterest-clone.freecodecamp.rocks/' target='_blank'>https://build-a-pinterest-clone.freecodecamp.rocks/</a>.
Fulfill the below <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.
<strong>User Story:</strong> As an unauthenticated user, I can login with GitHub.
<strong>User Story:</strong> As an authenticated user, I can link to images.
<strong>User Story:</strong> As an authenticated user, I can delete images that I've linked to.
<strong>User Story:</strong> As an authenticated user, I can see a Pinterest-style wall of all the images I've linked to.
<strong>User Story:</strong> As an unauthenticated user, I can browse other users' walls of images.
<strong>User Story:</strong> As an authenticated user, if I upload an image that is broken, it will be replaced by a placeholder image. (can use jQuery broken image detection)
<strong>Hint:</strong> <a href='https://masonry.desandro.com/' target='_blank'>Masonry.js</a> is a library that allows for Pinterest-style image grids.
# --description--
**Objective:** Build a [Repl.it](https://repl.it/) app that is functionally similar to this: <https://build-a-pinterest-clone.freecodecamp.rocks/>.
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story). Use whichever libraries or APIs you need. Give it your own personal style.
**User Story:** As an unauthenticated user, I can login with GitHub.
**User Story:** As an authenticated user, I can link to images.
**User Story:** As an authenticated user, I can delete images that I've linked to.
**User Story:** As an authenticated user, I can see a Pinterest-style wall of all the images I've linked to.
**User Story:** As an unauthenticated user, I can browse other users' walls of images.
**User Story:** As an authenticated user, if I upload an image that is broken, it will be replaced by a placeholder image. (can use jQuery broken image detection)
**Hint:** [Masonry.js](https://masonry.desandro.com/) is a library that allows for Pinterest-style image grids.
Once you've finished implementing these user stories, enter the URL to your live app and, optionally, your GitHub repository. Then click the "I've completed this challenge" button.
You can get feedback on your project by sharing it on the <a href='https://forum.freecodecamp.org/c/project-feedback/409' target='_blank'>freeCodeCamp forum</a>.
</section>
## Instructions
<section id='instructions'>
You can get feedback on your project by sharing it on the [freeCodeCamp forum](https://forum.freecodecamp.org/c/project-feedback/409).
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests: []
# --seed--
```
</section>
## Challenge Seed
<section id='challengeSeed'>
</section>
## Solution
<section id='solution'>
# --solutions--
```js
// solution required
```
</section>

51
curriculum/challenges/english/10-coding-interview-prep/take-home-projects/build-a-pong-game.md
View File

@ -5,44 +5,33 @@ challengeType: 3
forumTopicId: 302353
---
## Description
<section id='description'>
<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/satyamdev/full/pdMmBp' target='_blank'>https://codepen.io/satyamdev/full/pdMmBp</a>.
<strong>Rule #1:</strong> Don't look at the example project's code. Figure it out for yourself.
<strong>Rule #2:</strong> Fulfill the below <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.
<strong>User Story:</strong> I can control a paddle.
<strong>User Story:</strong> The computer can control the other paddle.
<strong>User Story:</strong> The computer's paddle is unbeatable. It should never miss the ball.
<strong>User Story:</strong> The game keeps track of the player and computer's score.
# --description--
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/satyamdev/full/pdMmBp>.
**Rule #1:** Don't look at the example project's code. Figure it out for yourself.
**Rule #2:** Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story). Use whichever libraries or APIs you need. Give it your own personal style.
**User Story:** I can control a paddle.
**User Story:** The computer can control the other paddle.
**User Story:** The computer's paddle is unbeatable. It should never miss the ball.
**User Story:** The game keeps track of the player and computer's score.
When you are finished, include a link to your project on CodePen and click the "I've completed this challenge" button.
You can get feedback on your project by sharing it on the <a href='https://forum.freecodecamp.org/c/project-feedback/409' target='_blank'>freeCodeCamp forum</a>.
</section>
## Instructions
<section id='instructions'>
You can get feedback on your project by sharing it on the [freeCodeCamp forum](https://forum.freecodecamp.org/c/project-feedback/409).
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests: []
# --seed--
```
</section>
## Challenge Seed
<section id='challengeSeed'>
</section>
## Solution
<section id='solution'>
# --solutions--
```js
// solution required
```
</section>

57
curriculum/challenges/english/10-coding-interview-prep/take-home-projects/build-a-recipe-box.md
View File

@ -5,46 +5,37 @@ challengeType: 3
forumTopicId: 302354
---
## Description
<section id='description'>
<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/dNVazZ/' target='_blank'>https://codepen.io/freeCodeCamp/full/dNVazZ/</a>.
Fulfill the below <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.
<strong>User Story:</strong> I can create recipes that have names and ingredients.
<strong>User Story:</strong> I can see an index view where the names of all the recipes are visible.
<strong>User Story:</strong> I can click into any of those recipes to view it.
<strong>User Story:</strong> I can edit these recipes.
<strong>User Story:</strong> I can delete these recipes.
<strong>User Story:</strong> All new recipes I add are saved in my browser's local storage. If I refresh the page, these recipes will still be there.
<strong>Hint: </strong> You should prefix your local storage keys on CodePen, i.e. <code>_username_recipes</code>
# --description--
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/dNVazZ/>.
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story). Use whichever libraries or APIs you need. Give it your own personal style.
**User Story:** I can create recipes that have names and ingredients.
**User Story:** I can see an index view where the names of all the recipes are visible.
**User Story:** I can click into any of those recipes to view it.
**User Story:** I can edit these recipes.
**User Story:** I can delete these recipes.
**User Story:** All new recipes I add are saved in my browser's local storage. If I refresh the page, these recipes will still be there.
**Hint:** You should prefix your local storage keys on CodePen, i.e. `_username_recipes`
When you are finished, include a link to your project on CodePen and click the "I've completed this challenge" button.
You can get feedback on your project by sharing it on the <a href='https://forum.freecodecamp.org/c/project-feedback/409' target='_blank'>freeCodeCamp forum</a>.
</section>
## Instructions
<section id='instructions'>
You can get feedback on your project by sharing it on the [freeCodeCamp forum](https://forum.freecodecamp.org/c/project-feedback/409).
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests: []
# --seed--
```
</section>
## Challenge Seed
<section id='challengeSeed'>
</section>
## Solution
<section id='solution'>
# --solutions--
```js
// solution required
```
</section>

63
curriculum/challenges/english/10-coding-interview-prep/take-home-projects/build-a-roguelike-dungeon-crawler-game.md
View File

@ -5,48 +5,41 @@ challengeType: 3
forumTopicId: 302355
---
## Description
<section id='description'>
<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/apLXEJ/' target='_blank'>https://codepen.io/freeCodeCamp/full/apLXEJ/</a>.
Fulfill the below <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.
<strong>User Story:</strong> I have health, a level, and a weapon. I can pick up a better weapon. I can pick up health items.
<strong>User Story:</strong> All the items and enemies on the map are arranged at random.
<strong>User Story:</strong> I can move throughout a map, discovering items.
<strong>User Story:</strong> I can move anywhere within the map's boundaries, but I can't move through an enemy until I've beaten it.
<strong>User Story:</strong> Much of the map is hidden. When I take a step, all spaces that are within a certain number of spaces from me are revealed.
<strong>User Story:</strong> When I beat an enemy, the enemy goes away and I get XP, which eventually increases my level.
<strong>User Story:</strong> When I fight an enemy, we take turns damaging each other until one of us loses. I do damage based off of my level and my weapon. The enemy does damage based off of its level. Damage is somewhat random within a range.
<strong>User Story:</strong> When I find and beat the boss, I win.
<strong>User Story:</strong> The game should be challenging, but theoretically winnable.
# --description--
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/apLXEJ/>.
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story). Use whichever libraries or APIs you need. Give it your own personal style.
**User Story:** I have health, a level, and a weapon. I can pick up a better weapon. I can pick up health items.
**User Story:** All the items and enemies on the map are arranged at random.
**User Story:** I can move throughout a map, discovering items.
**User Story:** I can move anywhere within the map's boundaries, but I can't move through an enemy until I've beaten it.
**User Story:** Much of the map is hidden. When I take a step, all spaces that are within a certain number of spaces from me are revealed.
**User Story:** When I beat an enemy, the enemy goes away and I get XP, which eventually increases my level.
**User Story:** When I fight an enemy, we take turns damaging each other until one of us loses. I do damage based off of my level and my weapon. The enemy does damage based off of its level. Damage is somewhat random within a range.
**User Story:** When I find and beat the boss, I win.
**User Story:** The game should be challenging, but theoretically winnable.
When you are finished, include a link to your project on CodePen and click the "I've completed this challenge" button.
You can get feedback on your project by sharing it on the <a href='https://forum.freecodecamp.org/c/project-feedback/409' target='_blank'>freeCodeCamp forum</a>.
</section>
## Instructions
<section id='instructions'>
You can get feedback on your project by sharing it on the [freeCodeCamp forum](https://forum.freecodecamp.org/c/project-feedback/409).
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests: []
# --seed--
```
</section>
## Challenge Seed
<section id='challengeSeed'>
</section>
## Solution
<section id='solution'>
# --solutions--
```js
// solution required
```
</section>

63
curriculum/challenges/english/10-coding-interview-prep/take-home-projects/build-a-simon-game.md
View File

@ -5,48 +5,41 @@ challengeType: 3
forumTopicId: 302357
---
## Description
<section id='description'>
<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/Em-Ant/full/QbRyqq/' target='_blank'>https://codepen.io/freeCodeCamp/full/obYBjE</a>.
Fulfill the below <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.
<strong>User Story:</strong> I am presented with a random series of button presses.
<strong>User Story:</strong> Each time I input a series of button presses correctly, I see the same series of button presses but with an additional step.
<strong>User Story:</strong> I hear a sound that corresponds to each button both when the series of button presses plays, and when I personally press a button.
<strong>User Story:</strong> If I press the wrong button, I am notified that I have done so, and that series of button presses starts again to remind me of the pattern so I can try again.
<strong>User Story:</strong> I can see how many steps are in the current series of button presses.
<strong>User Story:</strong> If I want to restart, I can hit a button to do so, and the game will return to a single step.
<strong>User Story:</strong> I can play in strict mode where if I get a button press wrong, it notifies me that I have done so, and the game restarts at a new random series of button presses.
<strong>User Story:</strong> I can win the game by getting a series of 20 steps correct. I am notified of my victory, then the game starts over.
<strong>Hint:</strong> Here are mp3s you can use for each button: <code>https://s3.amazonaws.com/freecodecamp/simonSound1.mp3</code>, <code>https://s3.amazonaws.com/freecodecamp/simonSound2.mp3</code>, <code>https://s3.amazonaws.com/freecodecamp/simonSound3.mp3</code>, <code>https://s3.amazonaws.com/freecodecamp/simonSound4.mp3</code>.
# --description--
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: [https://codepen.io/freeCodeCamp/full/obYBjE](https://codepen.io/Em-Ant/full/QbRyqq/).
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story). Use whichever libraries or APIs you need. Give it your own personal style.
**User Story:** I am presented with a random series of button presses.
**User Story:** Each time I input a series of button presses correctly, I see the same series of button presses but with an additional step.
**User Story:** I hear a sound that corresponds to each button both when the series of button presses plays, and when I personally press a button.
**User Story:** If I press the wrong button, I am notified that I have done so, and that series of button presses starts again to remind me of the pattern so I can try again.
**User Story:** I can see how many steps are in the current series of button presses.
**User Story:** If I want to restart, I can hit a button to do so, and the game will return to a single step.
**User Story:** I can play in strict mode where if I get a button press wrong, it notifies me that I have done so, and the game restarts at a new random series of button presses.
**User Story:** I can win the game by getting a series of 20 steps correct. I am notified of my victory, then the game starts over.
**Hint:** Here are mp3s you can use for each button: `https://s3.amazonaws.com/freecodecamp/simonSound1.mp3`, `https://s3.amazonaws.com/freecodecamp/simonSound2.mp3`, `https://s3.amazonaws.com/freecodecamp/simonSound3.mp3`, `https://s3.amazonaws.com/freecodecamp/simonSound4.mp3`.
When you are finished, include a link to your project on CodePen and click the "I've completed this challenge" button.
You can get feedback on your project by sharing it on the <a href='https://forum.freecodecamp.org/c/project-feedback/409' target='_blank'>freeCodeCamp forum</a>.
</section>
## Instructions
<section id='instructions'>
You can get feedback on your project by sharing it on the [freeCodeCamp forum](https://forum.freecodecamp.org/c/project-feedback/409).
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests: []
# --seed--
```
</section>
## Challenge Seed
<section id='challengeSeed'>
</section>
## Solution
<section id='solution'>
# --solutions--
```js
// solution required
```
</section>

45
curriculum/challenges/english/10-coding-interview-prep/take-home-projects/build-a-tic-tac-toe-game.md
View File

@ -5,42 +5,29 @@ challengeType: 3
forumTopicId: 302358
---
## Description
<section id='description'>
<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/KzXQgy/' target='_blank'>https://codepen.io/freeCodeCamp/full/KzXQgy/</a>.
Fulfill the below <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.
<strong>User Story:</strong> I can play a game of Tic Tac Toe with the computer.
<strong>User Story:</strong> My game will reset as soon as it's over so I can play again.
<strong>User Story:</strong> I can choose whether I want to play as X or O.
# --description--
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/KzXQgy/>.
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story). Use whichever libraries or APIs you need. Give it your own personal style.
**User Story:** I can play a game of Tic Tac Toe with the computer.
**User Story:** My game will reset as soon as it's over so I can play again.
**User Story:** I can choose whether I want to play as X or O.
When you are finished, include a link to your project on CodePen and click the "I've completed this challenge" button.
You can get feedback on your project by sharing it on the <a href='https://forum.freecodecamp.org/c/project-feedback/409' target='_blank'>freeCodeCamp forum</a>.
</section>
## Instructions
<section id='instructions'>
You can get feedback on your project by sharing it on the [freeCodeCamp forum](https://forum.freecodecamp.org/c/project-feedback/409).
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests: []
# --seed--
```
</section>
## Challenge Seed
<section id='challengeSeed'>
</section>
## Solution
<section id='solution'>
# --solutions--
```js
// solution required
```
</section>

49
curriculum/challenges/english/10-coding-interview-prep/take-home-projects/build-a-voting-app.md
View File

@ -5,46 +5,37 @@ challengeType: 4
forumTopicId: 302359
---
## Description
<section id='description'>
Build a full stack JavaScript app that is functionally similar to this: <a href='https://fcc-voting-arthow4n.herokuapp.com/' target='_blank'>https://fcc-voting-arthow4n.herokuapp.com/</a>. Use a site builder of your choice to complete the project.
# --description--
Build a full stack JavaScript app that is functionally similar to this: <https://fcc-voting-arthow4n.herokuapp.com/>. Use a site builder of your choice to complete the project.
Here are the specific user stories you should implement for this project:
<strong>User Story:</strong> As an authenticated user, you can keep my polls and come back later to access them.
<strong>User Story:</strong> As an authenticated user, you can share my polls with my friends.
<strong>User Story:</strong> As an authenticated user, you can see the aggregate results of my polls.
<strong>User Story:</strong> As an authenticated user, you can delete polls that I decide I don't want anymore.
<strong>User Story:</strong> As an authenticated user, you can create a poll with any number of possible items.
<strong>User Story:</strong> As an unauthenticated or authenticated user, you can see and vote on everyone's polls.
<strong>User Story:</strong> As an unauthenticated or authenticated user, you can see the results of polls in chart form. (This could be implemented using Chart.js or Google Charts.)
<strong>User Story:</strong> As an authenticated user, if you don't like the options on a poll, you can create a new option.
When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field.
</section>
## Instructions
<section id='instructions'>
**User Story:** As an authenticated user, you can keep my polls and come back later to access them.
</section>
**User Story:** As an authenticated user, you can share my polls with my friends.
## Tests
<section id='tests'>
**User Story:** As an authenticated user, you can see the aggregate results of my polls.
```yml
tests: []
**User Story:** As an authenticated user, you can delete polls that I decide I don't want anymore.
```
**User Story:** As an authenticated user, you can create a poll with any number of possible items.
</section>
**User Story:** As an unauthenticated or authenticated user, you can see and vote on everyone's polls.
## Challenge Seed
<section id='challengeSeed'>
**User Story:** As an unauthenticated or authenticated user, you can see the results of polls in chart form. (This could be implemented using Chart.js or Google Charts.)
</section>
**User Story:** As an authenticated user, if you don't like the options on a poll, you can create a new option.
## Solution
<section id='solution'>
When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the \`Solution Link\` field. Optionally, also submit a link to your project's source code in the \`GitHub Link\` field.
# --hints--
# --seed--
# --solutions--
```js
// solution required
```
</section>

51
curriculum/challenges/english/10-coding-interview-prep/take-home-projects/build-a-wikipedia-viewer.md
View File

@ -5,44 +5,33 @@ challengeType: 3
forumTopicId: 302360
---
## Description
<section id='description'>
<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/wGqEga/' target='_blank'>https://codepen.io/freeCodeCamp/full/wGqEga/</a>.
Fulfill the below <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.
<strong>User Story:</strong> I can search Wikipedia entries in a search box and see the resulting Wikipedia entries.
<strong>User Story:</strong> I can click a button to see a random Wikipedia entry.
<span class='text-info'>Hint #1:</span> Here's a URL you can use to get a random Wikipedia article: <code>https://en.wikipedia.org/wiki/Special:Random</code>.
<span class='text-info'>Hint #2:</span> Here's an entry on using Wikipedia's API: <code>https://www.mediawiki.org/wiki/API:Main_page</code>.
<span class='text-info'>Hint #3:</span> Use this <a href='https://en.wikipedia.org/wiki/Special:ApiSandbox#action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=jsonfm' target='_blank'>link</a> to experiment with Wikipedia's API.
# --description--
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/wGqEga/>.
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story). Use whichever libraries or APIs you need. Give it your own personal style.
**User Story:** I can search Wikipedia entries in a search box and see the resulting Wikipedia entries.
**User Story:** I can click a button to see a random Wikipedia entry.
Hint #1: Here's a URL you can use to get a random Wikipedia article: `https://en.wikipedia.org/wiki/Special:Random`.
Hint #2: Here's an entry on using Wikipedia's API: `https://www.mediawiki.org/wiki/API:Main_page`.
Hint #3: Use this [link](https://en.wikipedia.org/wiki/Special:ApiSandbox#action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=jsonfm) to experiment with Wikipedia's API.
When you are finished, include a link to your project on CodePen and click the "I've completed this challenge" button.
You can get feedback on your project by sharing it on the <a href='https://forum.freecodecamp.org/c/project-feedback/409' target='_blank'>freeCodeCamp forum</a>.
</section>
## Instructions
<section id='instructions'>
You can get feedback on your project by sharing it on the [freeCodeCamp forum](https://forum.freecodecamp.org/c/project-feedback/409).
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests: []
# --seed--
```
</section>
## Challenge Seed
<section id='challengeSeed'>
</section>
## Solution
<section id='solution'>
# --solutions--
```js
// solution required
```
</section>

36
curriculum/challenges/english/10-coding-interview-prep/take-home-projects/build-an-image-search-abstraction-layer.md
View File

@ -5,41 +5,27 @@ challengeType: 4
forumTopicId: 302361
---
## Description
<section id='description'>
Build a full stack JavaScript app that allows you to search for images like this: <a href='https://cryptic-ridge-9197.herokuapp.com/api/imagesearch/lolcats%20funny?offset=10' target='_blank'>https://cryptic-ridge-9197.herokuapp.com/api/imagesearch/lolcats%20funny?offset=10</a> and browse recent search queries like this: <a href='https://cryptic-ridge-9197.herokuapp.com/api/latest/imagesearch/' target='_blank'>https://cryptic-ridge-9197.herokuapp.com/api/latest/imagesearch/</a>. Use a site builder of your choice to complete the project.
# --description--
Build a full stack JavaScript app that allows you to search for images like this: <https://cryptic-ridge-9197.herokuapp.com/api/imagesearch/lolcats%20funny?offset=10> and browse recent search queries like this: <https://cryptic-ridge-9197.herokuapp.com/api/latest/imagesearch/>. Use a site builder of your choice to complete the project.
Here are the specific user stories you should implement for this project:
<strong>User Story:</strong> You can get the image URLs, alt text and page URLs for a set of images relating to a given search string.
<strong>User Story:</strong> You can paginate through the responses by adding a ?offset=2 parameter to the URL.
<strong>User Story:</strong> You can get a list of the most recently submitted search strings.
When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field.
</section>
## Instructions
<section id='instructions'>
**User Story:** You can get the image URLs, alt text and page URLs for a set of images relating to a given search string.
</section>
**User Story:** You can paginate through the responses by adding a ?offset=2 parameter to the URL.
## Tests
<section id='tests'>
**User Story:** You can get a list of the most recently submitted search strings.
```yml
tests: []
When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the \`Solution Link\` field. Optionally, also submit a link to your project's source code in the \`GitHub Link\` field.
```
# --hints--
</section>
## Challenge Seed
<section id='challengeSeed'>
# --seed--
</section>
## Solution
<section id='solution'>
# --solutions--
```js
// solution required
```
</section>

60
curriculum/challenges/english/10-coding-interview-prep/take-home-projects/build-the-game-of-life.md
View File

@ -5,47 +5,39 @@ challengeType: 3
forumTopicId: 302362
---
## Description
<section id='description'>
<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/BpwMZv/' target='_blank'>https://codepen.io/freeCodeCamp/full/BpwMZv/</a>.
Fulfill the below <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.
<strong>User Story:</strong> When I first arrive at the game, it will randomly generate a board and start playing.
<strong>User Story:</strong> I can start and stop the board.
<strong>User Story:</strong> I can set up the board.
<strong>User Story:</strong> I can clear the board.
<strong>User Story:</strong> When I press start, the game will play out.
<strong>User Story:</strong> Each time the board changes, I can see how many generations have gone by.
<strong>Hint:</strong> Here's an explanation of Conway's Game of Life from John Conway himself: <a href='https://www.youtube.com/watch?v=E8kUJL04ELA' target='_blank'>https://www.youtube.com/watch?v=E8kUJL04ELA</a>
<strong>Hint:</strong> Here's an overview of Conway's Game of Life with rules for your reference: <a href='https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life' target='_blank'>https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life</a>
# --description--
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/BpwMZv/>.
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story). Use whichever libraries or APIs you need. Give it your own personal style.
**User Story:** When I first arrive at the game, it will randomly generate a board and start playing.
**User Story:** I can start and stop the board.
**User Story:** I can set up the board.
**User Story:** I can clear the board.
**User Story:** When I press start, the game will play out.
**User Story:** Each time the board changes, I can see how many generations have gone by.
**Hint:** Here's an explanation of Conway's Game of Life from John Conway himself: <https://www.youtube.com/watch?v=E8kUJL04ELA>
**Hint:** Here's an overview of Conway's Game of Life with rules for your reference: <https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life>
When you are finished, include a link to your project on CodePen and click the "I've completed this challenge" button.
You can get feedback on your project by sharing it on the <a href='https://forum.freecodecamp.org/c/project-feedback/409' target='_blank'>freeCodeCamp forum</a>.
</section>
## Instructions
<section id='instructions'>
You can get feedback on your project by sharing it on the [freeCodeCamp forum](https://forum.freecodecamp.org/c/project-feedback/409).
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests: []
# --seed--
```
</section>
## Challenge Seed
<section id='challengeSeed'>
</section>
## Solution
<section id='solution'>
# --solutions--
```js
// solution required
```
</section>

37
curriculum/challenges/english/10-coding-interview-prep/take-home-projects/chart-the-stock-market.md
View File

@ -5,42 +5,29 @@ challengeType: 4
forumTopicId: 302363
---
## Description
<section id='description'>
Build a full stack JavaScript app that is functionally similar to this: <a href='https://watchstocks.herokuapp.com/' target='_blank'>https://watchstocks.herokuapp.com/</a>. Use a site builder of your choice to complete the project.
# --description--
Build a full stack JavaScript app that is functionally similar to this: <https://watchstocks.herokuapp.com/>. Use a site builder of your choice to complete the project.
Here are the specific user stories you should implement for this project:
<strong>User Story:</strong> You can view a graph displaying the recent trend lines for each added stock.
<strong>User Story:</strong> You can add new stocks by their symbol name.
<strong>User Story:</strong> You can remove stocks.
<strong>User Story:</strong> You can see changes in real-time when any other user adds or removes a stock. For this you will need to use Web Sockets.
When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field.
</section>
## Instructions
<section id='instructions'>
**User Story:** You can view a graph displaying the recent trend lines for each added stock.
</section>
**User Story:** You can add new stocks by their symbol name.
## Tests
<section id='tests'>
**User Story:** You can remove stocks.
```yml
tests: []
**User Story:** You can see changes in real-time when any other user adds or removes a stock. For this you will need to use Web Sockets.
```
When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the \`Solution Link\` field. Optionally, also submit a link to your project's source code in the \`GitHub Link\` field.
</section>
# --hints--
## Challenge Seed
<section id='challengeSeed'>
</section>
# --seed--
## Solution
<section id='solution'>
# --solutions--
```js
// solution required
```
</section>

48
curriculum/challenges/english/10-coding-interview-prep/take-home-projects/manage-a-book-trading-club.md
View File

@ -5,43 +5,31 @@ challengeType: 4
forumTopicId: 302364
---
## Description
<section id='description'>
<strong>Objective:</strong> Build a <a href='https://repl.it/' target='_blank'>Repl.it</a> app that is functionally similar to this: <a href='https://manage-a-book-trading-club.freecodecamp.rocks/' target='_blank'>https://manage-a-book-trading-club.freecodecamp.rocks/</a>.
Fulfill the below <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.
<strong>User Story:</strong> I can view all books posted by every user.
<strong>User Story:</strong> I can add a new book.
<strong>User Story:</strong> I can update my settings to store my full name, city, and state.
<strong>User Story:</strong> I can propose a trade and wait for the other user to accept the trade.
# --description--
**Objective:** Build a [Repl.it](https://repl.it/) app that is functionally similar to this: <https://manage-a-book-trading-club.freecodecamp.rocks/>.
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story). Use whichever libraries or APIs you need. Give it your own personal style.
**User Story:** I can view all books posted by every user.
**User Story:** I can add a new book.
**User Story:** I can update my settings to store my full name, city, and state.
**User Story:** I can propose a trade and wait for the other user to accept the trade.
Once you've finished implementing these user stories, enter the URL to your live app and, optionally, your GitHub repository. Then click the "I've completed this challenge" button.
You can get feedback on your project by sharing it on the <a href='https://forum.freecodecamp.org/c/project-feedback/409' target='_blank'>freeCodeCamp forum</a>.
</section>
## Instructions
<section id='instructions'>
You can get feedback on your project by sharing it on the [freeCodeCamp forum](https://forum.freecodecamp.org/c/project-feedback/409).
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests: []
# --seed--
```
</section>
## Challenge Seed
<section id='challengeSeed'>
</section>
## Solution
<section id='solution'>
# --solutions--
```js
// solution required
```
</section>

48
curriculum/challenges/english/10-coding-interview-prep/take-home-projects/map-data-across-the-globe.md
View File

@ -5,43 +5,31 @@ challengeType: 3
forumTopicId: 302365
---
## Description
<section id='description'>
<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/mVEJag' target='_blank'>https://codepen.io/freeCodeCamp/full/mVEJag</a>.
Fulfill the following <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.
<strong>User Story:</strong> I can see where all Meteorites landed on a world map.
<strong>User Story:</strong> I can tell the relative size of the meteorite, just by looking at the way it's represented on the map.
<strong>User Story:</strong> I can mouse over the meteorite's data point for additional data.
<strong>Hint:</strong> Here's a dataset you can use to build this: <a href='https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/meteorite-strike-data.json' target='_blank'>https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/meteorite-strike-data.json</a>
# --description--
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/mVEJag>.
Fulfill the following [user stories](https://en.wikipedia.org/wiki/User_story). Use whichever libraries or APIs you need. Give it your own personal style.
**User Story:** I can see where all Meteorites landed on a world map.
**User Story:** I can tell the relative size of the meteorite, just by looking at the way it's represented on the map.
**User Story:** I can mouse over the meteorite's data point for additional data.
**Hint:** Here's a dataset you can use to build this: <https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/meteorite-strike-data.json>
When you are finished, include a link to your project on CodePen and click the "I've completed this challenge" button.
You can get feedback on your project by sharing it on the <a href='https://forum.freecodecamp.org/c/project-feedback/409' target='_blank'>freeCodeCamp forum</a>.
</section>
## Instructions
<section id='instructions'>
You can get feedback on your project by sharing it on the [freeCodeCamp forum](https://forum.freecodecamp.org/c/project-feedback/409).
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests: []
# --seed--
```
</section>
## Challenge Seed
<section id='challengeSeed'>
</section>
## Solution
<section id='solution'>
# --solutions--
```js
// solution required
```
</section>

63
curriculum/challenges/english/10-coding-interview-prep/take-home-projects/p2p-video-chat-application.md
View File

@ -5,48 +5,41 @@ challengeType: 4
forumTopicId: 302366
---
## Description
<section id='description'>
<strong>Objective:</strong> Build a <a href='https://repl.it/' target='_blank'>Repl.it</a> app that is functionally similar to this: <a href='https://p2p-video-chat-application.freecodecamp.rocks/' target='_blank'>https://p2p-video-chat-application.freecodecamp.rocks/</a>.
Fulfill the below <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.
<strong>User Story:</strong> Upon arriving, the browser will prompt me to access my camera and microphone.
<strong>User Story:</strong> After I give it permission, I am prompted to type in a room name.
<strong>User Story:</strong> Once I type in the room name, a room will be created if no room of that name existed before.
<strong>User Story:</strong> A friend of mine can subsequently go to the same website, type in the same room I entered, and join the same room, then enter into a video chat with me.
<strong>User Story:</strong> If I type in a room name, and there are already two people in that room, I get a notification that the room is full.
<strong>User Story:</strong> Anyone can create or join any room. And there can be any number of rooms, but all of them must have unique names.
<strong>User Story:</strong> I can choose to not permit the site to access my microphone and webcam. If I choose not to do this, or if some other driver problem occurs, I see an error message saying these are required.
<strong>User Story:</strong> When I choose to cancel the room name input step, or if I type in no name, or just spaces, it should again ask me again to type in a valid room name.
<strong>User Story:</strong> If one of the two people in the room get disconnected, they can reconnect to the same room and continue chatting.
# --description--
**Objective:** Build a [Repl.it](https://repl.it/) app that is functionally similar to this: <https://p2p-video-chat-application.freecodecamp.rocks/>.
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story). Use whichever libraries or APIs you need. Give it your own personal style.
**User Story:** Upon arriving, the browser will prompt me to access my camera and microphone.
**User Story:** After I give it permission, I am prompted to type in a room name.
**User Story:** Once I type in the room name, a room will be created if no room of that name existed before.
**User Story:** A friend of mine can subsequently go to the same website, type in the same room I entered, and join the same room, then enter into a video chat with me.
**User Story:** If I type in a room name, and there are already two people in that room, I get a notification that the room is full.
**User Story:** Anyone can create or join any room. And there can be any number of rooms, but all of them must have unique names.
**User Story:** I can choose to not permit the site to access my microphone and webcam. If I choose not to do this, or if some other driver problem occurs, I see an error message saying these are required.
**User Story:** When I choose to cancel the room name input step, or if I type in no name, or just spaces, it should again ask me again to type in a valid room name.
**User Story:** If one of the two people in the room get disconnected, they can reconnect to the same room and continue chatting.
Once you've finished implementing these user stories, enter the URL to your live app and, optionally, your GitHub repository. Then click the "I've completed this challenge" button.
You can get feedback on your project by sharing it on the <a href='https://forum.freecodecamp.org/c/project-feedback/409' target='_blank'>freeCodeCamp forum</a>.
</section>
## Instructions
<section id='instructions'>
You can get feedback on your project by sharing it on the [freeCodeCamp forum](https://forum.freecodecamp.org/c/project-feedback/409).
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests: []
# --seed--
```
</section>
## Challenge Seed
<section id='challengeSeed'>
</section>
## Solution
<section id='solution'>
# --solutions--
```js
// solution required
```
</section>

48
curriculum/challenges/english/10-coding-interview-prep/take-home-projects/show-national-contiguity-with-a-force-directed-graph.md
View File

@ -5,43 +5,31 @@ challengeType: 3
forumTopicId: 302367
---
## Description
<section id='description'>
<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/xVopBo' target='_blank'>https://codepen.io/freeCodeCamp/full/xVopBo</a>.
Fulfill the following <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.
<strong>User Story:</strong> I can see a Force-directed Graph that shows which countries share borders.
<strong>User Story:</strong> I can see each country's flag on its node.
<strong>Hint:</strong> Here's a dataset you can use to build this: <a href='https://raw.githubusercontent.com/DealPete/forceDirected/master/countries.json' target='_blank'>https://raw.githubusercontent.com/DealPete/forceDirected/master/countries.json</a>
<strong>Hint:</strong> You can create a spritesheet of national flags at <a href='https://www.flag-sprites.com' target='_blank'>https://www.flag-sprites.com</a>.
# --description--
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/xVopBo>.
Fulfill the following [user stories](https://en.wikipedia.org/wiki/User_story). Use whichever libraries or APIs you need. Give it your own personal style.
**User Story:** I can see a Force-directed Graph that shows which countries share borders.
**User Story:** I can see each country's flag on its node.
**Hint:** Here's a dataset you can use to build this: <https://raw.githubusercontent.com/DealPete/forceDirected/master/countries.json>
**Hint:** You can create a spritesheet of national flags at <https://www.flag-sprites.com>.
When you are finished, include a link to your project on CodePen and click the "I've completed this challenge" button.
You can get feedback on your project by sharing it on the <a href='https://forum.freecodecamp.org/c/project-feedback/409' target='_blank'>freeCodeCamp forum</a>.
</section>
## Instructions
<section id='instructions'>
You can get feedback on your project by sharing it on the [freeCodeCamp forum](https://forum.freecodecamp.org/c/project-feedback/409).
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests: []
# --seed--
```
</section>
## Challenge Seed
<section id='challengeSeed'>
</section>
## Solution
<section id='solution'>
# --solutions--
```js
// solution required
```
</section>

51
curriculum/challenges/english/10-coding-interview-prep/take-home-projects/show-the-local-weather.md
View File

@ -5,44 +5,33 @@ challengeType: 3
forumTopicId: 302368
---
## Description
<section id='description'>
<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/bELRjV' target='_blank'>https://codepen.io/freeCodeCamp/full/bELRjV</a>.
<strong>Rule #1:</strong> Don't look at the example project's code. Figure it out for yourself.
<strong>Rule #2:</strong> Fulfill the below <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.
<strong>User Story:</strong> I can see the weather in my current location.
<strong>User Story:</strong> I can see a different icon or background image (e.g. snowy mountain, hot desert) depending on the weather.
<strong>User Story:</strong> I can push a button to toggle between Fahrenheit and Celsius.
<strong>Note:</strong> Many internet browsers now require an HTTP Secure (<code>https://</code>) connection to obtain a user's locale via HTML5 Geolocation. For this reason, we recommend using HTML5 Geolocation to get user location and then use the freeCodeCamp Weather API <a href='https://weather-proxy.freecodecamp.rocks/' target='_blank'>https://weather-proxy.freecodecamp.rocks/</a> which uses an HTTP Secure connection for the weather. Also, be sure to connect to <a href='https://codepen.io' target='_blank'>CodePen.io</a> via <code>https://</code>.
# --description--
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/bELRjV>.
**Rule #1:** Don't look at the example project's code. Figure it out for yourself.
**Rule #2:** Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story). Use whichever libraries or APIs you need. Give it your own personal style.
**User Story:** I can see the weather in my current location.
**User Story:** I can see a different icon or background image (e.g. snowy mountain, hot desert) depending on the weather.
**User Story:** I can push a button to toggle between Fahrenheit and Celsius.
**Note:** Many internet browsers now require an HTTP Secure (`https://`) connection to obtain a user's locale via HTML5 Geolocation. For this reason, we recommend using HTML5 Geolocation to get user location and then use the freeCodeCamp Weather API <https://weather-proxy.freecodecamp.rocks/> which uses an HTTP Secure connection for the weather. Also, be sure to connect to [CodePen.io](https://codepen.io) via `https://`.
When you are finished, include a link to your project on CodePen and click the "I've completed this challenge" button.
You can get feedback on your project by sharing it on the <a href='https://forum.freecodecamp.org/c/project-feedback/409' target='_blank'>freeCodeCamp forum</a>.
</section>
## Instructions
<section id='instructions'>
You can get feedback on your project by sharing it on the [freeCodeCamp forum](https://forum.freecodecamp.org/c/project-feedback/409).
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests: []
# --seed--
```
</section>
## Challenge Seed
<section id='challengeSeed'>
</section>
## Solution
<section id='solution'>
# --solutions--
```js
// solution required
```
</section>

54
curriculum/challenges/english/10-coding-interview-prep/take-home-projects/use-the-twitch-json-api.md
View File

@ -5,45 +5,35 @@ challengeType: 3
forumTopicId: 19541
---
## Description
<section id='description'>
<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/Myvqmo/' target='_blank'>https://codepen.io/freeCodeCamp/full/Myvqmo/</a>.
Fulfill the below <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.
<strong>User Story:</strong> I can see whether freeCodeCamp is currently streaming on Twitch.tv.
<strong>User Story:</strong> I can click the status output and be sent directly to the freeCodeCamp's Twitch.tv channel.
<strong>User Story:</strong> if a Twitch user is currently streaming, I can see additional details about what they are streaming.
<strong>Hint:</strong> The relevant documentation about Twitch.tv's JSON API is here: <a href='https://dev.twitch.tv/docs/api/reference/#get-streams' target='_blank'>https://dev.twitch.tv/docs/api/reference/#get-streams</a>.
<strong>Hint:</strong> Here's an array of the Twitch.tv usernames of people who regularly stream: <code>["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"]</code>
<strong>UPDATE:</strong> Due to a change in conditions on API usage, Twitch.tv requires an API key, but we've built a workaround. Use <a href='https://twitch-proxy.freecodecamp.rocks/' target='_blank'>https://twitch-proxy.freecodecamp.rocks/</a> instead of Twitch's API base URL (i.e. https://api.twitch.tv/helix ) and you'll still be able to get account information, without needing to sign up for an API key.
# --description--
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/Myvqmo/>.
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story). Use whichever libraries or APIs you need. Give it your own personal style.
**User Story:** I can see whether freeCodeCamp is currently streaming on Twitch.tv.
**User Story:** I can click the status output and be sent directly to the freeCodeCamp's Twitch.tv channel.
**User Story:** if a Twitch user is currently streaming, I can see additional details about what they are streaming.
**Hint:** The relevant documentation about Twitch.tv's JSON API is here: <https://dev.twitch.tv/docs/api/reference/#get-streams>.
**Hint:** Here's an array of the Twitch.tv usernames of people who regularly stream: `["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"]`
**UPDATE:** Due to a change in conditions on API usage, Twitch.tv requires an API key, but we've built a workaround. Use <https://twitch-proxy.freecodecamp.rocks/> instead of Twitch's API base URL (i.e. `https://api.twitch.tv/helix` ) and you'll still be able to get account information, without needing to sign up for an API key.
When you are finished, include a link to your project on CodePen and click the "I've completed this challenge" button.
You can get feedback on your project by sharing it on the <a href='https://forum.freecodecamp.org/c/project-feedback/409' target='_blank'>freeCodeCamp forum</a>.
</section>
## Instructions
<section id='instructions'>
You can get feedback on your project by sharing it on the [freeCodeCamp forum](https://forum.freecodecamp.org/c/project-feedback/409).
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests: []
# --seed--
```
</section>
## Challenge Seed
<section id='challengeSeed'>
</section>
## Solution
<section id='solution'>
# --solutions--
```js
// solution required
```
</section>