|
|
|
|
@ -1,7 +1,7 @@
|
|
|
|
|
{
|
|
|
|
|
"name": "Intermediate Front End Development Projects",
|
|
|
|
|
"order": 11,
|
|
|
|
|
"time": "200h",
|
|
|
|
|
"time": "200 hours",
|
|
|
|
|
"helpRoom": "HelpFrontEnd",
|
|
|
|
|
"challenges": [
|
|
|
|
|
{
|
|
|
|
|
@ -11,12 +11,12 @@
|
|
|
|
|
"126415127"
|
|
|
|
|
],
|
|
|
|
|
"description": [
|
|
|
|
|
"<span class='text-info'>Objective:</span> Build a <a href='http://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='http://codepen.io/FreeCodeCamp/full/avqvgJ' target='_blank'>http://codepen.io/FreeCodeCamp/full/avqvgJ</a>.",
|
|
|
|
|
"<span class='text-info'>Rule #1:</span> Don't look at the example project's code. Figure it out for yourself.",
|
|
|
|
|
"<span class='text-info'>Rule #2:</span> Fulfill the below <a href='http://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
|
|
|
|
|
"<span class='text-info'>User Story:</span> I can see the weather in my current location.",
|
|
|
|
|
"<span class='text-info'>User Story:</span> I can see a different icon or background image (e.g. snowy mountain, hot desert) depending on the weather.",
|
|
|
|
|
"<span class='text-info'>User Story:</span> I can push a button to toggle between Fahrenheit and Celsius.",
|
|
|
|
|
"<strong>Objective:</strong> Build a <a href='http://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='http://codepen.io/FreeCodeCamp/full/avqvgJ' target='_blank'>http://codepen.io/FreeCodeCamp/full/avqvgJ</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='http://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.",
|
|
|
|
|
"We recommend using the <a href='http://openweathermap.org/current#geo' target='_blank'>Open Weather API</a>. This will require creating a free API key. Normally you want to avoid exposing API keys on CodePen, but we haven't been able to find a keyless API for weather.",
|
|
|
|
|
"Remember to use <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a> if you get stuck.",
|
|
|
|
|
"When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen.",
|
|
|
|
|
@ -71,13 +71,13 @@
|
|
|
|
|
"126415129"
|
|
|
|
|
],
|
|
|
|
|
"description": [
|
|
|
|
|
"<span class='text-info'>Objective:</span> Build a <a href='http://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='http://codepen.io/FreeCodeCamp/full/pgNRoJ' target='_blank'>http://codepen.io/FreeCodeCamp/full/pgNRoJ</a>.",
|
|
|
|
|
"<span class='text-info'>Rule #1:</span> Don't look at the example project's code. Figure it out for yourself.",
|
|
|
|
|
"<span class='text-info'>Rule #2:</span> Fulfill the below <a href='http://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
|
|
|
|
|
"<span class='text-info'>User Story:</span> I can browse recent posts from Camper News.",
|
|
|
|
|
"<span class='text-info'>User Story:</span> I can click on a post to be taken to the story's original URL.",
|
|
|
|
|
"<span class='text-info'>User Story:</span> I can see how many upvotes each story has.",
|
|
|
|
|
"<span class='text-info'>Hint:</span> Here's the Camper News Hot Stories API endpoint: <code>http://www.freecodecamp.com/news/hot</code>.",
|
|
|
|
|
"<strong>Objective:</strong> Build a <a href='http://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='http://codepen.io/FreeCodeCamp/full/pgNRoJ' target='_blank'>http://codepen.io/FreeCodeCamp/full/pgNRoJ</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='http://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 browse recent posts from Camper News.",
|
|
|
|
|
"<strong>User Story:</strong> I can click on a post to be taken to the story's original URL.",
|
|
|
|
|
"<strong>User Story:</strong> I can see how many upvotes each story has.",
|
|
|
|
|
"<strong>Hint:</strong> Here's the Camper News Hot Stories API endpoint: <code>http://www.freecodecamp.com/news/hot</code>.",
|
|
|
|
|
"Remember to use <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a> if you get stuck.",
|
|
|
|
|
"When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen.",
|
|
|
|
|
"You can get feedback on your project from fellow campers by sharing it in our <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Code Review Chatroom</a>. You can also share it on Twitter and your city's Campsite (on Facebook)."
|
|
|
|
|
@ -117,11 +117,11 @@
|
|
|
|
|
"126415131"
|
|
|
|
|
],
|
|
|
|
|
"description": [
|
|
|
|
|
"<span class='text-info'>Objective:</span> Build a <a href='http://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='http://codepen.io/FreeCodeCamp/full/pgNRvJ' target='_blank'>http://codepen.io/FreeCodeCamp/full/pgNRvJ</a>.",
|
|
|
|
|
"<span class='text-info'>Rule #1:</span> Don't look at the example project's code. Figure it out for yourself.",
|
|
|
|
|
"<span class='text-info'>Rule #2:</span> Fulfill the below <a href='http://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
|
|
|
|
|
"<span class='text-info'>User Story:</span> I can search Wikipedia entries in a search box and see the resulting Wikipedia entries.",
|
|
|
|
|
"<span class='text-info'>User Story:</span> I can click a button to see a random Wikipedia entry.",
|
|
|
|
|
"<strong>Objective:</strong> Build a <a href='http://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='http://codepen.io/FreeCodeCamp/full/pgNRvJ' target='_blank'>http://codepen.io/FreeCodeCamp/full/pgNRvJ</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='http://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>http://en.wikipedia.org/wiki/Special:Random</code>.",
|
|
|
|
|
"<span class='text-info'>Hint #2:</span> Here's an entry on using Wikipedia's API: <code>http://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.",
|
|
|
|
|
@ -164,16 +164,16 @@
|
|
|
|
|
"126411564"
|
|
|
|
|
],
|
|
|
|
|
"description": [
|
|
|
|
|
"<span class='text-info'>Objective:</span> Build a <a href='http://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='http://codepen.io/FreeCodeCamp/full/adBpOw' target='_blank'>http://codepen.io/FreeCodeCamp/full/adBpOw</a>.",
|
|
|
|
|
"<span class='text-info'>Rule #1:</span> Don't look at the example project's code. Figure it out for yourself.",
|
|
|
|
|
"<span class='text-info'>Rule #2:</span> Fulfill the below <a href='http://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
|
|
|
|
|
"<span class='text-info'>User Story:</span> I can see whether Free Code Camp is currently streaming on Twitch.tv.",
|
|
|
|
|
"<span class='text-info'>User Story:</span> I can click the status output and be sent directly to the Free Code Camp's Twitch.tv channel.",
|
|
|
|
|
"<span class='text-info'>User Story:</span> if a Twitch user is currently streaming, I can see additional details about what they are streaming.",
|
|
|
|
|
"<span class='text-info'>User Story:</span> I will see a placeholder notification if a streamer has closed their Twitch account (or the account never existed). You can verify this works by adding brunofin and comster404 to your array of Twitch streamers.",
|
|
|
|
|
"<span class='text-info'>Hint:</span> See an example call to Twitch.tv's JSONP API at <code>https://github.com/FreeCodeCamp/FreeCodeCamp/wiki/Zipline-Use-the-Twitchtv-JSON-API</code>.",
|
|
|
|
|
"<span class='text-info'>Hint:</span> The relevant documentation about this API call is here: <a href='https://github.com/justintv/Twitch-API/blob/master/v3_resources/streams.md#get-streamschannel' target='_blank'>https://github.com/justintv/Twitch-API/blob/master/v3_resources/streams.md#get-streamschannel</a>.",
|
|
|
|
|
"<span class='text-info'>Hint:</span> Here's an array of the Twitch.tv usernames of people who regularly stream coding: <code>[\"freecodecamp\", \"storbeck\", \"terakilobyte\", \"habathcx\",\"RobotCaleb\",\"thomasballinger\",\"noobs2ninjas\",\"beohoff\"]</code>",
|
|
|
|
|
"<strong>Objective:</strong> Build a <a href='http://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='http://codepen.io/FreeCodeCamp/full/adBpOw' target='_blank'>http://codepen.io/FreeCodeCamp/full/adBpOw</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='http://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 Free Code Camp is currently streaming on Twitch.tv.",
|
|
|
|
|
"<strong>User Story:</strong> I can click the status output and be sent directly to the Free Code Camp'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>User Story:</strong> I will see a placeholder notification if a streamer has closed their Twitch account (or the account never existed). You can verify this works by adding brunofin and comster404 to your array of Twitch streamers.",
|
|
|
|
|
"<strong>Hint:</strong> See an example call to Twitch.tv's JSONP API at <code>https://github.com/FreeCodeCamp/FreeCodeCamp/wiki/Zipline-Use-the-Twitchtv-JSON-API</code>.",
|
|
|
|
|
"<strong>Hint:</strong> The relevant documentation about this API call is here: <a href='https://github.com/justintv/Twitch-API/blob/master/v3_resources/streams.md#get-streamschannel' target='_blank'>https://github.com/justintv/Twitch-API/blob/master/v3_resources/streams.md#get-streamschannel</a>.",
|
|
|
|
|
"<strong>Hint:</strong> Here's an array of the Twitch.tv usernames of people who regularly stream coding: <code>[\"freecodecamp\", \"storbeck\", \"terakilobyte\", \"habathcx\",\"RobotCaleb\",\"thomasballinger\",\"noobs2ninjas\",\"beohoff\"]</code>",
|
|
|
|
|
"Remember to use <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a> if you get stuck.",
|
|
|
|
|
"When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen.",
|
|
|
|
|
"You can get feedback on your project from fellow campers by sharing it in our <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Code Review Chatroom</a>. You can also share it on Twitter and your city's Campsite (on Facebook)."
|
|
|
|
|
@ -234,13 +234,13 @@
|
|
|
|
|
"126415123"
|
|
|
|
|
],
|
|
|
|
|
"description": [
|
|
|
|
|
"<span class='text-info'>Objective:</span> Build a <a href='http://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='http://codepen.io/FreeCodeCamp/full/adBpvw' target='_blank'>http://codepen.io/FreeCodeCamp/full/adBpvw</a>.",
|
|
|
|
|
"<span class='text-info'>Rule #1:</span> Don't look at the example project's code. Figure it out for yourself.",
|
|
|
|
|
"<span class='text-info'>Rule #2:</span> Fulfill the below <a href='http://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
|
|
|
|
|
"<span class='text-info'>User Story:</span> I can play a game of Tic Tac Toe with the computer.",
|
|
|
|
|
"<span class='text-info'>User Story:</span> I can never actually win against the computer - at best I can tie.",
|
|
|
|
|
"<span class='text-info'>User Story:</span> My game will reset as soon as it's over so I can play again.",
|
|
|
|
|
"<span class='text-info'>User Story:</span> I can choose whether I want to play as X or O.",
|
|
|
|
|
"<strong>Objective:</strong> Build a <a href='http://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='http://codepen.io/FreeCodeCamp/full/adBpvw' target='_blank'>http://codepen.io/FreeCodeCamp/full/adBpvw</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='http://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> I can never actually win against the computer - at best I can tie.",
|
|
|
|
|
"<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.",
|
|
|
|
|
"Remember to use <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a> if you get stuck.",
|
|
|
|
|
"When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen.",
|
|
|
|
|
"You can get feedback on your project from fellow campers by sharing it in our <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Code Review Chatroom</a>. You can also share it on Twitter and your city's Campsite (on Facebook)."
|
|
|
|
|
@ -280,18 +280,18 @@
|
|
|
|
|
"137213633"
|
|
|
|
|
],
|
|
|
|
|
"description": [
|
|
|
|
|
"<span class='text-info'>Objective:</span> Build a <a href='http://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='http://codepen.io/Em-Ant/full/QbRyqq/' target='_blank'>http://codepen.io/FreeCodeCamp/full/obYBjE</a>.",
|
|
|
|
|
"<span class='text-info'>Rule #1:</span> Don't look at the example project's code. Figure it out for yourself.",
|
|
|
|
|
"<span class='text-info'>Rule #2:</span> Fulfill the below <a href='http://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
|
|
|
|
|
"<span class='text-info'>User Story:</span> I am presented with a random series of button presses.",
|
|
|
|
|
"<span class='text-info'>User Story:</span> Each time I input a series of button presses correctly, I see the same series of button presses but with an additional step.",
|
|
|
|
|
"<span class='text-info'>User Story:</span> I hear a sound that corresponds to each button both when the series of button presses plays, and when I personally press a button.",
|
|
|
|
|
"<span class='text-info'>User Story:</span> 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.",
|
|
|
|
|
"<span class='text-info'>User Story:</span> I can see how many steps are in the current series of button presses.",
|
|
|
|
|
"<span class='text-info'>User Story:</span> If I want to restart, I can hit a button to do so, and the game will return to a single step.",
|
|
|
|
|
"<span class='text-info'>User Story:</span> 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.",
|
|
|
|
|
"<span class='text-info'>User Story:</span> I can win the game by getting a series of 20 steps correct. I am notified of my victory, then the game starts over.",
|
|
|
|
|
"<span class='text-info'>Hint:</span> 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>.",
|
|
|
|
|
"<strong>Objective:</strong> Build a <a href='http://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='http://codepen.io/Em-Ant/full/QbRyqq/' target='_blank'>http://codepen.io/FreeCodeCamp/full/obYBjE</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='http://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>.",
|
|
|
|
|
"Remember to use <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a> if you get stuck.",
|
|
|
|
|
"When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen.",
|
|
|
|
|
"You can get feedback on your project from fellow campers by sharing it in our <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Code Review Chatroom</a>. You can also share it on Twitter and your city's Campsite (on Facebook)."
|
|
|
|
|
|
Quincy Larson
Berkeley Martinez