{
"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)."
]
}
}
}
]
}