{ "name": "Intermediate Front End Development Projects", "order": 11, "time": "200h", "challenges": [ { "id": "bd7158d8c442eddfaeb5bd10", "title": "Show the Local Weather", "challengeSeed": ["126415127"], "description": [ "Objective: Build a CodePen.io app that successfully reverse-engineers this: http://codepen.io/AdventureBear/full/yNBJRj.", "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 see the weather in my current location.", "Bonus User Story: As a user, I can see an icon depending on the weather.", "Bonus User Story: As a user, I see a different background image (e.g. snowy mountain, hot desert) depending on the weather.", "Bonus User Story: As a user, I can push a button to toggle between Fahrenheit and Celsius.", "Remember to use Read-Search-Ask 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.

Click here then add your link to your tweet's text" ], "type": "zipline", "challengeType": 3, "tests": [], "nameCn": "", "descriptionCn": [], "nameFr": "", "descriptionFr": [], "nameRu": "Покажите местную погоду", "descriptionRu": [ "Задание: Создайте CodePen.io который успешно копирует вот этот: http://codepen.io/AdventureBear/full/yNBJRj.", "Правило #1: Не подсматривайте код приведенного на CodePen примера. Напишите его самостоятельно.", "Правило #2: Можете использовать любые библиотеки или API, которые потребуются.", "Правило #3: Воссоздайте функционал приведенного примера и не стесняйтесь добавить что-нибудь от себя.", "Реализуйте следующие пользовательские истории, сделайте также бонусные по желанию:", "Пользовательская история: В качестве пользователя, я могу узнать погоду с учетом моего текущего местоположения.", "Бонусная пользовательская история: В качестве пользователя, я могу в зависимости от погоды видеть различные температурные значки.", "Бонусная пользовательская история: В качестве пользователя, я могу в зависимости от погоды видеть различные фоновые изображения (снежные горы, знойная пустыня).", "Бонусная пользовательская история: В качестве пользователя, я могу нажать на кнопку чтобы переключится между градусами по Цельсию или по Фаренгейту.", "Если что-то не получается, воспользуйтесь Read-Search-Ask.", "Когда выполните задание кликните кнопку \"I've completed this challenge\" и добавьте ссылку на ваш CodePen. Если вы программировали с кем-то в паре, также добавьте имя вашего напарника.", "Если вы хотите получить немедленную оценку вашего проекта, нажмите эту кнопку и добавьте ссылку на ваш CodePen. В противном случае мы проверим его перед тем как вы приступите к проектам для некоммерческих организаций.

Click here then add your link to your tweet's text" ], "nameEs": "", "descriptionEs": [], "namePt": "", "descriptionPt": [] }, { "id": "bd7158d8c442eddfaeb5bd1f", "title": "Use the Twitch.tv JSON API", "challengeSeed": ["126411564"], "description": [ "Objective: Build a CodePen.io app that successfully reverse-engineers this: http://codepen.io/GeoffStorbeck/full/GJKRxZ.", "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 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.", "Bonus User Story: As a user, I will see a placeholder notification if a streamer has closed their Twitch account. You can verify this works by adding brunofin and comster404 to your array of Twitch streamers.", "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\",\"thomasballinger\",\"noobs2ninjas\",\"beohoff\"]", "Remember to use Read-Search-Ask 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.

Click here then add your link to your tweet's text" ], "type": "zipline", "challengeType": 3, "tests": [], "nameCn": "", "descriptionCn": [], "nameFr": "", "descriptionFr": [], "nameRu": "Используйте Twitch.tv JSON API", "descriptionRu": [ "Задание: Создайте CodePen.io который успешно копирует вот этот: http://codepen.io/GeoffStorbeck/full/GJKRxZ.", "Правило #1: Не подсматривайте код приведенного на CodePen примера. Напишите его самостоятельно.", "Правило #2: Можете использовать любые библиотеки или API, которые потребуются.", "Правило #3: Воссоздайте функционал приведенного примера и не стесняйтесь добавить что-нибудь от себя.", "Реализуйте следующие пользовательские истории, сделайте также бонусные по желанию:", "Пользовательская история: В качестве пользователя, я могу увидеть идет ли в данный момент на Twitch.tv трансляция Free Code Camp.", "Пользовательская история: В качестве пользователя, я могу, кликнув на описание трансляции, перейти на канал Free Code Camp.", "Пользовательская история: В качестве пользователя, я могу видеть дополнительную информацию о текущей трансляции Free Code Camp.", "Бонусная пользовательская история: В качестве пользователя, я могу произвести поиск среди перечисленных каналов.", "Бонусная пользовательская история: В качестве пользователя, я могу видеть уведомление, если создатель канала закрыл свой аккаунт на Twitch.tv. Добавьте в массив имена пользователей brunofin и comster404, чтобы убедиться, что эта функция реализована правильно.", "Подсказка: Пример запроса к Twitch.tv JSON API: https://api.twitch.tv/kraken/streams/freecodecamp.", "Подсказка: Документацию об этом запросе можно найти по ссылке: https://github.com/justintv/Twitch-API/blob/master/v3_resources/streams.md#get-streamschannel.", "Подсказка: В этом массиве приведены имена пользователей, которые регулярно пишут код онлайн: [\"freecodecamp\", \"storbeck\", \"terakilobyte\", \"habathcx\",\"RobotCaleb\",\"comster404\",\"brunofin\",\"thomasballinger\",\"noobs2ninjas\",\"beohoff\"]", "Если что-то не получается, воспользуйтесь Read-Search-Ask.", "Когда выполните задание кликните кнопку \"I've completed this challenge\" и добавьте ссылку на ваш CodePen. Если вы программировали с кем-то в паре, также добавьте имя вашего напарника.", "Если вы хотите получить немедленную оценку вашего проекта, нажмите эту кнопку и добавьте ссылку на ваш CodePen. В противном случае мы проверим его перед тем как вы приступите к проектам для некоммерческих организаций.

Click here then add your link to your tweet's text" ], "nameEs": "", "descriptionEs": [], "namePt": "", "descriptionPt": [] }, { "id": "bd7158d8c442eddfaeb5bd18", "title": "Stylize Stories on Camper News", "challengeSeed": ["126415129"], "description": [ "Objective: Build a CodePen.io app that successfully reverse-engineers this: http://codepen.io/MarufSarker/full/ZGPZLq/.", "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.", "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 Read-Search-Ask 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.

Click here then add your link to your tweet's text" ], "type": "zipline", "challengeType": 3, "tests": [], "nameCn": "", "descriptionCn": [], "nameFr": "", "descriptionFr": [], "nameRu": "", "descriptionRu": [], "nameEs": "", "descriptionEs": [], "namePt": "", "descriptionPt": [] }, { "id": "bd7158d8c442eddfaeb5bd19", "title": "Build a Wikipedia Viewer", "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 Read-Search-Ask 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.

Click here then add your link to your tweet's text" ], "type": "zipline", "challengeType": 3, "tests": [], "nameCn": "", "descriptionCn": [], "nameFr": "", "descriptionFr": [], "nameRu": "", "descriptionRu": [], "nameEs": "", "descriptionEs": [], "namePt": "", "descriptionPt": [] }, { "id": "bd7158d8c442eedfaeb5bd1c", "title": "Build a Tic Tac Toe Game", "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 Read-Search-Ask 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.

Click here then add your link to your tweet's text" ], "type": "zipline", "challengeType": 3, "tests": [], "nameCn": "", "descriptionCn": [], "nameFr": "", "descriptionFr": [], "nameRu": "", "descriptionRu": [], "nameEs": "", "descriptionEs": [], "namePt": "", "descriptionPt": [] }, { "id": "bd7158d8c442eddfaeb5bd1c", "title": "Build a Simon Game", "challengeSeed": ["137213633"], "description": [ "Objective: Build a CodePen.io app that successfully reverse-engineers this: http://codepen.io/dting/full/QbRyqq/.", "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 Read-Search-Ask 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.

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