{ "name": "Front End Development Projects", "order": 0.012, "challenges": [ { "id": "bd7158d8c442eddfbeb5bd1f", "name": "Waypoint: Get Set for Ziplines", "dashedName": "waypoint-get-set-for-ziplines", "difficulty": 1.00, "challengeSeed": ["125658022"], "description": [ "Now you're ready to start our Zipline challenges. These front-end development challenges will give you many opportunities to apply the HTML, CSS, jQuery and JavaScript you've learned to build static (database-less) applications.", "For many of these challenges, you will be using JSON data from external API endpoints, such as Twitch.tv and Twitter. Note that you don't need to have a database to use these data.", "The easiest way to manipulate these data is with jQuery $.getJSON().", "Whatever you do, don't get discouraged! Remember to use RSAP if you get stuck.", "We'll build these challenges using CodePen, a popular tool for creating, sharing, and discovering static web applications.", "Go to http://codepen.io and create an account.", "Click your user image in the top right corner, then click the \"New pen\" button that drops down.", "Drag the windows around and press the buttons in the lower-right hand corner to change the orientation to suit your preference.", "Click the gear next to CSS. Then in the \"External CSS File or Another Pen\" text field, type \"bootstrap\" and scroll down until you see the latest version of Bootstrap. Click it.", "Verify that bootstrap is active by adding the following code to your HTML: <h1 class='text-primary'>Hello CodePen!</h1>. The text's color should be Bootstrap blue.", "Click the gear next to JavaScript. Click the \"Latest version of...\" select box and choose jQuery.", "Now add the following code to your JavaScript: $(document).ready(function() { $('.text-primary').text('Hi CodePen!') });. Click the \"Save\" button at the top. Your \"Hello CodePen!\" should change to \"Hi CodePen!\". This means that jQuery is working.", "You can use this CodePen that you've just created as a starting point for your Ziplines. Just click the \"fork\" button at the top of your CodePen and it will create a duplicate CodePen.", "Now you're ready for your first Zipline. Click the \"I've completed this challenge\" button." ], "challengeType": 2, "tests": [], "nameCn": "", "descriptionCn": [], "nameFr": "", "descriptionFr": [], "nameRu": "", "descriptionRu": [], "nameEs": "", "descriptionEs": [], "namePt": "", "descriptionPt": [] }, { "id": "bd7158d8c442eddfaeb5bd13", "name": "Zipline: Build a Random Quote Machine", "dashedName": "zipline-build-a-random-quote-machine", "difficulty": 1.01, "challengeSeed": ["126415122"], "description": [ "Objective: Build a CodePen.io that successfully reverse-engineers this: http://codepen.io/AdventureBear/full/vEoVMw.", "Rule #1: Don't look at the example project's code. 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 click a button to show me a new random quote.", "Bonus User Story: As a user, I can press a button to tweet out a quote.", "Remember to use RSAP if you get stuck. Try using jQuery's $.getJSON() to consume APIs.", "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": "bd7158d8c442eddfaeb5bd10", "name": "Zipline: Show the Local Weather", "dashedName": "zipline-show-the-local-weather", "difficulty": 1.02, "challengeSeed": ["126415127"], "description": [ "Objective: Build a CodePen.io that successfully reverse-engineers this: http://codepen.io/AdventureBear/full/yNBJRj.", "Rule #1: Don't look at the example project's code. 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 see the weather in my current location.", "Bonus User Story: As a user, I can see an icon depending on the temperature..", "Bonus User Story: As a user, I see a different background image depending on the temperature (e.g. snowy mountain, hot desert).", "Bonus User Story: As a user, I can push a button to toggle between Fahrenheit and Celsius.", "Remember to use RSAP if you get stuck. Try using jQuery's $.getJSON() to consume APIs.", "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": "bd7158d8c442eddfaeb5bd1f", "name": "Zipline: Use the Twitch.tv JSON API", "dashedName": "zipline-use-the-twitchtv-json-api", "difficulty": 1.03, "challengeSeed": ["126411564"], "description": [ "Objective: Build a CodePen.io that successfully reverse-engineers this: http://codepen.io/GeoffStorbeck/full/GJKRxZ.", "Rule #1: Don't look at the example project's code. 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 see whether Free Code Camp is currently streaming on Twitch.tv.", "User Story: As a user, I can click the status output and be sent directly to the Free Code Camp's Twitch.tv channel.", "User Story: As a user, if Free Code Camp is streaming, I can see additional details about what they are streaming.", "Bonus User Story: As a user, I can search through the streams listed.", "Hint: Here's an example call to Twitch.tv's JSON API: https://api.twitch.tv/kraken/streams/freecodecamp.", "Hint: The relevant documentation about this API call is here: https://github.com/justintv/Twitch-API/blob/master/v3_resources/streams.md#get-streamschannel.", "Hint: Here's an array of the Twitch.tv usernames of people who regularly stream coding: [\"freecodecamp\", \"storbeck\", \"terakilobyte\", \"habathcx\",\"RobotCaleb\",\"comster404\",\"brunofin\",\"thomasballinger\",\"noobs2ninjas\",\"beohoff\"]", "Remember to use RSAP if you get stuck. Try using jQuery's $.getJSON() to consume APIs.", "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": "bd7158d8c442eddfaeb5bd18", "name": "Zipline: Stylize Stories on Camper News", "dashedName": "zipline-stylize-stories-on-camper-news", "difficulty": 1.04, "challengeSeed": ["126415129"], "description": [ "Objective: Build a CodePen.io that successfully reverse-engineers this: http://codepen.io/GeoffStorbeck/full/Wveezv.", "Rule #1: Don't look at the example project's code. 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/stories/hotStories.", "Remember to use RSAP if you get stuck. Try using jQuery's $.getJSON() to consume APIs.", "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.05, "challengeSeed": ["126415131"], "description": [ "Objective: Build a CodePen.io that successfully reverse-engineers this: http://codepen.io/GeoffStorbeck/full/MwgQea.", "Rule #1: Don't look at the example project's code. 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. Try using jQuery's $.getJSON() to consume APIs.", "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": "bd7158d8c442eddfaeb5bd0f", "name": "Zipline: Build a Pomodoro Clock", "dashedName": "zipline-build-a-pomodoro-clock", "difficulty": 1.06, "challengeSeed": ["126411567"], "description": [ "Objective: Build a CodePen.io that successfully reverse-engineers this: http://codepen.io/GeoffStorbeck/full/RPbGxZ/.", "Rule #1: Don't look at the example project's code. 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 start a 25 minute pomodoro, and the timer will go off once 25 minutes has elapsed.", "Bonus User Story: As a user, I can reset the clock for my next pomodoro.", "Bonus User Story: As a user, I can customize the length of each pomodoro.", "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.07, "challengeSeed": ["126411565"], "description": [ "Objective: Build a CodePen.io that successfully reverse-engineers this: http://codepen.io/GeoffStorbeck/full/zxgaqw.", "Rule #1: Don't look at the example project's code. 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": "bd7158d8c442eddfaeb5bd1c", "name": "Zipline: Build a Tic Tac Toe Game", "dashedName": "zipline-build-a-tic-tac-toe-game", "difficulty": 1.08, "challengeSeed": ["126415123"], "description": [ "Objective: Build a CodePen.io that successfully reverse-engineers this: http://codepen.io/alex-dixon/full/JogOpQ/.", "Rule #1: Don't look at the example project's code. 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": [] } ] }