177 lines
14 KiB
JSON
177 lines
14 KiB
JSON
{
|
|
"name": "Intermediate Front End Development Projects",
|
|
"order": 0.015,
|
|
"challenges": [
|
|
{
|
|
"id": "bd7158d8c442eddfaeb5bd18",
|
|
"title": "Stylize Stories on Camper News",
|
|
"difficulty": 1.02,
|
|
"challengeSeed": ["126415129"],
|
|
"description": [
|
|
"<span class='text-info'>Objective:</span> Build a <a href='http://codepen.io' target='_blank'>CodePen.io</a> app that successfully reverse-engineers this: <a href='http://codepen.io/MarufSarker/full/ZGPZLq/' target='_blank'>http://codepen.io/MarufSarker/full/ZGPZLq/</a>.",
|
|
"<span class='text-info'>Rule #1:</span> Don't look at the example project's code on CodePen. Figure it out for yourself.",
|
|
"<span class='text-info'>Rule #2:</span> You may use whichever libraries or APIs you need.",
|
|
"<span class='text-info'>Rule #3:</span> Reverse engineer the example project's functionality, and also feel free to personalize it.",
|
|
"Here are the <a href='http://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a> you must enable, and optional bonus user stories:",
|
|
"<span class='text-info'>User Story:</span> As a user, I can browse recent posts from Camper News.",
|
|
"<span class='text-info'>User Story:</span> As a user, I can click on a post to be taken to the story's original URL.",
|
|
"<span class='text-info'>Bonus User Story:</span> As a user, 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>.",
|
|
"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. If you pair programmed, you should also include the Free Code Camp username of your pair.",
|
|
"If you'd like immediate feedback on your project from fellow campers, click this button and paste in a link to your CodePen project. <br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20PASTE_YOUR_CODEPEN_URL_HERE%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
|
|
],
|
|
"type": "zipline",
|
|
"challengeType": 3,
|
|
"tests": [],
|
|
"nameCn": "",
|
|
"descriptionCn": [],
|
|
"nameFr": "",
|
|
"descriptionFr": [],
|
|
"nameRu": "",
|
|
"descriptionRu": [],
|
|
"nameEs": "",
|
|
"descriptionEs": [],
|
|
"namePt": "",
|
|
"descriptionPt": []
|
|
},
|
|
{
|
|
"id": "bd7158d8c442eddfaeb5bd19",
|
|
"title": "Wikipedia Viewer",
|
|
"difficulty": 1.03,
|
|
"challengeSeed": ["126415131"],
|
|
"description": [
|
|
"<span class='text-info'>Objective:</span> Build a <a href='http://codepen.io' target='_blank'>CodePen.io</a> app that successfully reverse-engineers this: <a href='http://codepen.io/GeoffStorbeck/full/MwgQea' target='_blank'>http://codepen.io/GeoffStorbeck/full/MwgQea</a>.",
|
|
"<span class='text-info'>Rule #1:</span> Don't look at the example project's code on CodePen. Figure it out for yourself.",
|
|
"<span class='text-info'>Rule #2:</span> You may use whichever libraries or APIs you need.",
|
|
"<span class='text-info'>Rule #3:</span> Reverse engineer the example project's functionality, and also feel free to personalize it.",
|
|
"Here are the <a href='http://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a> you must enable, and optional bonus user stories:",
|
|
"<span class='text-info'>User Story:</span> As a user, I can search Wikipedia entries in a search box and see the resulting Wikipedia entries.",
|
|
"<span class='text-info'>Bonus User Story:</span>As a user, I can click a button to see a random Wikipedia entry.",
|
|
"<span class='text-info'>Bonus User Story:</span>As a user, when I type in the search box, I can see a dropdown menu with autocomplete options for matching Wikipedia entries.",
|
|
"<span class='text-info'>Hint:</span> Here's an entry on using Wikipedia's API: <code>http://www.mediawiki.org/wiki/API:Main_page</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. If you pair programmed, you should also include the Free Code Camp username of your pair.",
|
|
"If you'd like immediate feedback on your project from fellow campers, click this button and paste in a link to your CodePen project. <br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20PASTE_YOUR_CODEPEN_URL_HERE%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
|
|
],
|
|
"type": "zipline",
|
|
"challengeType": 3,
|
|
"tests": [],
|
|
"nameCn": "",
|
|
"descriptionCn": [],
|
|
"nameFr": "",
|
|
"descriptionFr": [],
|
|
"nameRu": "",
|
|
"descriptionRu": [],
|
|
"nameEs": "",
|
|
"descriptionEs": [],
|
|
"namePt": "",
|
|
"descriptionPt": []
|
|
},
|
|
{
|
|
"id": "bd7158d8c442eddfaeb5bd17",
|
|
"title": "Build a JavaScript Calculator",
|
|
"difficulty": 1.05,
|
|
"challengeSeed": ["126411565"],
|
|
"description": [
|
|
"<span class='text-info'>Objective:</span> Build a <a href='http://codepen.io' target='_blank'>CodePen.io</a> app that successfully reverse-engineers this: <a href='http://codepen.io/GeoffStorbeck/full/zxgaqw' target='_blank'>http://codepen.io/GeoffStorbeck/full/zxgaqw</a>.",
|
|
"<span class='text-info'>Rule #1:</span> Don't look at the example project's code on CodePen. Figure it out for yourself.",
|
|
"<span class='text-info'>Rule #2:</span> You may use whichever libraries or APIs you need.",
|
|
"<span class='text-info'>Rule #3:</span> Reverse engineer the example project's functionality, and also feel free to personalize it.",
|
|
"Here are the <a href='http://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a> you must enable, and optional bonus user stories:",
|
|
"<span class='text-info'>User Story:</span> As a user, I can add, subtract, multiply and divide two numbers.",
|
|
"<span class='text-info'>Bonus User Story:</span> I can clear the input field with a clear button.",
|
|
"<span class='text-info'>Bonus User Story:</span> I can keep chaining mathematical operations together until I hit the clear button, and the calculator will tell me the correct output.",
|
|
"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. If you pair programmed, you should also include the Free Code Camp username of your pair.",
|
|
"If you'd like immediate feedback on your project from fellow campers, click this button and paste in a link to your CodePen project. <br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20PASTE_YOUR_CODEPEN_URL_HERE%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
|
|
],
|
|
"type": "zipline",
|
|
"challengeType": 3,
|
|
"tests": [],
|
|
"nameCn": "",
|
|
"descriptionCn": [],
|
|
"nameFr": "",
|
|
"descriptionFr": [],
|
|
"nameRu": "",
|
|
"descriptionRu": [],
|
|
"nameEs": "",
|
|
"descriptionEs": [],
|
|
"namePt": "",
|
|
"descriptionPt": []
|
|
},
|
|
{
|
|
"id": "bd7158d8c442eedfaeb5bd1c",
|
|
"title": "Build a Tic Tac Toe Game",
|
|
"difficulty": 1.06,
|
|
"challengeSeed": ["126415123"],
|
|
"description": [
|
|
"<span class='text-info'>Objective:</span> Build a <a href='http://codepen.io' target='_blank'>CodePen.io</a> app that successfully reverse-engineers this: <a href='http://codepen.io/alex-dixon/full/JogOpQ/' target='_blank'>http://codepen.io/alex-dixon/full/JogOpQ/</a>.",
|
|
"<span class='text-info'>Rule #1:</span> Don't look at the example project's code on CodePen. Figure it out for yourself.",
|
|
"<span class='text-info'>Rule #2:</span> You may use whichever libraries or APIs you need.",
|
|
"<span class='text-info'>Rule #3:</span> Reverse engineer the example project's functionality, and also feel free to personalize it.",
|
|
"Here are the <a href='http://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a> you must enable, and optional bonus user stories:",
|
|
"<span class='text-info'>User Story:</span> As a user, I can play a game of Tic Tac Toe with the computer.",
|
|
"<span class='text-info'>Bonus User Story:</span> As a user, I can never actually win against the computer - at best I can tie.",
|
|
"<span class='text-info'>Bonus User Story:</span> As a user, my game will reset as soon as it's over so I can play again.",
|
|
"<span class='text-info'>Bonus User Story:</span> As a user, 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. If you pair programmed, you should also include the Free Code Camp username of your pair.",
|
|
"If you'd like immediate feedback on your project from fellow campers, click this button and paste in a link to your CodePen project. <br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20PASTE_YOUR_CODEPEN_URL_HERE%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
|
|
],
|
|
"type": "zipline",
|
|
"challengeType": 3,
|
|
"tests": [],
|
|
"nameCn": "",
|
|
"descriptionCn": [],
|
|
"nameFr": "",
|
|
"descriptionFr": [],
|
|
"nameRu": "",
|
|
"descriptionRu": [],
|
|
"nameEs": "",
|
|
"descriptionEs": [],
|
|
"namePt": "",
|
|
"descriptionPt": []
|
|
},
|
|
{
|
|
"id": "bd7158d8c442eddfaeb5bd1c",
|
|
"title": "Build a Simon Game",
|
|
"difficulty": 1.07,
|
|
"challengeSeed": ["137213633"],
|
|
"description": [
|
|
"<span class='text-info'>Objective:</span> Build a <a href='http://codepen.io' target='_blank'>CodePen.io</a> app that successfully reverse-engineers this: <a href='http://codepen.io/Em-Ant/full/QbRyqq/' target='_blank'>http://codepen.io/dting/full/QbRyqq/</a>.",
|
|
"<span class='text-info'>Rule #1:</span> Don't look at the example project's code on CodePen. Figure it out for yourself.",
|
|
"<span class='text-info'>Rule #2:</span> You may use whichever libraries or APIs you need.",
|
|
"<span class='text-info'>Rule #3:</span> Reverse engineer the example project's functionality, and also feel free to personalize it.",
|
|
"Here are the <a href='http://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a> you must enable, and optional bonus user stories:",
|
|
"<span class='text-info'>User Story:</span> As a user, I am presented with a random series of button presses.",
|
|
"<span class='text-info'>User Story:</span> As a user, 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> As a user, 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> As a user, 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> As a user, I can see how many steps are in the current series of button presses.",
|
|
"<span class='text-info'>Bonus User Story:</span> As a user, 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'>Bonus User Story:</span> As a user, 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'>Bonus User Story:</span> As a user, the tempo of the game speeds up incrementally on the 5th, 9th and 13th step.",
|
|
"<span class='text-info'>Bonus User Story:</span> As a user, 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>.",
|
|
"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. If you pair programmed, you should also include the Free Code Camp username of your pair.",
|
|
"If you'd like immediate feedback on your project from fellow campers, click this button and paste in a link to your CodePen project. <br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20PASTE_YOUR_CODEPEN_URL_HERE%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
|
|
],
|
|
"type": "zipline",
|
|
"challengeType": 3,
|
|
"tests": [],
|
|
"nameCn": "",
|
|
"descriptionCn": [],
|
|
"nameFr": "",
|
|
"descriptionFr": [],
|
|
"nameRu": "",
|
|
"descriptionRu": [],
|
|
"nameEs": "",
|
|
"descriptionEs": [],
|
|
"namePt": "",
|
|
"descriptionPt": []
|
|
}
|
|
]
|
|
}
|