{ "name": "Advanced Front End Development Projects", "order": 12.5, "time": "150 hours", "helpRoom": "HelpFrontEnd", "challenges": [ { "id": "bd7158d8c442eddfaeb5bd17", "title": "Build a JavaScript Calculator", "description": [ "Objective: Build a CodePen.io app that is functionally similar to this: http://codepen.io/FreeCodeCamp/full/zrRzMR.", "Rule #1: Don't look at the example project's code. Figure it out for yourself.", "Rule #2: Fulfill the below user stories. Use whichever libraries or APIs you need. Give it your own personal style.", "User Story: I can add, subtract, multiply and divide two numbers.", "User Story: I can clear the input field with a clear button.", "User Story: I can keep chaining mathematical operations together until I hit the equal button, and the calculator will tell me the correct output.", "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. ", "You can get feedback on your project from fellow campers by sharing it in our Code Review Chatroom. You can also share it on Twitter and your city's Campsite (on Facebook)." ], "challengeSeed": [ "126411565" ], "tests": [], "type": "zipline", "challengeType": 3, "nameEs": "Crea una calculadora JavaScript", "descriptionEs": [ "Objetivo: Crea una aplicación con CodePen.io que reproduzca efectivamente mediante ingeniería inversa este app: http://codepen.io/FreeCodeCamp/full/zrRzMR.", "Regla #1: No veas el código del proyecto de ejemplo en CodePen. Encuentra la forma de hacerlo por tu cuenta.", "Regla #2: Puedes usar cualquier librería o APIs que necesites.", "Regla #3: Usa ingeniería inversa para reproducir la funcionalidad del proyecto de ejemplo, pero también siéntete en la libertad de personalizarlo.", "Las siguientes son las historias de usuario que debes satisfacer, incluyendo las historias opcionales:", "Historia de usuario: Como usuario, puedo sumar, restar, multiplicar y dividir dos números.", "Historia de usuario opcional: Puedo limpiar la pantalla con un botón de borrar.", "Historia de usuario opcional: Puedo concatenar continuamente varias operaciones hasta que pulse el botón de igual, y la calculadora me mostrará la respuesta correcta.", "Recuerda utilizar Read-Search-Ask si te sientes atascado.", "Cuando hayas terminado, pulsa el botón de \"I've completed this challenge\" e incluye un link a tu CodePen. Si programaste en pareja, debes incluir también el nombre de usuario de Free Code Camp de tu compañero.", "Si quieres retroalimentación inmediata de parte de tus compañeros campistas, pulsa este botón y pega el link de tu proyecto en CodePen.

Pulsa aquí y agrega tu link en el texto del tweet" ], "isRequired": true }, { "id": "bd7158d8c442eddfaeb5bd0f", "title": "Build a Pomodoro Clock", "description": [ "Objective: Build a CodePen.io app that is functionally similar to this: http://codepen.io/FreeCodeCamp/full/VemPZX.", "Rule #1: Don't look at the example project's code. Figure it out for yourself.", "Rule #2: Fulfill the below user stories. Use whichever libraries or APIs you need. Give it your own personal style.", "User Story: I can start a 25 minute pomodoro, and the timer will go off once 25 minutes has elapsed.", "User Story: I can reset the clock for my next pomodoro.", "User Story: I can customize the length of each pomodoro.", "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. ", "You can get feedback on your project from fellow campers by sharing it in our Code Review Chatroom. You can also share it on Twitter and your city's Campsite (on Facebook)." ], "challengeSeed": [ "126411567" ], "tests": [], "type": "zipline", "nameRu": "Создайте таймер Pomodoro", "descriptionRu": [ "Задание: Создайте CodePen.io который успешно копирует вот этот: http://codepen.io/FreeCodeCamp/full/VemPZX.", "Правило #1: Не подсматривайте код приведенного на CodePen примера. Напишите его самостоятельно.", "Правило #2: Можете использовать любые библиотеки или API, которые потребуются.", "Правило #3: Воссоздайте функционал приведенного примера и не стесняйтесь добавить что-нибудь от себя.", "Реализуйте следующие пользовательские истории, сделайте также бонусные по желанию:", "Пользовательская история: В качестве пользователя, я могу запустить 25 минутную 'помидорку', по истечении которой таймер выключится.", "Бонусная пользовательская история: В качестве пользователя, я могу сбросить таймер для установки следующей 'помидорки'.", "Бонусная пользовательская история: В качестве пользователя, я могу выбирать длительность 'помидорки'.", "Если что-то не получается, воспользуйтесь Read-Search-Ask.", "Когда выполните задание кликните кнопку \"I've completed this challenge\" и добавьте ссылку на ваш CodePen. Если вы программировали с кем-то в паре, также добавьте имя вашего напарника.", "Если вы хотите получить немедленную оценку вашего проекта, нажмите эту кнопку и добавьте ссылку на ваш CodePen. В противном случае мы проверим его перед тем как вы приступите к проектам для некоммерческих организаций.

Click here then add your link to your tweet's text" ], "nameEs": "Crea un reloj pomodoro", "descriptionEs": [ "Objetivo: Crea una aplicación con CodePen.io que reproduzca efectivamente mediante ingeniería inversa este app: http://codepen.io/FreeCodeCamp/full/VemPZX.", "Regla #1: No veas el código del proyecto de ejemplo en CodePen. Encuentra la forma de hacerlo por tu cuenta.", "Regla #2: Puedes usar cualquier librería o APIs que necesites.", "Regla #3: Usa ingeniería inversa para reproducir la funcionalidad del proyecto de ejemplo, pero también siéntete en la libertad de personalizarlo.", "Las siguientes son las historias de usuario que debes satisfacer, incluyendo las historias opcionales:", "Historia de usuario: Como usuario, puedo iniciar un pomodoro de 25 minutos, y el cronómetro terminará cuando pasen 25 minutos.", "Historia de usuario: Como usuario, puedo reiniciar el reloj para comenzar mi siguiente pomodoro.", "Historia de usuario opcional: Como usuario, puedo personalizar la longitud de cada pomodoro.", "Recuerda utilizar Read-Search-Ask si te sientes atascado.", "Cuando hayas terminado, pulsa el botón de \"I've completed this challenge\" e incluye un link a tu CodePen. Si programaste en pareja, debes incluir también el nombre de usuario de Free Code Camp de tu compañero.", "Si quieres retroalimentación inmediata de parte de tus compañeros campistas, pulsa este botón y pega el link de tu proyecto en CodePen.

Pulsa aquí y agrega tu link en el texto del tweet" ], "isRequired": true, "challengeType": 3 }, { "id": "bd7158d8c442eedfaeb5bd1c", "title": "Build a Tic Tac Toe Game", "description": [ "Objective: Build a CodePen.io app that is functionally similar to this: http://codepen.io/FreeCodeCamp/full/adBpvw.", "Rule #1: Don't look at the example project's code. Figure it out for yourself.", "Rule #2: Fulfill the below user stories. Use whichever libraries or APIs you need. Give it your own personal style.", "User Story: I can play a game of Tic Tac Toe with the computer.", "User Story: My game will reset as soon as it's over so I can play again.", "User Story: 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.", "You can get feedback on your project from fellow campers by sharing it in our Code Review Chatroom. You can also share it on Twitter and your city's Campsite (on Facebook)." ], "challengeSeed": [ "126415123" ], "tests": [], "type": "zipline", "challengeType": 3, "nameEs": "Crea un juego de Tic Tac Toe", "descriptionEs": [ "Objetivo: Crea una aplicación con CodePen.io que reproduzca efectivamente mediante ingeniería inversa este app: http://codepen.io/FreeCodeCamp/full/adBpvw.", "Regla #1: No veas el código del proyecto de ejemplo en CodePen. Encuentra la forma de hacerlo por tu cuenta.", "Regla #2: Puedes usar cualquier librería o APIs que necesites.", "Regla #3: Usa ingeniería inversa para reproducir la funcionalidad del proyecto de ejemplo, pero también siéntete en la libertad de personalizarlo.", "Las siguientes son las historias de usuario que debes satisfacer, incluyendo las historias opcionales:", "Historia de usuario: Como usuario, puedo iniciar un juego de Tic Tac Toe con la computadora.", "Historia de usuario opcional: Como usuario, nunca puedo ganar contra la computadora - en el mejor de los casos puedo empatar.", "Historia de usuario opcional: Como usuario, mi juego se reiniciará tan pronto como se termine, de tal forma que pueda jugar de nuevo.", "Historia de usuario opcional: Como usuario, puedo elegir si quiero jugar como X o como O.", "Recuerda utilizar Read-Search-Ask si te sientes atascado.", "Cuando hayas terminado, pulsa el botón de \"I've completed this challenge\" e incluye un link a tu CodePen. Si programaste en pareja, debes incluir también el nombre de usuario de Free Code Camp de tu compañero.", "Si quieres retroalimentación inmediata de parte de tus compañeros campistas, pulsa este botón y pega el link de tu proyecto en CodePen.

Pulsa aquí y agrega tu link en el texto del tweet" ], "isRequired": true }, { "id": "bd7158d8c442eddfaeb5bd1c", "title": "Build a Simon Game", "description": [ "Objective: Build a CodePen.io app that is functionally similar to this: http://codepen.io/FreeCodeCamp/full/obYBjE.", "Rule #1: Don't look at the example project's code. Figure it out for yourself.", "Rule #2: Fulfill the below user stories. Use whichever libraries or APIs you need. Give it your own personal style.", "User Story: I am presented with a random series of button presses.", "User Story: 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: 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: 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: I can see how many steps are in the current series of button presses.", "User Story: If I want to restart, I can hit a button to do so, and the game will return to a single step.", "User Story: 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.", "User Story: 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.", "You can get feedback on your project from fellow campers by sharing it in our Code Review Chatroom. You can also share it on Twitter and your city's Campsite (on Facebook)." ], "challengeSeed": [ "137213633" ], "tests": [], "type": "zipline", "challengeType": 3, "nameEs": "Construye un juego de Simon", "descriptionEs": [ "Objetivo: Crea una aplicación con CodePen.io que reproduzca efectivamente mediante ingeniería inversa este app: http://codepen.io/FreeCodeCamp/full/obYBjE.", "Regla #1: No veas el código del proyecto de ejemplo en CodePen. Encuentra la forma de hacerlo por tu cuenta.", "Regla #2: Puedes usar cualquier librería o APIs que necesites.", "Regla #3: Usa ingeniería inversa para reproducir la funcionalidad del proyecto de ejemplo, pero también siéntete en la libertad de personalizarlo.", "Las siguientes son las historias de usuario que debes satisfacer, incluyendo las historias opcionales:", "Historia de usuario: Como usuario, se me presenta una serie de colores aleatoria.", "Historia de usuario: Como usuario, cada vez que presiono una secuencia de colores correctamente, veo la misma serie de colores con un paso adicional.", "Historia de usuario: Como usuario, escucho un sonido que corresponde a cada botón cuando una sequencia se me presenta, así como cuando yo presiono un botón.", "Historia de usuario: Como usuario, si presiono el botón equivocado, se me notifica sobre mi error, y la serie correcta de colores se muestra de nuevo para recordarme cuál es la secuencia correcta, tras lo cual puedo probar de nuevo.", "Historia de usuario: Como usuario, puedo ver cuántos pasos hay en la serie de botones actual.", "Historia de usuario opcional: Como usuario, si deseo reiniciar, puedo pulsar un botón para hacerlo, y el juego comenzará desde una secuencia con un solo paso.", "Historia de usuario opcional: Como usuario, puedo jugar en modo estricto donde si presiono el botón equivocado, se me notifica de mi error, y el juego vuelve a comenzar con una nueva serie aleatoria de colores.", "Historia de usuario opcional: Como usuario, la velocidad del juego se incrementa en el quinto, noveno y decimotercer paso.", "Historia de usuario opcional: Como usuario, puedo ganar el juego si completo 20 pasos correctos. Se me notifica sobre mi victoria, tras lo cual el juego se reinicia.", "Pista: Aquí hay algunos mp3s que puedes utilizar para tus botones: 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.", "Recuerda utilizar Read-Search-Ask si te sientes atascado.", "Cuando hayas terminado, pulsa el botón de \"I've completed this challenge\" e incluye un link a tu CodePen. Si programaste en pareja, debes incluir también el nombre de usuario de Free Code Camp de tu compañero.", "Si quieres retroalimentación inmediata de parte de tus compañeros campistas, pulsa este botón y pega el link de tu proyecto en CodePen.

Pulsa aquí y agrega tu link en el texto del tweet" ], "isRequired": true } ] }