{ "name": "Intermediate Front End Development Projects", "order": 0.018, "challenges": [ { "id": "bd7158d8c442eddfaeb5bd18", "name": "Zipline: Stylize Stories on Camper News", "dashedName": "zipline-stylize-stories-on-camper-news", "difficulty": 1.02, "challengeSeed": ["126415129"], "description": [ "Objective: Build a CodePen.io app that successfully reverse-engineers this: http://codepen.io/GeoffStorbeck/full/Wveezv.", "Rule #1: Don't look at the example project's code on CodePen. Figure it out for yourself.", "Rule #2: You may use whichever libraries or APIs you need.", "Rule #3: Reverse engineer the example project's functionality, and also feel free to personalize it.", "Here are the user stories you must enable, and optional bonus user stories:", "User Story: As a user, I can browse recent posts from Camper News.", "User Story: As a user, I can click on a post to be taken to the story's original URL.", "User Story: As a user, I can click a link to go directly to the post's discussion page.", "Bonus User Story: As a user, I can see how many upvotes each story has.", "Hint: Here's the Camper News Hot Stories API endpoint: http://www.freecodecamp.com/news/hot.", "Remember to use RSAP 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, click this button and paste in a link to your CodePen project. Otherwise, we'll review it before you start your nonprofit projects.

Click here then add your link to your tweet's text" ], "challengeType": 3, "tests": [], "nameCn": "", "descriptionCn": [], "nameFr": "", "descriptionFr": [], "nameRu": "", "descriptionRu": [], "nameEs": "", "descriptionEs": [], "namePt": "", "descriptionPt": [] }, { "id": "bd7158d8c442eddfaeb5bd19", "name": "Zipline: Wikipedia Viewer", "dashedName": "zipline-wikipedia-viewer", "difficulty": 1.03, "challengeSeed": ["126415131"], "description": [ "Objective: Build a CodePen.io app that successfully reverse-engineers this: http://codepen.io/GeoffStorbeck/full/MwgQea.", "Rule #1: Don't look at the example project's code on CodePen. Figure it out for yourself.", "Rule #2: You may use whichever libraries or APIs you need.", "Rule #3: Reverse engineer the example project's functionality, and also feel free to personalize it.", "Here are the user stories you must enable, and optional bonus user stories:", "User Story: As a user, I can search Wikipedia entries in a search box and see the resulting Wikipedia entries.", "Bonus User Story:As a user, I can click a button to see a random Wikipedia entry.", "Bonus User Story:As a user, when I type in the search box, I can see a dropdown menu with autocomplete options for matching Wikipedia entries.", "Hint: Here's an entry on using Wikipedia's API: http://www.mediawiki.org/wiki/API:Main_page.", "Remember to use RSAP 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, click this button and paste in a link to your CodePen project. Otherwise, we'll review it before you start your nonprofit projects.

Click here then add your link to your tweet's text" ], "challengeType": 3, "tests": [], "nameCn": "", "descriptionCn": [], "nameFr": "", "descriptionFr": [], "nameRu": "", "descriptionRu": [], "nameEs": "", "descriptionEs": [], "namePt": "", "descriptionPt": [] }, { "id": "bd7158d8c442eddfaeb5bd17", "name": "Zipline: Build a JavaScript Calculator", "dashedName": "zipline-build-a-javascript-calculator", "difficulty": 1.05, "challengeSeed": ["126411565"], "description": [ "Objective: Build a CodePen.io app that successfully reverse-engineers this: http://codepen.io/GeoffStorbeck/full/zxgaqw.", "Rule #1: Don't look at the example project's code on CodePen. Figure it out for yourself.", "Rule #2: You may use whichever libraries or APIs you need.", "Rule #3: Reverse engineer the example project's functionality, and also feel free to personalize it.", "Here are the user stories you must enable, and optional bonus user stories:", "User Story: As a user, I can add, subtract, multiply and divide two numbers.", "Bonus User Story: I can clear the input field with a clear button.", "Bonus User Story: 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 RSAP 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, click this button and paste in a link to your CodePen project. Otherwise, we'll review it before you start your nonprofit projects.

Click here then add your link to your tweet's text" ], "challengeType": 3, "tests": [], "nameCn": "", "descriptionCn": [], "nameFr": "", "descriptionFr": [], "nameRu": "", "descriptionRu": [], "nameEs": "", "descriptionEs": [], "namePt": "", "descriptionPt": [] }, { "id": "bd7158d8c442eedfaeb5bd1c", "name": "Zipline: Build a Tic Tac Toe Game", "dashedName": "zipline-build-a-tic-tac-toe-game", "difficulty": 1.06, "challengeSeed": ["126415123"], "description": [ "Objective: Build a CodePen.io app that successfully reverse-engineers this: http://codepen.io/alex-dixon/full/JogOpQ/.", "Rule #1: Don't look at the example project's code on CodePen. Figure it out for yourself.", "Rule #2: You may use whichever libraries or APIs you need.", "Rule #3: Reverse engineer the example project's functionality, and also feel free to personalize it.", "Here are the user stories you must enable, and optional bonus user stories:", "User Story: As a user, I can play a game of Tic Tac Toe with the computer.", "Bonus User Story: As a user, I can never actually win against the computer - at best I can tie.", "Bonus User Story: As a user, my game will reset as soon as it's over so I can play again.", "Bonus User Story: As a user, I can choose whether I want to play as X or O.", "Remember to use RSAP 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, click this button and paste in a link to your CodePen project. Otherwise, we'll review it before you start your nonprofit projects.

Click here then add your link to your tweet's text" ], "challengeType": 3, "tests": [], "nameCn": "", "descriptionCn": [], "nameFr": "", "descriptionFr": [], "nameRu": "", "descriptionRu": [], "nameEs": "", "descriptionEs": [], "namePt": "", "descriptionPt": [] }, { "id": "bd7158d8c442eddfaeb5bd1c", "name": "Zipline: Build a Simon Game", "dashedName": "zipline-build-a-simon-game", "difficulty": 1.07, "challengeSeed": ["126415123"], "description": [ "Objective: Build a CodePen.io app that successfully reverse-engineers this: http://codepen.io/dting/full/KpJXZV/.", "Rule #1: Don't look at the example project's code on CodePen. Figure it out for yourself.", "Rule #2: You may use whichever libraries or APIs you need.", "Rule #3: Reverse engineer the example project's functionality, and also feel free to personalize it.", "Here are the user stories you must enable, and optional bonus user stories:", "User Story: As a user, I am presented with a random series of button presses.", "User Story: 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.", "User Story: 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.", "User Story: 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.", "User Story: As a user, I can see how many steps are in the current series of button presses.", "Bonus User Story: 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.", "Bonus User Story: 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.", "Bonus User Story: As a user, the tempo of the game speeds up incrementally on the 5th, 9th and 13th step.", "Bonus User Story: 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.", "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.", "Remember to use RSAP 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, click this button and paste in a link to your CodePen project. Otherwise, we'll review it before you start your nonprofit projects.

Click here then add your link to your tweet's text" ], "challengeType": 3, "tests": [], "nameCn": "", "descriptionCn": [], "nameFr": "", "descriptionFr": [], "nameRu": "", "descriptionRu": [], "nameEs": "", "descriptionEs": [], "namePt": "", "descriptionPt": [] } ] }