{ "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: https://codepen.io/FreeCodeCamp/full/rLJZrA/.", "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 by sharing it with your friends on Facebook." ], "challengeSeed": [ "Drnp29SJY8w" ], "tests": [], "type": "zipline", "challengeType": 3, "isRequired": true, "translations": { "es": { "title": "Crea una calculadora JavaScript", "description": [ "Objetivo: Crea una aplicación con CodePen.io cuya funcionalidad sea similar a esta: https://codepen.io/FreeCodeCamp/full/PNKdjo/.", "Regla #1: No veas el código del proyecto de ejemplo en CodePen. Encuentra la forma de hacerlo por tu cuenta.", "Regla #2: Satisface las siguientes historias de usuario. Usa cualquier librería o API que necesites. Dale tu estilo personal.", "Historia de 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 Leer-Buscar-Preguntar si te sientes atascado.", "Cuando hayas terminado, pulsa el botón de \"I've completed this challenge\" e incluye un enlace a tu CodePen. ", "Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiéndolo en nuestra Sala de chat para revisión de código. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)." ] } } }, { "id": "bd7158d8c442eddfaeb5bd0f", "title": "Build a Pomodoro Clock", "description": [ "Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/FreeCodeCamp/full/aNyxXR/.", "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 by sharing it with your friends on Facebook." ], "challengeSeed": [ "lgj3nfzV0xM" ], "tests": [], "type": "zipline", "isRequired": true, "challengeType": 3, "translations": { "es": { "title": "Crea un reloj pomodoro", "description": [ "Objetivo: Crea una aplicación con CodePen.io cuya funcionalidad sea similar a la de esta: https://codepen.io/FreeCodeCamp/full/aNyxXR/.", "Regla #1: No veas el código del proyecto de ejemplo en CodePen. Encuentra la forma de hacerlo por tu cuenta.", "Regla #2: Satisface las siguientes historias de usuario. Usa cualquier librería o APIs que necesites. Dale tu estilo personal.", "Historia de 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: Como usuario, puedo personalizar la longitud de cada pomodoro.", "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado.", "Cuando hayas terminado, pulsa el botón de \"I've completed this challenge\" e incluye un enlace a tu CodePen.", "Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiéndolo en nuestra Sala de chat para revisión de código. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)." ] }, "ru": { "title": "Создайте таймер Pomodoro", "description": [ "Задание: Создайте CodePen.io который успешно копирует вот этот: https://codepen.io/FreeCodeCamp/full/aNyxXR/.", "Правило #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" ] } } }, { "id": "bd7158d8c442eedfaeb5bd1c", "title": "Build a Tic Tac Toe Game", "description": [ "Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/FreeCodeCamp/full/KzXQgy/.", "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 by sharing it with your friends on Facebook." ], "challengeSeed": [ "Ia69O1ZNGEg" ], "tests": [], "type": "zipline", "challengeType": 3, "isRequired": true, "translations": { "es": { "title": "Crea un juego de Tic Tac Toe", "description": [ "Objetivo: Construye una aplicación en CodePen.io cuya funcionalidad sea similar a la de esta: https://codepen.io/FreeCodeCamp/full/KzXQgy/.", "Regla #1: No veas el código del proyecto de ejemplo en CodePen. Encuentra la forma de hacerlo por tu cuenta.", "Regla #2: Satisface las siguientes historias de usuario. Usa cualquier librería o APIs que necesites. Dale tu estilo personal.", "Historia de usuario: Puedo jugar un juego de Tic Tac Toe contra el computador.", "Historia de usuario: Mi juego se reiniciará tan pronto como termine para poder jugar de nuevo.", "Historia de usuario: Puedo elegir si quiero jugar como X o como O.", "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado.", "Cuando hayas terminado, pulsa el botón de \"I've completed this challenge\" e incluye un enlace a tu CodePen.", "Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiéndolo en nuestra Sala de chat para revisión de código. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)." ] } } }, { "id": "bd7158d8c442eddfaeb5bd1c", "title": "Build a Simon Game", "description": [ "Objective: Build a CodePen.io app that is functionally similar to this: https://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 by sharing it with your friends on Facebook." ], "challengeSeed": [ "tAPut8a47bA" ], "tests": [], "type": "zipline", "challengeType": 3, "isRequired": true, "translations": { "es": { "title": "Construye un juego de Simon", "description": [ "Objetivo: Construye una aplicación en CodePen.io cuya funcionalidad sea similar a la de esta: https://codepen.io/Em-Ant/full/QbRyqq/.", "Regla #1: No veas el código del proyecto de ejemplo en CodePen. Encuentra la forma de hacerlo por tu cuenta.", "Regla #2: Satisface las siguientes historias de usuario. Usa cualquier librería o APIs que necesites. Dale tu estilo personal.", "Historia de usuario: Se me presenta una serie aleatoria de pulsaciones a botones.", "Historia de usuario: Cada vez que presiono una secuencia de pulsaciones correctamente, veo que vuelve a ejecutarse la misma serie de pulsaciones con un paso adicional.", "Historia de usuario: Escucho un sonido que corresponde a cada botón cuando se ejecuta una secuencia de pulsaciones, así como cuando yo presiono un botón.", "Historia de usuario: Si presiono el botón equivocado, se me notifica sobre mi error, y se ejecuta de nuevo la serie correcta de pulsaciones para recordarme cuál es la secuencia correcta, tras lo cual puedo intentar de nuevo.", "Historia de usuario: Puedo ver cuántos pasos hay en la serie de pulsaciones actual.", "Historia de 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: 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: 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 Leer-Buscar-Preguntar si te sientes atascado.", "Cuando hayas terminado, pulsa el botón de \"I've completed this challenge\" e incluye un enlace a tu CodePen.", "Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiéndolo en nuestra Sala de chat para revisión de código. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)." ] } } } ] }