add new challenges
This commit is contained in:
Quincy Larson
committed by
Berkeley Martinez
Berkeley Martinez
parent
426ff2175f
commit
6f9fab3043
@ -1,245 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "Advanced Front End Development Projects",
|
|
||||||
"order": 12.5,
|
|
||||||
"time": "150 hours",
|
|
||||||
"helpRoom": "HelpFrontEnd",
|
|
||||||
"challenges": [
|
|
||||||
{
|
|
||||||
"id": "bd7158d8c442eddfaeb5bd17",
|
|
||||||
"title": "Build a JavaScript Calculator",
|
|
||||||
"description": [
|
|
||||||
"<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/rLJZrA/' target='_blank'>https://codepen.io/freeCodeCamp/full/rLJZrA/</a>.",
|
|
||||||
"Fulfill the following <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
|
|
||||||
"<strong>User Story:</strong> I can add, subtract, multiply and divide two numbers.",
|
|
||||||
"<strong>User Story:</strong> I can clear the input field with a clear button.",
|
|
||||||
"<strong>User Story:</strong> 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 <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> 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": [
|
|
||||||
"<span class='text-info'>Objetivo:</span> Crea una aplicación con <a href='https://codepen.io' target='_blank'>CodePen.io</a> cuya funcionalidad sea similar a esta: <a href='https://codepen.io/freeCodeCamp/full/PNKdjo/' target='_blank'>https://codepen.io/freeCodeCamp/full/PNKdjo/</a>.",
|
|
||||||
"<span class='text-info'>Regla #1:</span> No veas el código del proyecto de ejemplo en CodePen. Encuentra la forma de hacerlo por tu cuenta.",
|
|
||||||
"<span class='text-info'>Regla #2:</span> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o API que necesites. Dale tu estilo personal.",
|
|
||||||
"<span class='text-info'>Historia de usuario:</span> Puedo sumar, restar, multiplicar y dividir dos números.",
|
|
||||||
"<span class='text-info'>Historia de usuario opcional:</span> Puedo limpiar la pantalla con un botón de borrar.",
|
|
||||||
"<span class='text-info'>Historia de usuario opcional:</span> Puedo concatenar continuamente varias operaciones hasta que pulse el botón de igual, y la calculadora me mostrará la respuesta correcta.",
|
|
||||||
"Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> 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 <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"pt-br": {
|
|
||||||
"title": "Construa uma calculadora JavaScript",
|
|
||||||
"description": [
|
|
||||||
"<span class='text-info'>Objetivo:</span> Construa uma aplicação em <a href='https://codepen.io' target='_blank'>CodePen.io</a> cuja funcionalidade seja similar a esta: <a href='https://codepen.io/freeCodeCamp/full/rLJZrA/' target='_blank'>https://codepen.io/freeCodeCamp/full/rLJZrA/</a>.",
|
|
||||||
"<span class='text-info'>Regra #1:</span> Não veja o código do projeto de exemplo no CodePen. Encontre a sua própria forma de fazê-lo.",
|
|
||||||
"<span class='text-info'>Regra #2:</span> Satisfaça as seguintes <a href='https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio' target='_blank'>histórias de usuário</a>. Utilize qualquer biblioteca ou API que você precisar. Dê o seu próprio estilo pessoal.",
|
|
||||||
"<span class='text-info'>História de usuário:</span> Eu posso somar, subtrair, multiplicar e dividir dois números.",
|
|
||||||
"<span class='text-info'>História de usuário opcional:</span> Eu posso limpar o campo de entrada com um botão claro.",
|
|
||||||
"<span class='text-info'>História de usuário opcional:</span> Eu posso manter o encadeamento de operações matemáticas juntas até eu apertar o botão de igual, e a calculadora irá me dizer a resposta correta.",
|
|
||||||
"Lembre-se de utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Ler-Buscar-Perguntar</a> se você tiver dificuldades.",
|
|
||||||
"Quando tiver terminado, clique no botão \"Eu concluí este desafio\" e inclua um link para o seu projeto no CodePen. ",
|
|
||||||
"Você pode obter feedback sobre o seu projeto compartilhando-o com os seus amigos no Facebook."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "bd7158d8c442eddfaeb5bd0f",
|
|
||||||
"title": "Build a Pomodoro Clock",
|
|
||||||
"description": [
|
|
||||||
"<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/aNyxXR/' target='_blank'>https://codepen.io/freeCodeCamp/full/aNyxXR/</a>.",
|
|
||||||
"Fulfill the following <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
|
|
||||||
"<strong>User Story:</strong> I can start a 25 minute pomodoro, and the timer will go off once 25 minutes has elapsed.",
|
|
||||||
"<strong>User Story:</strong> I can reset the clock for my next pomodoro.",
|
|
||||||
"<strong>User Story:</strong> I can customize the length of each pomodoro.",
|
|
||||||
"Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> 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": [
|
|
||||||
"<span class='text-info'>Objetivo:</span> Crea una aplicación con <a href='https://codepen.io' target='_blank'>CodePen.io</a> cuya funcionalidad sea similar a la de esta: <a href='https://codepen.io/freeCodeCamp/full/aNyxXR/' target='_blank'>https://codepen.io/freeCodeCamp/full/aNyxXR/</a>.",
|
|
||||||
"<span class='text-info'>Regla #1:</span> No veas el código del proyecto de ejemplo en CodePen. Encuentra la forma de hacerlo por tu cuenta.",
|
|
||||||
"<span class='text-info'>Regla #2:</span> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o APIs que necesites. Dale tu estilo personal.",
|
|
||||||
"<span class='text-info'>Historia de usuario:</span> Puedo iniciar un pomodoro de 25 minutos, y el cronómetro terminará cuando pasen 25 minutos.",
|
|
||||||
"<span class='text-info'>Historia de usuario:</span> Como usuario, puedo reiniciar el reloj para comenzar mi siguiente pomodoro.",
|
|
||||||
"<span class='text-info'>Historia de usuario:</span> Como usuario, puedo personalizar la longitud de cada pomodoro.",
|
|
||||||
"Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> 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 <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"ru": {
|
|
||||||
"title": "Создайте таймер Pomodoro",
|
|
||||||
"description": [
|
|
||||||
"<span class='text-info'>Задание:</span> Создайте <a href='https://codepen.io' target='_blank'>CodePen.io</a> который успешно копирует вот этот: <a href='https://codepen.io/freeCodeCamp/full/aNyxXR/' target='_blank'>https://codepen.io/freeCodeCamp/full/aNyxXR/</a>.",
|
|
||||||
"<span class='text-info'>Правило #1:</span> Не подсматривайте код приведенного на CodePen примера. Напишите его самостоятельно.",
|
|
||||||
"<span class='text-info'>Правило #2:</span> Можете использовать любые библиотеки или API, которые потребуются.",
|
|
||||||
"<span class='text-info'>Правило #3:</span> Воссоздайте функционал приведенного примера и не стесняйтесь добавить что-нибудь от себя.",
|
|
||||||
"Реализуйте следующие <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>пользовательские истории</a>, сделайте также бонусные по желанию:",
|
|
||||||
"<span class='text-info'>Пользовательская история:</span> В качестве пользователя, я могу запустить 25 минутную 'помидорку', по истечении которой таймер выключится.",
|
|
||||||
"<span class='text-info'>Бонусная пользовательская история:</span> В качестве пользователя, я могу сбросить таймер для установки следующей 'помидорки'.",
|
|
||||||
"<span class='text-info'>Бонусная пользовательская история:</span> В качестве пользователя, я могу выбирать длительность 'помидорки'.",
|
|
||||||
"Если что-то не получается, воспользуйтесь <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a>.",
|
|
||||||
"Когда выполните задание кликните кнопку \"I've completed this challenge\" и добавьте ссылку на ваш CodePen. Если вы программировали с кем-то в паре, также добавьте имя вашего напарника.",
|
|
||||||
"Если вы хотите получить немедленную оценку вашего проекта, нажмите эту кнопку и добавьте ссылку на ваш CodePen. В противном случае мы проверим его перед тем как вы приступите к проектам для некоммерческих организаций.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"pt-br": {
|
|
||||||
"title": "Construa um relógio Pomodoro",
|
|
||||||
"description": [
|
|
||||||
"<strong>Objetivo:</strong> Construa uma aplicação em <a href='https://codepen.io' target='_blank'>CodePen.io</a> cuja funcionalidade seja similar a esta: <a href='https://codepen.io/freeCodeCamp/full/aNyxXR/' target='_blank'>https://codepen.io/freeCodeCamp/full/aNyxXR/</a>.",
|
|
||||||
"<span class='text-info'>Regra #1:</span> Não veja o código do projeto de exemplo no CodePen. Encontre a sua própria forma de fazê-lo.",
|
|
||||||
"<span class='text-info'>Regra #2:</span> Satisfaça as seguintes <a href='https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio' target='_blank'>histórias de usuário</a>. Utilize qualquer biblioteca ou API que você precisar. Dê o seu próprio estilo pessoal.",
|
|
||||||
"<span class='text-info'>História de usuário:</span> Eu posso começar um pomodoro de 25 minutos, e o temporizador desligará quando 25 minutos tiverem passado.",
|
|
||||||
"<span class='text-info'>História de usuário:</span> Eu posso zerar o relógio para o meu próximo pomodoro.",
|
|
||||||
"Lembre-se de utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Ler-Buscar-Perguntar</a> se você tiver dificuldades.",
|
|
||||||
"Quando tiver terminado, clique no botão \"Eu concluí este desafio\" e inclua um link para o seu projeto no CodePen. ",
|
|
||||||
"Você pode obter feedback sobre o seu projeto compartilhando-o com os seus amigos no Facebook."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "bd7158d8c442eedfaeb5bd1c",
|
|
||||||
"title": "Build a Tic Tac Toe Game",
|
|
||||||
"description": [
|
|
||||||
"<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/KzXQgy/' target='_blank'>https://codepen.io/freeCodeCamp/full/KzXQgy/</a>.",
|
|
||||||
"Fulfill the following <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
|
|
||||||
"<strong>User Story:</strong> I can play a game of Tic Tac Toe with the computer.",
|
|
||||||
"<strong>User Story:</strong> My game will reset as soon as it's over so I can play again.",
|
|
||||||
"<strong>User Story:</strong> I can choose whether I want to play as X or O.",
|
|
||||||
"Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> 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": [
|
|
||||||
"<span class='text-info'>Objetivo:</span> Construye una aplicación en <a href='https://codepen.io' target='_blank'>CodePen.io</a> cuya funcionalidad sea similar a la de esta: <a href='https://codepen.io/freeCodeCamp/full/KzXQgy/' target='_blank'>https://codepen.io/freeCodeCamp/full/KzXQgy/</a>.",
|
|
||||||
"<span class='text-info'>Regla #1:</span> No veas el código del proyecto de ejemplo en CodePen. Encuentra la forma de hacerlo por tu cuenta.",
|
|
||||||
"<span class='text-info'>Regla #2:</span> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o APIs que necesites. Dale tu estilo personal.",
|
|
||||||
"<span class='text-info'>Historia de usuario:</span> Puedo jugar un juego de Tic Tac Toe contra el computador.",
|
|
||||||
"<span class='text-info'>Historia de usuario:</span> Mi juego se reiniciará tan pronto como termine para poder jugar de nuevo.",
|
|
||||||
"<span class='text-info'>Historia de usuario:</span> Puedo elegir si quiero jugar como X o como O.",
|
|
||||||
"Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> 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 <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"pt-br": {
|
|
||||||
"title": "Construa um Jogo da Velha",
|
|
||||||
"description": [
|
|
||||||
"<strong>Objetivo:</strong> Construa uma aplicação em <a href='https://codepen.io' target='_blank'>CodePen.io</a> cuja funcionalidade seja similar a esta: <a href='https://codepen.io/freeCodeCamp/full/aNyxXR/' target='_blank'>https://codepen.io/freeCodeCamp/full/aNyxXR/</a>.",
|
|
||||||
"<span class='text-info'>Regra #1:</span> Não veja o código do projeto de exemplo no CodePen. Encontre a sua própria forma de fazê-lo.",
|
|
||||||
"<span class='text-info'>Regra #2:</span> Satisfaça as seguintes <a href='https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio' target='_blank'>histórias de usuário</a>. Utilize qualquer biblioteca ou API que você precisar. Dê o seu próprio estilo pessoal.",
|
|
||||||
"<span class='text-info'>História de usuário:</span> Eu posso jogar o Jogo da Velha com o computador.",
|
|
||||||
"<span class='text-info'>História de usuário:</span> Meu jogo reiniciará assim que acabar para que eu possa jogar novamente.",
|
|
||||||
"<span class='text-info'>História de usuário:</span> Eu posso escolher se eu quero jogar como X ou O.",
|
|
||||||
"Lembre-se de utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Ler-Buscar-Perguntar</a> se você tiver dificuldades.",
|
|
||||||
"Quando tiver terminado, clique no botão \"Eu concluí este desafio\" e inclua um link para o seu projeto no CodePen. ",
|
|
||||||
"Você pode obter feedback sobre o seu projeto compartilhando-o com os seus amigos no Facebook."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "bd7158d8c442eddfaeb5bd1c",
|
|
||||||
"title": "Build a Simon Game",
|
|
||||||
"description": [
|
|
||||||
"<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/Em-Ant/full/QbRyqq/' target='_blank'>https://codepen.io/freeCodeCamp/full/obYBjE</a>.",
|
|
||||||
"Fulfill the following <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
|
|
||||||
"<strong>User Story:</strong> I am presented with a random series of button presses.",
|
|
||||||
"<strong>User Story:</strong> Each time I input a series of button presses correctly, I see the same series of button presses but with an additional step.",
|
|
||||||
"<strong>User Story:</strong> I hear a sound that corresponds to each button both when the series of button presses plays, and when I personally press a button.",
|
|
||||||
"<strong>User Story:</strong> 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.",
|
|
||||||
"<strong>User Story:</strong> I can see how many steps are in the current series of button presses.",
|
|
||||||
"<strong>User Story:</strong> If I want to restart, I can hit a button to do so, and the game will return to a single step.",
|
|
||||||
"<strong>User Story:</strong> 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.",
|
|
||||||
"<strong>User Story:</strong> I can win the game by getting a series of 20 steps correct. I am notified of my victory, then the game starts over.",
|
|
||||||
"<strong>Hint:</strong> Here are mp3s you can use for each button: <code>https://s3.amazonaws.com/freecodecamp/simonSound1.mp3</code>, <code>https://s3.amazonaws.com/freecodecamp/simonSound2.mp3</code>, <code>https://s3.amazonaws.com/freecodecamp/simonSound3.mp3</code>, <code>https://s3.amazonaws.com/freecodecamp/simonSound4.mp3</code>.",
|
|
||||||
"Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> 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": [
|
|
||||||
"<span class='text-info'>Objetivo:</span> Construye una aplicación en <a href='https://codepen.io' target='_blank'>CodePen.io</a> cuya funcionalidad sea similar a la de esta: <a href='https://codepen.io/Em-Ant/full/QbRyqq/' target='_blank'>https://codepen.io/Em-Ant/full/QbRyqq/</a>.",
|
|
||||||
"<span class='text-info'>Regla #1:</span> No veas el código del proyecto de ejemplo en CodePen. Encuentra la forma de hacerlo por tu cuenta.",
|
|
||||||
"<span class='text-info'>Regla #2:</span> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o APIs que necesites. Dale tu estilo personal.",
|
|
||||||
"<span class='text-info'>Historia de usuario:</span> Se me presenta una serie aleatoria de pulsaciones a botones.",
|
|
||||||
"<span class='text-info'>Historia de usuario:</span> Cada vez que presiono una secuencia de pulsaciones correctamente, veo que vuelve a ejecutarse la misma serie de pulsaciones con un paso adicional.",
|
|
||||||
"<span class='text-info'>Historia de usuario:</span> Escucho un sonido que corresponde a cada botón cuando se ejecuta una secuencia de pulsaciones, así como cuando yo presiono un botón.",
|
|
||||||
"<span class='text-info'>Historia de usuario:</span> 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.",
|
|
||||||
"<span class='text-info'>Historia de usuario:</span> Puedo ver cuántos pasos hay en la serie de pulsaciones actual.",
|
|
||||||
"<span class='text-info'>Historia de usuario:</span> Si deseo reiniciar, puedo pulsar un botón para hacerlo, y el juego comenzará desde una secuencia con un solo paso.",
|
|
||||||
"<span class='text-info'>Historia de usuario:</span> 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.",
|
|
||||||
"<span class='text-info'>Historia de usuario:</span> Puedo ganar el juego si completo 20 pasos correctos. Se me notifica sobre mi victoria, tras lo cual el juego se reinicia.",
|
|
||||||
"<span class='text-info'>Pista:</span> Aquí hay algunos mp3s que puedes utilizar para tus botones: <code>https://s3.amazonaws.com/freecodecamp/simonSound1.mp3</code>, <code>https://s3.amazonaws.com/freecodecamp/simonSound2.mp3</code>, <code>https://s3.amazonaws.com/freecodecamp/simonSound3.mp3</code>, <code>https://s3.amazonaws.com/freecodecamp/simonSound4.mp3</code>.",
|
|
||||||
"Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> 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 <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"pt-br": {
|
|
||||||
"title": "Construa um jogo de Simon",
|
|
||||||
"description": [
|
|
||||||
"<strong>Objetivo:</strong> Construa uma aplicação em <a href='https://codepen.io' target='_blank'>CodePen.io</a> cuja funcionalidade seja similar a esta: <a href='https://codepen.io/freeCodeCamp/full/aNyxXR/' target='_blank'>https://codepen.io/freeCodeCamp/full/aNyxXR/</a>.",
|
|
||||||
"<span class='text-info'>Regra #1:</span> Não veja o código do projeto de exemplo no CodePen. Encontre a sua própria forma de fazê-lo.",
|
|
||||||
"<span class='text-info'>Regra #2:</span> Satisfaça as seguintes <a href='https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio' target='_blank'>histórias de usuário</a>. Utilize qualquer biblioteca ou API que você precisar. Dê o seu próprio estilo pessoal.",
|
|
||||||
"<span class='text-info'>História de usuário:</span> Eu sou apresentado a uma sequência aleatória de botões para presisonar.",
|
|
||||||
"<span class='text-info'>História de usuário:</span> Cada vez que eu pressionar uma sequência de botões corretamente, eu vejo a mesma sequência de botões, mas com um passo adicional.",
|
|
||||||
"<span class='text-info'>História de usuário:</span> Eu ouço um som que corresponde a cada botão quando a sequência é tocada, e quando eu, pessoalmente, pressiono cada botão.",
|
|
||||||
"<span class='text-info'>História de usuário:</span> Se eu pressionar o botão errado, eu sou notificado, e essa sequência de botões recomeça para que eu possa me lembrar do padrão e tentar novamente.",
|
|
||||||
"<span class='text-info'>História de usuário:</span> Eu posso ver quantos passos estão na sequência atual de botões para pressionar.",
|
|
||||||
"<span class='text-info'>História de usuário:</span> Se eu quiser reiniciar, eu posso pressionar um botão e o jogo retornará para um único passo na sequência de botões.",
|
|
||||||
"<span class='text-info'>História de usuário:</span> Eu posso jogar no modo rigoroso, onde se eu pressionar um botão errado, eu sou notificado e o jogo recomeça em uma nova série aleatória de botões para pressionar.",
|
|
||||||
"<span class='text-info'>História de usuário:</span> Eu posso ganhar o jogo pressionando uma sequência de 20 passos corretamente. Eu sou notificado da minha vitória e então o jogo recomeça.",
|
|
||||||
"<strong>Dica: </strong>Aqui estão alguns mp3s que você pode usar para cada botão: <code>https://s3.amazonaws.com/freecodecamp/simonSound1.mp3</code>, <code>https://s3.amazonaws.com/freecodecamp/simonSound2.mp3</code>, <code>https://s3.amazonaws.com/freecodecamp/simonSound3.mp3</code>, <code>https://s3.amazonaws.com/freecodecamp/simonSound4.mp3</code>.",
|
|
||||||
"Lembre-se de utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Ler-Buscar-Perguntar</a> se você tiver dificuldades.",
|
|
||||||
"Quando tiver terminado, clique no botão \"Eu concluí este desafio\" e inclua um link para o seu projeto no CodePen. ",
|
|
||||||
"Você pode obter feedback sobre o seu projeto compartilhando-o com os seus amigos no Facebook."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@ -1,329 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "Basic Front End Development Projects",
|
|
||||||
"order": 5.5,
|
|
||||||
"time": "50 hours",
|
|
||||||
"helpRoom": "HelpFrontEnd",
|
|
||||||
"challenges": [
|
|
||||||
{
|
|
||||||
"id": "bd7158d8c442eddfbeb5bd1f",
|
|
||||||
"title": "Get Set for our Front End Development Projects",
|
|
||||||
"description": [
|
|
||||||
[
|
|
||||||
"//i.imgur.com/OAD6SJz.png",
|
|
||||||
"An image of a Simon game, one our front end projects.",
|
|
||||||
"Our front end development projects will give you a chance to apply the front end skills you've developed up to this point. We'll use a popular browser-based code editor called CodePen.",
|
|
||||||
""
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/WBetuBa.jpg",
|
|
||||||
"A programmer punching through his laptop screen in frustration.",
|
|
||||||
"These projects are hard. It takes most campers several days to build each project. You will get frustrated. But don't quit. This gets easier with practice.",
|
|
||||||
""
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/p2TpOQd.jpg",
|
|
||||||
"A cute dog jumping over a hurdle and winking and pointing his paw at you.",
|
|
||||||
"When you get stuck, just use the Read-Search-Ask methodology. Don't worry - you've got this.",
|
|
||||||
""
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/G1saeDt.gif",
|
|
||||||
"A gif showing how to create a Codepen account.",
|
|
||||||
"For our front end project challenges, we'll use a popular browser-based code editor called CodePen. Click the \"Open link in new tab\" button below to open CodePen's signup page. Fill out the form and click \"Sign up\". <br><div class=\"small\">Note: If you already have a CodePen account, you can skip this step by clicking \"Open link in new tab\", closing the new tab that opens, then clicking \"go to my next step\". We removed our \"skip step\" button because many people would just click it repeatedly without doing these important steps.</div>",
|
|
||||||
"https://codepen.io/signup/free"
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/U4y9RJ1.gif",
|
|
||||||
"A gif showing that you can type \"hello world\" will output \"hello world\" in the preview window. You can also drag windows to resize them, and change their orientation.",
|
|
||||||
"In the HTML box, create an <code>h1</code> element with the text \"Hello World\". You can drag the frames around to resize them. You can also click the \"Change View\" button and change the orientation of the frames.",
|
|
||||||
""
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/G9KFQDL.gif",
|
|
||||||
"A gif showing the process of adding Bootstrap to your pen.",
|
|
||||||
"Click the gear in the upper left hand corner of the CSS box, then scroll down to \"Quick add\" and choose Bootstrap. Now give your <code>h1</code> element the class of <code>text-primary</code> to change its color and prove that Bootstrap is now available.",
|
|
||||||
""
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/m0pWik2.gif",
|
|
||||||
"A gif showing the process of turning off auto update preview",
|
|
||||||
"When using CodePen and Ajax, it is a good idea to turn off automatic preview updating so API calls are not made too often. Too many API calls can sometimes lead to temporary blockages, and may require waiting periods before they can be used again. <br> <div class=\"small\"> To disable automatic preview updating click the \"Settings\" button at the top of the page, then click the \"Behavior\" tab. At the bottom of the page, un-check \"AUTO UPDATE PREVIEW\". Now press \"Run\" at the top of the page to update the preview, and click \"Save\".</div>",
|
|
||||||
""
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"challengeSeed": [],
|
|
||||||
"tests": [],
|
|
||||||
"type": "Waypoint",
|
|
||||||
"isRequired": false,
|
|
||||||
"challengeType": 7,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Prepárate para los Proyectos de Desarrollo de Interfaces",
|
|
||||||
"description": [
|
|
||||||
[
|
|
||||||
"//i.imgur.com/OAD6SJz.png",
|
|
||||||
"Una imagen del juego Simón, uno de nuestros proyectos de interfaz.",
|
|
||||||
"Nuestros proyectos de desarrollo de interfaces te darán oportunidad de aplicar las habilidades con interfaces que has desarrollado hasta este momento. Usaremos un editor de código basado en el navegador llamado CodePen.",
|
|
||||||
""
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/WBetuBa.jpg",
|
|
||||||
"Un programador frustado golpeando la pantalla de su computador.",
|
|
||||||
"Nuestros desafíos sobre algoritmos son difíciles. Algunos pueden requerir muchas horas para resolverse. Podrás frustarte, pero no te rindas. Se vuelve fácil con práctica.",
|
|
||||||
""
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/p2TpOQd.jpg",
|
|
||||||
"Un tierno perro que salta sobre un obstáculo, pica el ojo y te apunta con su pata.",
|
|
||||||
"Cuando te atasques, usa la metodología Leer-Buscar-Preguntar. No te preocupes - lo tienes resuelto.",
|
|
||||||
""
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/G1saeDt.gif",
|
|
||||||
"Un gif que muestra cómo crear una cuenta en Codepen.",
|
|
||||||
"Para nuestros desafíos de interfaces, usaremos un editor de código basado en el navegador que es muy famoso llamado Codepen. Pulsa en el botón de abajo \"Open link in new tab\" para abrir la página de registro de CodePen. Rellena el formulario y pulsa \"Sign up\". <br><div class=\"small\">Nota: Si ya tienes una cuenta de CodePen, puedes omitir este paso pulsando \"Open link in new tab\", cierra la nueva pestaña que se abre, entonces pulsa \"go to my next step\". Eliminamos nuestro botón \"skip step\" porque mucha gente solamente pulsa el botón sin realizar estos importantes pasos.</div>",
|
|
||||||
"https://codepen.io/signup/free"
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/U4y9RJ1.gif",
|
|
||||||
"Un gif que muestra que puedes escribir \"hello world\" en el editor, lo cual escribirá \"hello world\" en la ventana de vista previa. También puedes mover las ventanas para cambiar su tamaño, y cambiar su orientación.",
|
|
||||||
"En la ventana de HTML, crea un elemento h1 con el texto \"Hola mundo\". Puedes arrastrar los bordes de las ventanas para cambiar su tamaño. También puedes pulsar el botón de \"Change View\" para cambiar la orientación de las ventanas.",
|
|
||||||
""
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/G9KFQDL.gif",
|
|
||||||
"Un gif que muestra el proceso de agregar Bootstrap a tu proyecto.",
|
|
||||||
"Pulsa el engrane en la esquina superior izquierda de la ventana de CSS, luego ve hacia abajo hasta donde dice \"Quick add\" y elige Bootstrap. Ahora dale a tu elemento h1 la clase \"text-primary\" para cambiar su color y verificar que Bootstrap está activado.",
|
|
||||||
""
|
|
||||||
]
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"pt-br": {
|
|
||||||
"title": "Prepare-se para nossos Projetos de Desenvolvimento Front End",
|
|
||||||
"description": [
|
|
||||||
[
|
|
||||||
"//i.imgur.com/OAD6SJz.png",
|
|
||||||
"A imagem de um jogo Simon, um de nossos projetos front end.",
|
|
||||||
"Nossos projetos de Desenvolvimento front end vão dar a você a chance de aplicar as habilidades front end que você desenvolveu até esse ponto. Nós vamos usar um editor popular chamado CodePen que funciona direto no navegador.",
|
|
||||||
""
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/WBetuBa.jpg",
|
|
||||||
"Um programador atravessando a tela de seu laptop com um soco em frustração.",
|
|
||||||
"Esses projetos são difíceis. A maioria dos campistas leva alguns dias para contruir cada projeto. Você vai ficar frustrado. Mas não desista. Isso fica mais fácil com a prática.",
|
|
||||||
""
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/p2TpOQd.jpg",
|
|
||||||
"Um cachorro fofo pulando sobre um obstáculo, piscando e apontando sua pata a você.",
|
|
||||||
"Quando ficar travado, use a metodologia Ler-Buscar-Perguntar. Não se preocupe - você consegue.",
|
|
||||||
""
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/G1saeDt.gif",
|
|
||||||
"Um gif mostrando com criar uma conta CodePen.",
|
|
||||||
"Para nossos projetos front end, usaremos um popular editor de código baseado em navegador chamado CodePen. Clique no botão \"Open link in new tab\" abaixo para abrir a página de resgistro do CodePen. Preencha o formulário e clique em \"Sign up\". <br><div class=\"small\">Nota: Se você já tem uma conta CodePen, você pode pular esse passo clicando em \"Open link in new tab\", fechando a nova aba que abrir, e clicando em \"go to my next step\". Nós removemos nosso botão \"skip step\" pois muitas pessoas iam simplesmente clicar nele repetidamente sem passar por esses passos importantes.</div>",
|
|
||||||
"https://codepen.io/signup/free"
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/U4y9RJ1.gif",
|
|
||||||
"Um gif mostrando que você pode digitar \"hello world\" e será mostrado \"hello world\" na janela de visualização. Você também pode arrastar janelas para redimensioná-las e mudar a orientação das mesmas.",
|
|
||||||
"Na caixa do HTML, crie um elemento <code>h1</code> com o texto \"Hello World\". Você pode arrastar as bordas para redimensioná-las. Você pode também clicar no botão \"Change View\" e mudar a orientação das janelas.",
|
|
||||||
""
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/G9KFQDL.gif",
|
|
||||||
"Um gif mostrando como adicionar o Bootstrap à sua pen.",
|
|
||||||
"Clique na engrenagem no canto superior esquerdo da caixa do CSS, então role para baixo até \"Quick add\" e escolha Bootstrap. Agora adicione ao seu elemento <code>h1</code> a classe <code>text-primary</code> para mudar sua cor e provar que o Bootstrap agora está disponível.",
|
|
||||||
""
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/m0pWik2.gif",
|
|
||||||
"Um gif mostrando o processo de desativar o update automático da janela de visualização",
|
|
||||||
"Ao usar CodePen e Ajax, é uma boa idea desativar o update automático da janela de visualização para que as chamadas para as APIs não sejam feitas a todo momento. Muitas chamadas para API pode levar à bloqueios temporários e podem requerer períodos de esperar para que possam ser usadas novamente. <br> <div class=\"small\"> Para desativar o update automático da janela de visualização clique no botão \"Settings\" no topo da página, então clique na aba \"Behavior\". No final da página, desmarque \"AUTO UPDATE PREVIEW\". Agora clique em \"Run\" no topo da página para atualizar a janela de visualização e clique \"Save\".</div>",
|
|
||||||
""
|
|
||||||
]
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"ru": {
|
|
||||||
"title": "Приготовьтесь к разработке фронтенд проектов",
|
|
||||||
"description": [
|
|
||||||
[
|
|
||||||
"//i.imgur.com/OAD6SJz.png",
|
|
||||||
"Игра Саймона - один из фронтенд проектов.",
|
|
||||||
"Наши фронтенд проекты дадут вам шанс применить полученные к этому моменту знания по фронтенд разработке. Мы будем использовать популярный браузерный редактор кода - CodePen.",
|
|
||||||
""
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/WBetuBa.jpg",
|
|
||||||
"Программист от отчаяния кулаком пробивает экран своего ноутбука.",
|
|
||||||
"Это трудные проекты. Разработка каждого занимает у большинства кэмперов несколько дней. У вас может возникнуть чувство отчаяния. Несмотря на это не сдавайтесь. С практикой этот процесс станет проще.",
|
|
||||||
""
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/p2TpOQd.jpg",
|
|
||||||
"Милый пес, прыгающий через препятствие, указывает на вас лапой и подмигивает.",
|
|
||||||
"Если что-то не получается, воспользуйтесь Read-Search-Ask. Не волнуйтесь - вы сможете это сделать.",
|
|
||||||
""
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/G1saeDt.gif",
|
|
||||||
"Гифка показывающая как зарегистрироваться на CodePen.",
|
|
||||||
"Для заданий по фронтенд разработке, мы будем использовать популярный браузерный редактор кода под названием CodePen. Откройте страницу регистрации на сайте CodePen, нажав на расположенную чуть ниже кнопку \"Open link in new tab\". Заполните форму и нажмите \"Sign up\". <br><div class=\"small\">Замечание: Если у вас уже есть аккаунт CodePen, то этот шаг можно пропустить: нажмите на кнопку \"Open link in new tab\", закройте появившуюся вкладку и затем кликните \"go to my next step\". Мы убрали кнопку \"skip step\", ввиду того что большинство людей просто нажимали бы ее несколько раз подряд и пропускали бы эти важные инструкции.</div>",
|
|
||||||
"https://codepen.io/signup/free"
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/U4y9RJ1.gif",
|
|
||||||
"Гифка показывающая набор в редакторе заголовка с текстом \"hello world\", который затем отображается в окошке предпросмотра. А также указывающая как изменить размер окон редактора или поменять их расположение.",
|
|
||||||
"В окошке HTML создайте элемент h1 с текстом \"Hello World\". Ухватив края окон можно изменить их размер. А нажав на кнопку \"Change View\" поменять их расположение.",
|
|
||||||
""
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/G9KFQDL.gif",
|
|
||||||
"Гифка показывающая как в CodePen добавить к проекту Bootstrap.",
|
|
||||||
"Нажмите на звездочку в левом верхнем углу окошка CSS, найдите внизу поле \"Quick add\" и выберите в нем Bootstrap. Добавьте к элементу h1 класс \"text-primary\", чтобы изменить его цвет и удостовериться, что Bootstrap подключен.",
|
|
||||||
""
|
|
||||||
]
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "bd7158d8c442eddfaeb5bd18",
|
|
||||||
"title": "Build a Tribute Page",
|
|
||||||
"description": [
|
|
||||||
"<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/NNvBQW/' target='_blank'>https://codepen.io/freeCodeCamp/full/NNvBQW/</a>.",
|
|
||||||
"Fulfill the following <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries you need. Give it your own personal style.",
|
|
||||||
"<strong>User Story:</strong> I can view a tribute page with an image and text.",
|
|
||||||
"<strong>User Story:</strong> I can click on a link that will take me to an external website with further information on the topic.",
|
|
||||||
"Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> 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."
|
|
||||||
],
|
|
||||||
"releasedOn": "January 1, 2016",
|
|
||||||
"challengeSeed": [
|
|
||||||
"qqrnzmqCGDw"
|
|
||||||
],
|
|
||||||
"tests": [],
|
|
||||||
"type": "zipline",
|
|
||||||
"isRequired": true,
|
|
||||||
"challengeType": 3,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Construye una página Tributo",
|
|
||||||
"description": [
|
|
||||||
"<strong>Objetivo:</strong> Crea una aplicación con <a href='https://codepen.io' target='_blank'>CodePen.io</a> que funcionalmente sea similar a esta: <a href='https://codepen.io/freeCodeCamp/full/NNvBQW/' target='_blank'>https://codepen.io/freeCodeCamp/full/NNvBQW/</a>",
|
|
||||||
"<strong>Regla #1:</strong> No veas el código del proyecto de ejemplo. Encuentra la forma de hacerlo por tu cuenta.",
|
|
||||||
"<strong>Regla #2:</strong> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería que necesites. Dale tu estilo personal.",
|
|
||||||
"<strong>Historia de usuario:</strong> Puedo ver una página tributo con una imagen y texto.",
|
|
||||||
"<strong>Historia de usuario:</strong> Puedo pulsar en un enlace que me llevará a un sitio web externo con mayor información sobre el tema.",
|
|
||||||
"Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado.",
|
|
||||||
"Cuando hayas terminado, pulsa el botón \"I've completed this challenge\" e incluye un link a tu CodePen. ",
|
|
||||||
"Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiéndolo en nuestra <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"pt-br": {
|
|
||||||
"title": "Construa uma Página Tributo",
|
|
||||||
"description": [
|
|
||||||
"<strong>Objetivo:</strong> Construa uma aplicação em <a href='https://codepen.io' target='_blank'>CodePen.io</a> cuja funcionalidade seja similar a esta: <a href='https://codepen.io/freeCodeCamp/full/NNvBQW/' target='_blank'>https://codepen.io/freeCodeCamp/full/NNvBQW/</a>.",
|
|
||||||
"Satisfaça as seguintes <a href='https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio' target='_blank'>histórias de usuário</a>. Utilize qualquer biblioteca ou API que você precisar. Dê o seu próprio estilo pessoal.",
|
|
||||||
"<strong>História de usuário:</strong> Eu posso ver uma página tributo com uma imagem e um texto.",
|
|
||||||
"<strong>História de usuário:</strong> Eu posso clicar em um link que vai me levar a um site externo com mais informações sobre o tópico.",
|
|
||||||
"Lembre-se de utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Ler-Buscar-Perguntar</a> se você tiver dificuldades.",
|
|
||||||
"Quando tiver terminado, clique no botão \"Eu concluí este desafio\" e inclua um link para o seu projeto no CodePen. ",
|
|
||||||
"Você pode obter feedback sobre o seu projeto compartilhando-o com os seus amigos no Facebook."
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"ru": {
|
|
||||||
"title": "Создайте страницу посвященную тому что вас вдохновляет",
|
|
||||||
"description": [
|
|
||||||
"<strong>Задание:</strong> Создайте приложение <a href='https://codepen.io' target='_blank'>CodePen.io</a> которое функционально соответствует вот этому: <a href='https://codepen.io/freeCodeCamp/full/NNvBQW/' target='_blank'>https://codepen.io/freeCodeCamp/full/NNvBQW/</a>.",
|
|
||||||
"<strong>Правило #1:</strong> Не подсматривайте код приведенного на CodePen примера. Напишите его самостоятельно.",
|
|
||||||
"<strong>Правило #2:</strong> Реализуйте следующие <a href='https://ru.wikipedia.org/wiki/User_story' target='_blank'>пользовательские истории</a>. Используйте любые библиотеки, которые потребуются. Оформите приложение в вашем собственном стиле.",
|
|
||||||
"<strong>Пользовательская история:</strong> Я могу видеть на странице изображение и текст.",
|
|
||||||
"<strong>Пользовательская история:</strong> Я могу нажать на ссылку, которая ведет на внешнюю страницу с дополнительной информацией по теме.",
|
|
||||||
"Если что-то не получается, воспользуйтесь <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a>.",
|
|
||||||
"Когда выполните задание кликните кнопку \"I've completed this challenge\" и добавьте ссылку на ваш CodePen.",
|
|
||||||
"Вы можете получить отзыв о вашем проекте от коллег, поделившись ссылкой на него в нашем <a href='//gitter.im/freecodecamp/codereview' target='_blank'>чате для рассмотрения кода</a>. Также вы можете поделиться ею через Twitter и на странице Free Code Camp вашего города на Facebook."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "bd7158d8c242eddfaeb5bd13",
|
|
||||||
"title": "Build a Personal Portfolio Webpage",
|
|
||||||
"description": [
|
|
||||||
"<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/YqLyXB/' target='_blank'>https://codepen.io/freeCodeCamp/full/YqLyXB/</a>.",
|
|
||||||
"Fulfill the following <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries you need. Give it your own personal style.",
|
|
||||||
"<strong>User Story:</strong> I can access all of the portfolio webpage's content just by scrolling.",
|
|
||||||
"<strong>User Story:</strong> I can click different buttons that will take me to the portfolio creator's different social media pages.",
|
|
||||||
"<strong>User Story:</strong> I can see thumbnail images of different projects the portfolio creator has built (if you haven't built any websites before, use placeholders.)",
|
|
||||||
"<strong>User Story:</strong> I can navigate to different sections of the webpage by clicking buttons in the navigation.",
|
|
||||||
"Don't worry if you don't have anything to showcase on your portfolio yet - you will build several apps on the next few CodePen challenges, and can come back and update your portfolio later.",
|
|
||||||
"There are many great portfolio templates out there already. However, you should consider building your portfolio page as much as you can from the ground up. Using Bootstrap can help make this process much easier for you.",
|
|
||||||
"Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> 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": [
|
|
||||||
"V72o34gY4Lw"
|
|
||||||
],
|
|
||||||
"tests": [],
|
|
||||||
"type": "zipline",
|
|
||||||
"isRequired": true,
|
|
||||||
"challengeType": 3,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Construye una página web para tu portafolio",
|
|
||||||
"description": [
|
|
||||||
"<strong>Objetivo:</strong> Crea una aplicación con <a href='https://codepen.io' target='_blank'>CodePen.io</a> cuya funcionalidad sea similar a la de esta: <a href='https://codepen.io/freeCodeCamp/full/QNmvEL/' target='_blank'>https://codepen.io/freeCodeCamp/full/QNmvEL/</a>.",
|
|
||||||
"<strong>Regla #1:</strong> No veas el código del proyecto de ejemplo. Encuentra la forma de hacerlo por tu cuenta.",
|
|
||||||
"<strong>Regla #2:</strong> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería que necesites. Dale tu estilo personal.",
|
|
||||||
"<strong>Historia de usuario:</strong> Puedo acceder a todo el contenido de la página del portafolio con sólo desplazarme en la ventana.",
|
|
||||||
"<strong>Historia de usuario:</strong> Puedo pulsar diferentes botones que me llevarán a las páginas de las diferentes cuentas de redes sociales del creador del portafolio.",
|
|
||||||
"<strong>Historia de usuario:</strong> Puedo ver una imagenes en miniatura de los diferentes proyectos que el creador del portafolio ha construido (si no has construido ningún sitio web antes, usa marcadores de posición.)",
|
|
||||||
"<strong>Historia de usuario:</strong> Puedo navegar a las diferentes secciones de la página web pulsando botones de navegación.",
|
|
||||||
"No te preocupes si no tienes nada que mostrar en tu portafolio todavía - en los siguientes desafíos crearás varias aplicaciones en CodePen, así que puedes regresar luego para actualizar tu portafolio.",
|
|
||||||
"Hay varias plantillas buenas, pero para este desafío, tendrás que construir la página web de tu portafolio completamente por tu cuenta. Usar Bootstrap hará el trabajo mucho más fácil para ti.",
|
|
||||||
"Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado.",
|
|
||||||
"Cuando hayas terminado, pulsa el botón \"I've completed this challenge\" e incluye un link a tu CodePen. ",
|
|
||||||
"Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiéndolo en nuestra <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"pt-br": {
|
|
||||||
"title": "Construa uma Página de Portfólio Pessoal",
|
|
||||||
"description": [
|
|
||||||
"<strong>Objetivo:</strong> Construa uma aplicação em <a href='https://codepen.io' target='_blank'>CodePen.io</a> cuja funcionalidade seja similar a esta: <a href='https://codepen.io/freeCodeCamp/full/YqLyXB/' target='_blank'>https://codepen.io/freeCodeCamp/full/YqLyXB/</a>.",
|
|
||||||
"Satisfaça as seguintes <a href='https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio' target='_blank'>histórias de usuário</a>. Utilize qualquer biblioteca ou API que você precisar. Dê o seu próprio estilo pessoal.",
|
|
||||||
"<strong>História de usuário:</strong> Eu posso acessar todo o conteúdo da página somente rolando o scroll do mouse.",
|
|
||||||
"<strong>História de usuário:</strong> Eu posso clicar em diferentes botões que vão me levar a diferentes páginas de mídias sociais do criador do portfólio.",
|
|
||||||
"<strong>História de usuário:</strong> Eu posso ver pequenas imagens de diferentes projetos que o criador do portfólio construiu (se você não construiu nenhum site antes, use imagens genéricas.)",
|
|
||||||
"<strong>História de usuário:</strong> Eu navego para diferentes seções do site clicando em botões na seção de navegação.",
|
|
||||||
"Não se preocupe se você não tem nada para mostrar em seu portfólio ainda - você vai construir várias aplicações nos próximos desafios e depois é só voltar e atualizar seu portfólio.",
|
|
||||||
"Existem excelentes portfólios pela web. No entando, voce deve considerar construir sua página de portfólio do zero o máximo que você conseguir. Usar o Bootstrap pode tornar esse processo mais simples para você.",
|
|
||||||
"Lembre-se de utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Ler-Buscar-Perguntar</a> se você tiver dificuldades.",
|
|
||||||
"Quando tiver terminado, clique no botão \"Eu concluí este desafio\" e inclua um link para o seu projeto no CodePen. ",
|
|
||||||
"Você pode obter feedback sobre o seu projeto compartilhando-o com os seus amigos no Facebook."
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"ru": {
|
|
||||||
"title": "Создайте сайт-портфолио",
|
|
||||||
"description": [
|
|
||||||
"<strong>Задание:</strong> Создайте приложение <a href='https://codepen.io' target='_blank'>CodePen.io</a> которое функционально соответствует вот этому: <a href='https://codepen.io/freeCodeCamp/full/QNmvEL/' target='_blank'>https://codepen.io/freeCodeCamp/full/QNmvEL/</a>.",
|
|
||||||
"<strong>Правило #1:</strong> Не подсматривайте код приведенного на CodePen примера. Напишите его самостоятельно.",
|
|
||||||
"<strong>Правило #2:</strong> Реализуйте следующие <a href='https://ru.wikipedia.org/wiki/User_story' target='_blank'>пользовательские истории</a>. Используйте любые библиотеки, которые потребуются. Оформите приложение в вашем собственном стиле.",
|
|
||||||
"<strong>Пользовательская история:</strong> Я могу получить доступ ко всей информации на странице просто прокрутив ее сверху вниз.",
|
|
||||||
"<strong>Пользовательская история:</strong> Я могу нажать на различные кнопки и перейти к социальным страницам владельца портфолио.",
|
|
||||||
"<strong>Пользовательская история:</strong> Я могу увидеть эскизы проектов созданных владельцем портфолио (используйте временную картинку если у вас пока нет собственных веб-страниц).",
|
|
||||||
"<strong>Пользовательская история:</strong> Я могу перемещаться к различным частям страницы нажимая на соответствующие навигационные кнопки.",
|
|
||||||
"Не переживайте если вам пока нечего показать в портфолио - вы создадите несколько веб приложений в следующих заданиях, а затем вернетесь и обновите портфолио.",
|
|
||||||
"В сети существует много шаблонов для портфолио, но в этом задании вам необходимо создать собственную уникальную страницу. Используя Bootstrap, сделать это будет намного проще.",
|
|
||||||
"Если что-то не получается, воспользуйтесь <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a>.",
|
|
||||||
"Когда выполните задание кликните кнопку \"I've completed this challenge\" и добавьте ссылку на ваш CodePen.",
|
|
||||||
"Вы можете получить отзыв о вашем проекте от коллег, поделившись ссылкой на него в нашем <a href='//gitter.im/freecodecamp/codereview' target='_blank'>чате для рассмотрения кода</a>. Также вы можете поделиться ею через Twitter и на странице Free Code Camp вашего города на Facebook."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@ -1,261 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "Gear up for Success",
|
|
||||||
"order": 4,
|
|
||||||
"time": "20 minutes",
|
|
||||||
"challenges": [
|
|
||||||
{
|
|
||||||
"id": "573c96eac9a6be092d7830c1",
|
|
||||||
"title": "Join our Forum",
|
|
||||||
"description": [
|
|
||||||
[
|
|
||||||
"//i.imgur.com/y0XxmxQ.gif",
|
|
||||||
"A gif showing how you can join Free Code Camp's forum by clicking the \"sign up\" button, authenticating using GitHub, and verifying your email address.",
|
|
||||||
"Our forum is the best place for deep discussions about various programming resources: books, online courses, coding events, and more. You can also get help with these resources from your fellow campers. Click the button below to open up our forum, then click the \"Sign up\" button. Once you've created an account using GitHub, you'll need to confirm your email address. Now you're able to join discussions on our forum!",
|
|
||||||
"http://forum.freecodecamp.com/"
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/GxCpl7x.gif",
|
|
||||||
"A gif showing how you can upload your profile picture.",
|
|
||||||
"We recommend that you also add a custom profile picture of your face. You can do this in the settings section of the forum.",
|
|
||||||
""
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/Gop2PmJ.gif",
|
|
||||||
"A gif showing how you can introduce yourself on our self introduction forum thread.",
|
|
||||||
"You can make your first forum post right now by clicking the button below to go to the introduction thread. Reply in this post with: who you are, why you're learning to code, and how you've been learning to code so far. Then feel free to explore the various discussions and jump in with your own thoughts.",
|
|
||||||
"http://forum.freecodecamp.com/t/welcome-please-introduce-yourself-here/1082"
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"releasedOn": "May 17, 2016",
|
|
||||||
"challengeSeed": [],
|
|
||||||
"tests": [],
|
|
||||||
"type": "Waypoint",
|
|
||||||
"challengeType": 7,
|
|
||||||
"translations": {
|
|
||||||
"de": {
|
|
||||||
"title": "Join our Forum",
|
|
||||||
"description": [
|
|
||||||
[
|
|
||||||
"//i.imgur.com/y0XxmxQ.gif",
|
|
||||||
"A gif showing how you can join Free Code Camp's forum by clicking the \"sign up\" button, authenticating using GitHub, and verifying your email address.",
|
|
||||||
"Our forum is the best place for deep discussions about various programming resources: books, online courses, coding events, and more. You can also get help with these resources from your fellow campers. Click the button below to open up our forum, then click the \"Sign up\" button. Once you've created an account using GitHub, you'll need to confirm your email address. Now you're able to join discussions on our forum!",
|
|
||||||
"http://forum.freecodecamp.com/"
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/GxCpl7x.gif",
|
|
||||||
"A gif showing how you can upload your profile picture.",
|
|
||||||
"We recommend that you also add a custom profile picture of your face. You can do this in the settings section of the forum.",
|
|
||||||
""
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/Gop2PmJ.gif",
|
|
||||||
"A gif showing how you can introduce yourself on our self introduction forum thread.",
|
|
||||||
"You can make your first forum post right now by clicking the button below to go to the introduction thread. Reply in this post with: who you are, why you're learning to code, and how you've been learning to code so far. Then feel free to explore the various discussions and jump in with your own thoughts.",
|
|
||||||
"http://forum.freecodecamp.com/t/welcome-please-introduce-yourself-here/1082"
|
|
||||||
]
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"es": {
|
|
||||||
"title": "Join our Forum",
|
|
||||||
"description": [
|
|
||||||
[
|
|
||||||
"//i.imgur.com/y0XxmxQ.gif",
|
|
||||||
"A gif showing how you can join Free Code Camp's forum by clicking the \"sign up\" button, authenticating using GitHub, and verifying your email address.",
|
|
||||||
"Our forum is the best place for deep discussions about various programming resources: books, online courses, coding events, and more. You can also get help with these resources from your fellow campers. Click the button below to open up our forum, then click the \"Sign up\" button. Once you've created an account using GitHub, you'll need to confirm your email address. Now you're able to join discussions on our forum!",
|
|
||||||
"http://forum.freecodecamp.com/"
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/GxCpl7x.gif",
|
|
||||||
"A gif showing how you can upload your profile picture.",
|
|
||||||
"We recommend that you also add a custom profile picture of your face. You can do this in the settings section of the forum.",
|
|
||||||
""
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/Gop2PmJ.gif",
|
|
||||||
"A gif showing how you can introduce yourself on our self introduction forum thread.",
|
|
||||||
"You can make your first forum post right now by clicking the button below to go to the introduction thread. Reply in this post with: who you are, why you're learning to code, and how you've been learning to code so far. Then feel free to explore the various discussions and jump in with your own thoughts.",
|
|
||||||
"http://forum.freecodecamp.com/t/welcome-please-introduce-yourself-here/1082"
|
|
||||||
]
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"fr": {
|
|
||||||
"title": "Join our Forum",
|
|
||||||
"description": [
|
|
||||||
[
|
|
||||||
"//i.imgur.com/y0XxmxQ.gif",
|
|
||||||
"A gif showing how you can join Free Code Camp's forum by clicking the \"sign up\" button, authenticating using GitHub, and verifying your email address.",
|
|
||||||
"Our forum is the best place for deep discussions about various programming resources: books, online courses, coding events, and more. You can also get help with these resources from your fellow campers. Click the button below to open up our forum, then click the \"Sign up\" button. Once you've created an account using GitHub, you'll need to confirm your email address. Now you're able to join discussions on our forum!",
|
|
||||||
"http://forum.freecodecamp.com/"
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/GxCpl7x.gif",
|
|
||||||
"A gif showing how you can upload your profile picture.",
|
|
||||||
"We recommend that you also add a custom profile picture of your face. You can do this in the settings section of the forum.",
|
|
||||||
""
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/Gop2PmJ.gif",
|
|
||||||
"A gif showing how you can introduce yourself on our self introduction forum thread.",
|
|
||||||
"You can make your first forum post right now by clicking the button below to go to the introduction thread. Reply in this post with: who you are, why you're learning to code, and how you've been learning to code so far. Then feel free to explore the various discussions and jump in with your own thoughts.",
|
|
||||||
"http://forum.freecodecamp.com/t/welcome-please-introduce-yourself-here/1082"
|
|
||||||
]
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "560ade65cb82ac38a17513c2",
|
|
||||||
"title": "Watch Coding Videos on our YouTube Channel",
|
|
||||||
"description": [
|
|
||||||
[
|
|
||||||
"//i.imgur.com/4jUhEsb.jpg",
|
|
||||||
"An image of Briana at the whiteboard teaching in a YouTube video.",
|
|
||||||
"Our community's YouTube channel features video tutorials and demos of projects that campers have built for nonprofits. We add new videos every week. The button below will take you to our YouTube channel, where you can subscribe for free.",
|
|
||||||
"https://www.youtube.com/channel/UC8butISFwT-Wl7EV0hUK0BQ?sub_confirmation=1"
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"releasedOn": "April 15, 2016",
|
|
||||||
"challengeSeed": [],
|
|
||||||
"tests": [],
|
|
||||||
"type": "Waypoint",
|
|
||||||
"challengeType": 7,
|
|
||||||
"translations": {
|
|
||||||
"de": {
|
|
||||||
"title": "Schaue uns auf Twitch.tv Live beim Programmieren zu",
|
|
||||||
"description": [
|
|
||||||
[
|
|
||||||
"//i.imgur.com/8rtyRY1.gif",
|
|
||||||
"Ein GIF, das dir zeigt, wie du dich bei Twitch.tv anmelden und unserem Kanal folgen kannst.",
|
|
||||||
"Unsere Camper programmieren oft Live auf Twitch.tv, einer populären Streaming-Website. Du kannst in weniger als einer Minute einen Account anlegen und dann dem Kanal von Free Code Camp folgen. Wenn du dem Kanal folgst, hast du die Option E-Mail Benachrichtigungen zu bekommen, sobald einer unserer Camper live geht. Dann kannst du Dutzenden Campern folgen und ihnen beim Programmieren zusehen sowie in Chats interagieren. Das ist eine lustige und lockere Art und Weise, um von anderen Personen zu lernen, wie sie ihre Projekte umsetzen.",
|
|
||||||
"https://twitch.tv/freecodecamp"
|
|
||||||
]
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"es": {
|
|
||||||
"title": "Miranos programar en vivo por YouTube",
|
|
||||||
"description": [
|
|
||||||
[
|
|
||||||
"//i.imgur.com/4jUhEsb.jpg",
|
|
||||||
"An image of Briana at the whiteboard teaching in a YouTube video.",
|
|
||||||
"Our community's YouTube channel features video tutorials and demos of projects that campers have built for nonprofits. We add new videos every week. The button below will take you to our YouTube channel, where you can subscribe for free.",
|
|
||||||
"https://www.youtube.com/channel/UC8butISFwT-Wl7EV0hUK0BQ?sub_confirmation=1"
|
|
||||||
]
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"fr": {
|
|
||||||
"title": "Regarde nous coder en direct sur Twitch.tv",
|
|
||||||
"description": [
|
|
||||||
[
|
|
||||||
"//i.imgur.com/8rtyRY1.gif",
|
|
||||||
"Une gif montrant comment tu peux créer un compte sur Twitch.tv et suivre notre chaîne.",
|
|
||||||
"Nos campers codent fréquemment en direct sur Twitch.tv, un site de streaming populaire. Tu peux créer un compte en moins d’une minute, et suivre la chaîne de Free Code Camp. Une fois suivi, tu auras l’option de recevoir un email à chaque fois qu’un de nos campers est en direct. Et donc tu peux rejoindre plusieurs campers pour regarder et interagir sur le salon de chat. C’est une façon d’apprendre en regardant les autres coder.",
|
|
||||||
"https://twitch.tv/freecodecamp"
|
|
||||||
]
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "570add8ccb82ac38a17513c3",
|
|
||||||
"title": "Join our LinkedIn Alumni Network",
|
|
||||||
"description": [
|
|
||||||
[
|
|
||||||
"//i.imgur.com/vJyiXzU.gif",
|
|
||||||
"A gif showing how you can click the link below and fill in the necessary fields to add your Free Code Camp studies to your LinkedIn profile.",
|
|
||||||
"LinkedIn recognizes Free Code Camp as a university. You can gain access to our large alumni network by adding Free Code Camp to your LinkedIn profile's education section. Set your graduation date as next year. For \"Degree\", type \"Full Stack Web Development Certification\". For \"Field of study\", type \"Computer Software Engineering\". Then click \"Save Changes\".",
|
|
||||||
"https://www.linkedin.com/profile/edit-education?school=Free+Code+Camp"
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"challengeSeed": [],
|
|
||||||
"tests": [],
|
|
||||||
"type": "Waypoint",
|
|
||||||
"challengeType": 7,
|
|
||||||
"translations": {
|
|
||||||
"de": {
|
|
||||||
"title": "Tritt unserem LinkedIn Alumni Netzwerk bei",
|
|
||||||
"description": [
|
|
||||||
[
|
|
||||||
"//i.imgur.com/vJyiXzU.gif",
|
|
||||||
"Ein GIF, das dir zeigt, wie du den unten stehenden Link anklicken kannst und welche Felder du ausfüllen musst, damit du Free Code Camp zu deinem LinkedIn Profil hinzufügst.",
|
|
||||||
"LinkedIn erkennt Free Code Camp als Universität an. Du bekommst auf unser großes Alumni Netzwerk zugriff, indem du Free Code Camp zum Ausbildungsbereich deines LinkedIn Profils hinzufügst. Setze deinen Abschlusszeitpunkt auf das nächste Jahr. In das Feld \"Abschluss\" schreibe \"Full Stack Web Development Certification\". In das Feld \"Studienfach\" schreibe \"Computer Software Engineering\". Dann klicke auf den \"Speichern\" Button.",
|
|
||||||
"https://www.linkedin.com/profile/edit-education?school=Free+Code+Camp"
|
|
||||||
]
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"es": {
|
|
||||||
"title": "Únete a nuestra red de alumnos en LinkedIn",
|
|
||||||
"description": [
|
|
||||||
[
|
|
||||||
"//i.imgur.com/vJyiXzU.gif",
|
|
||||||
"Un gif mostrando como puedes pulsar el enlace de abajo y llenar todos los campos necesarios para agregar los estudios de Free Code Camp a tu perfil de LinkedIn",
|
|
||||||
"LinkedIn reconoce a Free Code Camp como una universidad. Puedes obtener acceso a nuestra larga red de alumnos agregando Free Code Camp a la sección de educación de tu LinkedIn. Define tu fecha de graduación para el siguiente año. En el campo \"Grado\", escribe \"Certificación de Desarrollo Web Full Stack\". En \"Campo de estudio\", escribe \"Ingeniería de Software\". Después pulsa \"Guardar Cambios\".",
|
|
||||||
"https://www.linkedin.com/profile/edit-education?school=Free+Code+Camp"
|
|
||||||
]
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"fr": {
|
|
||||||
"title": "Rejoignez notre réseau de lauréats sur Linkedin",
|
|
||||||
"description": [
|
|
||||||
[
|
|
||||||
"//i.imgur.com/vJyiXzU.gif",
|
|
||||||
"Une gif qui montre comment tu peux cliquer sur le lien ci-dessous et remplir les champs nécessaires pour ajouter le certificat de Free Code Camp à votre profil LinkedIn.",
|
|
||||||
"LinkedIn reconnait Free Code Camp comme une université. Tu peux avoir accès à notre large réseau de lauréats en ajoutant Free Code Camp à la section éducation de ton profil LinkedIn. L’année d’obtention du diplôme est la prochaine année. Pour le \"Degré\", c’est \"Full Stack Web Development Certification\". Pour le \"Domaine d’études\", c’est \"Computer Software Engineering\". Puis sauvegardez les changements.",
|
|
||||||
"https://www.linkedin.com/profile/edit-education?school=Free+Code+Camp"
|
|
||||||
]
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "560add8ccb81ac38a17513c4",
|
|
||||||
"title": "Commit to a Goal and a Nonprofit",
|
|
||||||
"description": [
|
|
||||||
[
|
|
||||||
"//i.imgur.com/Og1ifsn.gif",
|
|
||||||
"A gif showing how you can commit to a goal for your Free Code Camp studies and pledge a monthly donation to a nonprofit to give you external motivation to reach that goal.",
|
|
||||||
"You can set a goal and pledge to donate to a nonprofit each month until you achieve that goal. This will give you external motivation in your quest to learn to code, as well as an opportunity to help nonprofits right away. Choose your goal, then choose a monthly donation. When you click \"commit\", the nonprofit's donation page will open in a new tab. This pledge is completely optional. It is entirely between you and the nonprofit, and no money goes to Free Code Camp. You can change your commitment or stop it at any time.",
|
|
||||||
"/commit"
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"challengeSeed": [],
|
|
||||||
"tests": [],
|
|
||||||
"type": "Waypoint",
|
|
||||||
"challengeType": 7,
|
|
||||||
"translations": {
|
|
||||||
"de": {
|
|
||||||
"title": "Verpflichte dich zu einem Ziel und einer gemeinnützigen Organisation",
|
|
||||||
"description": [
|
|
||||||
[
|
|
||||||
"//i.imgur.com/Og1ifsn.gif",
|
|
||||||
"Ein GIF, das dir zeigt, wie du dich einem Ziel auf Free Code Camp verpflichten kannst und versprichst, eine monatliche Spende an eine gemeinnützige Organisation zu entrichten, um externe Motivation zur Erreichung deines Ziels zu haben.",
|
|
||||||
"Du kannst dir ein Ziel setzen und versprechen, einer gemeinnützigen Organisation eine monatliche Spende zu entrichten, bis du dieses Ziel erreicht hast. Das gibt dir externe Motivation in deinem Bestreben programmieren zu lernen - und eröffnet von Anfang an die Gelegenheit gemeinnützigen Organisationen zu helfen. Wähle dein Ziel und dann eine monatliche Spende. Wenn du auf \"verpflichten\" klickst, öffnet sich die Spendenseite der gemeinnützigen Organisation in einem neuen Tab. Dieser Schritt ist optional, du kannst deine Verpflichtung jederzeit ändern oder stoppen.",
|
|
||||||
"/verpflichten"
|
|
||||||
]
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"es": {
|
|
||||||
"title": "Comprométete con una meta y con una organización sin fines de lucro",
|
|
||||||
"description": [
|
|
||||||
[
|
|
||||||
"//i.imgur.com/Og1ifsn.gif",
|
|
||||||
"Un gif mostrando como te puedes comprometer con una meta para tus estudios de Free Code Camp y prometer una donación mensual a una organización sin fines de lucro para darte motivación externa de alcanzar esa meta.",
|
|
||||||
"Puedes poner una meta y prometer donar mensualmente a una organización sin fines de lucro hasta que alcances tu meta. Esto te dará motivación externa en tu aventura de aprender a programar, así como una oportunidad para ayudar inmediatamente a organizaciones sin fines de lucro. Elige tu meta, después elige tu donativo mensual. Cuando pulses \"commit\", la página de donación de la organización sin fines de lucro se abrirá en una nueva pestaña. Esto es completamente opcional, y puedes cambiar tu compromiso o detenerlo en cualquier momento.",
|
|
||||||
"/comprometerse"
|
|
||||||
]
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"fr": {
|
|
||||||
"title": "Engage-toi à un but et aide une association à but non lucratif",
|
|
||||||
"description": [
|
|
||||||
[
|
|
||||||
"//i.imgur.com/Og1ifsn.gif",
|
|
||||||
"Une gif montrant comment tu peux t’engager pour atteindre ton but sur Free Code Camp et verser une somme d’argent chaque mois pour une organisation à but non lucratif qui sera une motivation externe pour atteindre ton objectif.",
|
|
||||||
"Tu peux définir un but et t’engager à verser une somme d’argent pour aider une organisation à but non lucratif chaque mois jusqu’à atteindre ton objectif. Cela va te donner une motivation externe dans ta journée d’apprentissage, mais aussi une opportunité pour aider ces organisations. Choisi un but, et un montant à verser. Quand tu vas cliquer sur \"commit\", la page des dons de l’organisation va s’ouvrir. Cette étape est optionnel, et tu peux annuler ou arrêter ton engagement à n’importe quel instant.",
|
|
||||||
"/commit"
|
|
||||||
]
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@ -1,226 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "Intermediate Front End Development Projects",
|
|
||||||
"order": 11,
|
|
||||||
"time": "100 hours",
|
|
||||||
"helpRoom": "HelpFrontEnd",
|
|
||||||
"challenges": [
|
|
||||||
{
|
|
||||||
"id": "bd7158d8c442eddfaeb5bd13",
|
|
||||||
"title": "Build a Random Quote Machine",
|
|
||||||
"description": [
|
|
||||||
"<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/ONjoLe/' target='_blank'>https://codepen.io/freeCodeCamp/full/ONjoLe/</a>.",
|
|
||||||
"Fulfill the following <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
|
|
||||||
"<strong>User Story:</strong> I can click a button to show me a new random quote.",
|
|
||||||
"<strong>User Story:</strong> I can press a button to tweet out a quote.",
|
|
||||||
"Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> 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": [
|
|
||||||
"a5RknIzoDrs"
|
|
||||||
],
|
|
||||||
"tests": [],
|
|
||||||
"type": "zipline",
|
|
||||||
"isRequired": true,
|
|
||||||
"challengeType": 3,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Crea una máquina de frases aleatorias",
|
|
||||||
"description": [
|
|
||||||
"<span class='text-info'>Objetivo:</span> Crea una aplicación con <a href='https://codepen.io' target='_blank'>CodePen.io</a> cuya funcionalidad sea similar a la de esta: <a href='https://codepen.io/freeCodeCamp/full/ONjoLe/' target='_blank'>https://codepen.io/freeCodeCamp/full/ONjoLe/</a>.",
|
|
||||||
"<span class='text-info'>Regla #1:</span> No veas el código del proyecto de ejemplo en CodePen. Encuentra la forma de hacerlo por tu cuenta.",
|
|
||||||
"<span class='text-info'>Regla #2:</span> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o APIs que necesites.",
|
|
||||||
"<span class='text-info'>Historia de usuario:</span> Puedo pulsar un botón que me mostrará una nueva frase aleatoria.",
|
|
||||||
"<span class='text-info'>Bonus User Story:</span> Puedo presionar un botón para twitear una frase.",
|
|
||||||
"Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> 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, compartiendolo en nuestra <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"ru": {
|
|
||||||
"title": "Создайте генератор случайных цитат",
|
|
||||||
"description": [
|
|
||||||
"<span class='text-info'>Задание:</span> Создайте <a href='https://codepen.io' target='_blank'>CodePen.io</a> который успешно копирует вот этот: <a href='https://codepen.io/freeCodeCamp/full/ONjoLe/' target='_blank'>https://codepen.io/freeCodeCamp/full/ONjoLe/</a>.",
|
|
||||||
"<span class='text-info'>Правило #1:</span> Не подсматривайте код приведенного на CodePen примера. Напишите его самостоятельно.",
|
|
||||||
"<span class='text-info'>Правило #2:</span> Можете использовать любые библиотеки или API, которые потребуются.",
|
|
||||||
"<span class='text-info'>Правило #3:</span> Воссоздайте функционал приведенного примера и не стесняйтесь добавить что-нибудь от себя.",
|
|
||||||
"Реализуйте следующие <a href='https://ru.wikipedia.org/wiki/User_story' target='_blank'>пользовательские истории</a>, сделайте также бонусные по желанию:",
|
|
||||||
"<span class='text-info'>Пользовательская история:</span> В качестве пользователя, я могу нажать на кнопку и получить случайную цитату.",
|
|
||||||
"<span class='text-info'>Бонусная пользовательская история:</span> В качестве пользователя, я могу нажать на кнопку и опубликовать цитату в Twitter'e.",
|
|
||||||
"Цитаты можно добавить в массив и случайным образом выводить одну из них, либо можно воспользоваться соответствующим API, например <a href='http://forismatic.com/en/api/'>http://forismatic.com/en/api/</a>.",
|
|
||||||
"Если что-то не получается, воспользуйтесь <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a>.",
|
|
||||||
"Когда выполните задание кликните кнопку \"I've completed this challenge\" и добавьте ссылку на ваш CodePen. Если вы программировали с кем-то в паре, также добавьте имя вашего напарника.",
|
|
||||||
"Если вы хотите получить немедленную оценку вашего проекта, нажмите эту кнопку и добавьте ссылку на ваш CodePen. В противном случае мы проверим его перед тем как вы приступите к проектам для некоммерческих организаций.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "bd7158d8c442eddfaeb5bd10",
|
|
||||||
"title": "Show the Local Weather",
|
|
||||||
"description": [
|
|
||||||
"<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='http://codepen.io/freeCodeCamp/full/bELRjV' target='_blank'>http://codepen.io/freeCodeCamp/full/bELRjV</a>.",
|
|
||||||
"Fulfill the following <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
|
|
||||||
"<strong>User Story:</strong> I can see the weather in my current location.",
|
|
||||||
"<strong>User Story:</strong> I can see a different icon or background image (e.g. snowy mountain, hot desert) depending on the weather.",
|
|
||||||
"<strong>User Story:</strong> I can push a button to toggle between Fahrenheit and Celsius.",
|
|
||||||
"We recommend using the <a href='https://darksky.net/dev/docs' target='_blank'>Dark Sky API</a> or <a href='https://www.wunderground.com/weather/api/d/pricing.html' target='_blank'>Weather Underground API</a>. This will require creating a free API key. Normally you want to avoid exposing API keys on CodePen, but we haven't been able to find a keyless API for weather.",
|
|
||||||
"Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> 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": [
|
|
||||||
"GCLiJU-vvVc"
|
|
||||||
],
|
|
||||||
"tests": [],
|
|
||||||
"type": "zipline",
|
|
||||||
"challengeType": 3,
|
|
||||||
"isRequired": true,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Muestra el clima local",
|
|
||||||
"description": [
|
|
||||||
"<span class='text-info'>Objetivo:</span> Crea una aplicación con <a href='https://codepen.io' target='_blank'>CodePen.io</a> cuya funcionalidad sea similar a la de esta: <a href='http://codepen.io/freeCodeCamp/full/bELRjV' target='_blank'>http://codepen.io/freeCodeCamp/full/bELRjV</a>.",
|
|
||||||
"<span class='text-info'>Regla #1:</span> No veas el código del proyecto de ejemplo en CodePen. Encuentra la forma de hacerlo por tu cuenta.",
|
|
||||||
"<span class='text-info'>Regla #2:</span> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o APIs que necesites.",
|
|
||||||
"<span class='text-info'>Historia de usuario:</span> Pedo obtener información acerca del clima en mi localización actual.",
|
|
||||||
"<span class='text-info'>Historia de usuario:</span> Puedo ver un icono diferente o una imagen de fondo diferente (e.g. montaña con nieve, desierto caliente) dependiendo del clima.",
|
|
||||||
"<span class='text-info'>Historia de usuario:</span> Puedo pulsar un botón para cambiar la unidad de temperatura de grados Fahrenheit a Celsius y viceversa.",
|
|
||||||
"Recomendamos utilizar <a href='https://openweathermap.org/current#geo' target='_blank'>Open Weather API</a>. Al utilizarlo tendrás que crear una llave API gratuita. Normalmente debes evitar exponer llaves de API en CodePen, pero por el momento no hemos encontrado un API de clima que no requiera llave.",
|
|
||||||
"Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> 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, compartiendolo en nuestra <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"ru": {
|
|
||||||
"title": "Покажите местную погоду",
|
|
||||||
"description": [
|
|
||||||
"<span class='text-info'>Задание:</span> Создайте <a href='https://codepen.io' target='_blank'>CodePen.io</a> который успешно копирует вот этот: <a href='http://codepen.io/freeCodeCamp/full/bELRjV' target='_blank'>http://codepen.io/freeCodeCamp/full/bELRjV</a>.",
|
|
||||||
"<span class='text-info'>Правило #1:</span> Не подсматривайте код приведенного на CodePen примера. Напишите его самостоятельно.",
|
|
||||||
"<span class='text-info'>Правило #2:</span> Можете использовать любые библиотеки или API, которые потребуются.",
|
|
||||||
"<span class='text-info'>Правило #3:</span> Воссоздайте функционал приведенного примера и не стесняйтесь добавить что-нибудь от себя.",
|
|
||||||
"Реализуйте следующие <a href='https://ru.wikipedia.org/wiki/User_story' target='_blank'>пользовательские истории</a>, сделайте также бонусные по желанию:",
|
|
||||||
"<span class='text-info'>Пользовательская история:</span> В качестве пользователя, я могу узнать погоду с учетом моего текущего местоположения.",
|
|
||||||
"<span class='text-info'>Бонусная пользовательская история:</span> В качестве пользователя, я могу в зависимости от погоды видеть различные температурные значки.",
|
|
||||||
"<span class='text-info'>Бонусная пользовательская история:</span> В качестве пользователя, я могу в зависимости от погоды видеть различные фоновые изображения (снежные горы, знойная пустыня).",
|
|
||||||
"<span class='text-info'>Бонусная пользовательская история:</span> В качестве пользователя, я могу нажать на кнопку чтобы переключится между градусами по Цельсию или по Фаренгейту.",
|
|
||||||
"Если что-то не получается, воспользуйтесь <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a>.",
|
|
||||||
"Когда выполните задание кликните кнопку \"I've completed this challenge\" и добавьте ссылку на ваш CodePen. Если вы программировали с кем-то в паре, также добавьте имя вашего напарника.",
|
|
||||||
"Если вы хотите получить немедленную оценку вашего проекта, нажмите эту кнопку и добавьте ссылку на ваш CodePen. В противном случае мы проверим его перед тем как вы приступите к проектам для некоммерческих организаций.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "bd7158d8c442eddfaeb5bd19",
|
|
||||||
"title": "Build a Wikipedia Viewer",
|
|
||||||
"description": [
|
|
||||||
"<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/wGqEga/' target='_blank'>https://codepen.io/freeCodeCamp/full/wGqEga/</a>.",
|
|
||||||
"Fulfill the following <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
|
|
||||||
"<strong>User Story:</strong> I can search Wikipedia entries in a search box and see the resulting Wikipedia entries.",
|
|
||||||
"<strong>User Story:</strong> I can click a button to see a random Wikipedia entry.",
|
|
||||||
"<span class='text-info'>Hint #1:</span> Here's a URL you can use to get a random Wikipedia article: <code>https://en.wikipedia.org/wiki/Special:Random</code>.",
|
|
||||||
"<span class='text-info'>Hint #2:</span> Here's an entry on using Wikipedia's API: <code>https://www.mediawiki.org/wiki/API:Main_page</code>.",
|
|
||||||
"<span class='text-info'>Hint #3:</span> Use this <a href='https://en.wikipedia.org/wiki/Special:ApiSandbox#action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=jsonfm' target='_blank'>link</a> to experiment with Wikipedia's API.",
|
|
||||||
"Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> 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": [
|
|
||||||
"wJhcPwVYA1g"
|
|
||||||
],
|
|
||||||
"tests": [],
|
|
||||||
"type": "zipline",
|
|
||||||
"challengeType": 3,
|
|
||||||
"isRequired": true,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Crea un buscador de Wikipedia",
|
|
||||||
"description": [
|
|
||||||
"<span class='text-info'>Objetivo:</span> Crea una aplicación con <a href='https://codepen.io' target='_blank'>CodePen.io</a> cuya funcionalidad sea similar a la de esta: <a href='https://codepen.io/freeCodeCamp/full/wGqEga/' target='_blank'>https://codepen.io/freeCodeCamp/full/wGqEga/</a>.",
|
|
||||||
"<span class='text-info'>Regla #1:</span> No veas el código del proyecto de ejemplo en CodePen. Encuentra la forma de hacerlo por tu cuenta.",
|
|
||||||
"<span class='text-info'>Regla #2:</span> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o APIs que necesites. Dale tu estilo personal.",
|
|
||||||
"<span class='text-info'>Historia de usuario:</span> Pedo obtener información acerca del clima en mi localización actual.",
|
|
||||||
"<span class='text-info'>Historia de usuario:</span> Puedo ver un icono diferente o una imagen de fondo diferente (e.g. montaña con nieve, desierto caliente) dependiendo del clima.",
|
|
||||||
"<span class='text-info'>Historia de usuario:</span> Puedo pulsar un botón para cambiar la unidad de temperatura de grados Fahrenheit a Celsius y viceversa.",
|
|
||||||
"<span class='text-info'>Historia de usuario:</span> Puedo buscar entradas en Wikipedia en un cuadro de búsqueda y ver las entradas de Wikipedia resultantes.",
|
|
||||||
"<span class='text-info'>Historia de usuario:</span>Puedo pulsar un botón para ver un artículo aleatorio de Wikipedia.",
|
|
||||||
"<span class='text-info'>Pista 1:</span> Aquí está una URL donde puedes ver una entrada aleatoria de Wikipedia: <code>https://es.wikipedia.org/wiki/Special:Random<</code>.",
|
|
||||||
"<span class='text-info'>Pista 2:</span> Este es un artículo muy útil relativo al uso del API de Wikipedia: <code>https://www.mediawiki.org/wiki/API:Main_page</code>.",
|
|
||||||
"<span class='text-info'>Pista 3:</span> Usa este <a href='https://es.wikipedia.org/wiki/Special:ApiSandbox#action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=jsonfm' target='_blank'>enlace</a> para experimentar con el API de Wikipedia.",
|
|
||||||
"Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> 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, compartiendolo en nuestra <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "bd7158d8c442eddfaeb5bd1f",
|
|
||||||
"title": "Use the Twitch.tv JSON API",
|
|
||||||
"description": [
|
|
||||||
"<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/Myvqmo/' target='_blank'>https://codepen.io/freeCodeCamp/full/Myvqmo/</a>.",
|
|
||||||
"Fulfill the following <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
|
|
||||||
"<strong>User Story:</strong> I can see whether Free Code Camp is currently streaming on Twitch.tv.",
|
|
||||||
"<strong>User Story:</strong> I can click the status output and be sent directly to the Free Code Camp's Twitch.tv channel.",
|
|
||||||
"<strong>User Story:</strong> if a Twitch user is currently streaming, I can see additional details about what they are streaming.",
|
|
||||||
"<strong>User Story:</strong> I will see a placeholder notification if a streamer has closed their Twitch account (or the account never existed). You can verify this works by adding brunofin and comster404 to your array of Twitch streamers.",
|
|
||||||
"<strong>Hint:</strong> See an example call to Twitch.tv's JSONP API at <a href='http://forum.freecodecamp.com/t/use-the-twitchtv-json-api/19541' target='_blank'>http://forum.freecodecamp.com/t/use-the-twitchtv-json-api/19541</a>.",
|
|
||||||
"<strong>Hint:</strong> The relevant documentation about this API call is here: <a href='https://github.com/justintv/Twitch-API/blob/master/v3_resources/streams.md#get-streamschannel' target='_blank'>https://github.com/justintv/Twitch-API/blob/master/v3_resources/streams.md#get-streamschannel</a>.",
|
|
||||||
"<strong>Hint:</strong> Here's an array of the Twitch.tv usernames of people who regularly stream: <code>[\"ESL_SC2\", \"OgamingSC2\", \"cretetion\", \"freecodecamp\", \"storbeck\", \"habathcx\", \"RobotCaleb\", \"noobs2ninjas\"]</code>",
|
|
||||||
"<strong>UPDATE:</strong> Due to a change in conditions on API usage explained <a href='https://blog.twitch.tv/client-id-required-for-kraken-api-calls-afbb8e95f843#.f8hipkht1' target='_blank'>here</a> Twitch.tv now requires an API key, but we've built a workaround. Use <a href='https://wind-bow.gomix.me/' target='_blank'>https://wind-bow.gomix.me/twitch-api</a> instead of twitch's API base URL (i.e. https://api.twitch.tv/kraken ) and you'll still be able to get account information, without needing to sign up for an API key.",
|
|
||||||
"Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> 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": [
|
|
||||||
"6WrbY1d-IHI"
|
|
||||||
],
|
|
||||||
"tests": [],
|
|
||||||
"type": "zipline",
|
|
||||||
"challengeType": 3,
|
|
||||||
"isRequired": true,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Usa el API JSON de Twitch.tv",
|
|
||||||
"description": [
|
|
||||||
"<span class='text-info'>Objetivo:</span> Crea una aplicación con <a href='https://codepen.io' target='_blank'>CodePen.io</a> cuya funcionalidad sea similar a la de esta: <a href='https://codepen.io/freeCodeCamp/full/Myvqmo/' target='_blank'>https://codepen.io/freeCodeCamp/full/Myvqmo/</a>.",
|
|
||||||
"<span class='text-info'>Regla #1:</span> No veas el código del proyecto de ejemplo en CodePen. Encuentra la forma de hacerlo por tu cuenta.",
|
|
||||||
"<span class='text-info'>Regla #2:</span> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o APIs que necesites. Dale tu estilo personal.",
|
|
||||||
"<span class='text-info'>Historia de usuario:</span> Puedo verificar si Free Code Camp está transmitiendo actualmente en Twitch.tv",
|
|
||||||
"<span class='text-info'>Historia de usuario:</span> Puedo pulsar el estatus y ser enviado directamente al canal de Free Code Camp en Twitch.tv.",
|
|
||||||
"<span class='text-info'>Historia de usuario:</span> Si un usuario Twitch está transmitiendo actualmente, puedo ver detalles adicionales acerca del contenido que están transmitiendo.",
|
|
||||||
"<span class='text-info'>Historia de usuario:</span> Puedo ver una notificación si el usuario ha cerrado su cuenta de Twitch (o si la cuenta nunca ha existido). Puedes verificar si esto funciona agregando brunofin y comster404 a tu vector de usuarios de Twitch.",
|
|
||||||
"<span class='text-info'>Pista:</span> Obseva una llamada de ejemplo al API JSONP de Twitch.tv en <code>http://forum.freecodecamp.com/t/use-the-twitchtv-json-api/19541</code>.",
|
|
||||||
"<span class='text-info'>Pista:</span> La documentación relevante sobre esta llamada al API está aquí: <a href='https://github.com/justintv/Twitch-API/blob/master/v3_resources/streams.md#get-streamschannel' target='_blank'>https://github.com/justintv/Twitch-API/blob/master/v3_resources/streams.md#get-streamschannel</a>.",
|
|
||||||
"<span class='text-info'>Pista:</span> Aquí está un vector de usuarios en Twitch.tv que regularmente transmiten sobre programación: <code>[\"ESL_SC2\", \"OgamingSC2\", \"cretetion\", \"freecodecamp\", \"storbeck\", \"habathcx\", \"RobotCaleb\", \"noobs2ninjas\"]</code>",
|
|
||||||
"Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> 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, compartiendolo en nuestra <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"ru": {
|
|
||||||
"title": "Используйте Twitch.tv JSON API",
|
|
||||||
"description": [
|
|
||||||
"<span class='text-info'>Задание:</span> Создайте <a href='https://codepen.io' target='_blank'>CodePen.io</a> который успешно копирует вот этот: <a href='https://codepen.io/freeCodeCamp/full/Myvqmo/' target='_blank'>https://codepen.io/freeCodeCamp/full/Myvqmo/</a>.",
|
|
||||||
"<span class='text-info'>Правило #1:</span> Не подсматривайте код приведенного на CodePen примера. Напишите его самостоятельно.",
|
|
||||||
"<span class='text-info'>Правило #2:</span> Можете использовать любые библиотеки или API, которые потребуются.",
|
|
||||||
"<span class='text-info'>Правило #3:</span> Воссоздайте функционал приведенного примера и не стесняйтесь добавить что-нибудь от себя.",
|
|
||||||
"Реализуйте следующие <a href='https://ru.wikipedia.org/wiki/User_story' target='_blank'>пользовательские истории</a>, сделайте также бонусные по желанию:",
|
|
||||||
"<span class='text-info'>Пользовательская история:</span> В качестве пользователя, я могу увидеть идет ли в данный момент на Twitch.tv трансляция Free Code Camp.",
|
|
||||||
"<span class='text-info'>Пользовательская история:</span> В качестве пользователя, я могу, кликнув на описание трансляции, перейти на канал Free Code Camp.",
|
|
||||||
"<span class='text-info'>Пользовательская история:</span> В качестве пользователя, я могу видеть дополнительную информацию о текущей трансляции Free Code Camp.",
|
|
||||||
"<span class='text-info'>Бонусная пользовательская история:</span> В качестве пользователя, я могу произвести поиск среди перечисленных каналов.",
|
|
||||||
"<span class='text-info'>Бонусная пользовательская история:</span> В качестве пользователя, я могу видеть уведомление, если создатель канала закрыл свой аккаунт на Twitch.tv. Добавьте в массив имена пользователей brunofin и comster404, чтобы убедиться, что эта функция реализована правильно.",
|
|
||||||
"<span class='text-info'>Подсказка:</span> Пример запроса к Twitch.tv JSON API: <code>https://api.twitch.tv/kraken/streams/freecodecamp</code>.",
|
|
||||||
"<span class='text-info'>Подсказка:</span> Документацию об этом запросе можно найти по ссылке: <a href='https://github.com/justintv/Twitch-API/blob/master/v3_resources/streams.md#get-streamschannel' target='_blank'>https://github.com/justintv/Twitch-API/blob/master/v3_resources/streams.md#get-streamschannel</a>.",
|
|
||||||
"<span class='text-info'>Подсказка:</span> В этом массиве приведены имена пользователей, которые регулярно пишут код онлайн: <code>[\"ESL_SC2\", \"OgamingSC2\", \"cretetion\", \"freecodecamp\", \"storbeck\", \"habathcx\", \"RobotCaleb\", \"noobs2ninjas\"]</code>",
|
|
||||||
"Если что-то не получается, воспользуйтесь <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a>.",
|
|
||||||
"Когда выполните задание кликните кнопку \"I've completed this challenge\" и добавьте ссылку на ваш CodePen. Если вы программировали с кем-то в паре, также добавьте имя вашего напарника.",
|
|
||||||
"Если вы хотите получить немедленную оценку вашего проекта, нажмите эту кнопку и добавьте ссылку на ваш CodePen. В противном случае мы проверим его перед тем как вы приступите к проектам для некоммерческих организаций.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@ -1,539 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "JSON APIs and Ajax",
|
|
||||||
"order": 10,
|
|
||||||
"time": "2 hours",
|
|
||||||
"helpRoom": "Help",
|
|
||||||
"required": [
|
|
||||||
{ "link": "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" }
|
|
||||||
],
|
|
||||||
"challenges": [
|
|
||||||
{
|
|
||||||
"id": "56bbb991ad1ed5201cd392d4",
|
|
||||||
"title": "Trigger Click Events with jQuery",
|
|
||||||
"description": [
|
|
||||||
"In this section, we'll learn how to get data from APIs. APIs - or Application Programming Interfaces - are tools that computers use to communicate with one another.",
|
|
||||||
"We'll also learn how to update HTML with the data we get from these APIs using a technology called Ajax.",
|
|
||||||
"First, let's review what the <code>$(document).ready()</code> function does. This function runs such that all of the code inside of it executes only once our page has finished loading.",
|
|
||||||
"So Let's start by implementing a <code>click event handler</code> inside of our <code>$(document).ready()</code> function by adding this code:",
|
|
||||||
"<blockquote>$(\"#getMessage\").on(\"click\", function(){</br></br>});</blockquote>",
|
|
||||||
"After completing this, proceed to the next challenge where we will make our \"Get Message\" button change the text of the element with the class <code>message</code>."
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"fccss",
|
|
||||||
" $(document).ready(function() {",
|
|
||||||
" // Only change code below this line.",
|
|
||||||
" ",
|
|
||||||
" // Only change code above this line.",
|
|
||||||
" });",
|
|
||||||
"fcces",
|
|
||||||
"",
|
|
||||||
"",
|
|
||||||
"<div class=\"container-fluid\">",
|
|
||||||
" <div class=\"row text-center\">",
|
|
||||||
" <h2>Cat Photo Finder</h2>",
|
|
||||||
" </div>",
|
|
||||||
" <div class=\"row text-center\">",
|
|
||||||
" <div class=\"col-xs-12 well message\">",
|
|
||||||
" The message will go here",
|
|
||||||
" </div>",
|
|
||||||
" </div>",
|
|
||||||
" <div class=\"row text-center\">",
|
|
||||||
" <div class=\"col-xs-12\">",
|
|
||||||
" <button id=\"getMessage\" class=\"btn btn-primary\">",
|
|
||||||
" Get Message",
|
|
||||||
" </button>",
|
|
||||||
" </div>",
|
|
||||||
" </div>",
|
|
||||||
"</div>"
|
|
||||||
],
|
|
||||||
"tests": [
|
|
||||||
"assert(code.match(/\\$\\s*?\\(\\s*?(?:'|\")\\#getMessage(?:'|\")\\s*?\\)\\s*?\\.on\\s*?\\(\\s*?(?:'|\")click(?:'|\")\\s*?\\,\\s*?function\\s*?\\(\\s*?\\)\\s*?\\{/gi), 'message: Bind the click event to the button with the ID of <code>getMessage</code>');",
|
|
||||||
"assert(code.match(/\\n*?\\s*?\\}\\n*?\\s*?\\);/gi) && code.match(/\\n*?\\s*?\\}\\);/gi).length >= 2, 'message: Be sure to close your functions with <code>});</code>');"
|
|
||||||
],
|
|
||||||
"type": "waypoint",
|
|
||||||
"challengeType": 0,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Activa eventos de pulsación con jQuery",
|
|
||||||
"description": [
|
|
||||||
"En esta sección, vamos a aprender cómo obtener datos de las APIs. Las APIs - o interfaces de programación de aplicaciones - son herramientas que utilizan los computadores para comunicarse entre sí.",
|
|
||||||
"También aprenderemos cómo actualizar HTML con los datos que obtenemos de estas API usando una tecnología llamada Ajax.",
|
|
||||||
"En primer lugar, vamos a revisar lo que hace la función <code>$(document).ready()</code>. Esta función hace que todo el código dentro de ella se ejecute sólo hasta que nuestra página ha sido cargada.",
|
|
||||||
"Hagamos que nuestro botón \"Get message\" cambie el texto del elemento con clase <code>message</code>.",
|
|
||||||
"Antes de poder hacer esto, tenemos que implementar un <code>evento de pulsación</code> dentro de nuestra función <code>$(document).ready()</code>, añadiendo este código:",
|
|
||||||
"<blockquote>$(\"#getMessage\").on(\"click\", function(){</br></br>});</blockquote>"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"pt": {
|
|
||||||
"title": "Ativando eventos de clique com jQuery",
|
|
||||||
"description": [
|
|
||||||
"Nesta sessão, vamos aprender como obter dados de uma API. As APIS - Interface de Programação de Aplicativos - são ferramentas usadas pelos computadores para se comunicarem entre si.",
|
|
||||||
"Também aprenderemos como utilizar o HTML com os dados obtidos de uma API usando uma tecnologia chamada Ajax",
|
|
||||||
"Em primeiro lugar, vamos revir o que faz a função <code>$(document).ready()</code>. Esta função faz com que todo o codigo que esteja dentro de seu escopo execute somente quando a nossa página tenha sido carregada.",
|
|
||||||
"Vamos fazer nosso butão \"Get message\" mudar o texto do elemento com a classe <code>message</code>.",
|
|
||||||
"Antes de poder fazer isso, temos que implementar um <code>evento de clique</code> dentro da nossa função <code>$(document).ready()</code>, adicionando este código:",
|
|
||||||
"<blockquote>$(\"#getMessage\").on(\"click\", function(){</br></br>});</blockquote>"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "56bbb991ad1ed5201cd392d5",
|
|
||||||
"title": "Change Text with Click Events",
|
|
||||||
"description": [
|
|
||||||
"When our click event happens, we can use jQuery to update an HTML element.",
|
|
||||||
"Let's make it so that when a user clicks the \"Get Message\" button, we change the text of the element with the class <code>message</code> to say \"Here is the message\".",
|
|
||||||
"We can do this by adding the following code within our click event:",
|
|
||||||
"<code>$(\".message\").html(\"Here is the message\");</code>"
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"fccss",
|
|
||||||
" $(document).ready(function() {",
|
|
||||||
" $(\"#getMessage\").on(\"click\", function(){",
|
|
||||||
" // Only change code below this line.",
|
|
||||||
" ",
|
|
||||||
" // Only change code above this line.",
|
|
||||||
" });",
|
|
||||||
" });",
|
|
||||||
"fcces",
|
|
||||||
"",
|
|
||||||
"",
|
|
||||||
"<div class=\"container-fluid\">",
|
|
||||||
" <div class=\"row text-center\">",
|
|
||||||
" <h2>Cat Photo Finder</h2>",
|
|
||||||
" </div>",
|
|
||||||
" <div class=\"row text-center\">",
|
|
||||||
" <div class=\"col-xs-12 well message\">",
|
|
||||||
" The message will go here",
|
|
||||||
" </div>",
|
|
||||||
" </div>",
|
|
||||||
" <div class=\"row text-center\">",
|
|
||||||
" <div class=\"col-xs-12\">",
|
|
||||||
" <button id=\"getMessage\" class=\"btn btn-primary\">",
|
|
||||||
" Get Message",
|
|
||||||
" </button>",
|
|
||||||
" </div>",
|
|
||||||
" </div>",
|
|
||||||
"</div>"
|
|
||||||
],
|
|
||||||
"tests": [
|
|
||||||
"assert(code.match(/\\$\\s*?\\(\\s*?(?:'|\")\\.message(?:'|\")\\s*?\\)\\s*?(\\.html|\\.text)\\s*?\\(\\s*?(?:'|\")Here\\sis\\sthe\\smessage(?:'|\")\\s*?\\);/gi), 'message: Clicking the \"Get Message\" button should give the element with the class <code>message</code> the text \"Here is the message\".');"
|
|
||||||
],
|
|
||||||
"type": "waypoint",
|
|
||||||
"challengeType": 0,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Cambia texto con eventos de pulsación",
|
|
||||||
"description": [
|
|
||||||
"Cuando nuestro evento de pulsación ocurre, podemos utilizar jQuery para actualizar un elemento HTML.",
|
|
||||||
"Hagamos que cuando un usuario pulse el botón \"Get Message\", el texto del elemento con la clase <code>message</code> cambie para decir \"Here is the message\".",
|
|
||||||
"Podemos hacerlo añadiendo el siguiente código dentro de nuestro evento de pulsación:",
|
|
||||||
"<code>$(\".message\").html(\"Here is the message\");</code>"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"pt": {
|
|
||||||
"title": "Mundando texto com eventos de clique",
|
|
||||||
"description": [
|
|
||||||
"Quando nosso evento de clique ocorre, podemos utilizar o jQuery para atualixar um elemento HTML",
|
|
||||||
"Vamos fazer que quando um usuário clicar no botão \"Get Message\", o texto do elemento com a classe <code>message</code> passe a dizer \"Here is the message\".",
|
|
||||||
"Podemos fazer isso adicionando o seguinte código dentro do nosso evento de clique:",
|
|
||||||
"<code>$(\".message\").html(\"Here is the message\");</code>"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "56bbb991ad1ed5201cd392d6",
|
|
||||||
"title": "Get JSON with the jQuery getJSON Method",
|
|
||||||
"description": [
|
|
||||||
"You can also request data from an external source. This is where APIs come into play.",
|
|
||||||
"Remember that APIs - or Application Programming Interfaces - are tools that computers use to communicate with one another.",
|
|
||||||
"Most web APIs transfer data in a format called JSON. JSON stands for JavaScript Object Notation.",
|
|
||||||
"You've already been using JSON whenever you create a JavaScript object. JSON is nothing more than object properties and their current values, sandwiched between a <code>{</code> and a <code>}</code>.",
|
|
||||||
"These properties and their values are often referred to as \"key-value pairs\".",
|
|
||||||
"Let's get the JSON from Free Code Camp's Cat Photo API.",
|
|
||||||
"Here's the code you can put in your click event to do this:",
|
|
||||||
"<blockquote>$.getJSON(\"/json/cats.json\", function(json) {<br> $(\".message\").html(JSON.stringify(json));<br>});</blockquote>",
|
|
||||||
"Once you've added this, click the \"Get Message\" button. Your Ajax function will replace the \"The message will go here\" text with the raw JSON output from the Free Code Camp Cat Photo API."
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"fccss",
|
|
||||||
" $(document).ready(function() {",
|
|
||||||
"",
|
|
||||||
" $(\"#getMessage\").on(\"click\", function(){",
|
|
||||||
" // Only change code below this line.",
|
|
||||||
" ",
|
|
||||||
" ",
|
|
||||||
" ",
|
|
||||||
" // Only change code above this line.",
|
|
||||||
" });",
|
|
||||||
"",
|
|
||||||
" });",
|
|
||||||
"fcces",
|
|
||||||
"",
|
|
||||||
"<div class=\"container-fluid\">",
|
|
||||||
" <div class=\"row text-center\">",
|
|
||||||
" <h2>Cat Photo Finder</h2>",
|
|
||||||
" </div>",
|
|
||||||
" <div class=\"row text-center\">",
|
|
||||||
" <div class=\"col-xs-12 well message\">",
|
|
||||||
" The message will go here",
|
|
||||||
" </div>",
|
|
||||||
" </div>",
|
|
||||||
" <div class=\"row text-center\">",
|
|
||||||
" <div class=\"col-xs-12\">",
|
|
||||||
" <button id=\"getMessage\" class=\"btn btn-primary\">",
|
|
||||||
" Get Message",
|
|
||||||
" </button>",
|
|
||||||
" </div>",
|
|
||||||
" </div>",
|
|
||||||
"</div>"
|
|
||||||
],
|
|
||||||
"tests": [
|
|
||||||
"assert(code.match(/\\$\\s*?\\(\\s*?(\\\"|\\')\\#getMessage(\\\"|\\')\\s*?\\)\\s*?\\.\\s*?on\\s*?\\(\\s*?(\\\"|\\')click(\\\"|\\')\\s*?\\,\\s*?function\\s*?\\(\\s*?\\)\\s*?\\{/g), 'message: You should have a click handler on the <code>getMessage</code> button to trigger the AJAX request.');",
|
|
||||||
"assert(code.match(/\\s*?\\}\\s*?\\)\\s*?\\;/g), 'message: You should have at least one closing set of brackets and parenthesis.');",
|
|
||||||
"assert(code.match(/\\s*?\\}\\s*?\\)\\s*?\\;/g) && code.match(/\\,\\s*?function\\s*?\\(\\s*?[A-Za-z_\\$]?\\w*?\\s*?\\)\\s*?\\{/g) && code.match(/\\s*?\\}\\s*?\\)\\s*?\\;/g).length === code.match(/\\s*?function\\s*?\\(\\s*?[A-Za-z_\\$]?\\w*?\\s*?\\)\\s*?\\{/g).length, 'message: Each callback function should have a closing set of brackets and parenthesis.');",
|
|
||||||
"assert(code.match(/\\$\\s*?\\.\\s*?getJSON\\s*?\\(\\s*?(\\\"|\\')\\/json\\/cats\\.json(\\\"|\\')\\s*?\\,\\s*?function\\s*?\\(\\s*?[A-Za-z_\\$]\\w*\\s*?\\)\\s*?\\{/g), 'message: You should be making use of the <code>getJSON</code> method given in the description to load data from the JSON file.');",
|
|
||||||
"assert(code.match(/\\$\\s*?\\.\\s*?getJSON\\s*?\\(\\s*?(\\\"|\\')\\/json\\/cats\\.json(\\\"|\\')\\s*?\\,\\s*?function\\s*?\\(\\s*?([A-Za-z_\\$]\\w*)\\s*?\\)\\s*?{/g) && /\\$\\s*?\\.\\s*?getJSON\\s*?\\(\\s*?(\\\"|\\')\\/json\\/cats\\.json(\\\"|\\')\\s*?,\\s*?function\\s*?\\(\\s*?([A-Za-z_\\$]\\w*)\\s*?\\)/g.exec(code)[3] === /\\$\\(\\s*?(\\\"|\\')\\.message\\s*?(\\\"|\\')\\s*?\\)\\s*?\\.html\\s*?\\(\\s*?JSON\\s*?\\.\\s*?stringify\\s*?\\(\\s*?([A-Za-z_\\$]\\w*)\\s*?\\)\\s*?\\)/g.exec(code)[3], 'message: Don't forget to make the <code>.html</code> change the contents of the message box so that it contains the result of the <code>getJSON</code>.');"
|
|
||||||
],
|
|
||||||
"type": "waypoint",
|
|
||||||
"challengeType": 0,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Obtén JSON con el método getJSON de jQuery",
|
|
||||||
"description": [
|
|
||||||
"También puedes solicitar los datos de una fuente externa. Aquí es donde entran en juego las API. ",
|
|
||||||
"Recuerda que las API - o interfaces de programación de aplicaciones - son herramientas que utilizan los ordenadores para comunicarse entre sí.",
|
|
||||||
"La mayoría de las API para el web transfieren datos en un formato llamado JSON. JSON significa notación de objeto JavaScript (<em>JavaScript Object Notation</em>).",
|
|
||||||
"Tú ya has usado JSON al crear objetos en JavaScript. JSON no es más que las propiedades del objeto y sus valores actuales, intercalados entre un <code>{</code> y un <code>}</code>. ",
|
|
||||||
"Estas propiedades y sus valores a menudo se denominan \" pares llave-valor\".",
|
|
||||||
"Vamos a obtener el JSON de la API de fotos de gato de Free Code Camp.",
|
|
||||||
"Aquí está el código que puedes poner en tu evento de pulsación para lograrlo:",
|
|
||||||
"<blockquote>$.getJSON(\"/json/cats.json\", function(json) {<br> $(\".message\").html(JSON.stringify(json));<br>});</blockquote>",
|
|
||||||
"Una vez lo añadas, pulsa el botón \"Get Message\". Tu función Ajax sustituirá el texto \"The message will go here\" con la salida JSON en bruto de la API de fotos de gato de Free Code Camp."
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"pt": {
|
|
||||||
"title": "Obter um JSON com o método getJSON do jQuery",
|
|
||||||
"description": [
|
|
||||||
"Também é possivel solicitar os dados de uma fonte externa. É aqui onde as API's entram em jogo.",
|
|
||||||
"Lembre que as API's - Interface de Programação de Aplicativos - são ferramentas que os computadores usam para se comunicar entre si.",
|
|
||||||
"A maioria das API's transferem de dados para web em um formato chamado JSON. JSON significa notação de objeto JavaScript (<em>JavaScript Object Notation</em>).",
|
|
||||||
"Você já usou JSON para criar objetos em JavaScript. O JSON não é mais que as propriedades de um objeto e seus valores atuais, separados entre <code>{</code> e um <code>}</code>.",
|
|
||||||
"Estas propriedades e seus valores são muitas vezes denominados de \" pares chave-valor\".",
|
|
||||||
"Vamos obter o JSON da API de fotos de gatos do Free Code Camp.",
|
|
||||||
"Aqui esta o código que você pode por no nosso evento de clique para fazer isso:",
|
|
||||||
"<blockquote>$.getJSON(\"/json/cats.json\", function(json) {<br> $(\".message\").html(JSON.stringify(json));<br>});</blockquote>",
|
|
||||||
"Uma vez adicionadas, aperte o botão \"Get Message\". Sua função Ajax substituirá o texto \"The message will go here\" com a saída bruta do JSON da API de gatos do Free Code Camp."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "56bbb991ad1ed5201cd392d7",
|
|
||||||
"title": "Convert JSON Data to HTML",
|
|
||||||
"description": [
|
|
||||||
"Now that we're getting data from a JSON API, let's display it in our HTML.",
|
|
||||||
"We can use the <code>.forEach()</code> method to loop through our data and modify our HTML elements.",
|
|
||||||
"First, let's declare an html variable with <code>var html = \"\";</code>.",
|
|
||||||
"Then, let's loop through our JSON, adding more HTML to that variable. When the loop is finished, we'll render it.",
|
|
||||||
"Here's the code that does this:",
|
|
||||||
"<blockquote>json.forEach(function(val) {</br> var keys = Object.keys(val);</br> html += \"<div class='cat'>\";</br> keys.forEach(function(key) {</br> html += \"<strong>\" + key + \"</strong>: \" + val[key] + \"<br>\";</br> });</br> html += \"</div><br>\";</br>});</blockquote>"
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"fccss",
|
|
||||||
" $(document).ready(function() {",
|
|
||||||
"",
|
|
||||||
" $(\"#getMessage\").on(\"click\", function() {",
|
|
||||||
" $.getJSON(\"/json/cats.json\", function(json) {",
|
|
||||||
"",
|
|
||||||
" var html = \"\";",
|
|
||||||
" // Only change code below this line.",
|
|
||||||
" ",
|
|
||||||
" ",
|
|
||||||
" ",
|
|
||||||
" // Only change code above this line.",
|
|
||||||
"",
|
|
||||||
" $(\".message\").html(html);",
|
|
||||||
"",
|
|
||||||
" });",
|
|
||||||
" });",
|
|
||||||
" });",
|
|
||||||
"fcces",
|
|
||||||
"",
|
|
||||||
"<div class=\"container-fluid\">",
|
|
||||||
" <div class=\"row text-center\">",
|
|
||||||
" <h2>Cat Photo Finder</h2>",
|
|
||||||
" </div>",
|
|
||||||
" <div class=\"row text-center\">",
|
|
||||||
" <div class=\"col-xs-12 well message\">",
|
|
||||||
" The message will go here",
|
|
||||||
" </div>",
|
|
||||||
" </div>",
|
|
||||||
" <div class=\"row text-center\">",
|
|
||||||
" <div class=\"col-xs-12\">",
|
|
||||||
" <button id=\"getMessage\" class=\"btn btn-primary\">",
|
|
||||||
" Get Message",
|
|
||||||
" </button>",
|
|
||||||
" </div>",
|
|
||||||
" </div>",
|
|
||||||
"</div>"
|
|
||||||
],
|
|
||||||
"tests": [
|
|
||||||
"assert(code.match(/json\\.forEach/gi), 'message: The message box should have something in it.');"
|
|
||||||
],
|
|
||||||
"type": "waypoint",
|
|
||||||
"challengeType": 0,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Convierte datos JSON a datos HTML",
|
|
||||||
"description": [
|
|
||||||
"Ahora que estamos obteniendo datos de una API JSON, mostremóslos en nuestro HTML.",
|
|
||||||
"Podemos usar el método <code>.forEach()</code> para recorrer nuestros datos y modificar nuestros elementos HTML.",
|
|
||||||
"En primer lugar, vamos a declarar una variable llamada <code>html</code> con <code>var html = \"\";</code>.",
|
|
||||||
"Después, iteremos a traveś de nuestro JSON, añadiendo más HTML a esa variable. Cuando se termina el ciclo, vamos a presentarla. ",
|
|
||||||
"Aquí está el código que hace esto:",
|
|
||||||
"<blockquote>json.forEach(function(val) {</br> var keys = Object.keys(val);</br> html += \"<div class='cat'>\";</br> keys.forEach(function(key) {</br> html += \"<strong>\" + key + \"</strong>: \" + val[key] + \"<br>\";</br> });</br> html += \"</div><br>\";</br>});</blockquote>"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"pt": {
|
|
||||||
"title": "Converter dados JSON para HTML",
|
|
||||||
"description": [
|
|
||||||
"Agora que estamos obtendo os dados de uma API JSON, vamos mostra-los em nosso HTML",
|
|
||||||
"Podemos usar o método <code>.forEach()</code> para percorrer os nossos dados e modificar o elementos HTML.",
|
|
||||||
"Em primeiro lugar, vamos declarar uma variável chamada <code>html</code> com <code>var html = \"\";</code>.",
|
|
||||||
"Depois, vamos percorrer através do nosso JSON, adicionando mais HTML para a nossa variável. Quando essa iteração terminar, vamos apresentar o resultado.",
|
|
||||||
"Aqui está o código que faz isso:",
|
|
||||||
"<blockquote>json.forEach(function(val) {</br> var keys = Object.keys(val);</br> html += \"<div class='cat'>\";</br> keys.forEach(function(key) {</br> html += \"<strong>\" + key + \"</strong>: \" + val[key] + \"<br>\";</br> });</br> html += \"</div><br>\";</br>});</blockquote>"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "56bbb991ad1ed5201cd392d8",
|
|
||||||
"title": "Render Images from Data Sources",
|
|
||||||
"description": [
|
|
||||||
"We've seen from the last two lessons that each object in our JSON array contains an <code>imageLink</code> key with a value that is the URL of a cat's image.",
|
|
||||||
"When we're looping through these objects, let's use this <code>imageLink</code> property to display this image in an <code>img</code> element.",
|
|
||||||
"Here's the code that does this:",
|
|
||||||
"<code>html += \"<img src='\" + val.imageLink + \"' \" + \"alt='\" + val.altText + \"'>\";</code>"
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"fccss",
|
|
||||||
" $(document).ready(function() {",
|
|
||||||
"",
|
|
||||||
" $(\"#getMessage\").on(\"click\", function() {",
|
|
||||||
" $.getJSON(\"/json/cats.json\", function(json) {",
|
|
||||||
"",
|
|
||||||
" var html = \"\";",
|
|
||||||
"",
|
|
||||||
" json.forEach(function(val) {",
|
|
||||||
"",
|
|
||||||
" html += \"<div class='cat'>\";",
|
|
||||||
"",
|
|
||||||
" // Only change code below this line.",
|
|
||||||
" ",
|
|
||||||
" ",
|
|
||||||
" ",
|
|
||||||
" // Only change code above this line.",
|
|
||||||
"",
|
|
||||||
" html += \"</div>\";",
|
|
||||||
"",
|
|
||||||
" });",
|
|
||||||
"",
|
|
||||||
" $(\".message\").html(html);",
|
|
||||||
"",
|
|
||||||
" });",
|
|
||||||
" });",
|
|
||||||
" });",
|
|
||||||
"fcces",
|
|
||||||
"",
|
|
||||||
"<div class=\"container-fluid\">",
|
|
||||||
" <div class=\"row text-center\">",
|
|
||||||
" <h2>Cat Photo Finder</h2>",
|
|
||||||
" </div>",
|
|
||||||
" <div class=\"row text-center\">",
|
|
||||||
" <div class=\"col-xs-12 well message\">",
|
|
||||||
" The message will go here",
|
|
||||||
" </div>",
|
|
||||||
" </div>",
|
|
||||||
" <div class=\"row text-center\">",
|
|
||||||
" <div class=\"col-xs-12\">",
|
|
||||||
" <button id=\"getMessage\" class=\"btn btn-primary\">",
|
|
||||||
" Get Message",
|
|
||||||
" </button>",
|
|
||||||
" </div>",
|
|
||||||
" </div>",
|
|
||||||
"</div>"
|
|
||||||
],
|
|
||||||
"tests": [
|
|
||||||
"assert(code.match(/val\\.imageLink/gi) || code.match(/val\\[\"imageLink\"\\]/gi), 'message: You should have used the <code>imageLink</code> property to display the images.');"
|
|
||||||
],
|
|
||||||
"type": "waypoint",
|
|
||||||
"challengeType": 0,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Presenta imágenes de fuentes de datos",
|
|
||||||
"description": [
|
|
||||||
"Hemos visto en las dos últimas lecciones que cada objeto en nuestro vector JSON contiene una llave <code>imageLink</code> con un valor que corresponde a la URL de la imagen de un gato.",
|
|
||||||
"Cuando estamos recorriendo estos objetos, usemos esta propiedad <code>imageLink</code> para visualizar la imagen en un elemento <code>img</code>.",
|
|
||||||
"Aquí está el código que hace esto:",
|
|
||||||
"<code>html += \"<img src='\" + val.imageLink + \"' \" + \"alt='\" + val.altText + \"'>\";</code>"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"pt": {
|
|
||||||
"title": "Apresentar as imagens da fonte de dados",
|
|
||||||
"description": [
|
|
||||||
"Como temos visto nas ultimas lições, cada objeto em nosso array JSON contém a chave <code>imageLink</code> com um valor que corresponde a URL da imagem de um gato.",
|
|
||||||
"Quando estamos percorrendo por estes objetos, usamos a propriedade <code>imageLink</code> para visualizar a imagem em um elemento <code>img</code>.",
|
|
||||||
"Aqui está o código para fazer isso:",
|
|
||||||
"<code>html += \"<img src='\" + val.imageLink + \"' \" + \"alt='\" + val.altText + \"'>\";</code>"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "56bbb991ad1ed5201cd392d9",
|
|
||||||
"title": "Prefilter JSON",
|
|
||||||
"description": [
|
|
||||||
"If we don't want to render every cat photo we get from our Free Code Camp's Cat Photo JSON API, we can pre-filter the json before we loop through it.",
|
|
||||||
"Let's filter out the cat whose \"id\" key has a value of 1.",
|
|
||||||
"Here's the code to do this:",
|
|
||||||
"<blockquote>json = json.filter(function(val) {</br> return (val.id !== 1);</br>});</blockquote>"
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"fccss",
|
|
||||||
" $(document).ready(function() {",
|
|
||||||
"",
|
|
||||||
" $(\"#getMessage\").on(\"click\", function() {",
|
|
||||||
" $.getJSON(\"/json/cats.json\", function(json) {",
|
|
||||||
"",
|
|
||||||
" var html = \"\";",
|
|
||||||
"",
|
|
||||||
" // Only change code below this line.",
|
|
||||||
" ",
|
|
||||||
" ",
|
|
||||||
" ",
|
|
||||||
" // Only change code above this line.",
|
|
||||||
"",
|
|
||||||
" json.forEach(function(val) {",
|
|
||||||
"",
|
|
||||||
" html += \"<div class='cat'>\"",
|
|
||||||
"",
|
|
||||||
" html += \"<img src='\" + val.imageLink + \"' \" + \"alt='\" + val.altText + \"'>\"",
|
|
||||||
"",
|
|
||||||
" html += \"</div>\"",
|
|
||||||
"",
|
|
||||||
" });",
|
|
||||||
"",
|
|
||||||
" $(\".message\").html(html);",
|
|
||||||
"",
|
|
||||||
" });",
|
|
||||||
" });",
|
|
||||||
" });",
|
|
||||||
"fcces",
|
|
||||||
"",
|
|
||||||
"<div class=\"container-fluid\">",
|
|
||||||
" <div class=\"row text-center\">",
|
|
||||||
" <h2>Cat Photo Finder</h2>",
|
|
||||||
" </div>",
|
|
||||||
" <div class=\"row text-center\">",
|
|
||||||
" <div class=\"col-xs-12 well message\">",
|
|
||||||
" The message will go here",
|
|
||||||
" </div>",
|
|
||||||
" </div>",
|
|
||||||
" <div class=\"row text-center\">",
|
|
||||||
" <div class=\"col-xs-12\">",
|
|
||||||
" <button id=\"getMessage\" class=\"btn btn-primary\">",
|
|
||||||
" Get Message",
|
|
||||||
" </button>",
|
|
||||||
" </div>",
|
|
||||||
" </div>",
|
|
||||||
"</div>"
|
|
||||||
],
|
|
||||||
"tests": [
|
|
||||||
"assert(code.match(/filter/gi), 'message: You should be making use of the .filter method.');"
|
|
||||||
],
|
|
||||||
"type": "waypoint",
|
|
||||||
"challengeType": 0,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Pre-filtra JSON",
|
|
||||||
"description": [
|
|
||||||
"Si no queremos presentar cada foto de gato que obtengamos de la API JSON de fotos de gato de Free Code Camp, podemos pre-filtrar el json antes de iterar a través de este.",
|
|
||||||
"Vamos a filtrar el gato cuya llave \"id\" tiene un valor de 1.",
|
|
||||||
"Aquí está el código para hacer esto:",
|
|
||||||
"<blockquote>json = json.filter(function(val) {</br> return (val.id !== 1);</br>});</blockquote>"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"pt": {
|
|
||||||
"title": "Pré-filtro JSON",
|
|
||||||
"description": [
|
|
||||||
"Se não queremos apresentar cada foto de gato que obtemos da API JSON de fotos de gatos do Free Code Camp, podemos realizar um pré-filtro o JSON antes de iterar através dele.",
|
|
||||||
"Vamos filtrar o gato cuja a chave \"id\" tenha o valor 1.",
|
|
||||||
"Aqui está o código para fazer isso:",
|
|
||||||
"<blockquote>json = json.filter(function(val) {</br> return (val.id !== 1);</br>});</blockquote>"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "56bbb991ad1ed5201cd392da",
|
|
||||||
"title": "Get Geo-location Data",
|
|
||||||
"description": [
|
|
||||||
"Another cool thing we can do is access our user's current location. Every browser has a built in navigator that can give us this information.",
|
|
||||||
"The navigator will get our user's current longitude and latitude.",
|
|
||||||
"You will see a prompt to allow or block this site from knowing your current location. The challenge can be completed either way, as long as the code is correct.",
|
|
||||||
"By selecting allow you will see the text on the output phone change to your latitude and longitude",
|
|
||||||
"Here's some code that does this:",
|
|
||||||
"<blockquote>if (navigator.geolocation) {<br> navigator.geolocation.getCurrentPosition(function(position) {<br> $(\"#data\").html(\"latitude: \" + position.coords.latitude + \"<br>longitude: \" + position.coords.longitude);<br> });<br>}</blockquote>",
|
|
||||||
"Don't forget to use double quotes around selectors as mentioned <a href='/challenges/target-html-elements-with-selectors-using-jquery' target='_blank'>here.</a>"
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"fccss",
|
|
||||||
" // Only change code below this line.",
|
|
||||||
" ",
|
|
||||||
" ",
|
|
||||||
" ",
|
|
||||||
" // Only change code above this line.",
|
|
||||||
"fcces",
|
|
||||||
"<h4>You are here:</h4>",
|
|
||||||
"<div id=\"data\">",
|
|
||||||
" ",
|
|
||||||
"</div>"
|
|
||||||
],
|
|
||||||
"tests": [
|
|
||||||
"assert(code.match(/navigator\\.geolocation\\.getCurrentPosition/gi), 'message: You should make use of <code>navigator.geolocation</code> to access the users current location.');",
|
|
||||||
"assert(code.match(/position\\.coords\\.latitude/gi), 'message: You should make use of <code>position.coords.latitude</code> to display the users' latitudinal location.');",
|
|
||||||
"assert(code.match(/position\\.coords\\.longitude/gi), 'message: You should make use of <code>position.coords.longitude</code> to display the users' longitudinal location.');",
|
|
||||||
"assert(code.match(/\\$\\(\\s*['\"]#data['\"]\\s*\\)\\s*\\.html\\([.\\w\\W]*?\\);/gi), 'message: You should display the users' position within the <code>data</code> div element');"
|
|
||||||
],
|
|
||||||
"type": "waypoint",
|
|
||||||
"challengeType": 0,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Recibir datos de Geo-localización",
|
|
||||||
"description": [
|
|
||||||
"Otra cosa interesante que podemos hacer es acceder a la ubicación actual de nuestros usuarios. Todos los navegadores han incorporado un geo-localizador que nos puede dar esta información. ",
|
|
||||||
"El navegador puede obtener la longitud y latitud actual de nuestros usuarios.",
|
|
||||||
"Como usuario verás un mensaje para permitir o evitar que el sitio conozca tu ubicación actual. El desafío se puede completar de cualquier manera, siempre y cuando el código sea correcto. ",
|
|
||||||
"Si lo permites, verás que el texto en el teléfono de la derecha cambiará con tu latitud y longitud",
|
|
||||||
"Aquí hay un código que hace esto:",
|
|
||||||
"<blockquote>if (navigator.geolocation) {</br> navigator.geolocation.getCurrentPosition(function(position) {</br> $(\"#data\").html(\"latitude: \" + position.coords.latitude + \"<br>longitude: \" + position.coords.longitude);</br> });</br>}</blockquote>"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"pt": {
|
|
||||||
"title": "Receber dados de Geo-localização",
|
|
||||||
"description": [
|
|
||||||
"Outra coisa interessante que podemos fazer é acessar a atual localização do nosso usuário. Todos os navegadores tem implementado um geo-localizador que pode nos fornecer essa informação.",
|
|
||||||
"O navegador pode obter a longitude e latitude atual de nossos usuários",
|
|
||||||
"Você irá ver uma janela para bloquear ou permitir que o site possa conhecer a nossa localização atual. O desafio será completado de qualquer maneira, sempre que o código estará correto.",
|
|
||||||
"Se você permitir, irá ver o texto de saída do telefone mudar para sua latitude e longitude.",
|
|
||||||
"Aqui está o código para fazer isso:",
|
|
||||||
"<blockquote>if (navigator.geolocation) {</br> navigator.geolocation.getCurrentPosition(function(position) {</br> $(\"#data\").html(\"latitude: \" + position.coords.latitude + \"<br>longitude: \" + position.coords.longitude);</br> });</br>}</blockquote>"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@ -1,698 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "Object Oriented and Functional Programming",
|
|
||||||
"order": 7,
|
|
||||||
"time": "2 hours",
|
|
||||||
"helpRoom": "HelpJavaScript",
|
|
||||||
"note": [
|
|
||||||
"Methods",
|
|
||||||
"Closures",
|
|
||||||
"Factories",
|
|
||||||
"Pure Functions",
|
|
||||||
"Currying Functions",
|
|
||||||
"Functors",
|
|
||||||
"Currying Functions"
|
|
||||||
],
|
|
||||||
"challenges": [
|
|
||||||
{
|
|
||||||
"id": "cf1111c1c15feddfaeb1bdef",
|
|
||||||
"title": "Declare JavaScript Objects as Variables",
|
|
||||||
"description": [
|
|
||||||
"Before we dive into Object Oriented Programming, let's revisit JavaScript objects.",
|
|
||||||
"Give your <code>motorBike</code> object <code>wheels</code>, <code>engines</code> and <code>seats</code> attributes and set each to a number."
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"var car = {",
|
|
||||||
" \"wheels\":4,",
|
|
||||||
" \"engines\":1,",
|
|
||||||
" \"seats\":5",
|
|
||||||
"};",
|
|
||||||
"",
|
|
||||||
"var motorBike = {",
|
|
||||||
"",
|
|
||||||
" // Only change code below this line.",
|
|
||||||
"",
|
|
||||||
"};"
|
|
||||||
],
|
|
||||||
"tail": [
|
|
||||||
"(function() {return JSON.stringify(motorBike);})();"
|
|
||||||
],
|
|
||||||
"solutions": [
|
|
||||||
"var car = {\n \"wheels\":4,\n \"engines\":1,\n \"seats\":5\n};\n\nvar motorBike = {\n \"wheels\": 4,\n \"engines\": 1,\n \"seats\": 2\n};"
|
|
||||||
],
|
|
||||||
"tests": [
|
|
||||||
"assert(typeof motorBike.engines === 'number', 'message: <code>motorBike</code> should have an <code>engines</code> attribute set to a number.');",
|
|
||||||
"assert(typeof motorBike.wheels === 'number', 'message: <code>motorBike</code> should have a <code>wheels</code> attribute set to a number.');",
|
|
||||||
"assert(typeof motorBike.seats === 'number', 'message: <code>motorBike</code> should have a <code>seats</code> attribute set to a number.');"
|
|
||||||
],
|
|
||||||
"type": "waypoint",
|
|
||||||
"challengeType": 1,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Declara objetos de JavaScript como variables",
|
|
||||||
"description": [
|
|
||||||
"Antes de sumergirnos en Programación Orientada a Objetos, vamos a revisar los objetos de JavaScript.",
|
|
||||||
"Dale a tu objeto <code>motorBike</code> un atributo <code>wheels</code>, otro llamado <code>motors</code> y otro <code>seats</code> y asignales números."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "cf1111c1c15feddfaeb2bdef",
|
|
||||||
"title": "Construct JavaScript Objects with Functions",
|
|
||||||
"description": [
|
|
||||||
"We are also able to create objects using <code>constructor</code> functions.",
|
|
||||||
"A <code>constructor</code> function is given a capitalized name to make it clear that it is a <code>constructor</code>.",
|
|
||||||
"Here's an example of a <code>constructor</code> function:",
|
|
||||||
"<blockquote>var Car = function() {<br> this.wheels = 4;<br> this.engines = 1;<br> this.seats = 5;<br>};</blockquote>",
|
|
||||||
"In a <code>constructor</code> the <code>this</code> variable refers to the new object being created by the constructor. So when we write,",
|
|
||||||
"<code> this.wheels = 4;</code>",
|
|
||||||
"inside of the <code>constructor</code> we are giving the new object it creates a property called <code>wheels</code> with a value of <code>4</code>.",
|
|
||||||
"You can think of a <code>constructor</code> as a description for the object it will create.",
|
|
||||||
"Have your <code>MotorBike</code> <code>constructor</code> describe an object with <code>wheels</code>, <code>engines</code> and <code>seats</code> properties and set them to numbers."
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"var Car = function() {",
|
|
||||||
" this.wheels = 4;",
|
|
||||||
" this.engines = 1;",
|
|
||||||
" this.seats = 5;",
|
|
||||||
"};",
|
|
||||||
"",
|
|
||||||
"// Only change code below this line.",
|
|
||||||
"",
|
|
||||||
"var MotorBike = function() {",
|
|
||||||
"",
|
|
||||||
"};"
|
|
||||||
],
|
|
||||||
"tail": [
|
|
||||||
"(function() {return JSON.stringify(new MotorBike());})();"
|
|
||||||
],
|
|
||||||
"solutions": [
|
|
||||||
"var Car = function() {\n this.wheels = 4;\n this.engines = 1;\n this.seats = 5;\n};\n\nvar myCar = new Car();\n\nvar MotorBike = function() {\n this.engines = 1;\n this.seats = 1;\n this.wheels = 4;\n};\n\nvar myMotorBike = new MotorBike();"
|
|
||||||
],
|
|
||||||
"tests": [
|
|
||||||
"assert(typeof (new MotorBike()).engines === 'number', 'message: <code>MotorBike</code> should have an <code>engines</code> attribute set to a number.');",
|
|
||||||
"assert(typeof (new MotorBike()).wheels === 'number', 'message: <code>MotorBike</code> should have a <code>wheels</code> attribute set to a number.');",
|
|
||||||
"assert(typeof (new MotorBike()).seats === 'number', 'message: <code>MotorBike</code> should have a <code>seats</code> attribute set to a number.');"
|
|
||||||
],
|
|
||||||
"type": "waypoint",
|
|
||||||
"challengeType": 1,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Construye objetos de JavaScript con funciones",
|
|
||||||
"description": [
|
|
||||||
"También podemos crear objetos utilizando funciones <code>constructoras</code>.",
|
|
||||||
"A cada función <code>constructora</code> se le da un nombre comenzando en mayúsculas para que quede claro que es una <code>constructora</code>.",
|
|
||||||
"He aquí un ejemplo de una función <code>constructora</code>:",
|
|
||||||
"<code>var Carro = function() {</code>",
|
|
||||||
"<code>& nbsp; & nbsp; this.llantas = 4; </code>",
|
|
||||||
"<code>& nbsp; & nbsp; this.motores = 1; </code>",
|
|
||||||
"<code>& nbsp; & nbsp; this.asientos = 5; </code>",
|
|
||||||
"<code>}; </code>",
|
|
||||||
"En una <code>constructora</code> la variable <code>this</code> hace referencia al nuevo objeto que está siendo creado por la constructora. Así que cuando escribimos ",
|
|
||||||
"<code> this.llantas = 4;</code>",
|
|
||||||
"dentro de la <code>constructora</code> le estamos dando el nuevo objeto que se crea una propiedad llamada <code>llantas</code> con un valor de <code>4</code>.",
|
|
||||||
"Puedes pensar en una <code>constructora</code> como una descripción del objeto que crea.",
|
|
||||||
"Haz que tu <code>constructora</code> <code>MotorBike</code> describa un objeto con las propiedades <code>wheels</code>,<code>engines</code> and <code>seats</code> y asignales números."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "cf1111c1c15feddfaeb4bdef",
|
|
||||||
"title": "Make Instances of Objects with a Constructor Function",
|
|
||||||
"description": [
|
|
||||||
"Now let's put that great <code>constructor</code> function we made in the last lesson to use!",
|
|
||||||
"To use a <code>constructor</code> function we call it with the <code>new</code> keyword in front of it like:",
|
|
||||||
"<code>var myCar = new Car();</code>",
|
|
||||||
"<code>myCar</code> is now an <code>instance</code> of the <code>Car</code> constructor that looks like the object it described:",
|
|
||||||
"<blockquote>{<br> wheels: 4,<br> engines: 1,<br> seats: 5<br>}</blockquote>",
|
|
||||||
"Note that it is important to use the <code>new</code> keyword when calling a constructor. This is how Javascript knows to create a new object and that all the references to <code>this</code> inside the constructor should be referring to this new object.",
|
|
||||||
"Now, once the <code>myCar</code> <code>instance</code> is created it can be used like any other object and can have its properties accessed and modified the same way you would usually. For example:",
|
|
||||||
"<code>myCar.turboType = \"twin\";</code>",
|
|
||||||
"Our <code>myCar</code> variable now has a property <code>turboType</code> with a value of <code>\"twin\"</code>.",
|
|
||||||
"In the editor, use the <code>Car</code> <code>constructor</code> to create a new <code>instance</code> and assign it to <code>myCar</code>.",
|
|
||||||
"Then give <code>myCar</code> a <code>nickname</code> property with a string value."
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"var Car = function() {",
|
|
||||||
" this.wheels = 4;",
|
|
||||||
" this.engines = 1;",
|
|
||||||
" this.seats = 5;",
|
|
||||||
"};",
|
|
||||||
"",
|
|
||||||
"// Only change code below this line.",
|
|
||||||
"",
|
|
||||||
"var myCar;"
|
|
||||||
],
|
|
||||||
"tail": [
|
|
||||||
"(function() {return JSON.stringify(myCar);})();"
|
|
||||||
],
|
|
||||||
"solutions": [
|
|
||||||
"var Car = function() {\n this.wheels = 4;\n this.engines = 1;\n this.seats = 5;\n};\n\nvar myCar = new Car();\n\nmyCar.nickname = \"Lucy\";"
|
|
||||||
],
|
|
||||||
"tests": [
|
|
||||||
"assert((new Car()).wheels === 4, 'message: The property <code>wheels</code> should still be <code>4</code> in the object <code>constructor</code>.');",
|
|
||||||
"assert(typeof (new Car()).nickname === 'undefined', 'message: There should not be a property <code>nickname</code> in the object <code>constructor</code>.');",
|
|
||||||
"assert(myCar.wheels === 4, 'message: The property <code>wheels</code> of <code>myCar</code> should equal <code>4</code>.');",
|
|
||||||
"assert(typeof myCar.nickname === 'string', 'message: The property <code>nickname</code> of <code>myCar</code> should be a string.');"
|
|
||||||
],
|
|
||||||
"type": "waypoint",
|
|
||||||
"challengeType": 1,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Crea instancias de objetos con funciones constructoras",
|
|
||||||
"description": [
|
|
||||||
"¡Ahora usemos esa gran <code>constructora</code> que hicimos en la última lección!",
|
|
||||||
"Para utilizar una función <code>constructora</code> la llamamos con la palabra reservada <code>new</code> al frente, como:",
|
|
||||||
"<code>var miCarro = new Carro();</code>",
|
|
||||||
"<code>miCarro</code>es ahora una <code>instancia</code> de la constructora <code>Carro</code> que se parece al objeto que describe:",
|
|
||||||
"<code>{</code>",
|
|
||||||
"<code> wheels: 4,</code>",
|
|
||||||
"<code> engines: 1,</code>",
|
|
||||||
"<code> seats: 5</code>",
|
|
||||||
"<code>}</code>",
|
|
||||||
"Ten en cuenta que es importante utilizar la palabra reservada <code>new</code> cuando se llama a una constructora. Así es como Javascript sabe crear un objeto nuevo y hace que todas las referencias a <code>this</code> dentro del constructor se refieran al objeto nuevo ",
|
|
||||||
"Ahora, una vez que la <code>instancia</code> <code>miCarro</code> se crea, puede ser utilizada como cualquier otro objeto y puedes acceder o modificar sus propiedades como lo harías normalmente. Por ejemplo:",
|
|
||||||
"<code>miCarro.tipoTurbo = \"doble\"; </code>",
|
|
||||||
"Nuestra variable <code>miCarro</code> tiene ahora una propiedad <code>tipoTurbo</code> con un valor de <code>\"doble\"</code>.",
|
|
||||||
"En el editor, utiliza la <code>constructora</code> <code>Car</code> para crear una nueva <code>instancia</code> y asignala a <code>myCar</code>.",
|
|
||||||
"A continuación, dale a <code>myCar</code> una propiedad <code>nickname</code> con un valor tipo cadena."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "563cfb55594311ffcb333c70",
|
|
||||||
"title": "Make Unique Objects by Passing Parameters to our Constructor",
|
|
||||||
"description": [
|
|
||||||
"The <code>constructor</code> we have is great, but what if we don't always want to create the same object?",
|
|
||||||
"To solve this we can add <code>parameters</code> to our <code>constructor</code>. We do this like the following example:",
|
|
||||||
"<blockquote>var Car = function(wheels, seats, engines) {<br> this.wheels = wheels;<br> this.seats = seats;<br> this.engines = engines;<br>};</blockquote>",
|
|
||||||
"Now we can pass in <code>arguments</code> when we call our <code>constructor</code>.",
|
|
||||||
"<code>var myCar = new Car(6, 3, 1);</code>",
|
|
||||||
"This code will create an object that uses the <code>arguments</code> we passed in and looks like:",
|
|
||||||
"<blockquote>{<br> wheels: 6,<br> seats: 3,<br> engines: 1<br>}</blockquote>",
|
|
||||||
"Now give it a try yourself! Alter the <code>Car</code> <code>constructor</code> to use <code>parameters</code> to assign values to the <code>wheels</code>, <code>seats</code>, and <code>engines</code> properties.",
|
|
||||||
"Then call your new <code>constructor</code> with three number <code>arguments</code> and assign it to <code>myCar</code> to see it in action."
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"var Car = function() {",
|
|
||||||
" //Change this constructor",
|
|
||||||
" this.wheels = 4;",
|
|
||||||
" this.seats = 5;",
|
|
||||||
" this.engines = 1;",
|
|
||||||
"};",
|
|
||||||
"",
|
|
||||||
"//Try it out here",
|
|
||||||
"var myCar;"
|
|
||||||
],
|
|
||||||
"tail": [
|
|
||||||
"(function() {return JSON.stringify(myCar);})();"
|
|
||||||
],
|
|
||||||
"solutions": [
|
|
||||||
"var Car = function(wheels,seats,engines) {\n this.wheels = wheels;\n this.seats = seats;\n this.engines = engines;\n};\n\nvar myCar = new Car(4,1,1);"
|
|
||||||
],
|
|
||||||
"tests": [
|
|
||||||
"assert((function(){var testCar = new Car(3,1,2); return testCar.wheels === 3 && testCar.seats === 1 && testCar.engines === 2;})(), 'message: Calling <code>new Car(3,1,2)</code> should produce an object with a <code>wheels</code> property of <code>3</code>, a <code>seats</code> property of <code>1</code>, and an <code>engines</code> property of <code>2</code>.');",
|
|
||||||
"assert((function(){var testCar = new Car(4,4,2); return testCar.wheels === 4 && testCar.seats === 4 && testCar.engines === 2;})(), 'message: Calling <code>new Car(4,4,2)</code> should produce an object with a <code>wheels</code> property of <code>4</code>, a <code>seats</code> property of <code>4</code>, and an <code>engines</code> property of <code>2</code>.');",
|
|
||||||
"assert((function(){var testCar = new Car(2,6,3); return testCar.wheels === 2 && testCar.seats === 6 && testCar.engines === 3;})(), 'message: Calling <code>new Car(2,6,3)</code> should produce an object with a <code>wheels</code> property of <code>2</code>, a <code>seats</code> property of <code>6</code>, and an <code>engines</code> property of <code>3</code>.');",
|
|
||||||
"assert(typeof myCar.wheels === 'number' && typeof myCar.seats === 'number' && typeof myCar.engines === 'number', 'message: <code>myCar</code> should have number values for the <code>wheels</code>, <code>seats</code>, and <code>engines</code> properties.');"
|
|
||||||
],
|
|
||||||
"type": "waypoint",
|
|
||||||
"challengeType": 1,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Crea objetos únicos pasando parámetros a la constructora",
|
|
||||||
"description": [
|
|
||||||
"La <code>constructora</code> que tenemos es fabulosa, pero ¿qué hacer si no queremos crear siempre el mismo objeto?",
|
|
||||||
"Para solucionar esto podemos añadir<code>parámetros</code>en nuestra <code>constructora</code>. Hacemos esto como en el siguiente ejemplo: ",
|
|
||||||
"<code>var Carro = function (ruedas, asientos, motores) {</code>",
|
|
||||||
"<code> this.ruedas = ruedas;</code>",
|
|
||||||
"<code> this.asientos = asientos;</code>",
|
|
||||||
"<code> this.motores = motores;</code>",
|
|
||||||
"<code>};</code>",
|
|
||||||
"Ahora podemos pasar <code>argumentos</code> cuando llamamos a nuestra <code>constructora</code>.",
|
|
||||||
"<code>var miCarro = nuevo Carro(6, 3, 1); </code>",
|
|
||||||
"Este código crea un objeto que utiliza los <code>argumentos</code> que pasamos en y se ve así:",
|
|
||||||
"<code>{</code>",
|
|
||||||
"<code> ruedas: 6,</code>",
|
|
||||||
"<code> asientos: 3,</code>",
|
|
||||||
"<code> motores: 1</code>",
|
|
||||||
"<code>}</code>",
|
|
||||||
"¡Ahora date una oportunidad a ti mismo! Modifica la <code>constructora</code> <code>Car</code> para que use <code>parámetros</code> que permitan asignar valores para las propiedades <code>wheels</code>, <code>seats</code>, y <code>engines</code>. ",
|
|
||||||
"Entonces llama a tu nueva <code>constructora</code> con tres <code>argumentos</code> numéricos y asígnala a <code>myCar</code>para verla en acción."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "cf1111c1c15feddfaeb3bdef",
|
|
||||||
"title": "Make Object Properties Private",
|
|
||||||
"description": [
|
|
||||||
"Objects have their own attributes, called <code>properties</code>, and their own functions, called <code>methods</code>.",
|
|
||||||
"In the <a href='/challenges/make-instances-of-objects-with-a-constructor-function' target='_blank'>previous challenges</a>, we used the <code>this</code> keyword to reference <code>public properties</code> of the current object.",
|
|
||||||
"We can also create <code>private properties</code> and <code>private methods</code>, which aren't accessible from outside the object.",
|
|
||||||
"To do this, we create the variable inside the <code>constructor</code> using the <code>var</code> keyword we're familiar with, instead of creating it as a <code>property</code> of <code>this</code>.",
|
|
||||||
"This is useful for when we need to store information about an object but we want to control how it is used by outside code.",
|
|
||||||
"For example, what if we want to store the <code>speed</code> our car is traveling at but we only want outside code to be able to modify it by accelerating or decelerating, so the speed changes in a controlled way?",
|
|
||||||
"In the editor you can see an example of a <code>Car</code> <code>constructor</code> that implements this pattern.",
|
|
||||||
"Now try it yourself! Modify the <code>Bike</code> <code>constructor</code> to have a <code>private property</code> called <code>gear</code> and two <code>public methods</code> called <code>getGear</code> and <code>setGear</code> to get and set that value.",
|
|
||||||
"<a href='https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/this' target='_blank'>Further explanation on <code>this</code> keyword</a>"
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"var Car = function() {",
|
|
||||||
" // this is a private variable",
|
|
||||||
" var speed = 10;",
|
|
||||||
"",
|
|
||||||
" // these are public methods",
|
|
||||||
" this.accelerate = function(change) {",
|
|
||||||
" speed += change;",
|
|
||||||
" };",
|
|
||||||
"",
|
|
||||||
" this.decelerate = function() {",
|
|
||||||
" speed -= 5;",
|
|
||||||
" };",
|
|
||||||
"",
|
|
||||||
" this.getSpeed = function() {",
|
|
||||||
" return speed;",
|
|
||||||
" };",
|
|
||||||
"};",
|
|
||||||
"",
|
|
||||||
"var Bike = function() {",
|
|
||||||
"",
|
|
||||||
" // Only change code below this line.",
|
|
||||||
"",
|
|
||||||
"};",
|
|
||||||
"",
|
|
||||||
"var myCar = new Car();",
|
|
||||||
"",
|
|
||||||
"var myBike = new Bike();"
|
|
||||||
],
|
|
||||||
"tail": [
|
|
||||||
"if(myBike.hasOwnProperty('getGear')){(function() {return JSON.stringify(myBike.getGear());})();}"
|
|
||||||
],
|
|
||||||
"solutions": [
|
|
||||||
"var Car = function() {\n var speed = 10;\n\n this.accelerate = function(change) {\n speed += change;\n };\n\n this.decelerate = function() {\n speed -= 5;\n };\n\n this.getSpeed = function() {\n return speed;\n };\n};\n\nvar Bike = function() {\n var gear = 1;\n \n this.getGear = function() {\n return gear;\n };\n \n this.setGear = function(newGear) {\n gear = newGear;\n };\n};\n\nvar myCar = new Car();\n\nvar myBike = new Bike();"
|
|
||||||
],
|
|
||||||
"tests": [
|
|
||||||
"assert(typeof myBike.getGear !== 'undefined' && typeof myBike.getGear === 'function', 'message: The method <code>getGear</code> of <code>myBike</code> should be accessible outside the object.');",
|
|
||||||
"assert(typeof myBike.setGear !== 'undefined' && typeof myBike.setGear === 'function', 'message: The method <code>setGear</code> of <code>myBike</code> should be accessible outside the object.');",
|
|
||||||
"assert(typeof myBike.gear === 'undefined', 'message: <code>myBike.gear</code> should remain undefined.');",
|
|
||||||
"assert.strictEqual((function () { myBike.setGear(4); return myBike.getGear(); })(), 4, 'message: <code>myBike.getGear()</code> should return <code>4</code> after calling <code>myBike.setGear(4)</code>.');",
|
|
||||||
"assert.strictEqual((function () { myBike.setGear(3); return myBike.getGear(); })(), 3, 'message: <code>myBike.getGear()</code> should return <code>3</code> after calling <code>myBike.setGear(3)</code>.');",
|
|
||||||
"assert.strictEqual((function () { myBike.setGear(1); return myBike.getGear(); })(), 1, 'message: <code>myBike.getGear()</code> should return <code>1</code> after calling <code>myBike.setGear(1)</code>.');"
|
|
||||||
],
|
|
||||||
"type": "waypoint",
|
|
||||||
"challengeType": 1,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Crea propiedades privadas de un objeto",
|
|
||||||
"description": [
|
|
||||||
"Los objetos tienen sus propios atributos, llamados <code>propiedades</code>, y sus propias funciones, llamadas<code>métodos</code>.",
|
|
||||||
"En los desafíos anteriores, se utilizó la palabra reservada <code>this</code> para referenciar <code>propiedades públicas</code>del objeto actual.",
|
|
||||||
"También podemos crear <code>propiedades privadas</code> y <code>métodos privados</code>, que no son accesibles desde fuera del objeto.",
|
|
||||||
"Para ello, creamos la variable dentro de la <code>constructora</code> usando la palabra reservada <code>var</code>, con la cual ya estamos familiarizados, en lugar de crearla con <code>this</code>. ",
|
|
||||||
"Esto es útil cuando necesitamos almacenar información sobre un objeto, pero controlando como se usa en el código externo al objeto.",
|
|
||||||
"Por ejemplo, ¿qué pasa si queremos almacenar la <code>velocidad</code> con la cual se desplaza nuestro carro, pero queremos que el código externo pueda modificarla sólo acelerando o desacelerando, de forma que la velocidad cambie de una manera controlada?",
|
|
||||||
"En el editor se puede ver un ejemplo de una <code>constructora</code> de <code>Car</code> que implementa este patrón.",
|
|
||||||
"¡Ahora pruébalo tú mismo! Modifica la <code>constructora</code> <code>Bike</code> para tener una <code>propiedad privada</code> llamada <code>gear</code>y dos<code>métodos públicos</code> llamados <code>getGear</code>y<code>setGear</code> para obtener y establecer ese valor."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "cf1111c1c15feddfaeb7bdef",
|
|
||||||
"title": "Iterate over Arrays with .map",
|
|
||||||
"description": [
|
|
||||||
"The <code>map</code> method is a convenient way to iterate through arrays. Here's an example usage:",
|
|
||||||
"<blockquote>var oldArray = [1, 2, 3];<br>var timesFour = oldArray.map(function(val){<br> return val * 4;<br>});<br>console.log(timesFour); // returns [4, 8, 12]<br>console.log(oldArray); // returns [1, 2, 3]</blockquote>",
|
|
||||||
"The <code>map</code> method will iterate through every element of the array, creating a new array with values that have been modified by the callback function, and return it. Note that it does not modify the original array.",
|
|
||||||
"In our example the callback only uses the value of the array element (the <code>val</code> argument) but your callback can also include arguments for the <code>index</code> and <code>array</code> being acted on.",
|
|
||||||
"Use the map function to add 3 to every value in the variable <code>oldArray</code>, and save the results into variable <code>newArray</code>. oldArray should not change."
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"var oldArray = [1,2,3,4,5];",
|
|
||||||
"",
|
|
||||||
"// Only change code below this line.",
|
|
||||||
"",
|
|
||||||
"var newArray = oldArray;"
|
|
||||||
],
|
|
||||||
"tail": [
|
|
||||||
"(function() {return newArray;})();"
|
|
||||||
],
|
|
||||||
"solutions": [
|
|
||||||
"var oldArray = [1,2,3,4,5];\nvar newArray = oldArray.map(function(val){\n return val + 3;\n});"
|
|
||||||
],
|
|
||||||
"tests": [
|
|
||||||
"assert.deepEqual(oldArray, [1,2,3,4,5], 'message: You should not change the original array.');",
|
|
||||||
"assert.deepEqual(newArray, [4,5,6,7,8], 'message: You should add three to each value in the array.');",
|
|
||||||
"assert(editor.getValue().match(/\\.map\\s*\\(/gi), 'message: You should be making use of the <code>map</code> method.');",
|
|
||||||
"assert(editor.getValue().match(/\\[1\\,2\\,3\\,4\\,5\\]/gi), 'message: You should only modify the array with <code>map</code>.');"
|
|
||||||
],
|
|
||||||
"type": "waypoint",
|
|
||||||
"challengeType": 1,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Iterar sobre vectores con .map",
|
|
||||||
"description": [
|
|
||||||
"El método <code>map</code> es una manera conveniente de iterar sobre vectores. He aquí un ejemplo de uso: ",
|
|
||||||
"<code>var porCuatro = vectorAntiguo.map(function(val){</code>",
|
|
||||||
"<code> return val * 4;</code>",
|
|
||||||
"<code>});</code>",
|
|
||||||
"El método <code>map</code> iterará sobre cada elemento del vector, creando un nuevo vector con los valores modificados por la función de devolución de llamada (<em>callback</em>) y retornará ese nuevo arreglo.",
|
|
||||||
"En nuestro ejemplo, la función de devolución de llamada sólo usa el valor del elemento del vector sobre el que está iterando (parámetro <code>val</code>), pero tu función de devolución de llamada también puede incluir parámetros para el <code>índice</code> y el <code>vector</code> completo. ",
|
|
||||||
"Usa la función <code>map</code> para añadir 3 a cada valor de la variable <code>oldArray</code>."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "cf1111c1c15feddfaeb8bdef",
|
|
||||||
"title": "Condense arrays with .reduce",
|
|
||||||
"description": [
|
|
||||||
"The array method <code>reduce</code> is used to iterate through an array and condense it into one value.",
|
|
||||||
"To use <code>reduce</code> you pass in a callback whose arguments are an accumulator (in this case, <code>previousVal</code>) and the current value (<code>currentVal</code>).",
|
|
||||||
"The accumulator is like a total that <code>reduce</code> keeps track of after each operation. The current value is just the next element in the array you're iterating through.",
|
|
||||||
"<code>reduce</code> has an optional second argument which can be used to set the initial value of the accumulator. If no initial value is specified it will be the first array element and <code>currentVal</code> will start with the second array element.",
|
|
||||||
"Here is an example of <code>reduce</code> being used to subtract all the values of an array:",
|
|
||||||
"<blockquote>var singleVal = array.reduce(<wbr>function(previousVal, currentVal) {<br> return previousVal - currentVal;<br>}, 0);</blockquote>",
|
|
||||||
"Use the <code>reduce</code> method to sum all the values in <code>array</code> and assign it to <code>singleVal</code>."
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"var array = [4,5,6,7,8];",
|
|
||||||
"var singleVal = 0;",
|
|
||||||
"",
|
|
||||||
"// Only change code below this line.",
|
|
||||||
"",
|
|
||||||
"singleVal = array;"
|
|
||||||
],
|
|
||||||
"tail": [
|
|
||||||
"(function() {return singleVal;})();"
|
|
||||||
],
|
|
||||||
"solutions": [
|
|
||||||
"var array = [4,5,6,7,8];\nvar singleVal = 0;\nsingleVal = array.reduce(function(previousVal, currentVal) {\n return previousVal + currentVal;\n}, 0);"
|
|
||||||
],
|
|
||||||
"tests": [
|
|
||||||
"assert(singleVal == 30, 'message: <code>singleVal</code> should be equal to the sum of all items in the <code>array</code> variable.');",
|
|
||||||
"assert(editor.getValue().match(/\\.reduce\\s*\\(/gi), 'message: You should have made use of the <code>reduce</code> method.');"
|
|
||||||
],
|
|
||||||
"type": "waypoint",
|
|
||||||
"challengeType": 1,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Condensa vectores con .reduce",
|
|
||||||
"description": [
|
|
||||||
"El método <code>reduce</code> de un vector, se utiliza para iterar a través del vector y condensarlo en un valor.",
|
|
||||||
"Para usar <code>reduce</code> tu le pasas una función de devolución de llamada cuyos argumentos sean un acumulador (en este caso, <code>valorPrevio</code>) y el valor actual (<code>valorActual</code>). ",
|
|
||||||
"<code>reduce</code> tiene un argumento opcional que puede usarse para asignar un valor inicial al acumulador. Si no se especifica ningún valor inicial, este será el primer elemento del vector y <code>valorActual</code> comenzará en el segundo elemento del vector. ",
|
|
||||||
"He aquí un ejemplo de<code>reduce</code> cuando se utiliza para restar todos los valores de una matriz:",
|
|
||||||
"<code>var singleVal = array.reduce(function(valorAnterior, valorActual) {</code>",
|
|
||||||
"<code> return valorAnterior - valorActual;</code>",
|
|
||||||
"<code>}, 0);</code>",
|
|
||||||
"Usa el método <code>reduce</code> para sumar todos los valores en <code>array</code> y asignarlo a <code>singleVal</code>."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "cf1111c1c15feddfaeb9bdef",
|
|
||||||
"title": "Filter Arrays with .filter",
|
|
||||||
"description": [
|
|
||||||
"The <code>filter</code> method creates a new array from an existing one by iterating over it and returning only the elements where a given condition returns true.",
|
|
||||||
"<code>filter</code> is passed a callback function which takes the current value (we've called that <code>val</code>) as an argument.",
|
|
||||||
"Any array element for which the callback returns true will be kept and elements that return false will be filtered out.",
|
|
||||||
"The following code is an example of using <code>filter</code> to remove array elements that are equal to five:",
|
|
||||||
"Note: We omit the second and third arguments since we only need the value",
|
|
||||||
"<blockquote>array = array.filter(function(val) {<br> return val !== 5;<br>});</blockquote>",
|
|
||||||
"Use <code>filter</code> to create a new array with all the values from <code>oldArray</code> which are less than 6. The <code>oldArray</code> should not change."
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"var oldArray = [1,2,3,4,5,6,7,8,9,10];",
|
|
||||||
"",
|
|
||||||
"// Only change code below this line.",
|
|
||||||
"",
|
|
||||||
"var newArray = oldArray;"
|
|
||||||
],
|
|
||||||
"tail": [
|
|
||||||
"(function() {return newArray;})();"
|
|
||||||
],
|
|
||||||
"solutions": [
|
|
||||||
"var oldArray = [1,2,3,4,5,6,7,8,9,10];\nvar newArray = oldArray.filter(function(val) {\n return val < 6;\n});"
|
|
||||||
],
|
|
||||||
"tests": [
|
|
||||||
"assert.deepEqual(oldArray, [1,2,3,4,5,6,7,8,9,10], 'message: You should not change the original array.');",
|
|
||||||
"assert.deepEqual(newArray, [1,2,3,4,5], 'message: <code>newArray</code> should be an array containing only the values from <code>oldArray</code> that are less than 6.');",
|
|
||||||
"assert(editor.getValue().match(/array\\.filter\\s*\\(/gi), 'message: You should be using the <code>filter</code> method to create a new array.');",
|
|
||||||
"assert(editor.getValue().match(/\\[1\\,2\\,3\\,4\\,5\\,6\\,7\\,8\\,9\\,10\\]/gi), 'message: You should only be using <code>filter</code> to make the new array.');"
|
|
||||||
],
|
|
||||||
"type": "waypoint",
|
|
||||||
"challengeType": 1,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Filtrar vectores con .filter",
|
|
||||||
"description": [
|
|
||||||
"El método <code>filter</code> se utiliza para iterar a través de un vector y filtrar los elementos que hagan falsa un condición determinada.",
|
|
||||||
"<code>filter</code> recibe una función de devolución de llamada que a su vez recibe como argumento el valor actual (que hemos llamado <code>val</code>).",
|
|
||||||
"Cualquier elemento del vector para el cual la función de devolución de llamada retorne <code>true</code> se mantendrá y los elementos que devuelven <code>false</code> serán filtrados.",
|
|
||||||
"El código siguiente es un ejemplo del uso de <code>filter</code> para eliminar los elementos de un vector que son iguales a cinco:",
|
|
||||||
"Nota: Omitimos el segundo y tercer argumentos ya que sólo necesitamos el valor",
|
|
||||||
"<code>array = array.filter(function(val) {</code>",
|
|
||||||
"<code> return val !== 5;</code>",
|
|
||||||
"<code>});</code>",
|
|
||||||
"Usa <code>filter</code> para crear un nuevo vector con todos los valores de <code>oldArray</code> que son menores a 6. <br><code>oldArray</code> no debe cambiar."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "cf1111c1c16feddfaeb1bdef",
|
|
||||||
"title": "Sort Arrays with .sort",
|
|
||||||
"description": [
|
|
||||||
"You can use the method <code>sort</code> to easily sort the values in an array alphabetically or numerically.",
|
|
||||||
"Unlike the previous array methods we have been looking at, <code>sort</code> actually alters the array in place. However, it also returns this sorted array.",
|
|
||||||
"<code>sort</code> can be passed a compare function as a callback. The compare function should return a negative number if <code>a</code> should be before <code>b</code>, a positive number if <code>a</code> should be after <code>b</code>, or <code>0</code> if they are equal.",
|
|
||||||
"If no compare (callback) function is passed in, it will convert the values to strings and sort alphabetically.",
|
|
||||||
"Here is an example of using sort with a compare function that will sort the elements from smallest to largest number:",
|
|
||||||
"<blockquote>var array = [1, 12, 21, 2];<br>array.sort(function(a, b) {<br> return a - b;<br>});</blockquote>",
|
|
||||||
"Use <code>sort</code> to sort <code>array</code> from largest to smallest.",
|
|
||||||
"Further explanation on the <code>.sort()</code> method can be found <a href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort' target='_blank'>here</a>."
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"var array = [1, 12, 21, 2];",
|
|
||||||
"",
|
|
||||||
"// Only change code below this line.",
|
|
||||||
"",
|
|
||||||
"array.sort();"
|
|
||||||
],
|
|
||||||
"tail": [
|
|
||||||
"(function() {return array;})();"
|
|
||||||
],
|
|
||||||
"solutions": [
|
|
||||||
"var array = [1, 12, 21, 2];\narray.sort(function(a, b) {\n return b - a;\n});"
|
|
||||||
],
|
|
||||||
"tests": [
|
|
||||||
"assert.deepEqual(array, [21, 12, 2, 1], 'message: You should have sorted the array from largest to smallest.');",
|
|
||||||
"assert(editor.getValue().match(/\\[1,\\s*12,\\s*21,\\s*2\\];/gi), 'message: You should only be using <code>sort</code> to modify the array.');",
|
|
||||||
"assert(editor.getValue().match(/\\.sort\\s*\\(/g), 'message: You should have made use of the <code>sort</code> method.');"
|
|
||||||
],
|
|
||||||
"type": "waypoint",
|
|
||||||
"challengeType": 1,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Ordena vectores con .sort",
|
|
||||||
"description": [
|
|
||||||
"Puedes utilizar el método <code>sort</code> para ordenar alfabética o numéricamente los valores de un vector.",
|
|
||||||
"A diferencia de los métodos de vector que hemos visto,<code>sort</code>en realidad altera el vector en su lugar. Sin embargo, también devuelve este vector ordenado. ",
|
|
||||||
"<code>sort</code> puede recibir como parámetro una función de devolución de llamada para comparar. Sin no se provee una función de comparación, convertirá los valores a cadenas y los ordenará alfabéticamente. ",
|
|
||||||
"He aquí un ejemplo del uso de <code>sort</code> con una función de comparación que ordena los elementos de menor a mayor:",
|
|
||||||
"<code>var array = [1, 12, 21, 2];</code>",
|
|
||||||
"<code>array.sort(function(a, b) {</code>",
|
|
||||||
"<code> return a - b;</code>",
|
|
||||||
"<code>});</code>",
|
|
||||||
"Usa <code>sort</code> para ordenar<code>array</code> de mayor a menor."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "cf1111c1c16feddfaeb2bdef",
|
|
||||||
"title": "Reverse Arrays with .reverse",
|
|
||||||
"description": [
|
|
||||||
"You can use the <code>reverse</code> method to reverse the elements of an array.",
|
|
||||||
"<code>reverse</code> is another array method that alters the array in place, but it also returns the reversed array.",
|
|
||||||
"<blockquote>var myArray = [1, 2, 3];<br>myArray.reverse();</blockquote>",
|
|
||||||
"<em>returns [3, 2, 1]</em>",
|
|
||||||
"Use <code>reverse</code> to reverse the <code>array</code> variable and assign it to <code>newArray</code>."
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"var array = [1,2,3,4,5,6,7];",
|
|
||||||
"var newArray = [];",
|
|
||||||
"",
|
|
||||||
"// Only change code below this line.",
|
|
||||||
"",
|
|
||||||
"newArray = array;"
|
|
||||||
],
|
|
||||||
"tail": [
|
|
||||||
"(function() {return newArray;})();"
|
|
||||||
],
|
|
||||||
"solutions": [
|
|
||||||
"var array = [1,2,3,4,5,6,7];\nvar newArray = [];\nnewArray = array.reverse();"
|
|
||||||
],
|
|
||||||
"tests": [
|
|
||||||
"assert.deepEqual(newArray, [7,6,5,4,3,2,1], 'message: You should reverse the array.');",
|
|
||||||
"assert(editor.getValue().match(/\\.reverse\\s*\\(\\)/gi), 'message: You should use the <code>reverse</code> method.');",
|
|
||||||
"assert(editor.getValue().match(/\\[1\\,2\\,3\\,4\\,5\\,6\\,7/gi), 'message: You should only be using <code>reverse</code> to modify <code>array</code>.');"
|
|
||||||
],
|
|
||||||
"type": "waypoint",
|
|
||||||
"challengeType": 1,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Invierte vectores con .reverse",
|
|
||||||
"description": [
|
|
||||||
"Puedes utilizar el método <code>reverse</code> para invertir los elementos en un vector.",
|
|
||||||
"<code>reverse</code> es otro método de vector que altera el vector mismo, y también devuelve el vector invertido.",
|
|
||||||
"<code>var miVector = [1, 2, 3];</code>",
|
|
||||||
"<code>miVector.reverse();</code>",
|
|
||||||
"<em>devuelve [3, 2, 1]</em>",
|
|
||||||
"Usa <code>reverse</code> para invertir la variable <code>array</code> y asignarla a <code>newArray</code>."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "cf1111c1c16feddfaeb3bdef",
|
|
||||||
"title": "Concatenate Arrays with .concat",
|
|
||||||
"description": [
|
|
||||||
"<code>concat</code> can be used to merge the contents of two or more arrays into one.",
|
|
||||||
"<code>concat</code> takes an array as an argument and returns a new array with the elements of this array concatenated onto the end.",
|
|
||||||
"Here are examples of <code>concat</code> being used to concatenate arrays:",
|
|
||||||
"Example 1: <code>otherArray</code> onto the end of <code>oldArray</code>:",
|
|
||||||
"<blockquote>newArray = oldArray.concat(otherArray);</blockquote>",
|
|
||||||
"Example 2: <code>newArray</code> with all the elements of <code>arr1</code>, <code>arr2</code>, and <code>arr3</code>:",
|
|
||||||
"<blockquote>newArray = arr1.concat(arr2, arr3);</blockquote>",
|
|
||||||
"Use <code>.concat()</code> to concatenate <code>concatMe</code> onto the end of <code>oldArray</code> and assign it to <code>newArray</code>."
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"var oldArray = [1,2,3];",
|
|
||||||
"var newArray = [];",
|
|
||||||
"",
|
|
||||||
"var concatMe = [4,5,6];",
|
|
||||||
"",
|
|
||||||
"// Only change code below this line.",
|
|
||||||
"",
|
|
||||||
"newArray = oldArray;"
|
|
||||||
],
|
|
||||||
"tail": [
|
|
||||||
"(function() {return newArray;})();"
|
|
||||||
],
|
|
||||||
"solutions": [
|
|
||||||
"var oldArray = [1,2,3];\nvar newArray = [];\nvar concatMe = [4,5,6];\nnewArray = oldArray.concat(concatMe);"
|
|
||||||
],
|
|
||||||
"tests": [
|
|
||||||
"assert.deepEqual(newArray, [1,2,3,4,5,6], 'message: You should concatenate the two arrays together.');",
|
|
||||||
"assert(editor.getValue().match(/\\.concat\\s*\\(/gi), 'message: You should be using the <code>concat</code> method to merge the two arrays.');",
|
|
||||||
"assert(editor.getValue().match(/\\[1\\,2\\,3\\]/gi) && editor.getValue().match(/\\[4\\,5\\,6\\]/gi), 'message: You should only be using <code>concat</code> to modify the arrays.');"
|
|
||||||
],
|
|
||||||
"type": "waypoint",
|
|
||||||
"challengeType": 1,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Concatena vectores con .concat",
|
|
||||||
"description": [
|
|
||||||
"<code>concat</code> se puede utilizar para combinar el contenido de dos vectores en uno solo.",
|
|
||||||
"<code>concat</code> recibe un vector como argumento y devuelve un nuevo vector con los elementos del vector que recibe concatenados al final.",
|
|
||||||
"He aquí un ejemplo de <code>concat</code> cuando se usa para concatenar <code>otroVector</code> al final de <code>vectorAntiguo</code>:",
|
|
||||||
"<code>vectorNuevo = vectorAntiguo.concat(otroVector);</code>",
|
|
||||||
"Usa <code>.concat ()</code> para concatenar <code>concatMe</code> al final de <code>oldArray</code> y asigna el vector resultante a <code>newArray</code>."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "cf1111c1c16feddfaeb4bdef",
|
|
||||||
"title": "Split Strings with .split",
|
|
||||||
"description": [
|
|
||||||
"You can use the <code>split</code> method to split a string into an array.",
|
|
||||||
"<code>split</code> uses the argument you pass in as a delimiter to determine which points the string should be split at.",
|
|
||||||
"Here is an example of <code>split</code> being used to split a string at every <code>s</code> character:",
|
|
||||||
"<code>var array = string.split('s');</code>",
|
|
||||||
"Use <code>split</code> to create an array of words from <code>string</code> and assign it to <code>array</code>."
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"var string = \"Split me into an array\";",
|
|
||||||
"var array = [];",
|
|
||||||
"",
|
|
||||||
"// Only change code below this line.",
|
|
||||||
"",
|
|
||||||
"array = string;"
|
|
||||||
],
|
|
||||||
"tail": [
|
|
||||||
"(function() {return array;})();"
|
|
||||||
],
|
|
||||||
"solutions": [
|
|
||||||
"var string = \"Split me into an array\";\nvar array = [];\narray = string.split(\" \");"
|
|
||||||
],
|
|
||||||
"tests": [
|
|
||||||
"assert(/\\.split\\(/gi, 'message: You should use the <code>split</code> method on the string.');",
|
|
||||||
"assert(typeof array === 'object' && array.length === 5, 'message: You should split the string by its spaces.');"
|
|
||||||
],
|
|
||||||
"type": "waypoint",
|
|
||||||
"challengeType": 1,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Divide cadenas con .split",
|
|
||||||
"description": [
|
|
||||||
"Puedes utilizar el método <code>split</code> para dividir una cadena en un vector.",
|
|
||||||
"<code>split</code> utiliza el argumento que recibe como delimitador para determinar en qué puntos debe dividir la cadena.",
|
|
||||||
"He aquí un ejemplo del uso de <code>split</code> para dividir una cadena en cada caracter <code>s</code>:",
|
|
||||||
"<code>var vector = string.split('s');</code>",
|
|
||||||
"Usa <code>split</code> para crear un vector con las palabras de una <code>cadena</code> y asígnalo a la variable <code>array</code>."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "cf1111c1c16feddfaeb5bdef",
|
|
||||||
"title": "Join Strings with .join",
|
|
||||||
"description": [
|
|
||||||
"We can use the <code>join</code> method to join each element of an array into a string separated by whatever delimiter you provide as an argument.",
|
|
||||||
"The following is an example of using <code>join</code> to join all of the elements of an array into a string with all the elements separated by word <code>and</code>:",
|
|
||||||
"<blockquote>var veggies = [\"Celery\", \"Radish\", \"Carrot\", \"Potato\"];<br>var salad = veggies.join(\" and \");<br>console.log(salad); // \"Celery and Radish and Carrot and Potato\" </blockquote>",
|
|
||||||
"Use the <code>join</code> method to create a string from <code>joinMe</code> with spaces in between each element and assign it to <code>joinedString</code>."
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"var joinMe = [\"Split\",\"me\",\"into\",\"an\",\"array\"];",
|
|
||||||
"var joinedString = '';",
|
|
||||||
"",
|
|
||||||
"// Only change code below this line.",
|
|
||||||
"",
|
|
||||||
"joinedString = joinMe;"
|
|
||||||
],
|
|
||||||
"tail": [
|
|
||||||
"(function() {return joinedString;})();"
|
|
||||||
],
|
|
||||||
"solutions": [
|
|
||||||
"var joinMe = [\"Split\",\"me\",\"into\",\"an\",\"array\"];\nvar joinedString = '';\njoinedString = joinMe.join(\" \");"
|
|
||||||
],
|
|
||||||
"tests": [
|
|
||||||
"assert(typeof joinedString === 'string' && joinedString === \"Split me into an array\", 'message: You should join the elements of the array with spaces.');",
|
|
||||||
"assert(/\\.join\\(/gi, 'message: You should use of the <code>join</code> method on the array.');"
|
|
||||||
],
|
|
||||||
"type": "waypoint",
|
|
||||||
"challengeType": 1,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Une cadenas con .join",
|
|
||||||
"description": [
|
|
||||||
"Podemos usar el método <code>join</code> para unir los elementos de un vector en una cadena, separándolos con el delimitador que proporciones como argumento.",
|
|
||||||
"El siguiente es un ejemplo del uso de <code>join</code> para unir todos los elementos de un vector en una cadena con todos los elementos separados entre si por palabra` Na`: ",
|
|
||||||
"<code>var uneme = [\"Na \", \"Na \", \"Na \", \"Na \", \"Batman!\"];</code>",
|
|
||||||
"<code>var cadenaUnida = uneme.join(\"Na \");</code>",
|
|
||||||
"<code>console.log(cadenaUnida);</code>",
|
|
||||||
"Usa el método <code>join</code> para crear una cadena a partir <code>joinMe</code> con espacios entre cada par de elementos y asignarla a <code>joinedString </code>."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
1522
challenges/01-responsive-web-design/applied-accessibility.json
Normal file
1522
challenges/01-responsive-web-design/applied-accessibility.json
Normal file
File diff suppressed because it is too large
Load Diff
3766
challenges/01-responsive-web-design/applied-visual-design.json
Normal file
3766
challenges/01-responsive-web-design/applied-visual-design.json
Normal file
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
2322
challenges/01-responsive-web-design/basic-html-and-html5.json
Normal file
2322
challenges/01-responsive-web-design/basic-html-and-html5.json
Normal file
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,108 @@
|
|||||||
|
{
|
||||||
|
"name": "Claim Your Responsive Web Design Certificate",
|
||||||
|
"order": 13,
|
||||||
|
"time": "5 minutes",
|
||||||
|
"challenges": [
|
||||||
|
{
|
||||||
|
"id": "587d78aa367417b2b2512aee",
|
||||||
|
"title": "Claim Your Responsive Web Design Certificate",
|
||||||
|
"description": [
|
||||||
|
[
|
||||||
|
"//i.imgur.com/k8btNUB.jpg",
|
||||||
|
"An image of our Responsive Web Design Certificate",
|
||||||
|
"This challenge will give you your verified Responsive Web Design Certificate. Before we issue your certificate, we must verify that you have completed all of our basic and intermediate algorithm scripting challenges, and all our basic, intermediate, and advanced front end development projects. You must also accept our Academic Honesty Pledge. Click the button below to start this process.",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"//i.imgur.com/uLPsUko.jpg",
|
||||||
|
"The definition of plagiarism: Plagiarism (noun) - copying someone else’s work and presenting it as your own without crediting them",
|
||||||
|
"By clicking below, you pledge that all of your submitted code A) is code you or your pair personally wrote, or B) comes from open source libraries like jQuery, or C) has been clearly attributed to its original authors. You also give us permission to audit your challenge solutions and revoke your certificate if we discover evidence of plagiarism.",
|
||||||
|
"#"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"//i.imgur.com/UedoV2G.jpg",
|
||||||
|
"An image of the text \"Front End Development Certificate requirements\"",
|
||||||
|
"Let's confirm that you have completed all of our basic and intermediate algorithm scripting challenges, and all our basic, intermediate, and advanced front end development projects. Click the button below to verify this.",
|
||||||
|
"#"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"//i.imgur.com/Q5Za9U6.jpg",
|
||||||
|
"An image of the word \"Congratulations\"",
|
||||||
|
"Congratulations! We've added your Responsive Web Design Certificate to your portfolio page. Unless you choose to hide your solutions, this certificate will remain publicly visible and verifiable.",
|
||||||
|
""
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
{
|
||||||
|
"properties": [
|
||||||
|
"isHonest",
|
||||||
|
"isFrontEndCert"
|
||||||
|
],
|
||||||
|
"apis": [
|
||||||
|
"/certificate/honest",
|
||||||
|
"/certificate/verify/front-end"
|
||||||
|
],
|
||||||
|
"stepIndex": [
|
||||||
|
1,
|
||||||
|
2
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"id": "587d78af367417b2b2512b03",
|
||||||
|
"title": "Build a Survey Form"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "bd7158d8c442eddfaeb5bd18",
|
||||||
|
"title": "Build a Tribute Page"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d78af367417b2b2512b04",
|
||||||
|
"title": "Build a Product Landing Page"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d78b0367417b2b2512b05",
|
||||||
|
"title": "Build a Technical Documentation Page"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "bd7158d8c242eddfaeb5bd13",
|
||||||
|
"title": "Build a Personal Portfolio Webpage"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"type": "Waypoint",
|
||||||
|
"challengeType": 7,
|
||||||
|
"translations": {
|
||||||
|
"es": {
|
||||||
|
"title": "Reclama tu certificado de Desarrollo de interfaces",
|
||||||
|
"description": [
|
||||||
|
[
|
||||||
|
"//i.imgur.com/k8btNUB.jpg",
|
||||||
|
"Una imagen que muestra nuestro certificado de Desarrollo de interfaces",
|
||||||
|
"Este desafío te otorga tu certificado autenticado de Desarrollo de interfaces. Antes de que podamos emitir tu certificado, debemos verificar que has completado todos los desafíos básicos e intermedios de diseño de algoritmos, y todos los proyectos básicos e intermedios de desarrollo de interfaces. También debes aceptar nuestro Juramento de honestidad académica. Pulsa el botón siguiente para iniciar este proceso.",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"//i.imgur.com/HArFfMN.jpg",
|
||||||
|
"Plagio (nombre): acción y efecto de plagiar. Plagiar (verbo) - copiar en lo sustancial obras ajenas, dándolas como propias.",
|
||||||
|
"Al pulsar el botón siguiente, juras que todo el código en tus soluciones a los desafíos A) es código que tú o tu compañero escribieron personalmente, o B) proviene de librerías de código abierto como jQuery, o C) ha sido claramente atribuido a sus autores originales. También nos otorgas el permiso para auditar tus soluciones a los desafíos y revocar tu certificado si encontramos evidencia de plagio.",
|
||||||
|
"#"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"//i.imgur.com/14F2Van.jpg",
|
||||||
|
"Una imagen del texto \"Front End Development Certificate requirements\"",
|
||||||
|
"Confirmemos que has completado todos nuestros desafíos básicos e intermedios de diseño de algoritmos, y todos nuestros proyectos básicos e intermedios de desarrollo de interfaces. Pulsa el botón siguiente para hacer la verificación.",
|
||||||
|
"#"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"//i.imgur.com/16SIhHO.jpg",
|
||||||
|
"Una imagen de la palabra \"Congratulations\"",
|
||||||
|
"¡Felicitaciones! Hemos agregado tu certificado de Desarrollo de interfaces a tu portafolio. A menos que elijas no mostrar tus soluciones, este certificado será públicamente visible y verificable.",
|
||||||
|
""
|
||||||
|
]
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
1589
challenges/01-responsive-web-design/css-flexbox.json
Normal file
1589
challenges/01-responsive-web-design/css-flexbox.json
Normal file
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,346 @@
|
|||||||
|
{
|
||||||
|
"name": "Applied Responsive Web Design Projects",
|
||||||
|
"order": 6,
|
||||||
|
"time": "150 hours",
|
||||||
|
"helpRoom": "Help",
|
||||||
|
"challenges": [
|
||||||
|
{
|
||||||
|
"id": "587d78af367417b2b2512b02",
|
||||||
|
"title": "Get Set for our Responsive Web Design Projects",
|
||||||
|
"description": [
|
||||||
|
[
|
||||||
|
"//i.imgur.com/OAD6SJz.png",
|
||||||
|
"An image of a Simon game, one our front end projects.",
|
||||||
|
"Our front end development projects will give you a chance to apply the front end skills you've developed up to this point. We'll use a popular browser-based code editor called CodePen.",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"//i.imgur.com/WBetuBa.jpg",
|
||||||
|
"A programmer punching through his laptop screen in frustration.",
|
||||||
|
"These projects are hard. It takes most campers several days to build each project. You will get frustrated. But don't quit. This gets easier with practice.",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"//i.imgur.com/p2TpOQd.jpg",
|
||||||
|
"A cute dog jumping over a hurdle and winking and pointing his paw at you.",
|
||||||
|
"When you get stuck, just use the Read-Search-Ask methodology. Don't worry - you've got this.",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"//i.imgur.com/G1saeDt.gif",
|
||||||
|
"A gif showing how to create a Codepen account.",
|
||||||
|
"For our front end project challenges, we'll use a popular browser-based code editor called CodePen. Click the \"Open link in new tab\" button below to open CodePen's signup page. Fill out the form and click \"Sign up\". <br><div class=\"small\">Note: If you already have a CodePen account, you can skip this step by clicking \"Open link in new tab\", closing the new tab that opens, then clicking \"go to my next step\". We removed our \"skip step\" button because many people would just click it repeatedly without doing these important steps.</div>",
|
||||||
|
"https://codepen.io/signup/free"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"//i.imgur.com/U4y9RJ1.gif",
|
||||||
|
"A gif showing that you can type \"hello world\" will output \"hello world\" in the preview window. You can also drag windows to resize them, and change their orientation.",
|
||||||
|
"In the HTML box, create an <code>h1</code> element with the text \"Hello World\". You can drag the frames around to resize them. You can also click the \"Change View\" button and change the orientation of the frames.",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"//i.imgur.com/G9KFQDL.gif",
|
||||||
|
"A gif showing the process of adding Bootstrap to your pen.",
|
||||||
|
"Click the gear in the upper left hand corner of the CSS box, then scroll down to \"Quick add\" and choose Bootstrap. Now give your <code>h1</code> element the class of <code>text-primary</code> to change its color and prove that Bootstrap is now available.",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"//i.imgur.com/m0pWik2.gif",
|
||||||
|
"A gif showing the process of turning off auto update preview",
|
||||||
|
"When using CodePen and Ajax, it is a good idea to turn off automatic preview updating so API calls are not made too often. Too many API calls can sometimes lead to temporary blockages, and may require waiting periods before they can be used again. <br> <div class=\"small\"> To disable automatic preview updating click the \"Settings\" button at the top of the page, then click the \"Behavior\" tab. At the bottom of the page, un-check \"AUTO UPDATE PREVIEW\". Now press \"Run\" at the top of the page to update the preview, and click \"Save\".</div>",
|
||||||
|
""
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [],
|
||||||
|
"type": "Waypoint",
|
||||||
|
"isRequired": false,
|
||||||
|
"challengeType": 7,
|
||||||
|
"translations": {
|
||||||
|
"es": {
|
||||||
|
"title": "Prepárate para los Proyectos de Desarrollo de Interfaces",
|
||||||
|
"description": [
|
||||||
|
[
|
||||||
|
"//i.imgur.com/OAD6SJz.png",
|
||||||
|
"Una imagen del juego Simón, uno de nuestros proyectos de interfaz.",
|
||||||
|
"Nuestros proyectos de desarrollo de interfaces te darán oportunidad de aplicar las habilidades con interfaces que has desarrollado hasta este momento. Usaremos un editor de código basado en el navegador llamado CodePen.",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"//i.imgur.com/WBetuBa.jpg",
|
||||||
|
"Un programador frustado golpeando la pantalla de su computador.",
|
||||||
|
"Nuestros desafíos sobre algoritmos son difíciles. Algunos pueden requerir muchas horas para resolverse. Podrás frustarte, pero no te rindas. Se vuelve fácil con práctica.",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"//i.imgur.com/p2TpOQd.jpg",
|
||||||
|
"Un tierno perro que salta sobre un obstáculo, pica el ojo y te apunta con su pata.",
|
||||||
|
"Cuando te atasques, usa la metodología Leer-Buscar-Preguntar. No te preocupes - lo tienes resuelto.",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"//i.imgur.com/G1saeDt.gif",
|
||||||
|
"Un gif que muestra cómo crear una cuenta en Codepen.",
|
||||||
|
"Para nuestros desafíos de interfaces, usaremos un editor de código basado en el navegador que es muy famoso llamado Codepen. Pulsa en el botón de abajo \"Open link in new tab\" para abrir la página de registro de CodePen. Rellena el formulario y pulsa \"Sign up\". <br><div class=\"small\">Nota: Si ya tienes una cuenta de CodePen, puedes omitir este paso pulsando \"Open link in new tab\", cierra la nueva pestaña que se abre, entonces pulsa \"go to my next step\". Eliminamos nuestro botón \"skip step\" porque mucha gente solamente pulsa el botón sin realizar estos importantes pasos.</div>",
|
||||||
|
"https://codepen.io/signup/free"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"//i.imgur.com/U4y9RJ1.gif",
|
||||||
|
"Un gif que muestra que puedes escribir \"hello world\" en el editor, lo cual escribirá \"hello world\" en la ventana de vista previa. También puedes mover las ventanas para cambiar su tamaño, y cambiar su orientación.",
|
||||||
|
"En la ventana de HTML, crea un elemento h1 con el texto \"Hola mundo\". Puedes arrastrar los bordes de las ventanas para cambiar su tamaño. También puedes pulsar el botón de \"Change View\" para cambiar la orientación de las ventanas.",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"//i.imgur.com/G9KFQDL.gif",
|
||||||
|
"Un gif que muestra el proceso de agregar Bootstrap a tu proyecto.",
|
||||||
|
"Pulsa el engrane en la esquina superior izquierda de la ventana de CSS, luego ve hacia abajo hasta donde dice \"Quick add\" y elige Bootstrap. Ahora dale a tu elemento h1 la clase \"text-primary\" para cambiar su color y verificar que Bootstrap está activado.",
|
||||||
|
""
|
||||||
|
]
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"title": "Prepare-se para nossos Projetos de Desenvolvimento Front End",
|
||||||
|
"description": [
|
||||||
|
[
|
||||||
|
"//i.imgur.com/OAD6SJz.png",
|
||||||
|
"A imagem de um jogo Simon, um de nossos projetos front end.",
|
||||||
|
"Nossos projetos de Desenvolvimento front end vão dar a você a chance de aplicar as habilidades front end que você desenvolveu até esse ponto. Nós vamos usar um editor popular chamado CodePen que funciona direto no navegador.",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"//i.imgur.com/WBetuBa.jpg",
|
||||||
|
"Um programador atravessando a tela de seu laptop com um soco em frustração.",
|
||||||
|
"Esses projetos são difíceis. A maioria dos campistas leva alguns dias para contruir cada projeto. Você vai ficar frustrado. Mas não desista. Isso fica mais fácil com a prática.",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"//i.imgur.com/p2TpOQd.jpg",
|
||||||
|
"Um cachorro fofo pulando sobre um obstáculo, piscando e apontando sua pata a você.",
|
||||||
|
"Quando ficar travado, use a metodologia Ler-Buscar-Perguntar. Não se preocupe - você consegue.",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"//i.imgur.com/G1saeDt.gif",
|
||||||
|
"Um gif mostrando com criar uma conta CodePen.",
|
||||||
|
"Para nossos projetos front end, usaremos um popular editor de código baseado em navegador chamado CodePen. Clique no botão \"Open link in new tab\" abaixo para abrir a página de resgistro do CodePen. Preencha o formulário e clique em \"Sign up\". <br><div class=\"small\">Nota: Se você já tem uma conta CodePen, você pode pular esse passo clicando em \"Open link in new tab\", fechando a nova aba que abrir, e clicando em \"go to my next step\". Nós removemos nosso botão \"skip step\" pois muitas pessoas iam simplesmente clicar nele repetidamente sem passar por esses passos importantes.</div>",
|
||||||
|
"https://codepen.io/signup/free"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"//i.imgur.com/U4y9RJ1.gif",
|
||||||
|
"Um gif mostrando que você pode digitar \"hello world\" e será mostrado \"hello world\" na janela de visualização. Você também pode arrastar janelas para redimensioná-las e mudar a orientação das mesmas.",
|
||||||
|
"Na caixa do HTML, crie um elemento <code>h1</code> com o texto \"Hello World\". Você pode arrastar as bordas para redimensioná-las. Você pode também clicar no botão \"Change View\" e mudar a orientação das janelas.",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"//i.imgur.com/G9KFQDL.gif",
|
||||||
|
"Um gif mostrando como adicionar o Bootstrap à sua pen.",
|
||||||
|
"Clique na engrenagem no canto superior esquerdo da caixa do CSS, então role para baixo até \"Quick add\" e escolha Bootstrap. Agora adicione ao seu elemento <code>h1</code> a classe <code>text-primary</code> para mudar sua cor e provar que o Bootstrap agora está disponível.",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"//i.imgur.com/m0pWik2.gif",
|
||||||
|
"Um gif mostrando o processo de desativar o update automático da janela de visualização",
|
||||||
|
"Ao usar CodePen e Ajax, é uma boa idea desativar o update automático da janela de visualização para que as chamadas para as APIs não sejam feitas a todo momento. Muitas chamadas para API pode levar à bloqueios temporários e podem requerer períodos de esperar para que possam ser usadas novamente. <br> <div class=\"small\"> Para desativar o update automático da janela de visualização clique no botão \"Settings\" no topo da página, então clique na aba \"Behavior\". No final da página, desmarque \"AUTO UPDATE PREVIEW\". Agora clique em \"Run\" no topo da página para atualizar a janela de visualização e clique \"Save\".</div>",
|
||||||
|
""
|
||||||
|
]
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"title": "Приготовьтесь к разработке фронтенд проектов",
|
||||||
|
"description": [
|
||||||
|
[
|
||||||
|
"//i.imgur.com/OAD6SJz.png",
|
||||||
|
"Игра Саймона - один из фронтенд проектов.",
|
||||||
|
"Наши фронтенд проекты дадут вам шанс применить полученные к этому моменту знания по фронтенд разработке. Мы будем использовать популярный браузерный редактор кода - CodePen.",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"//i.imgur.com/WBetuBa.jpg",
|
||||||
|
"Программист от отчаяния кулаком пробивает экран своего ноутбука.",
|
||||||
|
"Это трудные проекты. Разработка каждого занимает у большинства кэмперов несколько дней. У вас может возникнуть чувство отчаяния. Несмотря на это не сдавайтесь. С практикой этот процесс станет проще.",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"//i.imgur.com/p2TpOQd.jpg",
|
||||||
|
"Милый пес, прыгающий через препятствие, указывает на вас лапой и подмигивает.",
|
||||||
|
"Если что-то не получается, воспользуйтесь Read-Search-Ask. Не волнуйтесь - вы сможете это сделать.",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"//i.imgur.com/G1saeDt.gif",
|
||||||
|
"Гифка показывающая как зарегистрироваться на CodePen.",
|
||||||
|
"Для заданий по фронтенд разработке, мы будем использовать популярный браузерный редактор кода под названием CodePen. Откройте страницу регистрации на сайте CodePen, нажав на расположенную чуть ниже кнопку \"Open link in new tab\". Заполните форму и нажмите \"Sign up\". <br><div class=\"small\">Замечание: Если у вас уже есть аккаунт CodePen, то этот шаг можно пропустить: нажмите на кнопку \"Open link in new tab\", закройте появившуюся вкладку и затем кликните \"go to my next step\". Мы убрали кнопку \"skip step\", ввиду того что большинство людей просто нажимали бы ее несколько раз подряд и пропускали бы эти важные инструкции.</div>",
|
||||||
|
"https://codepen.io/signup/free"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"//i.imgur.com/U4y9RJ1.gif",
|
||||||
|
"Гифка показывающая набор в редакторе заголовка с текстом \"hello world\", который затем отображается в окошке предпросмотра. А также указывающая как изменить размер окон редактора или поменять их расположение.",
|
||||||
|
"В окошке HTML создайте элемент h1 с текстом \"Hello World\". Ухватив края окон можно изменить их размер. А нажав на кнопку \"Change View\" поменять их расположение.",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"//i.imgur.com/G9KFQDL.gif",
|
||||||
|
"Гифка показывающая как в CodePen добавить к проекту Bootstrap.",
|
||||||
|
"Нажмите на звездочку в левом верхнем углу окошка CSS, найдите внизу поле \"Quick add\" и выберите в нем Bootstrap. Добавьте к элементу h1 класс \"text-primary\", чтобы изменить его цвет и удостовериться, что Bootstrap подключен.",
|
||||||
|
""
|
||||||
|
]
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "bd7158d8c442eddfaeb5bd18",
|
||||||
|
"title": "Build a Tribute Page",
|
||||||
|
"description": [
|
||||||
|
"Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.",
|
||||||
|
"Here's a <a href='http://codepen.io/freeCodeCamp/full/zNqgVx' target='_blank'>working example</a>. Try not to look at its code.",
|
||||||
|
"You can build your project by forking <a href='http://codepen.io/FCC_test_suites/pen/JbgXab' target='_blank'>this CodePen pen</a>. Or you can use this CDN link to run the tests in any environment you like: <code>https://gitcdn.link/repo/no-stack-dub-sack/testable-projects-fcc/master/build/bundle.js</code>",
|
||||||
|
"Once you're done, submit below the URL to your working project with all its tests passing.",
|
||||||
|
"Remember to use the <a href='https://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask method if you get stuck."
|
||||||
|
],
|
||||||
|
"releasedOn": "January 1, 2016",
|
||||||
|
"challengeSeed": [
|
||||||
|
"Nk0DzQi"
|
||||||
|
],
|
||||||
|
"tests": [],
|
||||||
|
"type": "zipline",
|
||||||
|
"isRequired": true,
|
||||||
|
"challengeType": 3,
|
||||||
|
"translations": {
|
||||||
|
"es": {
|
||||||
|
"title": "Construye una página Tributo",
|
||||||
|
"description": []
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"title": "Construa uma Página Tributo",
|
||||||
|
"description": []
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"title": "Создайте страницу посвященную тому что вас вдохновляет",
|
||||||
|
"description": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d78af367417b2b2512b03",
|
||||||
|
"title": "Build a Survey Form",
|
||||||
|
"description": [
|
||||||
|
"Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.",
|
||||||
|
"Here's a <a href='http://codepen.io/freeCodeCamp/full/VPaoNP' target='_blank'>working example</a>. Try not to look at its code.",
|
||||||
|
"You can build your project by forking <a href='http://codepen.io/FCC_test_suites/pen/JbgXab' target='_blank'>this CodePen pen</a>. Or you can use this CDN link to run the tests in any environment you like: <code>https://gitcdn.link/repo/no-stack-dub-sack/testable-projects-fcc/master/build/bundle.js</code>",
|
||||||
|
"Once you're done, submit below the URL to your working project with all its tests passing.",
|
||||||
|
"Remember to use the <a href='https://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask method if you get stuck."
|
||||||
|
],
|
||||||
|
"releasedOn": "January 15, 2017",
|
||||||
|
"challengeSeed": [
|
||||||
|
"A7Pn5zw"
|
||||||
|
],
|
||||||
|
"tests": [],
|
||||||
|
"type": "zipline",
|
||||||
|
"isRequired": true,
|
||||||
|
"challengeType": 3,
|
||||||
|
"translations": {
|
||||||
|
"es": {
|
||||||
|
"title": "",
|
||||||
|
"description": []
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"title": "",
|
||||||
|
"description": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d78af367417b2b2512b04",
|
||||||
|
"title": "Build a Product Landing Page",
|
||||||
|
"description": [
|
||||||
|
"Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.",
|
||||||
|
"Here's a <a href='http://codepen.io/freeCodeCamp/pen/RKRbwL' target='_blank'>working example</a>. Try not to look at its code.",
|
||||||
|
"You can build your project by forking <a href='http://codepen.io/FCC_test_suites/pen/JbgXab' target='_blank'>this CodePen pen</a>. Or you can use this CDN link to run the tests in any environment you like: <code>https://gitcdn.link/repo/no-stack-dub-sack/testable-projects-fcc/master/build/bundle.js</code>",
|
||||||
|
"Once you're done, submit below the URL to your working project with all its tests passing.",
|
||||||
|
"Remember to use the <a href='https://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask method if you get stuck."
|
||||||
|
],
|
||||||
|
"releasedOn": "January 15, 2017",
|
||||||
|
"challengeSeed": [
|
||||||
|
"ExCJjAT"
|
||||||
|
],
|
||||||
|
"tests": [],
|
||||||
|
"type": "zipline",
|
||||||
|
"isRequired": true,
|
||||||
|
"challengeType": 3,
|
||||||
|
"translations": {
|
||||||
|
"es": {
|
||||||
|
"title": "",
|
||||||
|
"description": []
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"title": "",
|
||||||
|
"description": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d78b0367417b2b2512b05",
|
||||||
|
"title": "Build a Technical Documentation Page",
|
||||||
|
"description": [
|
||||||
|
"Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.",
|
||||||
|
"Here's a <a href='http://codepen.io/freeCodeCamp/full/NdrKKL' target='_blank'>working example</a>. Try not to look at its code.",
|
||||||
|
"You can build your project by forking <a href='http://codepen.io/FCC_test_suites/pen/JbgXab' target='_blank'>this CodePen pen</a>. Or you can use this CDN link to run the tests in any environment you like: <code>https://gitcdn.link/repo/no-stack-dub-sack/testable-projects-fcc/master/build/bundle.js</code>",
|
||||||
|
"Once you're done, submit below the URL to your working project with all its tests passing.",
|
||||||
|
"Remember to use the <a href='https://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask method if you get stuck."
|
||||||
|
],
|
||||||
|
"releasedOn": "January 15, 2017",
|
||||||
|
"challengeSeed": [
|
||||||
|
"cDIfODs"
|
||||||
|
],
|
||||||
|
"tests": [],
|
||||||
|
"type": "zipline",
|
||||||
|
"isRequired": true,
|
||||||
|
"challengeType": 3,
|
||||||
|
"translations": {
|
||||||
|
"es": {
|
||||||
|
"title": "",
|
||||||
|
"description": []
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"title": "",
|
||||||
|
"description": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d78b0367417b2b2512b06",
|
||||||
|
"title": "Build a Personal Portfolio Webpage",
|
||||||
|
"description": [
|
||||||
|
"Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.",
|
||||||
|
"Here's a <a href='http://codepen.io/freeCodeCamp/full/zNBOYG' target='_blank'>working example</a>. Try not to look at its code.",
|
||||||
|
"You can build your project by forking <a href='http://codepen.io/FCC_test_suites/pen/JbgXab' target='_blank'>this CodePen pen</a>. Or you can use this CDN link to run the tests in any environment you like: <code>https://gitcdn.link/repo/no-stack-dub-sack/testable-projects-fcc/master/build/bundle.js</code>",
|
||||||
|
"Once you're done, submit below the URL to your working project with all its tests passing.",
|
||||||
|
"Remember to use the <a href='https://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask method if you get stuck."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"Uw6sYKY"
|
||||||
|
],
|
||||||
|
"tests": [],
|
||||||
|
"type": "zipline",
|
||||||
|
"isRequired": true,
|
||||||
|
"challengeType": 3,
|
||||||
|
"translations": {
|
||||||
|
"es": {
|
||||||
|
"title": "Construye una página web para tu portafolio",
|
||||||
|
"description": []
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"title": "Construa uma Página de Portfólio Pessoal",
|
||||||
|
"description": [
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"title": "Создайте сайт-портфолио",
|
||||||
|
"description": [
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
243
challenges/01-responsive-web-design/responsive-web-design.json
Normal file
243
challenges/01-responsive-web-design/responsive-web-design.json
Normal file
@ -0,0 +1,243 @@
|
|||||||
|
{
|
||||||
|
"name": "Responsive Web Design",
|
||||||
|
"order": 4,
|
||||||
|
"time": "5 hours",
|
||||||
|
"helpRoom": "Help",
|
||||||
|
"challenges": [
|
||||||
|
{
|
||||||
|
"id": "587d78b0367417b2b2512b07",
|
||||||
|
"title": "Introduction to the Responsive Web Design Challenges",
|
||||||
|
"description": [
|
||||||
|
[
|
||||||
|
"",
|
||||||
|
"",
|
||||||
|
"Today, there are many types of devices that can access the web. They range from large desktop computers to small mobile phones. These devices have different screen sizes, resolutions, and processing power.",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"",
|
||||||
|
"",
|
||||||
|
"Responsive Web Design is an approach to designing web content that responds to the constraints of different devices. The page structure and CSS rules should be flexible to accommodate these differences.",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"",
|
||||||
|
"",
|
||||||
|
"In general, design the page's CSS to your target audience. If you expect most of your traffic to be from mobile users, take a 'mobile-first' approach. Then add conditional rules for larger screen sizes. If your visitors are desktop users, then design for larger screens with conditional rules for smaller sizes.",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"",
|
||||||
|
"",
|
||||||
|
"CSS gives you the tools to write different style rules, then apply them depending on the device displaying the page. This section will cover the basic ways to use CSS for Responsive Web Design.",
|
||||||
|
""
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"releasedOn": "",
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [],
|
||||||
|
"type": "Waypoint",
|
||||||
|
"challengeType": 7,
|
||||||
|
"isRequired": false,
|
||||||
|
"titleEs": "",
|
||||||
|
"descriptionEs": [
|
||||||
|
[]
|
||||||
|
],
|
||||||
|
"titleFr": "",
|
||||||
|
"descriptionFr": [
|
||||||
|
[]
|
||||||
|
],
|
||||||
|
"titleDe": "",
|
||||||
|
"descriptionDe": [
|
||||||
|
[]
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d78b0367417b2b2512b08",
|
||||||
|
"title": "Create a Media Query",
|
||||||
|
"description": [
|
||||||
|
"Media Queries are a new technique introduced in CSS3 that change the presentation of content based on different viewport sizes. The viewport is a user's visible area of a web page, and is different depending on the device used to access the site.",
|
||||||
|
"Media Queries consist of a media type, and if that media type matches the type of device the document is displayed on, the styles are applied. You can have as many selectors and styles inside your media query as you want.",
|
||||||
|
"Here's an example of a media query that returns the content when the device's width is smaller than 100px:",
|
||||||
|
"<code>@media (max-width: 100px) { /* CSS Rules */ }</code>",
|
||||||
|
"Remember, the CSS inside the media query is applied only if the media type matches that of the device being used.",
|
||||||
|
"<h4>Instructions</h4>",
|
||||||
|
"Add a media query, so that the <code>p</code> tag has a <code>font-size</code> of 10px when the device's height is smaller than 800px."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"<style>",
|
||||||
|
" ",
|
||||||
|
"</style>",
|
||||||
|
"",
|
||||||
|
"<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.</p>"
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert($('p').css('font-size') == '10px', 'message: Your <code>p</code> tag should have the <code>font-size</code> of 10px when the device <code>height</code> is smaller than 800px.');",
|
||||||
|
"assert(code.match(/@media \\(max-height:\\s*?800px\\)/g), 'message: Declare an <code>@media</code> query for devices with <code>height</code> less than 800px.');"
|
||||||
|
],
|
||||||
|
"type": "waypoint",
|
||||||
|
"solution": [],
|
||||||
|
"hints": [],
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d78b1367417b2b2512b09",
|
||||||
|
"title": "Make an Image Responsive",
|
||||||
|
"description": [
|
||||||
|
"Making images responsive with CSS is actually very simple. Instead of applying an absolute width to an element:",
|
||||||
|
"<code>img { width: 720px; }</code>",
|
||||||
|
"You can use:",
|
||||||
|
"<blockquote>img {<br> max-width: 100%;<br> display: block;<br> height: auto;<br>}</blockquote>",
|
||||||
|
"The <code>max-width</code> property of 100% scales the image to fit the width of its container, but the image won't stretch wider than its original width. Setting the <code>display</code> property to block changes the image from an inline element (its default), to a block element on its own line. The <code>height</code> property of auto keeps the original aspect ratio of the image.",
|
||||||
|
"<h4>Instructions</h4>",
|
||||||
|
"Add style rules for the <code>img</code> tag to make it responsive to the size of its container. It should display as a block-level element, it should fit the full width of its container without stretching, and it should keep its original aspect ratio."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"<style>",
|
||||||
|
" ",
|
||||||
|
"</style>",
|
||||||
|
"",
|
||||||
|
"<img src=\"https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg\" alt=\"Free Code Camp stickers set\">"
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert(code.match(/max-width:\\s*?100%;/g), 'message: Your <code>img</code> tag should have a <code>max-width</code> set to 100%.');",
|
||||||
|
"assert($('img').css('display') == 'block', 'message: Your <code>img</code> tag should have a <code>display</code> set to block.');",
|
||||||
|
"assert(code.match(/height:\\s*?auto;/g), 'message: Your <code>img</code> tag should have a <code>height</code> set to auto.');"
|
||||||
|
],
|
||||||
|
"type": "waypoint",
|
||||||
|
"challengeType": 0,
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d78b1367417b2b2512b0a",
|
||||||
|
"title": "Use a Retina Image for Higher Resolution Displays",
|
||||||
|
"description": [
|
||||||
|
"The simplest way to make your images appear \"retina\" (and optimize them for retina displays) is to define their <code>width</code> and <code>height</code> values as only half of what the original file is.",
|
||||||
|
"Here is an example of an image that is only using half of the original height and width:",
|
||||||
|
"<blockquote><style><br> img { height: 250px; width: 250px; }<br></style><br><img src="coolPic500x500" alt="A most excellent picture"></blockquote>",
|
||||||
|
"<h4>Instructions</h4>",
|
||||||
|
"Set the <code>width</code> and <code>height</code> of the <code>img</code> tag to half of their original values. In this case, both the original <code>height</code> and the original <code>width</code> are 200px."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"<style>",
|
||||||
|
" ",
|
||||||
|
"</style>",
|
||||||
|
"",
|
||||||
|
"<img src=\"https://s3.amazonaws.com/freecodecamp/FCCStickers-CamperBot200x200.jpg\" alt=\"Free Code Camp sticker that says 'Because CamperBot Cares'\">"
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert($('img').css('width') == '100px', 'message: Your <code>img</code> tag should have a <code>width</code> of 100 pixels.');",
|
||||||
|
"assert($('img').css('height') == '100px', 'message: Your <code>img</code> tag should have a <code>height</code> of 100 pixels.');"
|
||||||
|
],
|
||||||
|
"type": "waypoint",
|
||||||
|
"challengeType": 0,
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d78b1367417b2b2512b0c",
|
||||||
|
"title": "Make Typography Responsive",
|
||||||
|
"description": [
|
||||||
|
"Instead of using <code>em</code> or <code>px</code> to size text, you can use viewport units for responsive typography. Viewport units, like percentages, are relative units, but they are based off different items. Viewport units are relative to the viewport dimensions (width or height) of a device, and percentages are relative to the size of the parent container element.",
|
||||||
|
"The four different viewport units are:",
|
||||||
|
"<ul>",
|
||||||
|
"<li><code>vw: 10vw</code> would be 10% of the viewport's width.</li>",
|
||||||
|
"<li><code>vh: 3vh</code> would be 3% of the viewport's height.</li>",
|
||||||
|
"<li><code>vmin: 70vmin</code> would be 70% of the viewport's smaller dimension (height vs. width).</li>",
|
||||||
|
"<li><code>vmax: 100vmax</code> would be 100% of the viewport's bigger dimension (height vs. width).</li>",
|
||||||
|
"</ul>",
|
||||||
|
"<h4>Instructions</h4>",
|
||||||
|
"Set the <code>width</code> of the <code>h2</code> tag to 80% of the viewport's width and the <code>width</code> of the paragraph as 75% of the viewport's smaller dimension."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"<style>",
|
||||||
|
" ",
|
||||||
|
"</style>",
|
||||||
|
"",
|
||||||
|
"<h2>Importantus Ipsum</h2>",
|
||||||
|
"<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.</p>"
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert(code.match(/h2\\s*?{\\s*?width:\\s*?80vw;\\s*?}/g), 'message: Your <code>h2</code> tag should have a <code>width</code> of 80vw.');",
|
||||||
|
"assert(code.match(/p\\s*?{\\s*?width:\\s*?75vmin;\\s*?}/g), 'message: Your <code>p</code> tag should have a <code>width</code> of 75vmin.');"
|
||||||
|
],
|
||||||
|
"type": "waypoint",
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -1,23 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "D3",
|
|
||||||
"order": 16,
|
|
||||||
"isComingSoon": true,
|
|
||||||
"time": "5 hours",
|
|
||||||
"helpRoom": "HelpDataViz",
|
|
||||||
"challenges": [
|
|
||||||
{
|
|
||||||
"id": "bd7158d8c423ede2aab5bdee",
|
|
||||||
"title": "Learn D3 Challenges",
|
|
||||||
"description": [],
|
|
||||||
"challengeSeed": [],
|
|
||||||
"tests": [],
|
|
||||||
"type": "waypoint",
|
|
||||||
"challengeType": 3,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Desafios para aprender D3"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@ -1,157 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "Claim Your Data Visualization Certificate",
|
|
||||||
"order": 18,
|
|
||||||
"time": "5 minutes",
|
|
||||||
"challenges": [
|
|
||||||
{
|
|
||||||
"id": "561add10cb82ac38a17513b3",
|
|
||||||
"title": "Claim Your Data Visualization Certificate",
|
|
||||||
"description": [
|
|
||||||
[
|
|
||||||
"//i.imgur.com/Et3iD74.jpg",
|
|
||||||
"An image of our Data Visualization Certificate",
|
|
||||||
"This challenge will give you your verified Data Visualization Certificate. Before we issue your certificate, we must verify that you have completed all of our React and D3.js projects. You must also accept our Academic Honesty Pledge. Click the button below to start this process.",
|
|
||||||
""
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/woACUFX.png",
|
|
||||||
"The definition of plagiarism: Plagiarism (noun) - copying someone else’s work and presenting it as your own without crediting them",
|
|
||||||
"By clicking below, you pledge that all of your submitted code A) is code you or your pair personally wrote, or B) comes from open source libraries like jQuery, or C) has been clearly attributed to its original authors. You also give us permission to audit your challenge solutions and revoke your certificate if we discover evidence of plagiarism.",
|
|
||||||
"#"
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/nTuA3rZ.png",
|
|
||||||
"An image of the text \"Data Visualization Certificate requirements\"",
|
|
||||||
"Let's confirm that you have completed our React and D3.js projects. Click the button below to verify this.",
|
|
||||||
"#"
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/3Is4oV0.png",
|
|
||||||
"An image of the word \"Congratulations!\"",
|
|
||||||
"Congratulations! We've added your Data Visualization Certificate to your portfolio page. Unless you choose to hide your solutions, this certificate will remain publicly visible and verifiable.",
|
|
||||||
""
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
{
|
|
||||||
"properties": [
|
|
||||||
"isHonest",
|
|
||||||
"isDataVisualizationCert"
|
|
||||||
],
|
|
||||||
"apis": [
|
|
||||||
"/certificate/honest",
|
|
||||||
"/certificate/verify/data-visualization"
|
|
||||||
],
|
|
||||||
"stepIndex": [
|
|
||||||
1,
|
|
||||||
2
|
|
||||||
]
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"tests": [
|
|
||||||
{
|
|
||||||
"id": "bd7157d8c242eddfaeb5bd13",
|
|
||||||
"title": "Build a Markdown Previewer"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "bd7156d8c242eddfaeb5bd13",
|
|
||||||
"title": "Build a Camper Leaderboard"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "bd7155d8c242eddfaeb5bd13",
|
|
||||||
"title": "Build a Recipe Box"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "bd7154d8c242eddfaeb5bd13",
|
|
||||||
"title": "Build the Game of Life"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "bd7153d8c242eddfaeb5bd13",
|
|
||||||
"title": "Build a Roguelike Dungeon Crawler Game"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "bd7168d8c242eddfaeb5bd13",
|
|
||||||
"title": "Visualize Data with a Bar Chart"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "bd7178d8c242eddfaeb5bd13",
|
|
||||||
"title": "Visualize Data with a Scatterplot Graph"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "bd7188d8c242eddfaeb5bd13",
|
|
||||||
"title": "Visualize Data with a Heat Map"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "bd7198d8c242eddfaeb5bd13",
|
|
||||||
"title": "Show National Contiguity with a Force Directed Graph"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "bd7108d8c242eddfaeb5bd13",
|
|
||||||
"title": "Map Data Across the Globe"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"type": "Waypoint",
|
|
||||||
"challengeType": 7,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Reclama tu certificado de Visualización de datos",
|
|
||||||
"description": [
|
|
||||||
[
|
|
||||||
"//i.imgur.com/Et3iD74.jpg",
|
|
||||||
"Una imagen que muestra nuestro certificado de Visualización de datos",
|
|
||||||
"Este desafío te otorga tu certificado autenticado de Visualización de datos. Antes de que podamos emitir tu certificado, debemos verificar que has completado todos los proyectos con React y D3.js. También debes aceptar nuestro Juramento de honestidad académica. Pulsa el botón siguiente para iniciar este proceso.",
|
|
||||||
""
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/swuEma9.png",
|
|
||||||
"Plagio (nombre): acción y efecto de plagiar. Plagiar (verbo) - copiar en lo sustancial obras ajenas, dándolas como propias.",
|
|
||||||
"Al pulsar el botón siguiente, juras que todo el código en tus soluciones a los desafíos A) es código que tú o tu compañero escribieron personalmente, o B) proviene de librerías de código abierto como jQuery, o C) ha sido claramente atribuido a sus autores originales. También nos otorgas el permiso para auditar tus soluciones a los desafíos y revocar tu certificado si encontramos evidencia de plagio.",
|
|
||||||
"#"
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/6b50POD.png",
|
|
||||||
"Una imagen del texto \"Los requisitos de Certificación de Visualización de datos\"",
|
|
||||||
"Confirmemos que has completado todos nuestros proyectos en React y D3.js. Pulsa el botón siguiente para hacer la verificación.",
|
|
||||||
"#"
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/PnFG11N.png",
|
|
||||||
"Una imagen de la palabra \"Felicitaciones!\"",
|
|
||||||
"¡Felicitaciones! Hemos agregado tu certificado de Visualización de datos a tu portafolio. A menos que elijas no mostrar tus soluciones, este certificado será públicamente visible y verificable.",
|
|
||||||
""
|
|
||||||
]
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"fr": {
|
|
||||||
"title": "Réclamer votre Certificat de Visualisation de données",
|
|
||||||
"description": [
|
|
||||||
[
|
|
||||||
"//i.imgur.com/Et3iD74.jpg",
|
|
||||||
"Une image de note Certificat de Visualisation de données",
|
|
||||||
"Ce défi vous permettra d’avoir votre Certificat de Visualisation de données vérifiée. Avant de vous donner votre certificat, il faut s’assurer que vous avez bien accomplie tous les projets de React et D3.js et il faut que vous acceptiez notre Academic Honesty Pledge. Cliquez sur le bouton si dessous pour démarrer le processus.",
|
|
||||||
""
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/iFL1xR1.png",
|
|
||||||
"Une définition du plagiat : Plagiat (nom) – copier le travail d’un autre et le présenter comme étant le tien, sans mention de l’auteur original",
|
|
||||||
"En cliquant si dessous, je garantie que tout le code que j’ai présenté A) est mon propre code ou celui de mon collaborateur, B) vient d’un projet open-source comme jQuery, ou C) contient les mentions nécessaires des auteurs. Vous nous donnez aussi la permission de vérifier vos solutions et de révoquer votre certificat en cas de détection de plagiat.",
|
|
||||||
"#"
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/0GZ0KHa.png",
|
|
||||||
"Une image du texte \"Les exigences de certification de visualisation de données\"",
|
|
||||||
"On va confirmer maintenant que vous avez bien terminé nos projets de React et D3.js. Cliquez sur le bouton si dessous pour vérifier cela.",
|
|
||||||
"#"
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/EJXMNIQ.png",
|
|
||||||
"Une image du mot \"Félicitations à vous!\"",
|
|
||||||
"Félicitations! On vient d’ajouter votre Certificat de Visualisation de données à votre profile. Cette certificat est public et vérifiable, mais vous pouvez le cacher si vous désirer.",
|
|
||||||
""
|
|
||||||
]
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@ -1,211 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "Data Visualization Projects",
|
|
||||||
"order": 17,
|
|
||||||
"time": "200 hours",
|
|
||||||
"helpRoom": "HelpDataViz",
|
|
||||||
"challenges": [
|
|
||||||
{
|
|
||||||
"id": "bd7168d8c242eddfaeb5bd13",
|
|
||||||
"title": "Visualize Data with a Bar Chart",
|
|
||||||
"description": [
|
|
||||||
"<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/vGjLVZ' target='_blank'>https://codepen.io/freeCodeCamp/full/vGjLVZ</a>.",
|
|
||||||
"Fulfill the following <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
|
|
||||||
"<strong>User Story:</strong> I can see US Gross Domestic Product by quarter, over time.",
|
|
||||||
"<strong>User Story:</strong> I can mouse over a bar and see a tooltip with the GDP amount and exact year and month that bar represents.",
|
|
||||||
"<strong>Hint:</strong> Here's a dataset you can use to build this: <a href='https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json' target='_blank'>https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json</a>",
|
|
||||||
"Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> 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": [
|
|
||||||
"nss_5sZpjIE"
|
|
||||||
],
|
|
||||||
"tests": [],
|
|
||||||
"isRequired": true,
|
|
||||||
"releasedOn": "January 1, 2016",
|
|
||||||
"type": "zipline",
|
|
||||||
"challengeType": 3,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Visualiza datos utilizando un gráfico de barras",
|
|
||||||
"description": [
|
|
||||||
"<strong>Objetivo:</strong> Construye una aplicación en <a href='https://codepen.io' target='_blank'>CodePen.io</a> que funcione de forma similar al siguiente ejemplo: <a href='https://codepen.io/freeCodeCamp/full/vGjLVZ' target='_blank'>https://codepen.io/freeCodeCamp/full/vGjLVZ</a>.",
|
|
||||||
"<strong>Regla #1:</strong> No veas el código del proyecto de ejemplo. Encuentra la forma de hacerlo por tu cuenta.",
|
|
||||||
"<strong>Regla #2:</strong> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o API que sea necesaria. ¡Ponle un toque personal!.",
|
|
||||||
"<strong>Regla #3:</strong> Debes utilizar D3.js para construir este proyecto.",
|
|
||||||
"<strong>Historia de usuario:</strong> Puedo ver el Producto Interno Bruto (PIB) de los EEUU por trimestre, a través del tiempo.",
|
|
||||||
"<strong>Historia de usuario:</strong> Puedo ver una descripción emergente con el monto de PIB y el mes y año que representa cada barra al mover el ratón sobre ellas.",
|
|
||||||
"<strong>Pista:</strong> Puedes utilizar el siguiente conjunto de datos para construir tu proyecto: <a href='https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json' target='_blank'>https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json</a>",
|
|
||||||
"Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> si te sientes atascado.",
|
|
||||||
"Cuando termines, haz clic en el botón de \"I've completed this challenge\" e incluye el vínculo de tu proyecto en CodePen. ",
|
|
||||||
"Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Cuarto de revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "bd7178d8c242eddfaeb5bd13",
|
|
||||||
"title": "Visualize Data with a Scatterplot Graph",
|
|
||||||
"description": [
|
|
||||||
"<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/ONxvaa/' target='_blank'>https://codepen.io/freeCodeCamp/full/ONxvaa/</a>.",
|
|
||||||
"Fulfill the following <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
|
|
||||||
"<strong>User Story:</strong> I can see performance time visualized in a scatterplot graph.",
|
|
||||||
"<strong>User Story:</strong> I can mouse over a plot to see a tooltip with additional details.",
|
|
||||||
"<strong>Hint:</strong> Here's a dataset you can use to build this: <a href='https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/cyclist-data.json' target='_blank'>https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/cyclist-data.json</a>",
|
|
||||||
"Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> 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": [
|
|
||||||
"barVgJDnTMk"
|
|
||||||
],
|
|
||||||
"tests": [],
|
|
||||||
"isRequired": true,
|
|
||||||
"releasedOn": "January 1, 2016",
|
|
||||||
"type": "zipline",
|
|
||||||
"challengeType": 3,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Visualiza datos utilizando un gráfico de dispersión",
|
|
||||||
"description": [
|
|
||||||
"<strong>Objetivo:</strong> Construye una aplicación en <a href='https://codepen.io' target='_blank'>CodePen.io</a> que funcione de forma similar al siguiente ejemplo: <a href='https://codepen.io/freeCodeCamp/full/ONxvaa/' target='_blank'>https://codepen.io/freeCodeCamp/full/ONxvaa/</a>.",
|
|
||||||
"<strong>Regla #1:</strong> No veas el código del proyecto de ejemplo. Encuentra la forma de hacerlo por tu cuenta.",
|
|
||||||
"<strong>Regla #2:</strong> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o API que sea necesaria. ¡Ponle un toque personal!.",
|
|
||||||
"<strong>Regla #3:</strong> Debes utilizar D3.js para construir este proyecto.",
|
|
||||||
"<strong>Historia de usuario:</strong> Puedo ver el tiempo de recorrido en el diagrama de dispersión.",
|
|
||||||
"<strong>Historia de usuario:</strong> Puedo ver una descripción emergente con información adicional al mover el ratón sobre el gráfico.",
|
|
||||||
"<strong>Pista:</strong> Puedes utilizar el siguiente conjunto de datos para construir tu proyecto: <a href='https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/cyclist-data.json' target='_blank'>https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/cyclist-data.json</a>",
|
|
||||||
"Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> si te sientes atascado.",
|
|
||||||
"Cuando termines, haz clic en el botón de \"I've completed this challenge\" e incluye el vínculo de tu proyecto en CodePen. ",
|
|
||||||
"Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Cuarto de revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "bd7188d8c242eddfaeb5bd13",
|
|
||||||
"title": "Visualize Data with a Heat Map",
|
|
||||||
"description": [
|
|
||||||
"<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/aNLYPp/' target='_blank'>https://codepen.io/freeCodeCamp/full/aNLYPp/</a>.",
|
|
||||||
"Fulfill the following <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
|
|
||||||
"<strong>User Story:</strong> I can view a heat map with data represented both on the Y and X axis.",
|
|
||||||
"<strong>User Story:</strong> Each cell is colored based its relationship to other data.",
|
|
||||||
"<strong>User Story:</strong> I can mouse over a cell in the heat map to get more exact information.",
|
|
||||||
"<strong>Hint:</strong> Here's a dataset you can use to build this: <a href='https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/global-temperature.json' target='_blank'>https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/global-temperature.json</a>",
|
|
||||||
"Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> 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": [
|
|
||||||
"TVJr7ndWAYo"
|
|
||||||
],
|
|
||||||
"tests": [],
|
|
||||||
"isRequired": true,
|
|
||||||
"releasedOn": "January 1, 2016",
|
|
||||||
"type": "zipline",
|
|
||||||
"challengeType": 3,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Visualiza datos utilizando un mapa de calor",
|
|
||||||
"description": [
|
|
||||||
"<strong>Objetivo:</strong> Construye una aplicación en <a href='https://codepen.io' target='_blank'>CodePen.io</a> que funcione de forma similar al siguiente ejemplo: <a href='https://codepen.io/freeCodeCamp/full/aNLYPp/' target='_blank'>https://codepen.io/freeCodeCamp/full/aNLYPp/</a>.",
|
|
||||||
"<strong>Regla #1:</strong> No veas el código del proyecto de ejemplo. Encuentra la forma de hacerlo por tu cuenta.",
|
|
||||||
"<strong>Regla #2:</strong> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o API que sea necesaria. ¡Ponle un toque personal!.",
|
|
||||||
"<strong>Regla #3:</strong> Debes utilizar D3.js para construir este proyecto.",
|
|
||||||
"<strong>Historia de usuario:</strong> Puedo ver un mapa de calor con datos representados en los ejes x, y.",
|
|
||||||
"<strong>Historia de usuario:</strong> El color de cada celda debe estar basado en su relación con otros datos.",
|
|
||||||
"<strong>Historia de usuario:</strong> Puedo mover el ratón sobre una celda en el mapa de calor para obtener información más detallada.",
|
|
||||||
"<strong>Pista:</strong> Puedes utilizar el siguiente conjunto de datos para construir tu proyecto: <a href='https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/global-temperature.json' target='_blank'>https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/global-temperature.json</a>",
|
|
||||||
"Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> si te sientes atascado.",
|
|
||||||
"Cuando termines, haz clic en el botón de \"I've completed this challenge\" e incluye el vínculo de tu proyecto en CodePen. ",
|
|
||||||
"Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Cuarto de revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "bd7198d8c242eddfaeb5bd13",
|
|
||||||
"title": "Show National Contiguity with a Force Directed Graph",
|
|
||||||
"description": [
|
|
||||||
"<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/xVopBo' target='_blank'>https://codepen.io/freeCodeCamp/full/xVopBo</a>.",
|
|
||||||
"Fulfill the following <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
|
|
||||||
"<strong>User Story:</strong> I can see a Force-directed Graph that shows which countries share borders.",
|
|
||||||
"<strong>User Story:</strong> I can see each country's flag on its node.",
|
|
||||||
"<strong>Hint:</strong> Here's a dataset you can use to build this: <a href='https://raw.githubusercontent.com/DealPete/forceDirected/master/countries.json' target='_blank'>https://raw.githubusercontent.com/DealPete/forceDirected/master/countries.json</a>",
|
|
||||||
"<strong>Hint:</strong> You can create a spritesheet of national flags at <a href='https://www.flag-sprites.com' target='_blank'>https://www.flag-sprites.com</a>.",
|
|
||||||
"Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> 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": [
|
|
||||||
"etBaP3IdlIE"
|
|
||||||
],
|
|
||||||
"tests": [],
|
|
||||||
"isRequired": true,
|
|
||||||
"releasedOn": "January 1, 2016",
|
|
||||||
"type": "zipline",
|
|
||||||
"challengeType": 3,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Muestra asociaciones utilizando un gráfico de fuerzas dirigidas",
|
|
||||||
"description": [
|
|
||||||
"<strong>Objetivo:</strong> Construye una aplicación en <a href='https://codepen.io' target='_blank'>CodePen.io</a> que funcione de forma similar al siguiente ejemplo: <a href='https://codepen.io/freeCodeCamp/full/KVNNXY' target='_blank'>https://codepen.io/freeCodeCamp/full/KVNNXY</a>.",
|
|
||||||
"<strong>Regla #1:</strong> No veas el código del proyecto de ejemplo. Encuentra la forma de hacerlo por tu cuenta.",
|
|
||||||
"<strong>Regla #2:</strong> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o API que sea necesaria. ¡Ponle un toque personal!.",
|
|
||||||
"<strong>Regla #3:</strong> Debes utilizar D3.js para construir este proyecto.",
|
|
||||||
"<strong>Historia de usuario:</strong> Puedo ver un gráfico de fuerza dirigida que muestra qué campistas están publicando enlaces en Camper News hacia qué dominios.",
|
|
||||||
"<strong>Historia de usuario:</strong> Puedo ver el icono de cada campista en su nodo respectivo.",
|
|
||||||
"<strong>Historia de usuario:</strong> Puedo ver la relación entre los campistas y los dominios que publican.",
|
|
||||||
"<strong>Historia de usuario:</strong> Puedo conocer aproximadamente cuántas veces los campistas han enlazado un dominio en particular a partir del tamaño del nodo respectivo.",
|
|
||||||
"<strong>Historia de usuario:</strong> Puedo conocer aproximadamente cuántas veces un campista específico ha publicado un enlace a partir del tamaño de su nodo.",
|
|
||||||
"<strong>Pista:</strong> La siguiente es la ruta del API de noticias de Camper News: <code>http://www.freecodecamp.com/news/hot</code>.",
|
|
||||||
"Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> si te sientes atascado.",
|
|
||||||
"Cuando termines, haz clic en el botón de \"I've completed this challenge\" e incluye el vínculo de tu proyecto en CodePen. ",
|
|
||||||
"Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Cuarto de revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "bd7108d8c242eddfaeb5bd13",
|
|
||||||
"title": "Map Data Across the Globe",
|
|
||||||
"description": [
|
|
||||||
"<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/mVEJag' target='_blank'>https://codepen.io/freeCodeCamp/full/mVEJag</a>.",
|
|
||||||
"Fulfill the following <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
|
|
||||||
"<strong>User Story:</strong> I can see where all Meteorites landed on a world map.",
|
|
||||||
"<strong>User Story:</strong> I can tell the relative size of the meteorite, just by looking at the way it's represented on the map.",
|
|
||||||
"<strong>User Story:</strong> I can mouse over the meteorite's data point for additional data.",
|
|
||||||
"<strong>Hint:</strong> Here's a dataset you can use to build this: <a href='https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/meteorite-strike-data.json' target='_blank'>https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/meteorite-strike-data.json</a>",
|
|
||||||
"Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> 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": [
|
|
||||||
"kSAqct10gA0"
|
|
||||||
],
|
|
||||||
"tests": [],
|
|
||||||
"isRequired": true,
|
|
||||||
"releasedOn": "January 1, 2016",
|
|
||||||
"type": "zipline",
|
|
||||||
"challengeType": 3,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Mapea datos a lo largo del Globo",
|
|
||||||
"description": [
|
|
||||||
"<strong>Objetivo:</strong> Construye una aplicación en <a href='https://codepen.io' target='_blank'>CodePen.io</a> que funcione de forma similar al siguiente ejemplo: <a href='https://codepen.io/freeCodeCamp/full/mVEJag' target='_blank'>https://codepen.io/freeCodeCamp/full/mVEJag</a>.",
|
|
||||||
"<strong>Regla #1:</strong> No veas el código del proyecto de ejemplo. Encuentra la forma de hacerlo por tu cuenta.",
|
|
||||||
"<strong>Regla #2:</strong> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o API que sea necesaria. ¡Ponle un toque personal!.",
|
|
||||||
"<strong>Regla #3:</strong> Debes utilizar D3.js para construir este proyecto.",
|
|
||||||
"<strong>Historia de usuario:</strong> Puedo ver a dónde cayeron todos los meteoritos en un mapa mundi.",
|
|
||||||
"<strong>Historia de usuario:</strong> Puedo distinguir el tamaño relativo de cada meteorito simplemente viendo la forma en que está representado en el mapa.",
|
|
||||||
"<strong>Historia de usuario:</strong> Puedo mover el ratón sobre el dato de cada meteorito para obtener información adicional.",
|
|
||||||
"<strong>Pista:</strong> Puedes utilizar el siguiente conjunto de datos para construir tu proyecto: <a href='https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/meteorite-strike-data.json' target='_blank'>https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/meteorite-strike-data.json</a>",
|
|
||||||
"Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> si te sientes atascado.",
|
|
||||||
"Cuando termines, haz clic en el botón de \"I've completed this challenge\" e incluye el vínculo de tu proyecto en CodePen. ",
|
|
||||||
"Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Cuarto de revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@ -1,330 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "React Projects",
|
|
||||||
"order": 15,
|
|
||||||
"time": "200 hours",
|
|
||||||
"helpRoom": "HelpDataViz",
|
|
||||||
"challenges": [
|
|
||||||
{
|
|
||||||
"id": "bd7157d8c242eddfaeb5bd13",
|
|
||||||
"title": "Build a Markdown Previewer",
|
|
||||||
"description": [
|
|
||||||
"<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/JXrLLE/' target='_blank'>https://codepen.io/freeCodeCamp/full/JXrLLE/</a>.",
|
|
||||||
"Fulfill the following <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
|
|
||||||
"<strong>User Story:</strong> I can type GitHub-flavored Markdown into a text area.",
|
|
||||||
"<strong>User Story:</strong> I can see a preview of the output of my markdown that is updated as I type.",
|
|
||||||
"<strong>Hint:</strong> You don't need to interpret Markdown yourself - you can import the Marked library for this: <a href='https://cdnjs.com/libraries/marked' target='_blank'>https://cdnjs.com/libraries/marked</a>",
|
|
||||||
"<strong>Note:</strong> If you want to use the React JSX syntax, you need to enable 'Babel' as a preprocessor",
|
|
||||||
"Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> 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."
|
|
||||||
],
|
|
||||||
"releasedOn": "January 1, 2016",
|
|
||||||
"challengeSeed": [
|
|
||||||
"giTx33ggIno"
|
|
||||||
],
|
|
||||||
"tests": [],
|
|
||||||
"type": "zipline",
|
|
||||||
"isRequired": true,
|
|
||||||
"challengeType": 3,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Crea un visualizador de lenguaje de marcado (Markdown)",
|
|
||||||
"description": [
|
|
||||||
"<strong>Objetivo:</strong> Construye una aplicación en <a href='https://codepen.io' target='_blank'>CodePen.io</a> que funcione de forma similar al siguiente ejemplo: <a href='https://codepen.io/freeCodeCamp/full/JXrLLE/' target='_blank'>https://codepen.io/freeCodeCamp/full/JXrLLE/</a>.",
|
|
||||||
"<strong>Regla #1:</strong> No veas el código del proyecto de ejemplo. Encuentra la forma de hacerlo por tu cuenta.",
|
|
||||||
"<strong>Regla #2:</strong> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o API que sea necesaria. ¡Ponle un toque personal!.",
|
|
||||||
"<strong>Rule #3:</strong> Debes utilizar ambos Sass y React para construir este proyecto.",
|
|
||||||
"<strong>Historia de usuario:</strong> Puedo escribir lenguaje de marcado al estilo GitHub en un área de texto.",
|
|
||||||
"<strong>Historia de usuario:</strong> Puedo tener una vista preliminar del resultado de mi marcado que se actualiza mientras escribo.",
|
|
||||||
"<strong>Pista:</strong> No necesitas interpretar el lenguaje de marcado por tu cuenta - puedes importar la librería de marcado en el enlace siguiente: <a href='https://cdnjs.com/libraries/marked'>https://cdnjs.com/libraries/marked</a>",
|
|
||||||
"<strong>Nota:</strong> Si quieres utilizar la sintaxis de React JSX, necesitarás habilitar 'Babel' como un preprocesador",
|
|
||||||
"Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> si te sientes atascado.",
|
|
||||||
"Cuando termines, haz clic en el botón de \"I've completed this challenge\" e incluye el vínculo de tu proyecto en CodePen. ",
|
|
||||||
"Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Cuarto de revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"ru": {
|
|
||||||
"title": "Создайте предпросмотрщик языка разметки Markdown",
|
|
||||||
"description": [
|
|
||||||
"<strong>Задание:</strong> Создайте приложение <a href='https://codepen.io' target='_blank'>CodePen.io</a>, функционал которого схож с этим: <a href='https://codepen.io/freeCodeCamp/full/JXrLLE/' target='_blank'>https://codepen.io/freeCodeCamp/full/JXrLLE/</a>.",
|
|
||||||
"<strong>Правило #1:</strong> Не подсматривайте код приложения-примера. Напишите его самостоятельно.",
|
|
||||||
"<strong>Правило #2:</strong> Приложение должно удовлетворять нижеприведённым <a href='https://ru.wikipedia.org/wiki/Пользовательские_истории' target='_blank'>пользовательским историям</a>. Используйте любые библиотеки или API, которые потребуются. Придайте ему свой личный стиль.",
|
|
||||||
"<strong>Правило #3:</strong> Для создания этого проекта вы должны использовать Sass и React.",
|
|
||||||
"<strong>Пользовательская история:</strong> Я могу использовать язык разметки в стиле GitHub в текстовом поле.",
|
|
||||||
"<strong>Пользовательская история:</strong> Я могу видеть предварительный просмотр вывода моей разметки по мере ввода текста.",
|
|
||||||
"<strong>Подсказка:</strong> Вам не нужно интерпретировать разметку самостоятельно - вы можете импортировать библиотеку Marked для этого: <a href='https://cdnjs.com/libraries/marked'>https://cdnjs.com/libraries/marked</a>",
|
|
||||||
"<strong>Заметка:</strong> Если вы хотите использовать синтаксис React JSX, вам понадобится задействовать 'Babel' в качестве препроцессора.",
|
|
||||||
"Если что-то не получается, не забывайте пользоваться методом <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Читай-Ищи-Спрашивай</a>.",
|
|
||||||
"Когда закончите, нажмите кнопку \"I've completed this challenge\" и укажите ссылку на вашу работу на CodePen.",
|
|
||||||
"Вы можете получить отзыв о вашем проекте от коллег, поделившись ссылкой на него в нашем <a href='//gitter.im/freecodecamp/codereview' target='_blank'>чате для рассмотрения кода</a>. Также вы можете поделиться ею через Twitter и на странице Free Code Camp вашего города на Facebook."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "bd7156d8c242eddfaeb5bd13",
|
|
||||||
"title": "Build a Camper Leaderboard",
|
|
||||||
"description": [
|
|
||||||
"<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/eZGMjp/' target='_blank'>https://codepen.io/freeCodeCamp/full/eZGMjp/</a>.",
|
|
||||||
"Fulfill the following <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
|
|
||||||
"<strong>User Story:</strong> I can see a table of the Free Code Camp campers who've earned the most brownie points in the past 30 days.",
|
|
||||||
"<strong>User Story:</strong> I can see how many brownie points they've earned in the past 30 days, and how many they've earned total.",
|
|
||||||
"<strong>User Story:</strong> I can toggle between sorting the list by how many brownie points they've earned in the past 30 days and by how many brownie points they've earned total.",
|
|
||||||
"<strong>Hint:</strong> To get the top 100 campers for the last 30 days: <a href='https://fcctop100.herokuapp.com/api/fccusers/top/recent' target='_blank'>https://fcctop100.herokuapp.com/api/fccusers/top/recent</a>.",
|
|
||||||
"<strong>Hint:</strong> To get the top 100 campers of all time: <a href='https://fcctop100.herokuapp.com/api/fccusers/top/alltime' target='_blank'>https://fcctop100.herokuapp.com/api/fccusers/top/alltime</a>.",
|
|
||||||
"Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> 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."
|
|
||||||
],
|
|
||||||
"releasedOn": "January 1, 2016",
|
|
||||||
"challengeSeed": [
|
|
||||||
"LJQcFNo_-QY"
|
|
||||||
],
|
|
||||||
"tests": [],
|
|
||||||
"type": "zipline",
|
|
||||||
"isRequired": true,
|
|
||||||
"challengeType": 3,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Crea un marcador para los campistas",
|
|
||||||
"description": [
|
|
||||||
"<strong>Objetivo:</strong> Construye una aplicación en <a href='https://codepen.io' target='_blank'>CodePen.io</a> que funcione de forma similar al siguiente ejemplo: <a href='https://codepen.io/freeCodeCamp/full/eZGMjp/' target='_blank'>https://codepen.io/freeCodeCamp/full/eZGMjp/</a>.",
|
|
||||||
"<strong>Regla #1:</strong> No veas el código del proyecto de ejemplo. Encuentra la forma de hacerlo por tu cuenta.",
|
|
||||||
"<strong>Regla #2:</strong> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o API que sea necesaria. ¡Ponle un toque personal!.",
|
|
||||||
"<strong>Rule #3:</strong> Debes utilizar ambos Sass y React para construir este proyecto.",
|
|
||||||
"<strong>Historia de usuario:</strong> Puedo ver un tablero con los campistas de Free Code Camp que han ganado más puntos de brownie en los últimos 30 días.",
|
|
||||||
"<strong>Historia de usuario:</strong> Puedo ver cuántos puntos de brownie han ganado en los últimos 30 días, y cuántos han ganado en total.",
|
|
||||||
"<strong>Historia de usuario:</strong> Puedo elegir entre dos formas de organizar la lista: 1) En base a cuántos puntos de brownie se han ganado en los últimos 30 días. 2) En base al número de puntos de brownie que han ganado en total.",
|
|
||||||
"<strong>Pista:</strong> Para obtener los 100 mejores campistas para los últimos 30 días: <a href='https://fcctop100.herokuapp.com/api/fccusers/top/recent' target='_blank'>https://fcctop100.herokuapp.com/api/fccusers/top/recent</a>.",
|
|
||||||
"<strong>Pista:</strong> Para obtener los 100 mejores campistas de toda la historia: <a href='http://fcctop100.herokuapp.com/api/fccusers/top/alltime' target='_blank'>http://fcctop100.herokuapp.com/api/fccusers/top/alltime</a>.",
|
|
||||||
"Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> si te sientes atascado.",
|
|
||||||
"Cuando termines, haz clic en el botón de \"I've completed this challenge\" e incluye el vínculo de tu proyecto en CodePen. ",
|
|
||||||
"Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Cuarto de revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"ru": {
|
|
||||||
"title": "Создайте таблицу Кемперов-Лидеров",
|
|
||||||
"description": [
|
|
||||||
"<strong>Задание:</strong> Создайте приложение <a href='https://codepen.io' target='_blank'>CodePen.io</a>, функционал которого схож с этим: <a href='https://codepen.io/freeCodeCamp/full/eZGMjp/' target='_blank'>https://codepen.io/freeCodeCamp/full/eZGMjp/</a>.",
|
|
||||||
"<strong>Правило #1:</strong> Не подсматривайте код приложения-примера. Напишите его самостоятельно.",
|
|
||||||
"<strong>Правило #2:</strong> Приложение должно удовлетворять нижеприведённым <a href='https://ru.wikipedia.org/wiki/Пользовательские_истории' target='_blank'>пользовательским историям</a>. Используйте любые библиотеки или API, которые потребуются. Придайте ему свой личный стиль.",
|
|
||||||
"<strong>Правило #3:</strong> Для создания этого проекта вы должны использовать Sass и React.",
|
|
||||||
"<strong>Пользовательская история:</strong> Я могу видеть таблицу кемперов Free Code Camp, которые получили наибольшее количество очков за последние 30 дней.",
|
|
||||||
"<strong>Пользовательская история:</strong> Я могу видеть сколько очков они получили за последние 30 дней, и сколько они получили их всего.",
|
|
||||||
"<strong>Пользовательская история:</strong> Я могу отсортировать список по количеству очков, которые они получили за последние 30 дней, и по общему количеству полученных очков.",
|
|
||||||
"<strong>Подсказка:</strong> Ссылка на топ 100 кемперов за последние 30 дней в формате JSON: <a href='https://fcctop100.herokuapp.com/api/fccusers/top/recent' target='_blank'>https://fcctop100.herokuapp.com/api/fccusers/top/recent</a>.",
|
|
||||||
"<strong>Подсказка:</strong> Ссылка на топ 100 кемперов за все время в формате JSON: <a href='http://fcctop100.herokuapp.com/api/fccusers/top/alltime' target='_blank'>http://fcctop100.herokuapp.com/api/fccusers/top/alltime</a>.",
|
|
||||||
"Если что-то не получается, не забывайте пользоваться методом <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Читай-Ищи-Спрашивай</a>.",
|
|
||||||
"Когда закончите, нажмите кнопку \"I've completed this challenge\" и укажите ссылку на вашу работу на CodePen.",
|
|
||||||
"Вы можете получить отзыв о вашем проекте от коллег, поделившись ссылкой на него в нашем <a href='//gitter.im/freecodecamp/codereview' target='_blank'>чате для рассмотрения кода</a>. Также вы можете поделиться ею через Twitter и на странице Free Code Camp вашего города на Facebook."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "bd7155d8c242eddfaeb5bd13",
|
|
||||||
"title": "Build a Recipe Box",
|
|
||||||
"description": [
|
|
||||||
"<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/xVXWag/' target='_blank'>https://codepen.io/freeCodeCamp/full/xVXWag/</a>.",
|
|
||||||
"Fulfill the following <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
|
|
||||||
"<strong>User Story:</strong> I can create recipes that have names and ingredients.",
|
|
||||||
"<strong>User Story:</strong> I can see an index view where the names of all the recipes are visible.",
|
|
||||||
"<strong>User Story:</strong> I can click into any of those recipes to view it.",
|
|
||||||
"<strong>User Story:</strong> I can edit these recipes.",
|
|
||||||
"<strong>User Story:</strong> I can delete these recipes.",
|
|
||||||
"<strong>User Story:</strong> All new recipes I add are saved in my browser's local storage. If I refresh the page, these recipes will still be there.",
|
|
||||||
"<strong>Hint: </strong> You should prefix your local storage keys on CodePen, i.e. <code>_username_recipes</code>",
|
|
||||||
"Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> 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."
|
|
||||||
],
|
|
||||||
"releasedOn": "January 1, 2016",
|
|
||||||
"challengeSeed": [
|
|
||||||
"6tZ4c-Bxstg"
|
|
||||||
],
|
|
||||||
"tests": [],
|
|
||||||
"type": "zipline",
|
|
||||||
"isRequired": true,
|
|
||||||
"challengeType": 3,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Crea una caja de recetas",
|
|
||||||
"description": [
|
|
||||||
"<strong>Objetivo:</strong> Construye una aplicación en <a href='https://codepen.io' target='_blank'>CodePen.io</a> que funcione de forma similar al siguiente ejemplo: <a href='https://codepen.io/freeCodeCamp/full/xVXWag/' target='_blank'>https://codepen.io/freeCodeCamp/full/xVXWag/</a>.",
|
|
||||||
"<strong>Regla #1:</strong> No veas el código del proyecto de ejemplo. Encuentra la forma de hacerlo por tu cuenta.",
|
|
||||||
"<strong>Regla #2:</strong> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o API que sea necesaria. ¡Ponle un toque personal!.",
|
|
||||||
"<strong>Rule #3:</strong> Debes utilizar ambos Sass y React para construir este proyecto.",
|
|
||||||
"<strong>Historia de usuario:</strong> Puedo crear recetas a las que les puedo poner un nombre y los ingredientes necesarios.",
|
|
||||||
"<strong>Historia de usuario:</strong> Puedo ver un índice que contenga los nombres de todas las recetas.",
|
|
||||||
"<strong>Historia de usuario:</strong> Puedo pulsar cualquiera de las recetas para verla.",
|
|
||||||
"<strong>Historia de usuario:</strong> Puedo editar las recetas.",
|
|
||||||
"<strong>Historia de usuario:</strong> Puedo eliminar las recetas.",
|
|
||||||
"<strong>Historia de usuario:</strong> Las recetas que voy agregando deben guardarse en el almacenamiento local de mi navegador. Las recetas deben seguir allí si refresco la página.",
|
|
||||||
"Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> si te sientes atascado.",
|
|
||||||
"Cuando termines, haz clic en el botón de \"I've completed this challenge\" e incluye el vínculo de tu proyecto en CodePen. ",
|
|
||||||
"Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Cuarto de revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"ru": {
|
|
||||||
"title": "Создайте хранилище рецептов",
|
|
||||||
"description": [
|
|
||||||
"<strong>Задание:</strong> Создайте приложение <a href='https://codepen.io' target='_blank'>CodePen.io</a>, функционал которого схож с этим: <a href='https://codepen.io/freeCodeCamp/full/xVXWag/' target='_blank'>https://codepen.io/freeCodeCamp/full/xVXWag/</a>.",
|
|
||||||
"<strong>Правило #1:</strong> Не подсматривайте код приложения-примера. Напишите его самостоятельно.",
|
|
||||||
"<strong>Правило #2:</strong> Приложение должно удовлетворять нижеприведённым <a href='https://ru.wikipedia.org/wiki/Пользовательские_истории' target='_blank'>пользовательским историям</a>. Используйте любые библиотеки или API, которые потребуются. Придайте ему свой личный стиль.",
|
|
||||||
"<strong>Правило #3:</strong> Для создания этого проекта вы должны использовать Sass и React.",
|
|
||||||
"<strong>Пользовательская история:</strong> Я могу создавать рецепты, содержащие название и ингредиенты.",
|
|
||||||
"<strong>Пользовательская история:</strong> Я могу просмотреть корневой вид, на котором видны все рецепты.",
|
|
||||||
"<strong>Пользовательская история:</strong> Я могу нажать на имя каждого из рецептов для просмотра содержимого.",
|
|
||||||
"<strong>Пользовательская история:</strong> Я могу отредактировать эти рецепты.",
|
|
||||||
"<strong>Пользовательская история:</strong> Я могу удалить эти рецепты.",
|
|
||||||
"<strong>Пользовательская история:</strong> Все новые рецепты, которые я добавил, сохранены в локальном хранилище моего браузера. Если я обновлю страницу, эти рецепты будут всё ещё там.",
|
|
||||||
"Если что-то не получается, не забывайте пользоваться методом <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Читай-Ищи-Спрашивай</a>.",
|
|
||||||
"Когда закончите, нажмите кнопку \"I've completed this challenge\" и укажите ссылку на вашу работу на CodePen.",
|
|
||||||
"Вы можете получить отзыв о вашем проекте от коллег, поделившись ссылкой на него в нашем <a href='//gitter.im/freecodecamp/codereview' target='_blank'>чате для рассмотрения кода</a>. Также вы можете поделиться ею через Twitter и на странице Free Code Camp вашего города на Facebook."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "bd7154d8c242eddfaeb5bd13",
|
|
||||||
"title": "Build the Game of Life",
|
|
||||||
"description": [
|
|
||||||
"<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/reGdqx/' target='_blank'>https://codepen.io/freeCodeCamp/full/reGdqx/</a>.",
|
|
||||||
"Fulfill the following <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
|
|
||||||
"<strong>User Story:</strong> When I first arrive at the game, it will randomly generate a board and start playing.",
|
|
||||||
"<strong>User Story:</strong> I can start and stop the board.",
|
|
||||||
"<strong>User Story:</strong> I can set up the board.",
|
|
||||||
"<strong>User Story:</strong> I can clear the board.",
|
|
||||||
"<strong>User Story:</strong> When I press start, the game will play out.",
|
|
||||||
"<strong>User Story:</strong> Each time the board changes, I can see how many generations have gone by.",
|
|
||||||
"<strong>Hint:</strong> Here's an explanation of Conway's Game of Life from John Conway himself: <a href='https://www.youtube.com/watch?v=E8kUJL04ELA' target='_blank'>https://www.youtube.com/watch?v=E8kUJL04ELA</a>",
|
|
||||||
"<strong>Hint:</strong> Here's an overview of Conway's Game of Life with rules for your reference: <a href='https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life' target='_blank'>https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life</a>",
|
|
||||||
"Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> 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."
|
|
||||||
],
|
|
||||||
"releasedOn": "January 1, 2016",
|
|
||||||
"challengeSeed": [
|
|
||||||
"5Ajcjs3OmjA"
|
|
||||||
],
|
|
||||||
"tests": [],
|
|
||||||
"type": "zipline",
|
|
||||||
"isRequired": true,
|
|
||||||
"challengeType": 3,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Crea un Juego de la vida",
|
|
||||||
"description": [
|
|
||||||
"<strong>Objetivo:</strong> Construye una aplicación en <a href='https://codepen.io' target='_blank'>CodePen.io</a> que funcione de forma similar al siguiente ejemplo: <a href='https://codepen.io/freeCodeCamp/full/reGdqx/' target='_blank'>https://codepen.io/freeCodeCamp/full/reGdqx/</a>.",
|
|
||||||
"<strong>Regla #1:</strong> No veas el código del proyecto de ejemplo. Encuentra la forma de hacerlo por tu cuenta.",
|
|
||||||
"<strong>Regla #2:</strong> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o API que sea necesaria. ¡Ponle un toque personal!.",
|
|
||||||
"<strong>Rule #3:</strong> Debes utilizar ambos Sass y React para construir este proyecto.",
|
|
||||||
"<strong>Historia de usuario:</strong> La aplicación debe generar aleatoriamente un tablero y comenzar a jugar cuando entro al juego por primera vez.",
|
|
||||||
"<strong>Historia de usuario:</strong> Puedo iniciar y detener el tablero.",
|
|
||||||
"<strong>Historia de usuario:</strong> Puedo preparar el tablero.",
|
|
||||||
"<strong>Historia de usuario:</strong> Puedo limpiar el tablero.",
|
|
||||||
"<strong>Historia de usuario:</strong> El juego inicia cuando presiono un botón de inicio.",
|
|
||||||
"<strong>Historia de usuario:</strong> Puedo ver cuántas generaciones han pasado cada vez que el tablero cambia.",
|
|
||||||
"<strong>Pista:</strong> Puedes encontrar una explicación del Juego de la vida de Conway de parte del mismísimo John Conway aquí: <a href='https://www.youtube.com/watch?v=E8kUJL04ELA' target='_blank'>https://www.youtube.com/watch?v=E8kUJL04ELA</a>",
|
|
||||||
"<strong>Pista:</strong> Puedes referirte al siguiente enlace para obtener información general acerca del Juego de la vida de Conway incluyendo las reglas del juego: <a href='https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life' target='_blank'>https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life</a>",
|
|
||||||
"Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> si te sientes atascado.",
|
|
||||||
"Cuando termines, haz clic en el botón de \"I've completed this challenge\" e incluye el vínculo de tu proyecto en CodePen. ",
|
|
||||||
"Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Cuarto de revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"ru": {
|
|
||||||
"title": "Создайте игру \"Жизнь\"",
|
|
||||||
"description": [
|
|
||||||
"<strong>Задание:</strong> Создайте приложение <a href='https://codepen.io' target='_blank'>CodePen.io</a>, функционал которого схож с этим: <a href='https://codepen.io/freeCodeCamp/full/reGdqx/' target='_blank'>https://codepen.io/freeCodeCamp/full/reGdqx/</a>.",
|
|
||||||
"<strong>Правило #1:</strong> Не подсматривайте код приложения-примера. Напишите его самостоятельно.",
|
|
||||||
"<strong>Правило #2:</strong> Приложение должно удовлетворять нижеприведённым <a href='https://ru.wikipedia.org/wiki/Пользовательские_истории' target='_blank'>пользовательским историям</a>. Используйте любые библиотеки или API, которые потребуются. Придайте ему свой личный стиль.",
|
|
||||||
"<strong>Правило #3:</strong> Для создания этого проекта вы должны использовать Sass и React.",
|
|
||||||
"<strong>Пользовательская история:</strong> Когда я впервые запускаю игру, она генерирует доску случайным образом и начинает игру.",
|
|
||||||
"<strong>Пользовательская история:</strong> Я могу запустить и остановить игру.",
|
|
||||||
"<strong>Пользовательская история:</strong> Я могу настроить доску.",
|
|
||||||
"<strong>Пользовательская история:</strong> Я могу очистить доску.",
|
|
||||||
"<strong>Пользовательская история:</strong> Когда я нажимаю начать, игра начинает воспроизведение.",
|
|
||||||
"<strong>Пользовательская история:</strong> Каждый раз, когда доска меняется, я могу видеть сколько поколений прошло.",
|
|
||||||
"<strong>Подсказка:</strong> Вот объяснение игры \"Жизнь\" от её создателя Джона Конвея: <a href='https://www.youtube.com/watch?v=E8kUJL04ELA' target='_blank'>https://www.youtube.com/watch?v=E8kUJL04ELA</a>",
|
|
||||||
"<strong>Подсказка:</strong> Вот обзор правил игры \"Жизнь\" для вашего сведения: <a href='https://ru.wikipedia.org/wiki/Жизнь_(игра)' target='_blank'>https://ru.wikipedia.org/wiki/Жизнь_(игра)</a>",
|
|
||||||
"Если что-то не получается, не забывайте пользоваться методом <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Читай-Ищи-Спрашивай</a>.",
|
|
||||||
"Когда закончите, нажмите кнопку \"I've completed this challenge\" и укажите ссылку на вашу работу на CodePen.",
|
|
||||||
"Вы можете получить отзыв о вашем проекте от коллег, поделившись ссылкой на него в нашем <a href='//gitter.im/freecodecamp/codereview' target='_blank'>чате для рассмотрения кода</a>. Также вы можете поделиться ею через Twitter и на странице Free Code Camp вашего города на Facebook."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "bd7153d8c242eddfaeb5bd13",
|
|
||||||
"title": "Build a Roguelike Dungeon Crawler Game",
|
|
||||||
"description": [
|
|
||||||
"<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/PNJRyd/' target='_blank'>https://codepen.io/freeCodeCamp/full/PNJRyd/</a>.",
|
|
||||||
"Fulfill the following <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
|
|
||||||
"<strong>User Story:</strong> I have health, a level, and a weapon. I can pick up a better weapon. I can pick up health items.",
|
|
||||||
"<strong>User Story:</strong> All the items and enemies on the map are arranged at random.",
|
|
||||||
"<strong>User Story:</strong> I can move throughout a map, discovering items.",
|
|
||||||
"<strong>User Story:</strong> I can move anywhere within the map's boundaries, but I can't move through an enemy until I've beaten it.",
|
|
||||||
"<strong>User Story:</strong> Much of the map is hidden. When I take a step, all spaces that are within a certain number of spaces from me are revealed.",
|
|
||||||
"<strong>User Story:</strong> When I beat an enemy, the enemy goes away and I get XP, which eventually increases my level.",
|
|
||||||
"<strong>User Story:</strong> When I fight an enemy, we take turns damaging each other until one of us loses. I do damage based off of my level and my weapon. The enemy does damage based off of its level. Damage is somewhat random within a range.",
|
|
||||||
"<strong>User Story:</strong> When I find and beat the boss, I win.",
|
|
||||||
"<strong>User Story:</strong> The game should be challenging, but theoretically winnable.",
|
|
||||||
"Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> 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."
|
|
||||||
],
|
|
||||||
"releasedOn": "January 1, 2016",
|
|
||||||
"challengeSeed": [
|
|
||||||
"BwyKI9iePUQ"
|
|
||||||
],
|
|
||||||
"tests": [],
|
|
||||||
"type": "zipline",
|
|
||||||
"isRequired": true,
|
|
||||||
"challengeType": 3,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Crea un juego de dragones al estilo Rogue",
|
|
||||||
"description": [
|
|
||||||
"<strong>Objetivo:</strong> Construye una aplicación en <a href='https://codepen.io' target='_blank'>CodePen.io</a> que funcione de forma similar al siguiente ejemplo: <a href='https://codepen.io/freeCodeCamp/full/PNJRyd/' target='_blank'>https://codepen.io/freeCodeCamp/full/PNJRyd/</a>.",
|
|
||||||
"<strong>Regla #1:</strong> No veas el código del proyecto de ejemplo. Encuentra la forma de hacerlo por tu cuenta.",
|
|
||||||
"<strong>Regla #2:</strong> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o API que sea necesaria. ¡Ponle un toque personal!.",
|
|
||||||
"<strong>Rule #3:</strong> Debes utilizar ambos Sass y React para construir este proyecto.",
|
|
||||||
"<strong>Historia de usuario:</strong> Tengo energía, nivel de habilidad y un arma. Puedo recoger un arma mejor. Puedo recoger ítems que recuperan mi energía.",
|
|
||||||
"<strong>Historia de usuario:</strong> Todos los ítems y los enemigos en el mapa están colocados aleatoriamente.",
|
|
||||||
"<strong>Historia de usuario:</strong> Puedo moverme a lo largo de un mapa y descubrir ítems.",
|
|
||||||
"<strong>Historia de usuario:</strong> Puedo moverme hacia cualquier parte dentro de los límites del mapa, pero no puedo moverme sobre un enemigo hasta que lo haya vencido.",
|
|
||||||
"<strong>Historia de usuario:</strong> Gran parte del mapa está escondido. Cuando doy un paso, todos los espacios que están a cierto número de espacios de distancia de mi son revelados.",
|
|
||||||
"<strong>Historia de usuario:</strong> Cuando venzo un enemigo, este desaparece y yo gano puntos de experiencia (XP), lo que eventualmente me permite aumentar de nivel.",
|
|
||||||
"<strong>Historia de usuario:</strong> Cuando peleo con un enemigo, tomamos turnos haciéndonos daño hasta que uno de los dos pierde. El daño que hago está basado en mi nivel de experiencia y en el arma que estoy utilizando. El enemigo hace daño basado en su nivel. El daño es aleatorio dentro de cierto márgen.",
|
|
||||||
"<strong>Historia de usuario:</strong> Gano el juego cuando encuentre y venza al jefe.",
|
|
||||||
"<strong>Historia de usuario:</strong> El juego debe representar un reto, pero ganar debe ser teóricamente posible.",
|
|
||||||
"Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> si te sientes atascado.",
|
|
||||||
"Cuando termines, haz clic en el botón de \"I've completed this challenge\" e incluye el vínculo de tu proyecto en CodePen. ",
|
|
||||||
"Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Cuarto de revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"ru": {
|
|
||||||
"title": "Создайте Roguelike-подобную игру Подземелье",
|
|
||||||
"description": [
|
|
||||||
"<strong>Задание:</strong> Создайте приложение <a href='https://codepen.io' target='_blank'>CodePen.io</a>, функционал которого схож с этим: <a href='https://codepen.io/freeCodeCamp/full/PNJRyd/' target='_blank'>https://codepen.io/freeCodeCamp/full/PNJRyd/</a>.",
|
|
||||||
"<strong>Правило #1:</strong> Не подсматривайте код приложения-примера. Напишите его самостоятельно.",
|
|
||||||
"<strong>Правило #2:</strong> Приложение должно удовлетворять нижеприведённым <a href='https://ru.wikipedia.org/wiki/Пользовательские_истории' target='_blank'>пользовательским историям</a>. Используйте любые библиотеки или API, которые потребуются. Придайте ему свой личный стиль.",
|
|
||||||
"<strong>Правило #3:</strong> Для создания этого проекта вы должны использовать Sass и React.",
|
|
||||||
"<strong>Пользовательская история:</strong> У меня есть жизни, уровень и оружие. Я могу подобрать оружие получше. Я могу подобрать очки здоровья.",
|
|
||||||
"<strong>Пользовательская история:</strong> Все предметы и враги располагаются на карте случайным образом.",
|
|
||||||
"<strong>Пользовательская история:</strong> Я могу передвигаться по карте, обнаруживая новые предметы.",
|
|
||||||
"<strong>Пользовательская история:</strong> Я могу двигаться куда угодно в рамках карты, но не могу продвинуться дальше врага, пока он не будет побежден.",
|
|
||||||
"<strong>Пользовательская история:</strong> Большая часть карты скрыта. Когда я делаю шаг, все клетки в определенном количестве клеток от меня становятся видимы.",
|
|
||||||
"<strong>Пользовательская история:</strong> Когда я побеждаю врага, враг исчезает, а я получаю очки опыта (XP), что увеличивает мой уровень.",
|
|
||||||
"<strong>Пользовательская история:</strong> Когда я веду бой с врагом, мы поочередно наносим друг-другу повреждения, до тех пор пока кто-нибудь не победит. Я наношу повреждения, которые зависят от моего уровня и моего оружия. Враг наносит повреждения, которые зависят от его уровня. Значение повреждений распределено случайным образом в некотором диапазоне.",
|
|
||||||
"<strong>Пользовательская история:</strong> Когад я нахожу и побеждаю босса, я выигрываю игру.",
|
|
||||||
"<strong>Пользовательская история:</strong> Игра должна быть интересной и достаточно сложной, но теоретически проходимой.",
|
|
||||||
"Если что-то не получается, не забывайте пользоваться методом <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Читай-Ищи-Спрашивай</a>.",
|
|
||||||
"Когда закончите, нажмите кнопку \"I've completed this challenge\" и укажите ссылку на вашу работу на CodePen.",
|
|
||||||
"Вы можете получить отзыв о вашем проекте от коллег, поделившись ссылкой на него в нашем <a href='//gitter.im/freecodecamp/codereview' target='_blank'>чате для рассмотрения кода</a>. Также вы можете поделиться ею через Twitter и на странице Free Code Camp вашего города на Facebook."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@ -1,23 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "React",
|
|
||||||
"order": 14,
|
|
||||||
"isComingSoon": true,
|
|
||||||
"time": "5 hours",
|
|
||||||
"helpRoom": "HelpDataViz",
|
|
||||||
"challenges": [
|
|
||||||
{
|
|
||||||
"id": "bd7158d8c423ede3aeb5bdee",
|
|
||||||
"title": "Learn React Challenges",
|
|
||||||
"description": [],
|
|
||||||
"challengeSeed": [],
|
|
||||||
"tests": [],
|
|
||||||
"type": "waypoint",
|
|
||||||
"challengeType": 3,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Desafios para aprender React"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@ -1,19 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "Sass",
|
|
||||||
"order": 13,
|
|
||||||
"isComingSoon": true,
|
|
||||||
"time": "5 hours",
|
|
||||||
"helpRoom": "HelpDataViz",
|
|
||||||
"challenges": [
|
|
||||||
{
|
|
||||||
"id": "bd7158d8c423ede2aeb5bdee",
|
|
||||||
"title": "Learn Sass Challenges",
|
|
||||||
"description": [],
|
|
||||||
"challengeSeed": [],
|
|
||||||
"tests": [],
|
|
||||||
"type": "waypoint",
|
|
||||||
"challengeType": 3,
|
|
||||||
"translations": {}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "Basic Algorithm Scripting",
|
"name": "Basic Algorithm Scripting",
|
||||||
"order": 8,
|
"order": 5,
|
||||||
"time": "50 hours",
|
"time": "50 hours",
|
||||||
"helpRoom": "HelpJavaScript",
|
"helpRoom": "HelpJavaScript",
|
||||||
"challenges": [
|
"challenges": [
|
||||||
@ -212,77 +212,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"id": "aaa48de84e1ecc7c742e1124",
|
|
||||||
"title": "Check for Palindromes",
|
|
||||||
"description": [
|
|
||||||
"Return <code>true</code> if the given string is a palindrome. Otherwise, return <code>false</code>.",
|
|
||||||
"A <dfn>palindrome</dfn> is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing.",
|
|
||||||
"<strong>Note</strong><br>You'll need to remove <strong>all non-alphanumeric characters</strong> (punctuation, spaces and symbols) and turn everything into the same case (lower or upper case) in order to check for palindromes.",
|
|
||||||
"We'll pass strings with varying formats, such as <code>\"racecar\"</code>, <code>\"RaceCar\"</code>, and <code>\"race CAR\"</code> among others.",
|
|
||||||
"We'll also pass strings with special symbols, such as <code>\"2A3*3a2\"</code>, <code>\"2A3 3a2\"</code>, and <code>\"2_A3*3#A2\"</code>.",
|
|
||||||
"Remember to use <a href=\"http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Read-Search-Ask</a> if you get stuck. Write your own code."
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"function palindrome(str) {",
|
|
||||||
" // Good luck!",
|
|
||||||
" return true;",
|
|
||||||
"}",
|
|
||||||
"",
|
|
||||||
"",
|
|
||||||
"",
|
|
||||||
"palindrome(\"eye\");"
|
|
||||||
],
|
|
||||||
"tests": [
|
|
||||||
"assert(typeof palindrome(\"eye\") === \"boolean\", 'message: <code>palindrome(\"eye\")</code> should return a boolean.');",
|
|
||||||
"assert(palindrome(\"eye\") === true, 'message: <code>palindrome(\"eye\")</code> should return true.');",
|
|
||||||
"assert(palindrome(\"_eye\") === true, 'message: <code>palindrome(\"_eye\")</code> should return true.');",
|
|
||||||
"assert(palindrome(\"race car\") === true, 'message: <code>palindrome(\"race car\")</code> should return true.');",
|
|
||||||
"assert(palindrome(\"not a palindrome\") === false, 'message: <code>palindrome(\"not a palindrome\")</code> should return false.');",
|
|
||||||
"assert(palindrome(\"A man, a plan, a canal. Panama\") === true, 'message: <code>palindrome(\"A man, a plan, a canal. Panama\")</code> should return true.');",
|
|
||||||
"assert(palindrome(\"never odd or even\") === true, 'message: <code>palindrome(\"never odd or even\")</code> should return true.');",
|
|
||||||
"assert(palindrome(\"nope\") === false, 'message: <code>palindrome(\"nope\")</code> should return false.');",
|
|
||||||
"assert(palindrome(\"almostomla\") === false, 'message: <code>palindrome(\"almostomla\")</code> should return false.');",
|
|
||||||
"assert(palindrome(\"My age is 0, 0 si ega ym.\") === true, 'message: <code>palindrome(\"My age is 0, 0 si ega ym.\")</code> should return true.');",
|
|
||||||
"assert(palindrome(\"1 eye for of 1 eye.\") === false, 'message: <code>palindrome(\"1 eye for of 1 eye.\")</code> should return false.');",
|
|
||||||
"assert(palindrome(\"0_0 (: /-\\ :) 0-0\") === true, 'message: <code>palindrome(\"0_0 (: /-\\ :) 0-0\")</code> should return true.');",
|
|
||||||
"assert(palindrome(\"five|\\_/|four\") === false, 'message: <code>palindrome(\"five|\\_/|four\")</code> should return false.');"
|
|
||||||
],
|
|
||||||
"type": "bonfire",
|
|
||||||
"isRequired": true,
|
|
||||||
"solutions": [
|
|
||||||
"function palindrome(str) {\n var string = str.toLowerCase().split(/[^A-Za-z0-9]/gi).join('');\n var aux = string.split('');\n if (aux.join('') === aux.reverse().join('')){\n return true;\n }\n\n return false;\n}"
|
|
||||||
],
|
|
||||||
"MDNlinks": [
|
|
||||||
"String.prototype.replace()",
|
|
||||||
"String.prototype.toLowerCase()"
|
|
||||||
],
|
|
||||||
"challengeType": 5,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Verifica si es palíndromo",
|
|
||||||
"description": [
|
|
||||||
"Crea una función que devuelva <code>true</code> si una cadena de texto dada es un palíndromo, y que devuelva <code>false</code> en caso contrario",
|
|
||||||
"Un palíndromo es una palabra u oración que se escribe de la misma forma en ambos sentidos, sin tomar en cuenta signos de puntuación, espacios y sin distinguir entre mayúsculas y minúsculas.",
|
|
||||||
"Tendrás que quitar los caracteres no alfanuméricos (signos de puntuación, espacioes y símbolos) y transformar las letras a minúsculas para poder verificar si el texto es palíndromo.",
|
|
||||||
"Te proveeremos textos en varios formatos, como \"racecar\", \"RaceCar\", and \"race CAR\" entre otros.",
|
|
||||||
"También vamos a pasar cadenas con símbolos especiales, tales como <code>\"2A3*3a2\"</code>, <code>\"2A3 3a2\"</code>, y <code>\"2_A3*3#A2\"</code>.",
|
|
||||||
"Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"pt-br": {
|
|
||||||
"title": "Procure por Palíndromos",
|
|
||||||
"description": [
|
|
||||||
"Retorne <code>true</code> se o texto fornecida é um palíndromo. Caso contrário, retorne <code>false</code>.",
|
|
||||||
"Um <dfn>palíndromo</dfn> é uma palavra ou sentença que é soletrada da mesma maneira tanto para a frente quanto para trás, ignorando pontuação, maiúsculas e minúsculas, e espaçamento.",
|
|
||||||
"<strong>Nota</strong><br>Você precisará remover <strong>todos caracteres não alfanuméricos</strong> (pontuação, espaços e símbolos) e transformar todas as letras em maiúsculas ou minúsculas para procurar por palíndromos.",
|
|
||||||
"Nós vamos passar textos de vários formatos, tais como <code>\"racecar\"</code>, <code>\"RaceCar\"</code> e <code>\"race CAR\"</code> entre outras.",
|
|
||||||
"Nós também vamos passar textos com símbolos especiais, tais como <code>\"2A3*3a2\"</code>, <code>\"2A3 3a2\"</code> e <code>\"2_A3*3#A2\"</code>.",
|
|
||||||
"Lembre-se de usar <a href=\"http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Ler-Pesquisar-Perguntar</a> se você ficar travado. Escreva seu próprio código."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"id": "a26cbbe9ad8655a977e1ceb5",
|
"id": "a26cbbe9ad8655a977e1ceb5",
|
||||||
"title": "Find the Longest Word in a String",
|
"title": "Find the Longest Word in a String",
|
||||||
@ -335,55 +264,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"id": "ab6137d4e35944e21037b769",
|
|
||||||
"title": "Title Case a Sentence",
|
|
||||||
"description": [
|
|
||||||
"Return the provided string with the first letter of each word capitalized. Make sure the rest of the word is in lower case.",
|
|
||||||
"For the purpose of this exercise, you should also capitalize connecting words like \"the\" and \"of\".",
|
|
||||||
"Remember to use <a href=\"http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Read-Search-Ask</a> if you get stuck. Write your own code."
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"function titleCase(str) {",
|
|
||||||
" return str;",
|
|
||||||
"}",
|
|
||||||
"",
|
|
||||||
"titleCase(\"I'm a little tea pot\");"
|
|
||||||
],
|
|
||||||
"tests": [
|
|
||||||
"assert(typeof titleCase(\"I'm a little tea pot\") === \"string\", 'message: <code>titleCase(\"I'm a little tea pot\")</code> should return a string.');",
|
|
||||||
"assert(titleCase(\"I'm a little tea pot\") === \"I'm A Little Tea Pot\", 'message: <code>titleCase(\"I'm a little tea pot\")</code> should return \"I'm A Little Tea Pot\".');",
|
|
||||||
"assert(titleCase(\"sHoRt AnD sToUt\") === \"Short And Stout\", 'message: <code>titleCase(\"sHoRt AnD sToUt\")</code> should return \"Short And Stout\".');",
|
|
||||||
"assert(titleCase(\"HERE IS MY HANDLE HERE IS MY SPOUT\") === \"Here Is My Handle Here Is My Spout\", 'message: <code>titleCase(\"HERE IS MY HANDLE HERE IS MY SPOUT\")</code> should return \"Here Is My Handle Here Is My Spout\".');"
|
|
||||||
],
|
|
||||||
"type": "bonfire",
|
|
||||||
"isRequired": true,
|
|
||||||
"solutions": [
|
|
||||||
"function titleCase(str) {\n return str.split(' ').map(function(word) {\n return word.charAt(0).toUpperCase() + word.substring(1).toLowerCase();\n }).join(' ');\n}\n\ntitleCase(\"I'm a little tea pot\");\n"
|
|
||||||
],
|
|
||||||
"MDNlinks": [
|
|
||||||
"String.prototype.split()"
|
|
||||||
],
|
|
||||||
"challengeType": 5,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Aplica formato de título",
|
|
||||||
"description": [
|
|
||||||
"Crea una función que devuelva la cadena de texto que recibe con la primera letra de cada palabra en mayúscula. Asegúrate de que el resto de las letras sean minúsculas",
|
|
||||||
"Para este ejercicio, también debes poner en mayúscula conectores como \"the\" y \"of\".",
|
|
||||||
"Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"pt-br": {
|
|
||||||
"title": "Transforme o Texto em um Título",
|
|
||||||
"description": [
|
|
||||||
"Retorne o texto fornecido com a primeira letra de cada palavra em maiúsculo. Garanta que o resto da palavra esteja em formato minúsculo.",
|
|
||||||
"Para o propósito deste exercício, você deve transformar também palavras conectivas como \"the\" e \"of\".",
|
|
||||||
"Lembre-se de usar <a href=\"http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Ler-Pesquisar-Perguntar</a> se você ficar travado. Escreva seu próprio código."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"id": "a789b3483989747d63b0e427",
|
"id": "a789b3483989747d63b0e427",
|
||||||
"title": "Return Largest Numbers in Arrays",
|
"title": "Return Largest Numbers in Arrays",
|
||||||
@ -403,8 +283,7 @@
|
|||||||
"tests": [
|
"tests": [
|
||||||
"assert(largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]]).constructor === Array, 'message: <code>largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]])</code> should return an array.');",
|
"assert(largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]]).constructor === Array, 'message: <code>largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]])</code> should return an array.');",
|
||||||
"assert.deepEqual(largestOfFour([[13, 27, 18, 26], [4, 5, 1, 3], [32, 35, 37, 39], [1000, 1001, 857, 1]]), [27,5,39,1001], 'message: <code>largestOfFour([[13, 27, 18, 26], [4, 5, 1, 3], [32, 35, 37, 39], [1000, 1001, 857, 1]])</code> should return <code>[27,5,39,1001]</code>.');",
|
"assert.deepEqual(largestOfFour([[13, 27, 18, 26], [4, 5, 1, 3], [32, 35, 37, 39], [1000, 1001, 857, 1]]), [27,5,39,1001], 'message: <code>largestOfFour([[13, 27, 18, 26], [4, 5, 1, 3], [32, 35, 37, 39], [1000, 1001, 857, 1]])</code> should return <code>[27,5,39,1001]</code>.');",
|
||||||
"assert.deepEqual(largestOfFour([[4, 9, 1, 3], [13, 35, 18, 26], [32, 35, 97, 39], [1000000, 1001, 857, 1]]), [9,35,97,1000000], 'message: <code>largestOfFour([[4, 9, 1, 3], [13, 35, 18, 26], [32, 35, 97, 39], [1000000, 1001, 857, 1]])</code> should return <code>[9, 35, 97, 1000000]</code>.');",
|
"assert.deepEqual(largestOfFour([[4, 9, 1, 3], [13, 35, 18, 26], [32, 35, 97, 39], [1000000, 1001, 857, 1]]), [9,35,97,1000000], 'message: <code>largestOfFour([[4, 9, 1, 3], [13, 35, 18, 26], [32, 35, 97, 39], [1000000, 1001, 857, 1]])</code> should return <code>[9, 35, 97, 1000000]</code>.');"
|
||||||
"assert.deepEqual(largestOfFour([[-2, -7, -9, -4], [-13, -7, -100, -10], [-39, -37, -95, -32], [-1, -1001, -857, -1000000]]), [-2, -7, -32, -1], 'message: <code>largestOfFour([[-2, -7, -9, -4], [-13, -7, -100, -10], [-39, -37, -95, -32], [-1, -1001, -857, -1000000]])</code> should return <code>[-2, -7, -32, -1]</code>.');"
|
|
||||||
],
|
],
|
||||||
"type": "bonfire",
|
"type": "bonfire",
|
||||||
"isRequired": true,
|
"isRequired": true,
|
||||||
@ -597,51 +476,150 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "a9bd25c716030ec90084d8a1",
|
"id": "a6e40f1041b06c996f7b2406",
|
||||||
"title": "Chunky Monkey",
|
"title": "Finders Keepers",
|
||||||
"description": [
|
"description": [
|
||||||
"Write a function that splits an array (first argument) into groups the length of <code>size</code> (second argument) and returns them as a two-dimensional array.",
|
"Create a function that looks through an array (first argument) and returns the first element in the array that passes a truth test (second argument). If no element passes the test, return undefined.",
|
||||||
|
"Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck. Try to pair program. Write your own code."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"function findElement(arr, func) {",
|
||||||
|
" var num = 0;",
|
||||||
|
" return num;",
|
||||||
|
"}",
|
||||||
|
"",
|
||||||
|
"findElement([1, 2, 3, 4], function(num){ return num % 2 === 0; });"
|
||||||
|
],
|
||||||
|
"solutions": [
|
||||||
|
"function findElement(arr, func) {\n var num;\n arr.some(function(e) {\n if (func(e)) {\n num = e;\n return true;\n }\n });\n return num;\n}"
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert.strictEqual(findElement([1, 3, 5, 8, 9, 10], function(num) { return num % 2 === 0; }), 8, 'message: <code>findElement([1, 3, 5, 8, 9, 10], function(num) { return num % 2 === 0; })</code> should return 8.');",
|
||||||
|
"assert.strictEqual(findElement([1, 3, 5, 9], function(num) { return num % 2 === 0; }), undefined, 'message: <code>findElement([1, 3, 5, 9], function(num) { return num % 2 === 0; })</code> should return undefined.');"
|
||||||
|
],
|
||||||
|
"type": "bonfire",
|
||||||
|
"MDNlinks": [
|
||||||
|
"Array.prototype.filter()"
|
||||||
|
],
|
||||||
|
"isRequired": true,
|
||||||
|
"challengeType": 5,
|
||||||
|
"translations": {
|
||||||
|
"es": {
|
||||||
|
"title": "Buscando la verdad",
|
||||||
|
"description": [
|
||||||
|
"Crea una función que busque dentro de un vector (primer argumento) y que devuelva el primer elemento que pase una prueba de verdad (segundo argumento).",
|
||||||
|
"Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"title": "Détecteur de mensonges",
|
||||||
|
"description": [
|
||||||
|
"Crée une fonction qui parcourt un tableau (premier argument) et renvoie le premier élément du tableau qui passe le test (second argument).",
|
||||||
|
"N'oublie pas d'utiliser <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Lire-Chercher-Demander</a> si tu es bloqué. Essaye de trouver un partenaire. Écris ton propre code."
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "a77dbc43c33f39daa4429b4f",
|
||||||
|
"title": "Boo who",
|
||||||
|
"description": [
|
||||||
|
"Check if a value is classified as a boolean primitive. Return true or false.",
|
||||||
|
"Boolean primitives are true and false.",
|
||||||
|
"Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck. Try to pair program. Write your own code."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"function booWho(bool) {",
|
||||||
|
" // What is the new fad diet for ghost developers? The Boolean.",
|
||||||
|
" return bool;",
|
||||||
|
"}",
|
||||||
|
"",
|
||||||
|
"booWho(null);"
|
||||||
|
],
|
||||||
|
"solutions": [
|
||||||
|
"function booWho(bool) {\n // What is the new fad diet for ghost developers? The Boolean.\n return typeof bool === \"boolean\";\n}\n\nbooWho(null);"
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert.strictEqual(booWho(true), true, 'message: <code>booWho(true)</code> should return true.');",
|
||||||
|
"assert.strictEqual(booWho(false), true, 'message: <code>booWho(false)</code> should return true.');",
|
||||||
|
"assert.strictEqual(booWho([1, 2, 3]), false, 'message: <code>booWho([1, 2, 3])</code> should return false.');",
|
||||||
|
"assert.strictEqual(booWho([].slice), false, 'message: <code>booWho([].slice)</code> should return false.');",
|
||||||
|
"assert.strictEqual(booWho({ \"a\": 1 }), false, 'message: <code>booWho({ \"a\": 1 })</code> should return false.');",
|
||||||
|
"assert.strictEqual(booWho(1), false, 'message: <code>booWho(1)</code> should return false.');",
|
||||||
|
"assert.strictEqual(booWho(NaN), false, 'message: <code>booWho(NaN)</code> should return false.');",
|
||||||
|
"assert.strictEqual(booWho(\"a\"), false, 'message: <code>booWho(\"a\")</code> should return false.');",
|
||||||
|
"assert.strictEqual(booWho(\"true\"), false, 'message: <code>booWho(\"true\")</code> should return false.');",
|
||||||
|
"assert.strictEqual(booWho(\"false\"), false, 'message: <code>booWho(\"false\")</code> should return false.');"
|
||||||
|
],
|
||||||
|
"type": "bonfire",
|
||||||
|
"MDNlinks": [
|
||||||
|
"Boolean Objects"
|
||||||
|
],
|
||||||
|
"isRequired": true,
|
||||||
|
"challengeType": 5,
|
||||||
|
"translations": {
|
||||||
|
"es": {
|
||||||
|
"title": "¡Bu!",
|
||||||
|
"description": [
|
||||||
|
"Crea una función que verifique si el valor que se le pasa es de tipo booleano. Haz que la función devuelva true o false según corresponda.",
|
||||||
|
"Los primitivos booleanos primitivos son: true y false",
|
||||||
|
"Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"title": "Boo !",
|
||||||
|
"description": [
|
||||||
|
"Crée une fonction qui vérifie qu'une valeur est de type booléen. Renvoie true ou false.",
|
||||||
|
"Les primitives booléennes sont true ou false.",
|
||||||
|
"N'oublie pas d'utiliser <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Lire-Chercher-Demander</a> si tu es bloqué. Essaye de trouver un partenaire. Écris ton propre code."
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "ab6137d4e35944e21037b769",
|
||||||
|
"title": "Title Case a Sentence",
|
||||||
|
"description": [
|
||||||
|
"Return the provided string with the first letter of each word capitalized. Make sure the rest of the word is in lower case.",
|
||||||
|
"For the purpose of this exercise, you should also capitalize connecting words like \"the\" and \"of\".",
|
||||||
"Remember to use <a href=\"http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Read-Search-Ask</a> if you get stuck. Write your own code."
|
"Remember to use <a href=\"http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Read-Search-Ask</a> if you get stuck. Write your own code."
|
||||||
],
|
],
|
||||||
"challengeSeed": [
|
"challengeSeed": [
|
||||||
"function chunkArrayInGroups(arr, size) {",
|
"function titleCase(str) {",
|
||||||
" // Break it up.",
|
" return str;",
|
||||||
" return arr;",
|
|
||||||
"}",
|
"}",
|
||||||
"",
|
"",
|
||||||
"chunkArrayInGroups([\"a\", \"b\", \"c\", \"d\"], 2);"
|
"titleCase(\"I'm a little tea pot\");"
|
||||||
],
|
],
|
||||||
"tests": [
|
"tests": [
|
||||||
"assert.deepEqual(chunkArrayInGroups([\"a\", \"b\", \"c\", \"d\"], 2), [[\"a\", \"b\"], [\"c\", \"d\"]], 'message: <code>chunkArrayInGroups([\"a\", \"b\", \"c\", \"d\"], 2)</code> should return <code>[[\"a\", \"b\"], [\"c\", \"d\"]]</code>.');",
|
"assert(typeof titleCase(\"I'm a little tea pot\") === \"string\", 'message: <code>titleCase(\"I'm a little tea pot\")</code> should return a string.');",
|
||||||
"assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5], 3), [[0, 1, 2], [3, 4, 5]], 'message: <code>chunkArrayInGroups([0, 1, 2, 3, 4, 5], 3)</code> should return <code>[[0, 1, 2], [3, 4, 5]]</code>.');",
|
"assert(titleCase(\"I'm a little tea pot\") === \"I'm A Little Tea Pot\", 'message: <code>titleCase(\"I'm a little tea pot\")</code> should return \"I'm A Little Tea Pot\".');",
|
||||||
"assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5], 2), [[0, 1], [2, 3], [4, 5]], 'message: <code>chunkArrayInGroups([0, 1, 2, 3, 4, 5], 2)</code> should return <code>[[0, 1], [2, 3], [4, 5]]</code>.');",
|
"assert(titleCase(\"sHoRt AnD sToUt\") === \"Short And Stout\", 'message: <code>titleCase(\"sHoRt AnD sToUt\")</code> should return \"Short And Stout\".');",
|
||||||
"assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5], 4), [[0, 1, 2, 3], [4, 5]], 'message: <code>chunkArrayInGroups([0, 1, 2, 3, 4, 5], 4)</code> should return <code>[[0, 1, 2, 3], [4, 5]]</code>.');",
|
"assert(titleCase(\"HERE IS MY HANDLE HERE IS MY SPOUT\") === \"Here Is My Handle Here Is My Spout\", 'message: <code>titleCase(\"HERE IS MY HANDLE HERE IS MY SPOUT\")</code> should return \"Here Is My Handle Here Is My Spout\".');"
|
||||||
"assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6], 3), [[0, 1, 2], [3, 4, 5], [6]], 'message: <code>chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6], 3)</code> should return <code>[[0, 1, 2], [3, 4, 5], [6]]</code>.');",
|
|
||||||
"assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 4), [[0, 1, 2, 3], [4, 5, 6, 7], [8]], 'message: <code>chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 4)</code> should return <code>[[0, 1, 2, 3], [4, 5, 6, 7], [8]]</code>.');",
|
|
||||||
"assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 2), [[0, 1], [2, 3], [4, 5], [6, 7], [8]], 'message: <code>chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 2)</code> should return <code>[[0, 1], [2, 3], [4, 5], [6, 7], [8]]</code>.');"
|
|
||||||
],
|
],
|
||||||
"type": "bonfire",
|
"type": "bonfire",
|
||||||
"isRequired": true,
|
"isRequired": true,
|
||||||
"solutions": [
|
"solutions": [
|
||||||
"function chunkArrayInGroups(arr, size) {\n var out = [];\n for (var i = 0; i < arr.length; i+=size) {\n out.push(arr.slice(i,i+size));\n }\n return out;\n}\n\nchunkArrayInGroups(['a', 'b', 'c', 'd'], 2);\n"
|
"function titleCase(str) {\n return str.split(' ').map(function(word) {\n return word.charAt(0).toUpperCase() + word.substring(1).toLowerCase();\n }).join(' ');\n}\n\ntitleCase(\"I'm a little tea pot\");\n"
|
||||||
],
|
],
|
||||||
"MDNlinks": [
|
"MDNlinks": [
|
||||||
"Array.prototype.push()",
|
"String.prototype.split()"
|
||||||
"Array.prototype.slice()"
|
|
||||||
],
|
],
|
||||||
"challengeType": 5,
|
"challengeType": 5,
|
||||||
"translations": {
|
"translations": {
|
||||||
"es": {
|
"es": {
|
||||||
"title": "En mil Pedazos",
|
"title": "Aplica formato de título",
|
||||||
"description": [
|
"description": [
|
||||||
"Escribe una función que parta un arreglo (primer argumento) en fragmentos de una longitud dada (segundo argumento) y los devuelva en forma de un arreglo bidimensional.",
|
"Crea una función que devuelva la cadena de texto que recibe con la primera letra de cada palabra en mayúscula. Asegúrate de que el resto de las letras sean minúsculas",
|
||||||
|
"Para este ejercicio, también debes poner en mayúscula conectores como \"the\" y \"of\".",
|
||||||
"Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
|
"Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"pt-br": {
|
"pt-br": {
|
||||||
"title": "Em Pedaços",
|
"title": "Transforme o Texto em um Título",
|
||||||
"description": [
|
"description": [
|
||||||
"Escreva uma funcção que divide uma matriz (primeiro argumento) em grupos de tamanho <code>size</code> (segundo argumento) e os retorna em uma matriz bidimensional.",
|
"Retorne o texto fornecido com a primeira letra de cada palavra em maiúsculo. Garanta que o resto da palavra esteja em formato minúsculo.",
|
||||||
|
"Para o propósito deste exercício, você deve transformar também palavras conectivas como \"the\" e \"of\".",
|
||||||
"Lembre-se de usar <a href=\"http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Ler-Pesquisar-Perguntar</a> se você ficar travado. Escreva seu próprio código."
|
"Lembre-se de usar <a href=\"http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Ler-Pesquisar-Perguntar</a> se você ficar travado. Escreva seu próprio código."
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
@ -701,6 +679,113 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"id": "adf08ec01beb4f99fc7a68f2",
|
||||||
|
"title": "Falsy Bouncer",
|
||||||
|
"description": [
|
||||||
|
"Remove all falsy values from an array.",
|
||||||
|
"Falsy values in JavaScript are <code>false</code>, <code>null</code>, <code>0</code>, <code>\"\"</code>, <code>undefined</code>, and <code>NaN</code>.",
|
||||||
|
"Remember to use <a href=\"http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Read-Search-Ask</a> if you get stuck. Write your own code."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"function bouncer(arr) {",
|
||||||
|
" // Don't show a false ID to this bouncer.",
|
||||||
|
" return arr;",
|
||||||
|
"}",
|
||||||
|
"",
|
||||||
|
"bouncer([7, \"ate\", \"\", false, 9]);"
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert.deepEqual(bouncer([7, \"ate\", \"\", false, 9]), [7, \"ate\", 9], 'message: <code>bouncer([7, \"ate\", \"\", false, 9])</code> should return <code>[7, \"ate\", 9]</code>.');",
|
||||||
|
"assert.deepEqual(bouncer([\"a\", \"b\", \"c\"]), [\"a\", \"b\", \"c\"], 'message: <code>bouncer([\"a\", \"b\", \"c\"])</code> should return <code>[\"a\", \"b\", \"c\"]</code>.');",
|
||||||
|
"assert.deepEqual(bouncer([false, null, 0, NaN, undefined, \"\"]), [], 'message: <code>bouncer([false, null, 0, NaN, undefined, \"\"])</code> should return <code>[]</code>.');",
|
||||||
|
"assert.deepEqual(bouncer([1, null, NaN, 2, undefined]), [1, 2], 'message: <code>bouncer([1, null, NaN, 2, undefined])</code> should return <code>[1, 2]</code>.');"
|
||||||
|
],
|
||||||
|
"type": "bonfire",
|
||||||
|
"isRequired": true,
|
||||||
|
"solutions": [
|
||||||
|
"function bouncer(arr) {\n // Don't show a false ID to this bouncer.\n return arr.filter(function(e) {return e;});\n}\n\nbouncer([7, 'ate', '', false, 9]);\n"
|
||||||
|
],
|
||||||
|
"MDNlinks": [
|
||||||
|
"Boolean Objects",
|
||||||
|
"Array.prototype.filter()"
|
||||||
|
],
|
||||||
|
"challengeType": 5,
|
||||||
|
"translations": {
|
||||||
|
"es": {
|
||||||
|
"title": "Detector de Mentiras",
|
||||||
|
"description": [
|
||||||
|
"Remueve todos los valores falsy de un arreglo dado",
|
||||||
|
"En javascript, los valores falsy son los siguientes: <code>false</code>, <code>null</code>, <code>0</code>, <code>\"\"</code>, <code>undefined</code>, y <code>NaN</code>.",
|
||||||
|
"Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"title": "Detector de Mentiras",
|
||||||
|
"description": [
|
||||||
|
"Remova todos os valores falsos de uma matriz.",
|
||||||
|
"Valores falsos em JavaScript são <code>false</code>, <code>null</code>, <code>0</code>, <code>\"\"</code>, <code>undefined</code>, e <code>NaN</code>.",
|
||||||
|
"Lembre-se de usar <a href=\"http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Ler-Pesquisar-Perguntar</a> se você ficar travado. Escreva seu próprio código."
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "a24c1a4622e3c05097f71d67",
|
||||||
|
"title": "Where do I Belong",
|
||||||
|
"description": [
|
||||||
|
"Return the lowest index at which a value (second argument) should be inserted into an array (first argument) once it has been sorted. The returned value should be a number.",
|
||||||
|
"For example, <code>getIndexToIns([1,2,3,4], 1.5)</code> should return <code>1</code> because it is greater than <code>1</code> (index 0), but less than <code>2</code> (index 1).",
|
||||||
|
"Likewise, <code>getIndexToIns([20,3,5], 19)</code> should return <code>2</code> because once the array has been sorted it will look like <code>[3,5,20]</code> and <code>19</code> is less than <code>20</code> (index 2) and greater than <code>5</code> (index 1).",
|
||||||
|
"Remember to use <a href=\"http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Read-Search-Ask</a> if you get stuck. Write your own code."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"function getIndexToIns(arr, num) {",
|
||||||
|
" // Find my place in this sorted array.",
|
||||||
|
" return num;",
|
||||||
|
"}",
|
||||||
|
"",
|
||||||
|
"getIndexToIns([40, 60], 50);"
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert(getIndexToIns([10, 20, 30, 40, 50], 35) === 3, 'message: <code>getIndexToIns([10, 20, 30, 40, 50], 35)</code> should return <code>3</code>.');",
|
||||||
|
"assert(getIndexToIns([10, 20, 30, 40, 50], 30) === 2, 'message: <code>getIndexToIns([10, 20, 30, 40, 50], 30)</code> should return <code>2</code>.');",
|
||||||
|
"assert(getIndexToIns([40, 60], 50) === 1, 'message: <code>getIndexToIns([40, 60], 50)</code> should return <code>1</code>.');",
|
||||||
|
"assert(getIndexToIns([3, 10, 5], 3) === 0, 'message: <code>getIndexToIns([3, 10, 5], 3)</code> should return <code>0</code>.');",
|
||||||
|
"assert(getIndexToIns([5, 3, 20, 3], 5) === 2, 'message: <code>getIndexToIns([5, 3, 20, 3], 5)</code> should return <code>2</code>.');",
|
||||||
|
"assert(getIndexToIns([2, 20, 10], 19) === 2, 'message: <code>getIndexToIns([2, 20, 10], 19)</code> should return <code>2</code>.');",
|
||||||
|
"assert(getIndexToIns([2, 5, 10], 15) === 3, 'message: <code>getIndexToIns([2, 5, 10], 15)</code> should return <code>3</code>.');"
|
||||||
|
],
|
||||||
|
"type": "bonfire",
|
||||||
|
"isRequired": true,
|
||||||
|
"solutions": [
|
||||||
|
"function getIndexToIns(arr, num) {\n arr = arr.sort(function(a, b){return a-b;});\n for (var i = 0; i < arr.length; i++) {\n if (arr[i] >= num)\n {\n return i;\n }\n }\n return arr.length;\n}"
|
||||||
|
],
|
||||||
|
"MDNlinks": [
|
||||||
|
"Array.prototype.sort()"
|
||||||
|
],
|
||||||
|
"challengeType": 5,
|
||||||
|
"translations": {
|
||||||
|
"es": {
|
||||||
|
"title": "¿Cuál es mi Asiento?",
|
||||||
|
"description": [
|
||||||
|
"Devuelve el menor índice en el que un valor (segundo argumento) debe ser insertado en un arreglo (primer argumento) una vez ha sido ordenado.",
|
||||||
|
"Por ejemplo, where([1,2,3,4], 1.5) debe devolver 1 porque el segundo argumento de la función (1.5) es mayor que 1 (con índice 0 en el arreglo), pero menor que 2 (con índice 1).",
|
||||||
|
"Mientras que <code>where([20,3,5], 19)</code> debe devolver <code>2</code> porque una vez ordenado el arreglo se verá com <code>[3,5,20]</code> y <code>19</code> es menor que <code>20</code> (índice 2) y mayor que <code>5</code> (índice 1).",
|
||||||
|
"Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"title": "Qual o Meu Lugar?",
|
||||||
|
"description": [
|
||||||
|
"Retorne o menor índice que um valor (segundo argumento) deve ser inserido em uma matriz (primeiro argumento) uma vez que esta foi ordenada. O valor retornado deve ser um número.",
|
||||||
|
"Por exemplo, <code>getIndexToIns([1,2,3,4], 1.5)</code> deve retornar <code>1</code> porque é maior do que <code>1</code> (índice 0), mas é menor que <code>2</code> (índice 1).",
|
||||||
|
"Da mesma forma, <code>getIndexToIns([20,3,5], 19)</code> deve retornar <code>2</code> porque uma vez que a matriz foi ordenada ficará da seguinte forma <code>[3,5,20]</code> e <code>19</code> é menor que <code>20</code> (índice 2) e maior que <code>5</code> (índice 1).",
|
||||||
|
"Lembre-se de usar <a href=\"http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Ler-Pesquisar-Perguntar</a> se você ficar travado. Escreva seu próprio código."
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"id": "af2170cad53daa0770fabdea",
|
"id": "af2170cad53daa0770fabdea",
|
||||||
"title": "Mutations",
|
"title": "Mutations",
|
||||||
@ -762,221 +847,51 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "adf08ec01beb4f99fc7a68f2",
|
"id": "a9bd25c716030ec90084d8a1",
|
||||||
"title": "Falsy Bouncer",
|
"title": "Chunky Monkey",
|
||||||
"description": [
|
"description": [
|
||||||
"Remove all falsy values from an array.",
|
"Write a function that splits an array (first argument) into groups the length of <code>size</code> (second argument) and returns them as a two-dimensional array.",
|
||||||
"Falsy values in JavaScript are <code>false</code>, <code>null</code>, <code>0</code>, <code>\"\"</code>, <code>undefined</code>, and <code>NaN</code>.",
|
|
||||||
"Remember to use <a href=\"http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Read-Search-Ask</a> if you get stuck. Write your own code."
|
"Remember to use <a href=\"http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Read-Search-Ask</a> if you get stuck. Write your own code."
|
||||||
],
|
],
|
||||||
"challengeSeed": [
|
"challengeSeed": [
|
||||||
"function bouncer(arr) {",
|
"function chunkArrayInGroups(arr, size) {",
|
||||||
" // Don't show a false ID to this bouncer.",
|
" // Break it up.",
|
||||||
" return arr;",
|
" return arr;",
|
||||||
"}",
|
"}",
|
||||||
"",
|
"",
|
||||||
"bouncer([7, \"ate\", \"\", false, 9]);"
|
"chunkArrayInGroups([\"a\", \"b\", \"c\", \"d\"], 2);"
|
||||||
],
|
],
|
||||||
"tests": [
|
"tests": [
|
||||||
"assert.deepEqual(bouncer([7, \"ate\", \"\", false, 9]), [7, \"ate\", 9], 'message: <code>bouncer([7, \"ate\", \"\", false, 9])</code> should return <code>[7, \"ate\", 9]</code>.');",
|
"assert.deepEqual(chunkArrayInGroups([\"a\", \"b\", \"c\", \"d\"], 2), [[\"a\", \"b\"], [\"c\", \"d\"]], 'message: <code>chunkArrayInGroups([\"a\", \"b\", \"c\", \"d\"], 2)</code> should return <code>[[\"a\", \"b\"], [\"c\", \"d\"]]</code>.');",
|
||||||
"assert.deepEqual(bouncer([\"a\", \"b\", \"c\"]), [\"a\", \"b\", \"c\"], 'message: <code>bouncer([\"a\", \"b\", \"c\"])</code> should return <code>[\"a\", \"b\", \"c\"]</code>.');",
|
"assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5], 3), [[0, 1, 2], [3, 4, 5]], 'message: <code>chunkArrayInGroups([0, 1, 2, 3, 4, 5], 3)</code> should return <code>[[0, 1, 2], [3, 4, 5]]</code>.');",
|
||||||
"assert.deepEqual(bouncer([false, null, 0, NaN, undefined, \"\"]), [], 'message: <code>bouncer([false, null, 0, NaN, undefined, \"\"])</code> should return <code>[]</code>.');",
|
"assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5], 2), [[0, 1], [2, 3], [4, 5]], 'message: <code>chunkArrayInGroups([0, 1, 2, 3, 4, 5], 2)</code> should return <code>[[0, 1], [2, 3], [4, 5]]</code>.');",
|
||||||
"assert.deepEqual(bouncer([1, null, NaN, 2, undefined]), [1, 2], 'message: <code>bouncer([1, null, NaN, 2, undefined])</code> should return <code>[1, 2]</code>.');"
|
"assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5], 4), [[0, 1, 2, 3], [4, 5]], 'message: <code>chunkArrayInGroups([0, 1, 2, 3, 4, 5], 4)</code> should return <code>[[0, 1, 2, 3], [4, 5]]</code>.');",
|
||||||
|
"assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6], 3), [[0, 1, 2], [3, 4, 5], [6]], 'message: <code>chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6], 3)</code> should return <code>[[0, 1, 2], [3, 4, 5], [6]]</code>.');",
|
||||||
|
"assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 4), [[0, 1, 2, 3], [4, 5, 6, 7], [8]], 'message: <code>chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 4)</code> should return <code>[[0, 1, 2, 3], [4, 5, 6, 7], [8]]</code>.');",
|
||||||
|
"assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 2), [[0, 1], [2, 3], [4, 5], [6, 7], [8]], 'message: <code>chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 2)</code> should return <code>[[0, 1], [2, 3], [4, 5], [6, 7], [8]]</code>.');"
|
||||||
],
|
],
|
||||||
"type": "bonfire",
|
"type": "bonfire",
|
||||||
"isRequired": true,
|
"isRequired": true,
|
||||||
"solutions": [
|
"solutions": [
|
||||||
"function bouncer(arr) {\n // Don't show a false ID to this bouncer.\n return arr.filter(function(e) {return e;});\n}\n\nbouncer([7, 'ate', '', false, 9]);\n"
|
"function chunkArrayInGroups(arr, size) {\n var out = [];\n for (var i = 0; i < arr.length; i+=size) {\n out.push(arr.slice(i,i+size));\n }\n return out;\n}\n\nchunkArrayInGroups(['a', 'b', 'c', 'd'], 2);\n"
|
||||||
],
|
],
|
||||||
"MDNlinks": [
|
"MDNlinks": [
|
||||||
"Boolean Objects",
|
"Array.prototype.push()",
|
||||||
"Array.prototype.filter()"
|
"Array.prototype.slice()"
|
||||||
],
|
],
|
||||||
"challengeType": 5,
|
"challengeType": 5,
|
||||||
"translations": {
|
"translations": {
|
||||||
"es": {
|
"es": {
|
||||||
"title": "Detector de Mentiras",
|
"title": "En mil Pedazos",
|
||||||
"description": [
|
"description": [
|
||||||
"Remueve todos los valores falsy de un arreglo dado",
|
"Escribe una función que parta un arreglo (primer argumento) en fragmentos de una longitud dada (segundo argumento) y los devuelva en forma de un arreglo bidimensional.",
|
||||||
"En javascript, los valores falsy son los siguientes: <code>false</code>, <code>null</code>, <code>0</code>, <code>\"\"</code>, <code>undefined</code>, y <code>NaN</code>.",
|
|
||||||
"Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
|
"Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"pt-br": {
|
"pt-br": {
|
||||||
"title": "Detector de Mentiras",
|
"title": "Em Pedaços",
|
||||||
"description": [
|
"description": [
|
||||||
"Remova todos os valores falsos de uma matriz.",
|
"Escreva uma funcção que divide uma matriz (primeiro argumento) em grupos de tamanho <code>size</code> (segundo argumento) e os retorna em uma matriz bidimensional.",
|
||||||
"Valores falsos em JavaScript são <code>false</code>, <code>null</code>, <code>0</code>, <code>\"\"</code>, <code>undefined</code>, e <code>NaN</code>.",
|
|
||||||
"Lembre-se de usar <a href=\"http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Ler-Pesquisar-Perguntar</a> se você ficar travado. Escreva seu próprio código."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "a39963a4c10bc8b4d4f06d7e",
|
|
||||||
"title": "Seek and Destroy",
|
|
||||||
"description": [
|
|
||||||
"You will be provided with an initial array (the first argument in the destroyer function), followed by one or more arguments. Remove all elements from the initial array that are of the same value as these arguments.",
|
|
||||||
"<strong>Note</strong><br> You have to use the <code>arguments</code> object.",
|
|
||||||
"Remember to use <a href=\"http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Read-Search-Ask</a> if you get stuck. Write your own code."
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"function destroyer(arr) {",
|
|
||||||
" // Remove all the values",
|
|
||||||
" return arr;",
|
|
||||||
"}",
|
|
||||||
"",
|
|
||||||
"destroyer([1, 2, 3, 1, 2, 3], 2, 3);"
|
|
||||||
],
|
|
||||||
"tests": [
|
|
||||||
"assert.deepEqual(destroyer([1, 2, 3, 1, 2, 3], 2, 3), [1, 1], 'message: <code>destroyer([1, 2, 3, 1, 2, 3], 2, 3)</code> should return <code>[1, 1]</code>.');",
|
|
||||||
"assert.deepEqual(destroyer([1, 2, 3, 5, 1, 2, 3], 2, 3), [1, 5, 1], 'message: <code>destroyer([1, 2, 3, 5, 1, 2, 3], 2, 3)</code> should return <code>[1, 5, 1]</code>.');",
|
|
||||||
"assert.deepEqual(destroyer([3, 5, 1, 2, 2], 2, 3, 5), [1], 'message: <code>destroyer([3, 5, 1, 2, 2], 2, 3, 5)</code> should return <code>[1]</code>.');",
|
|
||||||
"assert.deepEqual(destroyer([2, 3, 2, 3], 2, 3), [], 'message: <code>destroyer([2, 3, 2, 3], 2, 3)</code> should return <code>[]</code>.');",
|
|
||||||
"assert.deepEqual(destroyer([\"tree\", \"hamburger\", 53], \"tree\", 53), [\"hamburger\"], 'message: <code>destroyer([\"tree\", \"hamburger\", 53], \"tree\", 53)</code> should return <code>[\"hamburger\"]</code>.');",
|
|
||||||
"assert.deepEqual(destroyer([\"possum\", \"trollo\", 12, \"safari\", \"hotdog\", 92, 65, \"grandma\", \"bugati\", \"trojan\", \"yacht\"], \"yacht\", \"possum\", \"trollo\", \"safari\", \"hotdog\", \"grandma\", \"bugati\", \"trojan\"), [12,92,65], 'message: <code>destroyer([\"possum\", \"trollo\", 12, \"safari\", \"hotdog\", 92, 65, \"grandma\", \"bugati\", \"trojan\", \"yacht\"], \"yacht\", \"possum\", \"trollo\", \"safari\", \"hotdog\", \"grandma\", \"bugati\", \"trojan\")</code> should return <code>[12,92,65]</code>.');"
|
|
||||||
],
|
|
||||||
"type": "bonfire",
|
|
||||||
"isRequired": true,
|
|
||||||
"solutions": [
|
|
||||||
"function destroyer(arr) {\n var hash = Object.create(null);\n [].slice.call(arguments, 1).forEach(function(e) {\n hash[e] = true;\n });\n // Remove all the values\n return arr.filter(function(e) { return !(e in hash);});\n}\n\ndestroyer([1, 2, 3, 1, 2, 3], 2, 3);\n"
|
|
||||||
],
|
|
||||||
"MDNlinks": [
|
|
||||||
"Arguments object",
|
|
||||||
"Array.prototype.filter()"
|
|
||||||
],
|
|
||||||
"challengeType": 5,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Buscar y Destruir",
|
|
||||||
"description": [
|
|
||||||
"Se te proveerá un arreglo inicial (el primer argumento en la función <code>destroyer</code>), seguido por uno o más argumentos. Elimina todos los elementos del arreglo inicial que tengan el mismo valor que el resto de argumentos.",
|
|
||||||
"Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"pt-br": {
|
|
||||||
"title": "Buscar e Destruir",
|
|
||||||
"description": [
|
|
||||||
"Será fornecido a você uma matriz inicial (o primeiro argumento da função destroyer), seguido por um ou mais argumentos. Remova todos os elementos da matriz inicial que possuem o mesmo valor desses argumentos.",
|
|
||||||
"<strong>Nota</strong><br> Você precisa usar o objeto <code>arguments</code>.",
|
|
||||||
"Lembre-se de usar <a href=\"http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Ler-Pesquisar-Perguntar</a> se você ficar travado. Escreva seu próprio código."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "a24c1a4622e3c05097f71d67",
|
|
||||||
"title": "Where do I Belong",
|
|
||||||
"description": [
|
|
||||||
"Return the lowest index at which a value (second argument) should be inserted into an array (first argument) once it has been sorted. The returned value should be a number.",
|
|
||||||
"For example, <code>getIndexToIns([1,2,3,4], 1.5)</code> should return <code>1</code> because it is greater than <code>1</code> (index 0), but less than <code>2</code> (index 1).",
|
|
||||||
"Likewise, <code>getIndexToIns([20,3,5], 19)</code> should return <code>2</code> because once the array has been sorted it will look like <code>[3,5,20]</code> and <code>19</code> is less than <code>20</code> (index 2) and greater than <code>5</code> (index 1).",
|
|
||||||
"Remember to use <a href=\"http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Read-Search-Ask</a> if you get stuck. Write your own code."
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"function getIndexToIns(arr, num) {",
|
|
||||||
" // Find my place in this sorted array.",
|
|
||||||
" return num;",
|
|
||||||
"}",
|
|
||||||
"",
|
|
||||||
"getIndexToIns([40, 60], 50);"
|
|
||||||
],
|
|
||||||
"tests": [
|
|
||||||
"assert(getIndexToIns([10, 20, 30, 40, 50], 35) === 3, 'message: <code>getIndexToIns([10, 20, 30, 40, 50], 35)</code> should return <code>3</code>.');",
|
|
||||||
"assert(getIndexToIns([10, 20, 30, 40, 50], 30) === 2, 'message: <code>getIndexToIns([10, 20, 30, 40, 50], 30)</code> should return <code>2</code>.');",
|
|
||||||
"assert(getIndexToIns([40, 60], 50) === 1, 'message: <code>getIndexToIns([40, 60], 50)</code> should return <code>1</code>.');",
|
|
||||||
"assert(getIndexToIns([3, 10, 5], 3) === 0, 'message: <code>getIndexToIns([3, 10, 5], 3)</code> should return <code>0</code>.');",
|
|
||||||
"assert(getIndexToIns([5, 3, 20, 3], 5) === 2, 'message: <code>getIndexToIns([5, 3, 20, 3], 5)</code> should return <code>2</code>.');",
|
|
||||||
"assert(getIndexToIns([2, 20, 10], 19) === 2, 'message: <code>getIndexToIns([2, 20, 10], 19)</code> should return <code>2</code>.');",
|
|
||||||
"assert(getIndexToIns([2, 5, 10], 15) === 3, 'message: <code>getIndexToIns([2, 5, 10], 15)</code> should return <code>3</code>.');"
|
|
||||||
],
|
|
||||||
"type": "bonfire",
|
|
||||||
"isRequired": true,
|
|
||||||
"solutions": [
|
|
||||||
"function getIndexToIns(arr, num) {\n arr = arr.sort(function(a, b){return a-b;});\n for (var i = 0; i < arr.length; i++) {\n if (arr[i] >= num)\n {\n return i;\n }\n }\n return arr.length;\n}"
|
|
||||||
],
|
|
||||||
"MDNlinks": [
|
|
||||||
"Array.prototype.sort()"
|
|
||||||
],
|
|
||||||
"challengeType": 5,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "¿Cuál es mi Asiento?",
|
|
||||||
"description": [
|
|
||||||
"Devuelve el menor índice en el que un valor (segundo argumento) debe ser insertado en un arreglo (primer argumento) una vez ha sido ordenado.",
|
|
||||||
"Por ejemplo, where([1,2,3,4], 1.5) debe devolver 1 porque el segundo argumento de la función (1.5) es mayor que 1 (con índice 0 en el arreglo), pero menor que 2 (con índice 1).",
|
|
||||||
"Mientras que <code>where([20,3,5], 19)</code> debe devolver <code>2</code> porque una vez ordenado el arreglo se verá com <code>[3,5,20]</code> y <code>19</code> es menor que <code>20</code> (índice 2) y mayor que <code>5</code> (índice 1).",
|
|
||||||
"Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"pt-br": {
|
|
||||||
"title": "Qual o Meu Lugar?",
|
|
||||||
"description": [
|
|
||||||
"Retorne o menor índice que um valor (segundo argumento) deve ser inserido em uma matriz (primeiro argumento) uma vez que esta foi ordenada. O valor retornado deve ser um número.",
|
|
||||||
"Por exemplo, <code>getIndexToIns([1,2,3,4], 1.5)</code> deve retornar <code>1</code> porque é maior do que <code>1</code> (índice 0), mas é menor que <code>2</code> (índice 1).",
|
|
||||||
"Da mesma forma, <code>getIndexToIns([20,3,5], 19)</code> deve retornar <code>2</code> porque uma vez que a matriz foi ordenada ficará da seguinte forma <code>[3,5,20]</code> e <code>19</code> é menor que <code>20</code> (índice 2) e maior que <code>5</code> (índice 1).",
|
|
||||||
"Lembre-se de usar <a href=\"http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Ler-Pesquisar-Perguntar</a> se você ficar travado. Escreva seu próprio código."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "56533eb9ac21ba0edf2244e2",
|
|
||||||
"title": "Caesars Cipher",
|
|
||||||
"description": [
|
|
||||||
"One of the simplest and most widely known <dfn>ciphers</dfn> is a <code>Caesar cipher</code>, also known as a <code>shift cipher</code>. In a <code>shift cipher</code> the meanings of the letters are shifted by some set amount.",
|
|
||||||
"A common modern use is the <a href=\"https://en.wikipedia.org/wiki/ROT13\" target='_blank'>ROT13</a> cipher, where the values of the letters are shifted by 13 places. Thus 'A' ↔ 'N', 'B' ↔ 'O' and so on.",
|
|
||||||
"Write a function which takes a <a href=\"https://en.wikipedia.org/wiki/ROT13\" target='_blank'>ROT13</a> encoded string as input and returns a decoded string.",
|
|
||||||
"All letters will be uppercase. Do not transform any non-alphabetic character (i.e. spaces, punctuation), but do pass them on.",
|
|
||||||
"Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck. Try to pair program. Write your own code."
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"function rot13(str) { // LBH QVQ VG!",
|
|
||||||
" ",
|
|
||||||
" return str;",
|
|
||||||
"}",
|
|
||||||
"",
|
|
||||||
"// Change the inputs below to test",
|
|
||||||
"rot13(\"SERR PBQR PNZC\");"
|
|
||||||
],
|
|
||||||
"tail": [
|
|
||||||
""
|
|
||||||
],
|
|
||||||
"solutions": [
|
|
||||||
"var lookup = {\n 'A': 'N','B': 'O','C': 'P','D': 'Q',\n 'E': 'R','F': 'S','G': 'T','H': 'U',\n 'I': 'V','J': 'W','K': 'X','L': 'Y',\n 'M': 'Z','N': 'A','O': 'B','P': 'C',\n 'Q': 'D','R': 'E','S': 'F','T': 'G',\n 'U': 'H','V': 'I','W': 'J','X': 'K',\n 'Y': 'L','Z': 'M' \n};\n\nfunction rot13(encodedStr) {\n var codeArr = encodedStr.split(\"\"); // String to Array\n var decodedArr = []; // Your Result goes here\n // Only change code below this line\n \n decodedArr = codeArr.map(function(letter) {\n if(lookup.hasOwnProperty(letter)) {\n letter = lookup[letter];\n }\n return letter;\n });\n\n // Only change code above this line\n return decodedArr.join(\"\"); // Array to String\n}"
|
|
||||||
],
|
|
||||||
"tests": [
|
|
||||||
"assert(rot13(\"SERR PBQR PNZC\") === \"FREE CODE CAMP\", 'message: <code>rot13(\"SERR PBQR PNZC\")</code> should decode to <code>FREE CODE CAMP</code>');",
|
|
||||||
"assert(rot13(\"SERR CVMMN!\") === \"FREE PIZZA!\", 'message: <code>rot13(\"SERR CVMMN!\")</code> should decode to <code>FREE PIZZA!</code>');",
|
|
||||||
"assert(rot13(\"SERR YBIR?\") === \"FREE LOVE?\", 'message: <code>rot13(\"SERR YBIR?\")</code> should decode to <code>FREE LOVE?</code>');",
|
|
||||||
"assert(rot13(\"GUR DHVPX OEBJA SBK WHZCF BIRE GUR YNML QBT.\") === \"THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.\", 'message: <code>rot13(\"GUR DHVPX OEBJA SBK WHZCF BIRE GUR YNML QBT.\")</code> should decode to <code>THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.</code>');"
|
|
||||||
],
|
|
||||||
"type": "bonfire",
|
|
||||||
"MDNlinks": [
|
|
||||||
"String.prototype.charCodeAt()",
|
|
||||||
"String.fromCharCode()"
|
|
||||||
],
|
|
||||||
"challengeType": 5,
|
|
||||||
"isRequired": true,
|
|
||||||
"releasedOn": "January 1, 2016",
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Cifrado César",
|
|
||||||
"description": [
|
|
||||||
"Uno de los <dfn>cifrados</dfn> más simples y ampliamente conocidos es el <code>cifrado César</code>, también llamado <code>cifrado por desplazamiento</code>. En un <code>cifrado por desplazamiento</code> los significados de las letras se desplazan por una cierta cantidad.",
|
|
||||||
"Un uso moderno común es el cifrado <a href=\"https://es.wikipedia.org/wiki/ROT13\" target='_blank'>ROT13</a> , donde los valores de las letras se desplazan 13 espacios. De esta forma 'A' ↔ 'N', 'B' ↔ 'O' y así.",
|
|
||||||
"Crea una función que tome una cadena de texto cifrada en <a href=\"https://es.wikipedia.org/wiki/ROT13\" target='_blank'>ROT13</a> como argumento y que devuelva la cadena de texto decodificada.",
|
|
||||||
"Todas las letras que se te pasen van a estar en mayúsculas. No transformes ningún caracter no-alfabético (por ejemplo: espacios, puntuación). Simplemente pásalos intactos.",
|
|
||||||
"Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"pt-br": {
|
|
||||||
"title": "Cifra de César",
|
|
||||||
"description": [
|
|
||||||
"Uma das mais simples e mais conhecidas <dfn>cifras</dfn> é a <code>cifra de César</code>, também conhecida como <code>cifra de troca</code>. Em uma <code>cifra de troca</code> os significados das letras são deslocados por um determinado valor.",
|
|
||||||
"Um uso moderno comum é a cifra <a href=\"https://en.wikipedia.org/wiki/ROT13\" target='_blank'>ROT13</a>, aonde os valores das letras são deslocados por 13 lugares. Logo 'A' ↔ 'N', 'B' ↔ 'O' e assim por diante.",
|
|
||||||
"Escreva uma função que recebe um texto criptografado com <a href=\"https://en.wikipedia.org/wiki/ROT13\" target='_blank'>ROT13</a> como entrada e retorna o texto desencriptado.",
|
|
||||||
"Todas as letras serão maiúsculas. Não transforme nenhum caracter não alfanuméricos (como espaços, pontuação), mas passe-os adiante.",
|
|
||||||
"Lembre-se de usar <a href=\"http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Ler-Pesquisar-Perguntar</a> se você ficar travado. Escreva seu próprio código."
|
"Lembre-se de usar <a href=\"http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Ler-Pesquisar-Perguntar</a> se você ficar travado. Escreva seu próprio código."
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
@ -0,0 +1,737 @@
|
|||||||
|
{
|
||||||
|
"name": "Debugging",
|
||||||
|
"order": 4,
|
||||||
|
"time": "1 hour",
|
||||||
|
"helpRoom": "Help",
|
||||||
|
"challenges": [
|
||||||
|
{
|
||||||
|
"id": "587d78b2367417b2b2512b0d",
|
||||||
|
"title": "Introduction to the Debugging Challenges",
|
||||||
|
"description": [
|
||||||
|
[
|
||||||
|
"http://imgs.xkcd.com/comics/debugging.png",
|
||||||
|
"XKCD web comic walking through the convoluted process of debugging. The programmer moves from a browser problem, to a keyboard driver issue, receives a cryptic system utility error message, and ends by finding the sword of Martin the Warrior.",
|
||||||
|
"Debugging is a valuable and (unfortunately) necessary tool for programmers. It follows the testing phase of checking if your code works as intended, and discovering it does not. Debugging is the process of finding exactly what isn't working and fixing it.",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"",
|
||||||
|
"",
|
||||||
|
"After spending time creating a brilliant block of code, it is tough realizing it may have errors. These issues generally come in three forms: 1) syntax errors that prevent a program from running, 2) runtime errors when code fails to execute or has unexpected behavior, and 3) semantic (or logical) errors when code doesn't do what it's meant to.<br><br>Modern code editors (and experience) can help identify syntax errors. Semantic and runtime errors are harder to find. They may cause your program to crash, make it run forever, or give incorrect output. Think of debugging as trying to understand why your code is behaving the way it is.<br><br>Example of a syntax error - often detected by the code editor:<br><br><blockquote>funtion willNotWork( {<br> console.log(\"Yuck\");<br>}<br>// \"function\" keyword is misspelled and there's a missing parenthesis</blockquote><br><br>Here's an example of a runtime error - often detected while the program executes:<br><br><blockquote>function loopy() {<br> while(true) {<br> console.log(\"Hello, world!\");<br> }<br>}<br>// Calling loopy starts an infinite loop, which may crash your browser</blockquote><br><br>Example of a semantic error - often detected after testing code output:<br><br><blockquote>function calcAreaOfRect(w, h) {<br> return w + h; // This should be w * h<br>}<br>let myRectArea = calcAreaOfRect(2, 3);<br>// Correct syntax and the program executes, but this gives the wrong answer</blockquote>",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"",
|
||||||
|
"",
|
||||||
|
"Debugging is frustrating, but it helps to develop (and follow) a step-by-step approach to review your code. This means checking the intermediate values and types of variables to see if they are what they should be. You can start with a simple process of elimination.<br><br>For example, if function A works and returns what it's supposed to, then function B may have the issue. Or start checking values in a block of code from the middle to try to cut the search space in half. A problem in one spot indicates a bug in the first half of the code. If not, it's likely in the second.<br><br>This section will cover a couple helpful tools to find bugs, and some of the common forms they take. Fortunately, debugging is a learnable skill that just requires a little patience and practice to master.",
|
||||||
|
""
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"releasedOn": "",
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [],
|
||||||
|
"type": "Waypoint",
|
||||||
|
"challengeType": 7,
|
||||||
|
"isRequired": false,
|
||||||
|
"titleEs": "",
|
||||||
|
"descriptionEs": [
|
||||||
|
[]
|
||||||
|
],
|
||||||
|
"titleFr": "",
|
||||||
|
"descriptionFr": [
|
||||||
|
[]
|
||||||
|
],
|
||||||
|
"titleDe": "",
|
||||||
|
"descriptionDe": [
|
||||||
|
[]
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d78b2367417b2b2512b0e",
|
||||||
|
"title": "Add items to an array with push() and unshift()",
|
||||||
|
"description": [
|
||||||
|
"An array's length, like the data types it can contain, is not fixed. Arrays can be defined with a length of any number of elements, and elements can be added or removed over time. In this challenge, we will look at two methods with which we can programmatically modify an array: Array.push() and Array.unshift(). ",
|
||||||
|
"Both methods take one or more elements as parameters and add those elements to the array the method is being called on; the push() method adds elements to the end of an array, and unshift() adds elements to the beginning. Consider the following:",
|
||||||
|
"<code>let twentyThree = 'XXIII';</code>",
|
||||||
|
"<code>let romanNumerals = ['XXI', 'XXII'];</code>",
|
||||||
|
"<code>romanNumerals.unshift('XIX', 'XX'); </code>",
|
||||||
|
"<code>// now equals ['XIX', 'XX', 'XXI', 'XXII']</code>",
|
||||||
|
"<code>romanNumerals.push(twentyThree); </code>",
|
||||||
|
"<code>// now equals ['XIX', 'XX', 'XXI', 'XXII', 'XXIII']</code>",
|
||||||
|
"Notice that we can also pass variables, which allows us even greater flexibility in dynamically modifying our array's data.",
|
||||||
|
"Instructions:",
|
||||||
|
"We have defined a function, mixedNumbers, which we are passing an array as an argument. Modify the function by using push() and shift() to add 'I', 2, 'three', to the beginning of the array and 7, 'VIII', '9' to the end so that the returned array contains representations of the numbers 1-9 in order."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"function mixedNumbers(arr) {",
|
||||||
|
" // change code below this line",
|
||||||
|
" // change code above this line",
|
||||||
|
" return arr;",
|
||||||
|
"}",
|
||||||
|
"// do not change code below this line",
|
||||||
|
"mixedNumbers(['IV', 5, 'six'])"
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert.deepEqual(mixedNumbers(['IV', 5, 'six']), ['I', 2, 'three', 'IV', 5, 'six', 7, 'VIII', '9'], \"<code>mixedNumbers(['IV', 5, 'six'])</code> should now return <code>['I', 2, 'three', 'IV', 5, 'six', 7, 'VIII', '9']</code>\");",
|
||||||
|
"assert.notStrictEqual(mixedNumbers.toString().search(/\\.push\\(/), -1, 'The <code>mixedNumbers</code> function should utilize the <code>push()</code> method.);' ",
|
||||||
|
"assert.notStrictEqual(mixedNumbers.toString().search(/\\.unshift\\(/), -1, \"The <code>mixedNumbers</code> function should utilize the <code>unshift()</code> method.\");"
|
||||||
|
],
|
||||||
|
"type": "waypoint",
|
||||||
|
"solutions": [],
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d78b2367417b2b2512b0f",
|
||||||
|
"title": "Remove items from an array with pop() and shift()",
|
||||||
|
"description": [
|
||||||
|
"Both push() and unshift() have corresponding methods that are nearly functional opposites: pop() and shift(). As you may have guessed by now, instead of adding, pop() removes an element from the end of an array, while shift() removes an element from the beginning. The key difference between pop() and shift() and their cousins push() and unshift(), is that neither method takes parameters, and each only allows an array to be modified by a single element at a time.",
|
||||||
|
"Let's take a look:",
|
||||||
|
"<code>let greetings = ['whats up?', 'hello', 'see ya!'];</code>",
|
||||||
|
"<code>greetings.pop() </code>",
|
||||||
|
"<code>// now equals ['whats up?', 'hello']</code>",
|
||||||
|
"<code>greetings.shift() </code>",
|
||||||
|
"<code>// now equals ['hello']</code>",
|
||||||
|
"We can also return the value of the removed element with either method like this:",
|
||||||
|
"<code>let popped = greetings.pop(); </code>",
|
||||||
|
"<code>// returns 'hello'</code>",
|
||||||
|
"<code>// greetings now equals []</code>",
|
||||||
|
"Instructions",
|
||||||
|
"We have defined a function, popShift, which takes an array as an argument and returns a new array. Modify the function, using pop() and shift(), to remove the first and last elements of the argument array, and assign the removed elements to their corresponding variables, so that the returned array contains their values."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"function popShift(arr) {",
|
||||||
|
" let popped = // change code here",
|
||||||
|
" let shifted = // change code here",
|
||||||
|
" return [shifted, popped];",
|
||||||
|
"}",
|
||||||
|
"// do not change code below this line",
|
||||||
|
"popShift(['challenge', 'is', 'not', 'complete']);"
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert.deepEqual(popShift(['challenge', 'is', 'not', 'complete']), ['challenge', 'complete'], \"<code>popShift(['challenge', 'is', 'not', 'complete'])</code> should return <code>['challenge', 'complete']</code>.\");",
|
||||||
|
"assert.notStrictEqual(popShift.toString().search(/\\.pop\\(/), -1, \"The <code>popShift</code> function should utilize the <code>pop()</code> method.\");",
|
||||||
|
"assert.notStrictEqual(popShift.toString().search(/\\.shift\\(/), -1, \"The <code>popShift</code> function should utilize the <code>shift()</code> method.\");"
|
||||||
|
],
|
||||||
|
"type": "waypoint",
|
||||||
|
"solutions": [],
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d78b2367417b2b2512b10",
|
||||||
|
"title": "Remove items using splice()",
|
||||||
|
"description": [
|
||||||
|
"Ok, so we've learned how to remove elements from the beginning and end of arrays using pop() and shift(), but what if we want to remove an element from somewhere in the middle? Or remove more than one element at once? Well, that's where splice() comes in. splice() allows us to do just that: remove any numnber of consecutive",
|
||||||
|
"elements from anywhere on an array.",
|
||||||
|
"splice() can take up to 3 parameters, but for now, we'll focus on just the first 2. The first two parameters of splice() are integers which represent indexes, or postions, of the array that splice() is being called upon. And remember, arrays are zero-indexed, so to indicate the first element of an array, we would use 0. splice()'s first parameter represents the index on the array from which to begin removing elements, while the second parameter indicates the number of elements to delete. For example:",
|
||||||
|
"<code>let array = ['today', 'was', 'not', 'so', 'great'];</code>",
|
||||||
|
"<code>array.splice(2, 2); </code>",
|
||||||
|
"<code>// indicates that splice() should remove 2 elements beginning with the 3rd element</code>",
|
||||||
|
"<code>// array now equals ['today', 'was', 'great']</code>",
|
||||||
|
"splice() not only modifies the array it is being called on, but it also returns a new array containing the value of the removed elements. For example:",
|
||||||
|
"<code>let array = ['today', 'was', 'not', 'so', 'great'];</code>",
|
||||||
|
"<code>let newArray = array.splice(3, 2); </code>",
|
||||||
|
"<code>// newArray equals ['so', 'great']</code>",
|
||||||
|
"Instructions",
|
||||||
|
"We've defined a function, sumOfTen, which takes an array as an argument and returns the sum of that array's elements. Modify the function, using splice(), so that it returns a value of 10."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"function sumOfTen(arr) {",
|
||||||
|
" // change code below this line",
|
||||||
|
" // change code above this line",
|
||||||
|
" return arr.reduce((a, b) => a + b);",
|
||||||
|
"}",
|
||||||
|
"// do not change code below this line",
|
||||||
|
"sumOfTen([2, 5, 1, 5, 2, 1]);"
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert.strictEqual(sumOfTen([2, 5, 1, 5, 2, 1]), 10, \"<code>sumOfTen</code> should return 10.\");",
|
||||||
|
"assert.notStrictEqual(sumOfTen.toString().search(/\\.splice\\(/), -1, \"The <code>sumOfTen</code> function should utilize the <code>splice()</code> method.\")"
|
||||||
|
],
|
||||||
|
"type": "waypoint",
|
||||||
|
"solutions": [],
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d78b3367417b2b2512b11",
|
||||||
|
"title": "Add items using splice()",
|
||||||
|
"description": [
|
||||||
|
"Remember in the last challenge we mentioned that splice() can take up to three parameters? Well, we can go one step further with splice() — in addition to removing elements, we can use that third parameter, which represents one or more elements, to add them as well. This can be incredibly useful for quickly switching out an element, or a set of elements, for another. For instance, let's say you're storing a color scheme for a set of DOM elements in an array, and want to dynamically change a color based on some action:",
|
||||||
|
"<code>function colorChange(arr, index, newColor) {</code>",
|
||||||
|
"<code> arr.splice(index, 1, newColor);</code>",
|
||||||
|
"<code> return arr;</code>",
|
||||||
|
"<code>} </code>",
|
||||||
|
"<code>let colorScheme = ['#878787', '#a08794', '#bb7e8c', '#c9b6be', '#d1becf'];</code>",
|
||||||
|
"<code>colorScheme = colorChange(colorScheme, 2, \"#332327\");</code>",
|
||||||
|
"<code>// we have removed '#bb7e8c' and added '#332327' in its place</code>",
|
||||||
|
"<code>// colorScheme now equals ['#878787', '#a08794', '#332327', '#c9b6be', '#d1becf']</code>",
|
||||||
|
"This function takes an array of hex values, an index at which to remove an element, and the new color to replace the removed element with. The return value is an array containing a newly modified color scheme! While this example is a bit oversimplified, we can see the value that utilizing splice() to its maximum potential can have.",
|
||||||
|
"Instructions",
|
||||||
|
"We have defined a function, htmlColorNames, which takes an array of html colors as an argument. Modify the function using splice() to remove the first two elements of the array and add 'DarkSalmon' and 'BlanchedAlmond' in their respective places."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"function htmlColorNames(arr) {",
|
||||||
|
" // change code below this line",
|
||||||
|
" ",
|
||||||
|
" // change code above this line",
|
||||||
|
" return arr;",
|
||||||
|
"} ",
|
||||||
|
"// do not change code below this line",
|
||||||
|
"htmlColorNames(['DarkGoldenRod', 'WhiteSmoke', 'LavenderBlush', 'PaleTurqoise', 'FireBrick']);"
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert.deepEqual(htmlColorNames(['DarkGoldenRod', 'WhiteSmoke', 'LavenderBlush', 'PaleTurqoise', 'FireBrick']), ['DarkSalmon', 'BlanchedAlmond', 'LavenderBlush', 'PaleTurqoise', 'FireBrick'], \"<code>htmlColorNames</code> should return ['DarkSalmon', 'BlanchedAlmond', 'LavenderBlush', 'PaleTurqoise', 'FireBrick']\");",
|
||||||
|
"assert.notStrictEqual(htmlColorNames.toString().search(/\\.splice\\(/), -1, \"The <code>htmlColorNames</code> function should utilize the <code>splice()</code> method.\")"
|
||||||
|
],
|
||||||
|
"type": "waypoint",
|
||||||
|
"solutions": [],
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7b7a367417b2b2512b12",
|
||||||
|
"title": "Copy an array with slice()",
|
||||||
|
"description": [
|
||||||
|
"The next method we will cover is slice(). slice(), rather than modifying an array, copies, or extracts, a given mumber of elements to a new array, leaving the array it is called upon untouched. slice() takes only 2 parameters — the first is the index at which to begin extraction, and the second is the index at which to stop extraction (extraction will occur up to, but not including the element at this index). Consider this:",
|
||||||
|
"<code>let weatherConditions = ['rain', 'snow', 'sleet', 'hail', 'clear'];</code>",
|
||||||
|
"<code>let todaysWeather = weatherConditions.slice(1, 3);</code>",
|
||||||
|
"<code>// todaysWeather equals ['snow', 'sleet'];</code>",
|
||||||
|
"<code>// weatherConditions still equals ['rain', 'snow', 'sleet', 'hail', 'clear']</code>",
|
||||||
|
"In effect, we have created a new array by extracting elements from an existing array.",
|
||||||
|
"Instructions",
|
||||||
|
"Instructions: We have defined a function, forecast, that takes an array as an argument. Modify the function using slice() to extract information from the argument array and return a new array that contains the elements 'warm' and 'sunny'."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"function forecast(arr) {",
|
||||||
|
" // change code below this line",
|
||||||
|
" ",
|
||||||
|
" return arr;",
|
||||||
|
"}",
|
||||||
|
"// do not change code below this line",
|
||||||
|
"forecast(['cold', 'rainy', 'warm', 'sunny', 'cool', 'thunderstorms']);"
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert.deepEqual(forecast(['cold', 'rainy', 'warm', 'sunny', 'cool', 'thunderstorms']), ['warm', 'sunny'], \"<code>forecast</code> should return <code>['warm', 'sunny'].\");",
|
||||||
|
"assert.notStrictEqual(forecast.toString().search(/\\.slice\\(/), -1, \"The <code>forecast</code> function should utilize the <code>slice()</code> method.\");"
|
||||||
|
],
|
||||||
|
"type": "waypoint",
|
||||||
|
"solutions": [],
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7b7b367417b2b2512b13",
|
||||||
|
"title": "Copy an array with spread syntax",
|
||||||
|
"description": [
|
||||||
|
"While slice() allows us to be selective about what elements of an array to copy, ammong several other useful tasks, ES6's new spread syntax allows us to easily copy all of an array's elements, in order, with a simple and highly readable syntax. The spread syntax simply looks like this: ...",
|
||||||
|
"In practice, we can use the spread syntax to copy an array like so:",
|
||||||
|
"<code>let thisArray = [true, true, undefined, false, null];</code>",
|
||||||
|
"<code>let thatArray = [...thisArray];</code>",
|
||||||
|
"<code>// thatArray equals [true, true, undefined, false, null]</code>",
|
||||||
|
"<code>// thisArray remains unchanged, and is identical to thatArray</code>",
|
||||||
|
"Instructions",
|
||||||
|
"We have defined a function, copyMachine which takes arr (an array) and num (a number) as arguments. The function is supposed to return a new array made up of num copies of arr. We have done most of the work for you, but it doesn't work quite right yet. Modidy the function using the spead syntax so that it works correctly (hint: another method we have already covered might come in handy here!)."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"function copyMachine(arr, num) {",
|
||||||
|
" let newArr = [];",
|
||||||
|
" while (num >= 1) {",
|
||||||
|
" // change code below this line",
|
||||||
|
" // change code above this line",
|
||||||
|
" num--;",
|
||||||
|
" }",
|
||||||
|
" return newArr;",
|
||||||
|
"}",
|
||||||
|
"copyMachine([true, false, true], 2);"
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert.deepEqual(copyMachine([true, false, true], 2), [[true, false, true], [true, false, true]], \"<code>copyMachine([true, false, true], 2)</code> should return <code>[[true, false, true], [true, false, true]]</code>.\")",
|
||||||
|
"assert.deepEqual(copyMachine([1, 2, 3], 5), [[1, 2, 3], [1, 2, 3], [1, 2, 3], [1, 2, 3], [1, 2, 3]], \"<code>copyMachine([1, 2, 3], 5)</code> should return <code>[[1, 2, 3], [1, 2, 3], [1, 2, 3], [1, 2, 3], [1, 2, 3]]</code>.\");",
|
||||||
|
"assert.deepEqual(copyMachine([true, true, null], 1), [[true, true, null]], \"<code>copyMachine([true, true, null], 1)</code> should return <code>[[true, true, null]]</code>.\");",
|
||||||
|
"assert.deepEqual(copyMachine(['it works'], 3), [['it works'], ['it works'], ['it works']], \"<code>copyMachine(['it works'], 3)</code> should return <code>[['it works'], ['it works'], ['it works']]</code>.\");",
|
||||||
|
"assert.notStrictEqual(copyMachine.toString().search(/\\.\\.\\./), -1, \"The <code>copyMachine</code> function should utilize the <code>...</code> syntax.\");"
|
||||||
|
],
|
||||||
|
"type": "waypoint",
|
||||||
|
"solutions": [],
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7b7b367417b2b2512b14",
|
||||||
|
"title": "Check for the presence of an element with indexOf()",
|
||||||
|
"description": [
|
||||||
|
"Since arrays can be changed, or mutated, at any time, there's no guarantee about where a particular piece of data will be on a given array, or if that element even still exists. Luckily, JavaScript provides us with another built-in method, indexOf(), that allows us to quickly and easily check for the presence of an element on an array. indexOf() takes an element as a parameter, and when called, it returns the position, or index, of that element, or -1 if the element does not exist on the array.",
|
||||||
|
"For example:",
|
||||||
|
"<code>let fruits = ['apples', 'pears', 'oranges', 'peaches', 'pears'];</code>",
|
||||||
|
"<code>fruits.indexOf('dates') // returns -1</code>",
|
||||||
|
"<code>fruits.indexOf('oranges') // returns 2</code>",
|
||||||
|
"<code>fruits.indexOf('pears') // returns 1, the first index at which the element exists</code>",
|
||||||
|
"Instructions",
|
||||||
|
"indexOf() can be incredibly useful for quickly checking for the presence of an element on an array. We have defined a function, quickCheck, that takes an array and an element as arguments. Modify the function using indexOf() so that it returns true if the passed element exists on the array, and false if it does not."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"function quickCheck(arr, elem) {",
|
||||||
|
" if (arr.indexOf(elem) !== -1) {",
|
||||||
|
" return true",
|
||||||
|
" } else {",
|
||||||
|
" return false;",
|
||||||
|
" }",
|
||||||
|
"}"
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert.strictEqual(quickCheck(['squash', 'onions', 'shallots'], 'mushrooms'), false, \"<code>quickCheck(['squash', 'onions', 'shallots'], 'mushrooms')</code> should return <code>false</code>.\");",
|
||||||
|
"assert.strictEqual(quickCheck(['squash', 'onions', 'shallots'], 'onions'), true, \"<code>quickCheck(['squash', 'onions', 'shallots'], 'onions')</code> should return <code>true</code>.\");",
|
||||||
|
"assert.strictEqual(quickCheck([3, 5, 9, 125, 45, 2], 125), true, \"<code>quickCheck([3, 5, 9, 125, 45, 2], 125)</code> should return <code>true</code>.\");",
|
||||||
|
"assert.strictEqual(quickCheck([true, false, false], undefined), false, \"<code>quickCheck([true, false, false], undefined)</code> should return <code>false</code>.\");",
|
||||||
|
"assert.notStrictEqual(quickCheck.toString().search(/\\.indexOf\\(/), -1, \"The <code>quickCheck</code> function should utilize the <code>indexOf() method.</code>\");"
|
||||||
|
],
|
||||||
|
"type": "waypoint",
|
||||||
|
"solutions": [],
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7b7b367417b2b2512b15",
|
||||||
|
"title": "Iterate through all the items in an array",
|
||||||
|
"description": [
|
||||||
|
"Sometimes when working with arrays, it is very handy to be able to iterate through each item to find one or more elements that we might need, or to manipulate an array based on which data items meet a certain set of requirements. JavaScript offers several built in methods that each iterate over arrays in slightly different ways to achieve different results (such as every(), forEach(), map(), etc.), however the technique which is most flexible and offers us the greatest amount of control is a simple for loop.",
|
||||||
|
"For example:",
|
||||||
|
"<code>function greaterThanTen(arr) {</code>",
|
||||||
|
"<code> let newArr = [];</code>",
|
||||||
|
"<code> for (let i = 0; i < arr.length; i++) {</code>",
|
||||||
|
"<code> if (arr[i] > 10) {</code>",
|
||||||
|
"<code> newArr.push(arr[i]);</code>",
|
||||||
|
"<code> }</code>",
|
||||||
|
"<code> }</code>",
|
||||||
|
"<code> return newArr</code>",
|
||||||
|
"<code>}</code>",
|
||||||
|
"<code>greaterThanTen([2, 12, 8, 14, 80, 0, 1]);</code>",
|
||||||
|
"<code>// returns [12, 14, 80]</code>",
|
||||||
|
"Using a for loop, this function iterates through and accesses each element of the array, and subjects it to a simple test that we have created. In this way, we have easily and programmatically determined which data items are greater than 10, and returned a new array containing those items.",
|
||||||
|
"Instructions",
|
||||||
|
"We have defined a function, filteredArray, which takes arr, a nested array, and elem as arguments, and returns a new array. elem represents an element that may or may not be present on one or more of the arrays nested within arr. Modify the function, using a for loop, to return a filtered version of the passed array such that any array nested within arr containing elem has been removed."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"function filteredArray(arr, num) {",
|
||||||
|
" newArr = [];",
|
||||||
|
" // change code below this line",
|
||||||
|
" // change code above this line",
|
||||||
|
" return newArr;",
|
||||||
|
"}",
|
||||||
|
"filteredArray([[3, 2, 3], [1, 6, 3], [3, 13, 26], [19, 3, 9]], 3);"
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert.deepEqual(filteredArray([ [10, 8, 3], [14, 6, 23], [3, 18, 6] ], 18), [[10, 8, 3], [14, 6, 23]], \"<code>filteredArray([[10, 8, 3], [14, 6, 23], [3, 18, 6]], 18)</code> should return <code>[[10, 8, 3], [14, 6, 23]]</code>\");",
|
||||||
|
"assert.deepEqual(filteredArray([ ['trumpets', 2], ['flutes', 4], ['saxaphones', 2] ], 2), [['flutes', 4]], \"<code>filteredArray([['trumpets', 2], ['flutes', 4], ['saxaphones'], 2], 2)</code> should return <code>[['flutes', 4]]</code>\");",
|
||||||
|
"assert.deepEqual(filteredArray([['amy', 'beth', 'sam'], ['dave', 'sean', 'peter']], 'peter'), [['amy', 'beth', 'sam']], \"<code>filteredArray([['amy', 'beth', 'sam'], ['dave', 'sean', 'peter']], 'peter')</code> should return [['amy', 'beth', 'sam']].\");",
|
||||||
|
"assert.deepEqual(filteredArray([[3, 2, 3], [1, 6, 3], [3, 13, 26], [19, 3, 9]], 3), [], \"<code>filteredArray([[3, 2, 3], [1, 6, 3], [3, 13, 26], [19, 3, 9]], 3)</code> should return <code>[]</code>.\");",
|
||||||
|
"assert.notStrictEqual(filteredArray.toString().search(/for/), -1, \"The <code>filteredArray</code> function should utilize a <code>for</code> loop.\");"
|
||||||
|
],
|
||||||
|
"type": "waypoint",
|
||||||
|
"solutions": [],
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7b7b367417b2b2512b16",
|
||||||
|
"title": "Create complex nested arrays",
|
||||||
|
"description": [
|
||||||
|
"One of the most powerful features when thinking of arrays as data structures, is that arrays can contain, or even be completely made up of other arrays. We have seen arrays that contain arrays in previous challenges, but fairly simple ones. However, arrays can contain an infinite depth of arrays that can contain other arrays, each with their own arbitrary levels of depth, and so on. In this way, an array can very quickly become very complex data structure, Consider the following example:",
|
||||||
|
"<code>let nestedArray = [ // top, or first level - the outer most array</code>",
|
||||||
|
"<code> ['deep'], // an array within an array, 2 levels of depth</code>",
|
||||||
|
"<code> [ </code>",
|
||||||
|
"<code> ['deeper'], ['deeper'] // 2 arrays nested 3 levels deep</code>",
|
||||||
|
"<code> ], </code>",
|
||||||
|
"<code> [ </code>",
|
||||||
|
"<code> [ </code>",
|
||||||
|
"<code> ['deepest'], ['deepest'] // 2 arrays nested 4 levels deep </code>",
|
||||||
|
"<code> ], </code>",
|
||||||
|
"<code> [ </code>",
|
||||||
|
"<code> [</code>",
|
||||||
|
"<code> ['deepest-est?'] // an array nested 5 levels deep</code>",
|
||||||
|
"<code> ] </code>",
|
||||||
|
"<code> ]</code>",
|
||||||
|
"<code> ], </code>",
|
||||||
|
"<code>];</code>",
|
||||||
|
"While this example may seem convoluted, this level of complexity is not unheard of, or even unusual, when dealing with large amounts of data.",
|
||||||
|
"However, we can still very easily access the deepest levels of an array this complex with bracket notation:",
|
||||||
|
"<code>console.log(nestedArray[2][1][0][0][0]);</code>",
|
||||||
|
"<code>// logs 'deepest-est?'</code>",
|
||||||
|
"And now that we know where that piece of data is, we can reset it if we need to:",
|
||||||
|
"<code>nestedArray[2][1][0][0][0] = 'deeper still';</code>",
|
||||||
|
"<code>console.log(nestedArray[2][1][0][0][0]);</code>",
|
||||||
|
"<code>// now logs 'deeper still'</code>",
|
||||||
|
"Instructions",
|
||||||
|
"We have defined a variable, myNestedArray, set equal to an array. Modify myNestedArray, using any combination of strings, numbers, and booleans for data elements, so that it has exactly three levels of depth (remember, the outer-most array is level 1)."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"let myNestedArray = [",
|
||||||
|
" ",
|
||||||
|
" // change code here",
|
||||||
|
" ",
|
||||||
|
"];"
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert.strictEqual((function(arr) { let flattened = (function flatten(arr) { const flat = [].concat(...arr); return flat.some (Array.isArray) ? flatten(flat) : flat; })(arr); for (let i = 0; i < flattened.length; i++) { if ( typeof flattened[i] !== 'number' && typeof flattened[i] !== 'string' && typeof flattened[i] !== 'boolean') { return false } } return true })(myNestedArray), true, \"<code>myNestedArray</code> should contain only numbers, booleans, and strings as data elements.\");",
|
||||||
|
"assert((function(arr) { for (let i = 0; i < arr.length; i++) { if (Array.isArray(arr[i])) {for (let j = 0; j < arr[i].length; j++) { if (Array.isArray(arr[i][j])) { return true } } } } })(myNestedArray) === true && (function(arr) { for (let i = 0; i < arr.length; i++) { for (let j = 0; j < arr[i].length; j++) { for (let k = 0; k < arr[i][j].length; k++) { if ( Array.isArray(arr[i][j][k]) ) { return false } } } } })(myNestedArray) === undefined, \"<code>myNestedArray</code> should have exactly 3 levels of depth.\");"
|
||||||
|
],
|
||||||
|
"type": "waypoint",
|
||||||
|
"solutions": [],
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7b7b367417b2b2512b17",
|
||||||
|
"title": "Combining arrays with spread syntax",
|
||||||
|
"description": [
|
||||||
|
"Another huge advantage of the spread syntax, is the ability to combine arrays, or to insert all the elements of one array into another, at any index. With more traditional syntaxes, we can concatenate arrays, but this only allows us to combine arrays at the end of one, and at the start of another. Spread syntax makes the following operation extremely simple:",
|
||||||
|
"<code>let thisArray = ['sage', 'rosemary', 'parsely', 'thyme'];</code>",
|
||||||
|
"<code>let thatArray = ['basil', 'cilantro', ...thisArray, 'corriander'];</code>",
|
||||||
|
"<code>// thatArray now equals ['basil', 'cilantro', 'sage', 'rosemary', 'parsely', 'thyme', 'corriander']</code>",
|
||||||
|
"Using spread syntax, we have just achieved an operation that would have been more more complex and more verbose had we used traditional methods.",
|
||||||
|
"Instructions",
|
||||||
|
"We have defined a function spreadOut that returns the variable sentence, modify the function using the spread syntax so that it returns the array ['learning', 'to', 'code', 'is', 'fun']."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"function spreadOut() {",
|
||||||
|
" let fragment = ['to', 'code'];",
|
||||||
|
" let sentence = 'change code here'",
|
||||||
|
" return sentence;",
|
||||||
|
"}",
|
||||||
|
"spreadOut();"
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert.deepEqual(spreadOut(), ['learning', 'to', 'code', 'is', 'fun'], \"<code>spreadOut</code> should return <code>['learning', 'to', 'code', 'is', 'fun']</code>.\");",
|
||||||
|
"assert.notStrictEqual(spreadOut.toString().search(/\\.\\.\\./), -1, \"The <code>spreadOut</code> function should utilize the spread syntax.\");"
|
||||||
|
],
|
||||||
|
"type": "waypoint",
|
||||||
|
"solutions": [],
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7b7c367417b2b2512b18",
|
||||||
|
"title": "Add Key-Value Pairs to JavaScript Objects",
|
||||||
|
"description": [
|
||||||
|
"The next data structure we will discuss is the JavaScript object. Objects are a very fundamental part of JavaScript, in fact, you may have heard this line before: 'In JavaScript, everything is an object.' While an understanding of objects is important to understand the inner workings of JavaScript functions or JavaScript's object-oriented capabilities, JavaScript objects at a basic level are actually just key-value pair stores, a commonly used data structure. Here, we will confine our discussion to JavaScript objects in this capacity.",
|
||||||
|
"Key-value pair data structure go by different names depending on the language you are using and the specific details of the data structure. The terms dictionary, map, and hash table all refer to the notion of a data structure in which specific keys, or properties are mapped to specific values. For instance, consider the following:",
|
||||||
|
"<code>let FCC_User = {</code>",
|
||||||
|
"<code> username: 'awesome_coder',</code>",
|
||||||
|
"<code> followers: 572,</code>",
|
||||||
|
"<code> points: 1741,</code>",
|
||||||
|
"<code> completedProjects: 15</code>",
|
||||||
|
"<code>};</code>",
|
||||||
|
"We've just defined an object called FCC_User with four properties each of which map to a specific value. If you wanted to know the number of followers FCC_User has, you could access that property by writing FCC_User.followers — this is called dot notation. You could also access the property with brackets, like so: FCC_User['followers']. Notice with the bracket notation we enclosed followers in quotes. This is because the brackets actually allow us to pass a variable in to be evaluated as a property name. Keep this in mind for later.",
|
||||||
|
"Instructions: We've created a foods object here with three entries. Add three more entries: bananas with a value of 13, grapes with a value of 35, and strawberries with a value of 27."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"let foods = {",
|
||||||
|
" apples: 25,",
|
||||||
|
" oranges: 32,",
|
||||||
|
" plums: 28",
|
||||||
|
"};",
|
||||||
|
"// change code below this line"
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert(typeof foods === 'object', 'foods is an object');",
|
||||||
|
"assert(foods.bananas === 13, 'The foods object has a key \\'bananas\\' with a value of 13.');",
|
||||||
|
"assert(foods.grapes === 35, 'The foods object has a key \\'grapes\\' with a value of 35.');",
|
||||||
|
"assert(foods.strawberries === 27, 'The foods object has a key \\'strawberries\\' with a value of 27.');"
|
||||||
|
],
|
||||||
|
"type": "waypoint",
|
||||||
|
"solutions": [],
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7b7c367417b2b2512b19",
|
||||||
|
"title": "",
|
||||||
|
"description": [
|
||||||
|
"Objects, and other similar key-value pair data structures, offer some very useful benefits. One clear benefit is that they allow us to structure our data in an intuitive way. They are also very flexible. For instance, you can have properties nested to an arbitrary depth. Values can also be anything, for example a key can store an array, or even another object. Objects are also the foundation for JavaScript Object Notation, JSON, which is a widely used method of sending data across the web.",
|
||||||
|
"Another powerful advantage of key-value pair data structures is constant lookup time. What we mean by this is when you request the value of a specific property you will get the value back in the same amount of time (theoretically) regardless of the number of entries in the object. If you had an object with 5 entries or one that held a collection of 1,000,000 entries you could still retrieve property values or check if a key exists in the same amount of time.",
|
||||||
|
"The reason for this fast lookup time is that internally the object is storing properties using some type of hashing mechanism which allows it to know exactly where it has stored different property values. If you want to learn more about this please take a look at the optional Advanced Data Structures challenges. All you should remember for now is that performant access to flexibly structured data make key-value stores very attractive data structures useful in a wide variety of settings.",
|
||||||
|
"Instructions: Here we've written an object nestedObject which includes another object nested within it. You can modify properties on this nested object in the same way you modified properties in the last challenge. Set the value of the online key to 45."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"let nestedObject = {",
|
||||||
|
" id: 23894201352,",
|
||||||
|
" date: 'January 1, 2017',",
|
||||||
|
" data: {",
|
||||||
|
" totalUsers: 51,",
|
||||||
|
" online: 42",
|
||||||
|
" }",
|
||||||
|
"};",
|
||||||
|
"// change code below this line"
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert('id' in nestedObject && 'date' in nestedObject && 'data' in nestedObject, 'nestedObject has id, date and data properties.');",
|
||||||
|
"assert('totalUsers' in nestedObject.data && 'online' in nestedObject.data, 'nestedObject has a data key set to an object with keys totalUsers and online.');",
|
||||||
|
"assert(nestedObject.data.online === 45, 'The online property nested in the data key of nestedObject should be set to 45.');"
|
||||||
|
],
|
||||||
|
"type": "waypoint",
|
||||||
|
"solutions": [],
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7b7c367417b2b2512b1a",
|
||||||
|
"title": " Access Property Names with Bracket Notation",
|
||||||
|
"description": [
|
||||||
|
"In the first challenge we mentioned the use of bracket notation as a way access properties values using the evaluation of a variable. For instance, if you recall our foods object from that challenge, imagine that this object is being used in a program for a supermarket cash register. We have some function that sets the selectedFood and we want to check our foods object for the presence of that food. This might look like:",
|
||||||
|
"<code>let selectedFood = getCurrentFood(scannedItem);</code>",
|
||||||
|
"<code>let inventory = foods[selectedFood];</code>",
|
||||||
|
"This code will evaluate the value stored in the selectedFood variable and return the value of that key in the foods object, or undefined if it is not present. Bracket notation is very useful because sometime object properties are not known before runtime or we need to access them in a more dynamic way.",
|
||||||
|
"Instructions: In the example code we've defined a function checkInventory which receives a scanned item as an argument. Return the current value of the scannedItem key in the foods object. You can assume that only valid keys will be provided as an argument to checkInventory."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"let foods = {",
|
||||||
|
" apples: 25,",
|
||||||
|
" oranges: 32,",
|
||||||
|
" plums: 28,",
|
||||||
|
" bananas: 13,",
|
||||||
|
" grapes: 35,",
|
||||||
|
" strawberries: 27",
|
||||||
|
"};",
|
||||||
|
"function checkInventory(scannedItem) {",
|
||||||
|
" // change code below this line",
|
||||||
|
" // change code above this line",
|
||||||
|
"};"
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert(typeof checkInventory === 'function', 'checkInventory is a function');",
|
||||||
|
"assert('apples' in foods && 'oranges' in foods && 'plums' in foods && 'bananas' in foods && 'grapes' in foods && 'strawberries' in foods, 'The foods object contains the following keys: apples, oranges, plums, bananas, grapes, and strawberries.');",
|
||||||
|
"assert(checkInventory('apples') === 25 && checkInventory('bananas') === 13 && checkInventory('strawberries') === 27, 'The checkInventory function returns the value of the scannedItem argument in the foods object.');"
|
||||||
|
],
|
||||||
|
"type": "waypoint",
|
||||||
|
"solutions": [],
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7b7c367417b2b2512b1b",
|
||||||
|
"title": "Use the Delete Keyword to Remove Object Properties",
|
||||||
|
"description": [
|
||||||
|
"Now you know what objects are and their basic features and advantages. In short, they are key-value stores which provide a flexible, intuitive way to structure data and they provide very fast lookup time. For the rest of these challenges, we will describe several common operations you can perform on objects so you can become comfortable applying these useful data structures in your programs.",
|
||||||
|
"Previously, we added and modified key-value pairs to objects. Here we will see how we can remove a key-value pair from an object. If we wanted to remove the apples key from our foods object from before, we could remove it by using the delete keyword like this:",
|
||||||
|
"<code>delete foods.apples;</code>",
|
||||||
|
"Instructions: Use the delete keyword to remove the oranges, plums, and strawberries keys from the foods object."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"let foods = {",
|
||||||
|
" apples: 25,",
|
||||||
|
" oranges: 32,",
|
||||||
|
" plums: 28,",
|
||||||
|
" bananas: 13,",
|
||||||
|
" grapes: 35,",
|
||||||
|
" strawberries: 27",
|
||||||
|
"};",
|
||||||
|
"// change code below this line"
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert(!foods.hasOwnProperty('oranges') && !foods.hasOwnProperty('plums') && !foods.hasOwnProperty('bananas') && Object.keys(foods).length === 3, 'The foods object only has three keys: apples, grapes, and strawberries.');"
|
||||||
|
],
|
||||||
|
"type": "waypoint",
|
||||||
|
"solutions": [],
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7b7d367417b2b2512b1c",
|
||||||
|
"title": "Check if an Object has a Property",
|
||||||
|
"description": [
|
||||||
|
"Now we can add, modify, and remove keys from objects. But what if we just wanted to know if an object has a specific property? JavaScript provides two different ways to do this. One uses the hasOwnProperty method on the object and the other uses the in keyword. If we have an object users with a property of Alan, we could check for its presence in either of the following ways:",
|
||||||
|
"<code>users.hasOwnProperty('Alan');</code>",
|
||||||
|
"<code>'Alan' in users;</code>",
|
||||||
|
"<code>// both return true</code>",
|
||||||
|
"Instructions: We've created a users object here with some users in it and a function isEveryoneHere which we pass the users object to as an argument. Finish writing this function so that it returns true only if the users object contains all four names, Alan, Jeff, Sarah, and Ryan, as keys, and false otherwise."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"let users = {",
|
||||||
|
" Alan: {",
|
||||||
|
" age: 27,",
|
||||||
|
" online: true",
|
||||||
|
" },",
|
||||||
|
" Jeff: {",
|
||||||
|
" age: 32,",
|
||||||
|
" online: true",
|
||||||
|
" },",
|
||||||
|
" Sarah: {",
|
||||||
|
" age: 48,",
|
||||||
|
" online: true",
|
||||||
|
" },",
|
||||||
|
" Ryan: {",
|
||||||
|
" age: 19,",
|
||||||
|
" online: true",
|
||||||
|
" }",
|
||||||
|
"};",
|
||||||
|
"function isEveryoneHere(obj) {",
|
||||||
|
" // change code below this line",
|
||||||
|
" // change code above this line",
|
||||||
|
"};"
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert('Alan' in users && 'Jeff' in users && 'Sarah' in users && 'Ryan' in users && Object.keys(users).length === 4, 'The users object only contains the keys Alan, Jeff, Sarah, and Ryan.');",
|
||||||
|
"assert(isEveryoneHere(users) === true, 'The function isEveryoneHere returns true if Alan, Jeff, Sarah, and Ryan are properties on the users object');",
|
||||||
|
"assert((function() { delete users.Alan; delete users.Jeff; delete users.Sarah; delete users.Ryan; return isEveryoneHere(users) })() === false, 'The function isEveryoneHere returns false if Alan, Jeff, Sarah, and Ryan are not keys on the users object.');"
|
||||||
|
],
|
||||||
|
"type": "waypoint",
|
||||||
|
"solutions": [],
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7b7d367417b2b2512b1d",
|
||||||
|
"title": " Iterate Through the Keys of an Object with a for...in Statement",
|
||||||
|
"description": [
|
||||||
|
"Sometimes you may need to iterate through all the keys within an object. This requires a specific syntax in JavaScript called a for...in statement. For our users object from the last challenge, this could look like:",
|
||||||
|
"<code>for (let user in users) {</code>",
|
||||||
|
"<code> console.log(user);</code>",
|
||||||
|
"<code>};</code>",
|
||||||
|
"In this statement, we define a variable user. This variable will be set to the key in each iteration as the statement loops through the keys in the object. Running this code would print the name of each user to the console. Note that objects do not maintain an ordering to stored keys like arrays do.",
|
||||||
|
"Instructions: We've defined a function countOnline that should return the number of users with the online property set to true. Use a for...in statement within this function to loop through the users in the users object and return the number of users whose online property is set to true."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"let users = {",
|
||||||
|
" Alan: {",
|
||||||
|
" age: 27,",
|
||||||
|
" online: false",
|
||||||
|
" },",
|
||||||
|
" Jeff: {",
|
||||||
|
" age: 32,",
|
||||||
|
" online: true",
|
||||||
|
" },",
|
||||||
|
" Sarah: {",
|
||||||
|
" age: 48,",
|
||||||
|
" online: false",
|
||||||
|
" },",
|
||||||
|
" Ryan: {",
|
||||||
|
" age: 19,",
|
||||||
|
" online: true",
|
||||||
|
" }",
|
||||||
|
"};",
|
||||||
|
"function countOnline(obj) {",
|
||||||
|
" // change code below this line",
|
||||||
|
" // change code above this line",
|
||||||
|
"};"
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert(users.Alan.online === false && users.Jeff.online === true && users.Sarah.online === false && users.Ryan.online === true, 'The users object contains users Jeff and Ryan with online set to true and users Alan and Sarah with online set to false.');",
|
||||||
|
"assert((function() { users.Harry = {online: true}; users.Sam = {online: true}; users.Carl = {online: true}; return countOnline(users) })() === 5, 'The function countOnline returns the number of users with the online property set to true.');"
|
||||||
|
],
|
||||||
|
"type": "waypoint",
|
||||||
|
"solutions": [],
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7b7d367417b2b2512b1e",
|
||||||
|
"title": "Generate an Array of All Object Keys with Object.keys()",
|
||||||
|
"description": [
|
||||||
|
"We can also generate an array which contains all the keys stored in an object using the Object.keys() method and passing in an object as the argument. This will return an array with strings representing each property in the object. Again, there will be no specific order to the entries in the array.",
|
||||||
|
"Instructions: Finish writing the getArrayOfUsers function so that it returns an array containing all the properties in the object it receives as an argument."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"let users = {",
|
||||||
|
" Alan: {",
|
||||||
|
" age: 27,",
|
||||||
|
" online: false",
|
||||||
|
" },",
|
||||||
|
" Jeff: {",
|
||||||
|
" age: 32,",
|
||||||
|
" online: true",
|
||||||
|
" },",
|
||||||
|
" Sarah: {",
|
||||||
|
" age: 48,",
|
||||||
|
" online: false",
|
||||||
|
" },",
|
||||||
|
" Ryan: {",
|
||||||
|
" age: 19,",
|
||||||
|
" online: true",
|
||||||
|
" }",
|
||||||
|
"};",
|
||||||
|
"function getArrayOfUsers(obj) {",
|
||||||
|
" // change code below this line",
|
||||||
|
" // change code above this line",
|
||||||
|
"};"
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert('Alan' in users && 'Jeff' in users && 'Sarah' in users && 'Ryan' in users && Object.keys(users).length === 4, 'The users object only contains the keys Alan, Jeff, Sarah, and Ryan.');",
|
||||||
|
"assert((function() { users.Sam = {}; users.Lewis = {}; let R = getArrayOfUsers(users); return (R.indexOf('Alan') !== -1 && R.indexOf('Jeff') !== -1 && R.indexOf('Sarah') !== -1 && R.indexOf('Ryan') !== -1 && R.indexOf('Sam') !== -1 && R.indexOf('Lewis') !== -1); })() === true, 'The getArrayOfUsers function returns an array which contains all the keys in the users array.');"
|
||||||
|
],
|
||||||
|
"type": "waypoint",
|
||||||
|
"solutions": [],
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7b7d367417b2b2512b1f",
|
||||||
|
"title": "Modify an Array Stored in an Object",
|
||||||
|
"description": [
|
||||||
|
"Now you've seen all the basic operations for JavaScript objects. You can add, modify, and remove key-value pairs, check if keys exist, and iterate over all the keys in an object. As you continue learning JavaScript you will see even more versatile applications of objects. Additionally, the optional Advanced Data Structures lessons later in the curriculum also cover the ES6 Map and Set objects, both of which are similar to ordinary objects but provide some additional features. Now that you've learned the basics of arrays and objects, you're fully prepared to begin tackling more complex problems using JavaScript!",
|
||||||
|
"Instructions: Take a look at the object we've provided in the code editor. The user object contains three keys. The data key contains four keys, one of which contains an array of friends. From this, you can see how flexible objects are as data structures. We've started writing a function addFriend. Finish writing it so that it takes a user object and adds the name of the friend argument to the array stored in user.data.friends."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"let user = {",
|
||||||
|
" name: 'Kenneth',",
|
||||||
|
" age: 28,",
|
||||||
|
" data: {",
|
||||||
|
" username: 'kennethCodesAllDay',",
|
||||||
|
" joinDate: 'March 26, 2016',",
|
||||||
|
" organization: 'Free Code Camp',",
|
||||||
|
" friends: [",
|
||||||
|
" 'Sam',",
|
||||||
|
" 'Kira',",
|
||||||
|
" 'Tomo'",
|
||||||
|
" ],",
|
||||||
|
" location: {",
|
||||||
|
" city: 'San Francisco',",
|
||||||
|
" state: 'CA',",
|
||||||
|
" country: 'USA'",
|
||||||
|
" }",
|
||||||
|
" }",
|
||||||
|
"};",
|
||||||
|
"function addFriend(user, friend) {",
|
||||||
|
" // change code below this line ",
|
||||||
|
" // change code above this line",
|
||||||
|
"};"
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert('name' in user && 'age' in user && 'data' in user, 'The user object has name, age, and data keys');",
|
||||||
|
"assert((function() { let L1 = user.data.friends.length; addFriend(user, 'Sean'); let L2 = user.data.friends.length; return (L2 === L1 + 1); })(), 'The addFriend function accepts a user object and a friend as arguments and adds the friend to the array of friends in the user object.');"
|
||||||
|
],
|
||||||
|
"type": "waypoint",
|
||||||
|
"solutions": [],
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7b7e367417b2b2512b20",
|
||||||
|
"title": "Use an array to store a collection of data",
|
||||||
|
"description": [
|
||||||
|
"Arrays are JavaScript's most fundamental, and perhaps most common, data structure. An array is simply a collection of data, of any length (zero-indexed), arranged in a comma separated list and enclosed in brackets [ ]. While we often make the distinction in JavaScript between Objects and Arrays, it is important to note that technically, an array is a type of object.",
|
||||||
|
"Arrays can store any type of data supported by JavaScript, and while they are a simple and basic form of data structure, they can also be very complex and powerful - all of which depends on how the programmer utilizes them.",
|
||||||
|
"The below is an example of a valid array, notice it contains booleans, strings, numbers, other arrays (this is called a nested, or multi-dimensional array), and objects, among other valid data types:",
|
||||||
|
"<code>let myArray = [undefined, null, true, false, 'one', 2, \"III\", {'four': 5}, [6, 'seven', 8]];</code>",
|
||||||
|
"JavaScript offers many built in methods which allow us to access, traverse, and mutate arrays as needed, depending on our purpose. In the coming challenges, we will discuss several of the most common and useful methods, and a few other key techniques, that will help us to better understand and utilize arrays as data structures in JavaScript.",
|
||||||
|
"Instructions",
|
||||||
|
"We have defined a variable called yourArray; complete the declaration by defining an array of at least 5 elements in length. Your array should contain at least one string, one number, and one boolean."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"let yourArray = // change code here;"
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert.strictEqual(Array.isArray(yourArray), true, 'yourArray is an array.');",
|
||||||
|
"assert(yourArray.length >= 5, 'yourArray is at least 5 elements long.')",
|
||||||
|
"assert(yourArray.filter( el => typeof el === 'boolean').length >= 1, '<code>yourArray</code> contains at least one boolean.');",
|
||||||
|
"assert(yourArray.filter( el => typeof el === 'number').length >= 1, '<code>yourArray</code> contains at least one number.');",
|
||||||
|
"assert(yourArray.filter( el => typeof el === 'string').length >= 1, '<code>yourArray</code> contains at least one string.');"
|
||||||
|
],
|
||||||
|
"type": "waypoint",
|
||||||
|
"solutions": [],
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,240 @@
|
|||||||
|
{
|
||||||
|
"name": "Claim Your JavaScript Algorithms and Data Structures Certificate",
|
||||||
|
"order": 13,
|
||||||
|
"time": "5 minutes",
|
||||||
|
"challenges": [
|
||||||
|
{
|
||||||
|
"id": "587d7b7f367417b2b2512b25",
|
||||||
|
"title": "Claim Your JavaScript Algorithms and Data Structures Certificate",
|
||||||
|
"description": [
|
||||||
|
[
|
||||||
|
"//i.imgur.com/k8btNUB.jpg",
|
||||||
|
"An image of our Front End Development Certificate",
|
||||||
|
"This challenge will give you your verified Front End Development Certificate. Before we issue your certificate, we must verify that you have completed all of our basic and intermediate algorithm scripting challenges, and all our basic, intermediate, and advanced front end development projects. You must also accept our Academic Honesty Pledge. Click the button below to start this process.",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"//i.imgur.com/uLPsUko.jpg",
|
||||||
|
"The definition of plagiarism: Plagiarism (noun) - copying someone else’s work and presenting it as your own without crediting them",
|
||||||
|
"By clicking below, you pledge that all of your submitted code A) is code you or your pair personally wrote, or B) comes from open source libraries like jQuery, or C) has been clearly attributed to its original authors. You also give us permission to audit your challenge solutions and revoke your certificate if we discover evidence of plagiarism.",
|
||||||
|
"#"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"//i.imgur.com/UedoV2G.jpg",
|
||||||
|
"An image of the text \"Front End Development Certificate requirements\"",
|
||||||
|
"Let's confirm that you have completed all of our basic and intermediate algorithm scripting challenges, and all our basic, intermediate, and advanced front end development projects. Click the button below to verify this.",
|
||||||
|
"#"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"//i.imgur.com/Q5Za9U6.jpg",
|
||||||
|
"An image of the word \"Congratulations\"",
|
||||||
|
"Congratulations! We've added your Front End Development Certificate to your portfolio page. Unless you choose to hide your solutions, this certificate will remain publicly visible and verifiable.",
|
||||||
|
""
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
{
|
||||||
|
"properties": [
|
||||||
|
"isHonest",
|
||||||
|
"isFrontEndCert"
|
||||||
|
],
|
||||||
|
"apis": [
|
||||||
|
"/certificate/honest",
|
||||||
|
"/certificate/verify/front-end"
|
||||||
|
],
|
||||||
|
"stepIndex": [
|
||||||
|
1,
|
||||||
|
2
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"id": "a202eed8fc186c8434cb6d61",
|
||||||
|
"title": "Reverse a String"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "a302f7aae1aa3152a5b413bc",
|
||||||
|
"title": "Factorialize a Number"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "aaa48de84e1ecc7c742e1124",
|
||||||
|
"title": "Check for Palindromes"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "a26cbbe9ad8655a977e1ceb5",
|
||||||
|
"title": "Find the Longest Word in a String"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "ab6137d4e35944e21037b769",
|
||||||
|
"title": "Title Case a Sentence"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "a789b3483989747d63b0e427",
|
||||||
|
"title": "Return Largest Numbers in Arrays"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "acda2fb1324d9b0fa741e6b5",
|
||||||
|
"title": "Confirm the Ending"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "afcc8d540bea9ea2669306b6",
|
||||||
|
"title": "Repeat a string repeat a string"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "ac6993d51946422351508a41",
|
||||||
|
"title": "Truncate a string"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "a9bd25c716030ec90084d8a1",
|
||||||
|
"title": "Chunky Monkey"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "579e2a2c335b9d72dd32e05c",
|
||||||
|
"title": "Splice and Slice"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "af2170cad53daa0770fabdea",
|
||||||
|
"title": "Mutations"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "adf08ec01beb4f99fc7a68f2",
|
||||||
|
"title": "Falsy Bouncer"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "a39963a4c10bc8b4d4f06d7e",
|
||||||
|
"title": "Seek and Destroy"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "a24c1a4622e3c05097f71d67",
|
||||||
|
"title": "Where do I belong"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "a3566b1109230028080c9345",
|
||||||
|
"title": "Sum All Numbers in a Range"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "a5de63ebea8dbee56860f4f2",
|
||||||
|
"title": "Diff Two Arrays"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "a7f4d8f2483413a6ce226cac",
|
||||||
|
"title": "Roman Numeral Converter"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "a8e512fbe388ac2f9198f0fa",
|
||||||
|
"title": "Wherefore art thou"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "a0b5010f579e69b815e7c5d6",
|
||||||
|
"title": "Search and Replace"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "aa7697ea2477d1316795783b",
|
||||||
|
"title": "Pig Latin"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "afd15382cdfb22c9efe8b7de",
|
||||||
|
"title": "DNA Pairing"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "af7588ade1100bde429baf20",
|
||||||
|
"title": "Missing letters"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "a77dbc43c33f39daa4429b4f",
|
||||||
|
"title": "Boo who"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "a105e963526e7de52b219be9",
|
||||||
|
"title": "Sorted Union"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "a6b0bb188d873cb2c8729495",
|
||||||
|
"title": "Convert HTML Entities"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "a103376db3ba46b2d50db289",
|
||||||
|
"title": "Spinal Tap Case"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "a5229172f011153519423690",
|
||||||
|
"title": "Sum All Odd Fibonacci Numbers"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "a3bfc1673c0526e06d3ac698",
|
||||||
|
"title": "Sum All Primes"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "ae9defd7acaf69703ab432ea",
|
||||||
|
"title": "Smallest Common Multiple"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "a6e40f1041b06c996f7b2406",
|
||||||
|
"title": "Finders Keepers"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "a5deed1811a43193f9f1c841",
|
||||||
|
"title": "Drop it"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "ab306dbdcc907c7ddfc30830",
|
||||||
|
"title": "Steamroller"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "a8d97bd4c764e91f9d2bda01",
|
||||||
|
"title": "Binary Agents"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "a10d2431ad0c6a099a4b8b52",
|
||||||
|
"title": "Everything Be True"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "a97fd23d9b809dac9921074f",
|
||||||
|
"title": "Arguments Optional"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "56533eb9ac21ba0edf2244e2",
|
||||||
|
"title": "Caesars Cipher"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "a2f1d72d9b908d0bd72bb9f6",
|
||||||
|
"title": "Make a Person"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "af4afb223120f7348cdfc9fd",
|
||||||
|
"title": "Map the Debris"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"type": "Waypoint",
|
||||||
|
"challengeType": 7,
|
||||||
|
"descriptionEs": [
|
||||||
|
[
|
||||||
|
"//i.imgur.com/k8btNUB.jpg",
|
||||||
|
"Una imagen que muestra nuestro certificado de Desarrollo de interfaces",
|
||||||
|
"Este desafío te otorga tu certificado autenticado de Desarrollo de interfaces. Antes de que podamos emitir tu certificado, debemos verificar que has completado todos los desafíos básicos e intermedios de diseño de algoritmos, y todos los proyectos básicos e intermedios de desarrollo de interfaces. También debes aceptar nuestro Juramento de honestidad académica. Pulsa el botón siguiente para iniciar este proceso.",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"//i.imgur.com/HArFfMN.jpg",
|
||||||
|
"Plagio (nombre): acción y efecto de plagiar. Plagiar (verbo) - copiar en lo sustancial obras ajenas, dándolas como propias.",
|
||||||
|
"Al pulsar el botón siguiente, juras que todo el código en tus soluciones a los desafíos A) es código que tú o tu compañero escribieron personalmente, o B) proviene de librerías de código abierto como jQuery, o C) ha sido claramente atribuido a sus autores originales. También nos otorgas el permiso para auditar tus soluciones a los desafíos y revocar tu certificado si encontramos evidencia de plagio.",
|
||||||
|
"#"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"//i.imgur.com/14F2Van.jpg",
|
||||||
|
"Una imagen del texto \"Front End Development Certificate requirements\"",
|
||||||
|
"Confirmemos que has completado todos nuestros desafíos básicos e intermedios de diseño de algoritmos, y todos nuestros proyectos básicos e intermedios de desarrollo de interfaces. Pulsa el botón siguiente para hacer la verificación.",
|
||||||
|
"#"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"//i.imgur.com/16SIhHO.jpg",
|
||||||
|
"Una imagen de la palabra \"Congratulations\"",
|
||||||
|
"¡Felicitaciones! Hemos agregado tu certificado de Desarrollo de interfaces a tu portafolio. A menos que elijas no mostrar tus soluciones, este certificado será públicamente visible y verificable.",
|
||||||
|
""
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"titleEs": "Reclama tu certificado de Desarrollo de interfaces"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -0,0 +1,589 @@
|
|||||||
|
{
|
||||||
|
"name": "Debugging",
|
||||||
|
"order": 4,
|
||||||
|
"time": "1 hour",
|
||||||
|
"helpRoom": "Help",
|
||||||
|
"challenges": [
|
||||||
|
{
|
||||||
|
"id": "587d7b83367417b2b2512b32",
|
||||||
|
"title": "Introduction to the Debugging Challenges",
|
||||||
|
"description": [
|
||||||
|
[
|
||||||
|
"http://imgs.xkcd.com/comics/debugging.png",
|
||||||
|
"XKCD web comic walking through the convoluted process of debugging. The programmer moves from a browser problem, to a keyboard driver issue, receives a cryptic system utility error message, and ends by finding the sword of Martin the Warrior.",
|
||||||
|
"Debugging is a valuable and (unfortunately) necessary tool for programmers. It follows the testing phase of checking if your code works as intended, and discovering it does not. Debugging is the process of finding exactly what isn't working and fixing it.",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"",
|
||||||
|
"",
|
||||||
|
"After spending time creating a brilliant block of code, it is tough realizing it may have errors. These issues generally come in three forms: 1) syntax errors that prevent a program from running, 2) runtime errors when code fails to execute or has unexpected behavior, and 3) semantic (or logical) errors when code doesn't do what it's meant to.<br><br>Modern code editors (and experience) can help identify syntax errors. Semantic and runtime errors are harder to find. They may cause your program to crash, make it run forever, or give incorrect output. Think of debugging as trying to understand why your code is behaving the way it is.<br><br>Example of a syntax error - often detected by the code editor:<br><br><blockquote>funtion willNotWork( {<br> console.log(\"Yuck\");<br>}<br>// \"function\" keyword is misspelled and there's a missing parenthesis</blockquote><br><br>Here's an example of a runtime error - often detected while the program executes:<br><br><blockquote>function loopy() {<br> while(true) {<br> console.log(\"Hello, world!\");<br> }<br>}<br>// Calling loopy starts an infinite loop, which may crash your browser</blockquote><br><br>Example of a semantic error - often detected after testing code output:<br><br><blockquote>function calcAreaOfRect(w, h) {<br> return w + h; // This should be w * h<br>}<br>let myRectArea = calcAreaOfRect(2, 3);<br>// Correct syntax and the program executes, but this gives the wrong answer</blockquote>",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"",
|
||||||
|
"",
|
||||||
|
"Debugging is frustrating, but it helps to develop (and follow) a step-by-step approach to review your code. This means checking the intermediate values and types of variables to see if they are what they should be. You can start with a simple process of elimination.<br><br>For example, if function A works and returns what it's supposed to, then function B may have the issue. Or start checking values in a block of code from the middle to try to cut the search space in half. A problem in one spot indicates a bug in the first half of the code. If not, it's likely in the second.<br><br>This section will cover a couple helpful tools to find bugs, and some of the common forms they take. Fortunately, debugging is a learnable skill that just requires a little patience and practice to master.",
|
||||||
|
""
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"releasedOn": "",
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [],
|
||||||
|
"type": "Waypoint",
|
||||||
|
"challengeType": 7,
|
||||||
|
"isRequired": false,
|
||||||
|
"titleEs": "",
|
||||||
|
"descriptionEs": [
|
||||||
|
[]
|
||||||
|
],
|
||||||
|
"titleFr": "",
|
||||||
|
"descriptionFr": [
|
||||||
|
[]
|
||||||
|
],
|
||||||
|
"titleDe": "",
|
||||||
|
"descriptionDe": [
|
||||||
|
[]
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7b83367417b2b2512b33",
|
||||||
|
"title": "Use the JavaScript Console to Check the Value of a Variable",
|
||||||
|
"description": [
|
||||||
|
"Both Chrome and Firefox have excellent JavaScript consoles, also known as DevTools, for debugging your JavaScript.",
|
||||||
|
"You can find Developer tools in your Chrome's menu or Web Console in FireFox's menu. If you're using a different browser, or a mobile phone, we strongly recommend switching to desktop Firefox or Chrome.",
|
||||||
|
"The <code>console.log()</code> method, which \"prints\" the output of what's within its parentheses to the console, will likely be the most helpful debugging tool. Placing it at strategic points in your code can show you the intermediate values of variables. It's good practice to have an idea of what the output should be before looking at what it is. Having check points to see the status of your calculations throughout your code will help narrow down where the problem is.",
|
||||||
|
"Here's an example to print 'Hello world!' to the console:",
|
||||||
|
"<code>console.log('Hello world!');</code>",
|
||||||
|
"<h4>Instructions</h4>",
|
||||||
|
"Use the <code>console.log()</code> method to print the value of the variable <code>a</code> where noted in the code."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"let a = 5;",
|
||||||
|
"let b = 1;",
|
||||||
|
"a++;",
|
||||||
|
"// Add your code below this line",
|
||||||
|
"",
|
||||||
|
"",
|
||||||
|
"let sumAB = a + b;",
|
||||||
|
"console.log(sumAB);"
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert(code.match(/console\\.log\\(a\\)/g), 'message: Your code should use <code>console.log()</code> to check the value of the variable <code>a</code>.');"
|
||||||
|
],
|
||||||
|
"solutions": [
|
||||||
|
|
||||||
|
],
|
||||||
|
"hints": [],
|
||||||
|
"type": "waypoint",
|
||||||
|
"challengeType": 1,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7b84367417b2b2512b34",
|
||||||
|
"title": "Use typeof to Check the Type of a Variable",
|
||||||
|
"description": [
|
||||||
|
"You can use <code>typeof</code> to check the data structure, or type, of a variable. This is useful in debugging when working with multiple data types. If you think you're adding two numbers, but one is actually a string, the results can be unexpected. Type errors can lurk in calculations or function calls. Especially take care when you're accessing and working with external data in the form of a JavaScript object (JSON).",
|
||||||
|
"Here are some examples using <code>typeof</code>:",
|
||||||
|
"<blockquote>console.log(typeof \"\"); // outputs \"string\"<br>console.log(typeof 0); // outputs \"number\"<br>console.log(typeof []); // outputs \"object\"<br>console.log(typeof {}); // outputs \"object\"</blockquote>",
|
||||||
|
"JavaScript recognizes six primitive (immutable) data types: <code>Boolean</code>, <code>Null</code>, <code>Undefined</code>, <code>Number</code>, <code>String</code>, and <code>Symbol</code> (new with ES6) and one type for mutable items: <code>Object</code>. Note that in JavaScript, arrays are technically a type of object.",
|
||||||
|
"<h4>Instructions</h4>",
|
||||||
|
"Add two <code>console.log()</code> statements to check the <code>typeof</code> each of the two variables <code>seven</code> and <code>three</code> in the code."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"let seven = 7;",
|
||||||
|
"let three = \"3\";",
|
||||||
|
"console.log(seven + three);",
|
||||||
|
"// Add your code below this line",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert(code.match(/console\\.log\\(typeof[\\( ].*\\)?\\);/g).length == 2, 'message: Your code should use <code>typeof</code> in two <code>console.log()</code> statements to check the type of the variables.');",
|
||||||
|
"assert(code.match(/typeof[\\( ]seven\\)?/g), 'message: Your code should use <code>typeof</code> to check the type of the variable <code>seven</code>.');",
|
||||||
|
"assert(code.match(/typeof[\\( ]three\\)?/g), 'message: Your code should use <code>typeof</code> to check the type of the variable <code>three</code>.');"
|
||||||
|
],
|
||||||
|
"solutions": [
|
||||||
|
],
|
||||||
|
"hints": [],
|
||||||
|
"type": "waypoint",
|
||||||
|
"challengeType": 1,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7b84367417b2b2512b35",
|
||||||
|
"title": "Catch Misspelled Variable and Function Names",
|
||||||
|
"description": [
|
||||||
|
"The <code>console.log()</code> and <code>typeof</code> methods are the two primary ways to check intermediate values and types of program output. Now it's time to get into the common forms that bugs take. One syntax-level issue that fast typers can commiserate with is the humble spelling error.",
|
||||||
|
"Transposed, missing, or mis-capitalized characters in a variable or function name will have the browser looking for an object that doesn't exist - and complain in the form of a reference error. JavaScript variable and function names are case-sensitive.",
|
||||||
|
"<h4>Instructions</h4>",
|
||||||
|
"Fix the two spelling errors in the code so the <code>netWorkingCapital</code> calculation works."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"let receivables = 10;",
|
||||||
|
"let payables = 8;",
|
||||||
|
"let netWorkingCapital = recievables - payable;",
|
||||||
|
"console.log(`Net working capital is: ${netWorkingCapital}`);"
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert(netWorkingCapital === 2, 'message: Check the spelling of the two variables used in the netWorkingCapital calculation, the console output should show that \"Net working capital is: 2\".');",
|
||||||
|
"assert(!code.match(/recievables/g), 'message: There should be no instances of mis-spelled variables in the code.');",
|
||||||
|
"assert(code.match(/receivables/g).length == 2, 'message: The <code>receivables</code> variable should be declared and used properly in the code.');",
|
||||||
|
"assert(!code.match(/payable;/g), 'message: There should be no instances of mis-spelled variables in the code.');",
|
||||||
|
"assert(code.match(/payables/g).length == 2, 'message: The <code>payables</code> variable should be declared and used properly in the code.');"
|
||||||
|
],
|
||||||
|
"solutions": [
|
||||||
|
|
||||||
|
],
|
||||||
|
"hints": [],
|
||||||
|
"type": "waypoint",
|
||||||
|
"challengeType": 1,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7b84367417b2b2512b36",
|
||||||
|
"title": "Catch Unclosed Parentheses, Brackets, Braces and Quotes",
|
||||||
|
"description": [
|
||||||
|
"Another syntax error to be aware of is that all opening parentheses, brackets, curly braces, and quotes have a closing pair. Forgetting a piece tends to happen when you're editing existing code and inserting items with one of the pair types. Also, take care when nesting code blocks into others, such as adding a callback function as an argument to a method.",
|
||||||
|
"One way to avoid this mistake is as soon as the opening character is typed, immediately include the closing match, then move the cursor back between them and continue coding. Fortunately, most modern code editors generate the second half of the pair automatically.",
|
||||||
|
"<h4>Instructions</h4>",
|
||||||
|
"Fix the two pair errors in the code."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"let myArray = [1, 2, 3;",
|
||||||
|
"let arraySum = myArray.reduce((previous, current => previous + current);",
|
||||||
|
"console.log(`Sum of array values is: ${arraySum}`);"
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert(code.match(/myArray\\s*?=\\s*?\\[\\s*?1\\s*?,\\s*?2\\s*?,\\s*?3\\s*?\\];/g), 'message: Your code should fix the missing piece of the array.');",
|
||||||
|
"assert(arraySum === 6, 'message: Your code should fix the missing piece of the <code>.reduce()</code> method. The console output should show that \"Sum of array values is: 6\".');"
|
||||||
|
],
|
||||||
|
"solutions": [
|
||||||
|
],
|
||||||
|
"hints": [],
|
||||||
|
"type": "waypoint",
|
||||||
|
"challengeType": 1,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7b84367417b2b2512b37",
|
||||||
|
"title": "Catch Mixed Usage of Single and Double Quotes",
|
||||||
|
"description": [
|
||||||
|
"JavaScript allows the use of both single ('') and double (\"\") quotes to declare a string. Deciding which one to use generally comes down to personal preference, with some exceptions.",
|
||||||
|
"Having two choices is great when a string has contractions or another piece of text that's in quotes. Just be careful that you don't close the string too early, which causes a syntax error.",
|
||||||
|
"Here are some examples of mixing quotes:",
|
||||||
|
"<blockquote>// These are correct:<br>const grouchoContraction = \"I've had a perfectly wonderful evening, but this wasn't it.\";<br>const quoteInString = \"Groucho Marx once said 'Quote me as saying I was mis-quoted.'\";<br>// This is incorrect:<br>const uhOhGroucho = 'I've had a perfectly wonderful evening, but this wasn't it.';</blockquote>",
|
||||||
|
"Of course, it is okay to use only one style of quotes. You can escape the quotes inside the string by using the backslash (\\) escape character:",
|
||||||
|
"<blockquote>// Correct use of same quotes:<br>const allSameQuotes = 'I\\'ve had a perfectly wonderful evening, but this wasn\\'t it.';</blockquote>",
|
||||||
|
"<h4>Instructions</h4>",
|
||||||
|
"Fix the string so it either uses different quotes for the <code>href</code> value, or escape the existing ones. Keep the double quote marks around the entire string."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"let innerHtml = \"<p>Click here to <a href=\"#Home\">return home</a></p>\";",
|
||||||
|
"console.log(innerHtml);"
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert(code.match(/<a href=\\s*?('|\\\\\")#Home\\1\\s*?>/g), 'message: Your code should fix the quotes around the <code>href</code> value \"#Home\" by either changing or escaping them.');",
|
||||||
|
"assert(code.match(/\"<p>.*?<\\/p>\";/g), 'message: Your code should keep the double quotes around the entire string.');"
|
||||||
|
],
|
||||||
|
"solutions": [
|
||||||
|
],
|
||||||
|
"hints": [],
|
||||||
|
"type": "waypoint",
|
||||||
|
"challengeType": 1,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7b85367417b2b2512b38",
|
||||||
|
"title": "Catch Use of Assignment Operator Instead of Equality Operator",
|
||||||
|
"description": [
|
||||||
|
"Branching programs, i.e. ones that do different things if certain conditions are met, rely on <code>if</code>, <code>else if</code>, and <code>else</code> statements in JavaScript. The condition sometimes takes the form of testing whether a result is equal to a value.",
|
||||||
|
"This logic is spoken (in English, at least) as \"if x equals y, then ...\" which can literally translate into code using the <code>=</code>, or assignment operator. This leads to unexpected control flow in your program.",
|
||||||
|
"As covered in previous challenges, the assignment operator (<code>=</code>) in JavaScript assigns a value to a variable name. And the <code>==</code> and <code>===</code> operators check for equality (the triple <code>===</code> tests for strict equality, meaning both value and type are the same).",
|
||||||
|
"The code below assigns <code>x</code> to be 2, which evaluates as <code>true</code>. Almost every value on its own in JavaScript evaluates to <code>true</code>, except what are known as the \"falsy\" values: <code>false</code>, <code>0</code>, <code>\"\"</code> (an empty string), <code>NaN</code>, <code>undefined</code>, and <code>null</code>.",
|
||||||
|
"<blockquote>let x = 1;<br>let y = 2;<br>if (x = y) {<br> // this code block will run for any value of y (unless y were originally set as a falsy)<br>} else {<br> // this code block is what should run (but won't) in this example<br>}</blockquote>",
|
||||||
|
"<h4>Instructions</h4>",
|
||||||
|
"Fix the condition so the program runs the right branch, and the appropriate value is assigned to <code>result</code>."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"let x = 7;",
|
||||||
|
"let y = 9;",
|
||||||
|
"let result = \"to come\";",
|
||||||
|
"",
|
||||||
|
"if(x = y) {",
|
||||||
|
" result = \"Equal!\";",
|
||||||
|
"} else {",
|
||||||
|
" result = \"Not equal!\";",
|
||||||
|
"}",
|
||||||
|
"",
|
||||||
|
"console.log(result);"
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert(result == \"Not equal!\", 'message: Your code should fix the condition so it checks for equality, instead of using assignment.');",
|
||||||
|
"assert(code.match(/x\\s*?===?\\s*?y/g), 'message: The condition can use either <code>==</code> or <code>===</code> to test for equality.');"
|
||||||
|
],
|
||||||
|
"solutions": [
|
||||||
|
],
|
||||||
|
"hints": [],
|
||||||
|
"type": "waypoint",
|
||||||
|
"challengeType": 1,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7b85367417b2b2512b39",
|
||||||
|
"title": "Catch Missing Open and Closing Parenthesis After a Function Call",
|
||||||
|
"description": [
|
||||||
|
"When a function or method doesn't take any arguments, you may forget to include the (empty) opening and closing parentheses when calling it. Often times the result of a function call is saved in a variable for other use in your code. This error can be detected by logging variable values (or their types) to the console and seeing that one is set to a function reference, instead of the expected value the function returns.",
|
||||||
|
"The variables in the following example are different:",
|
||||||
|
"<blockquote>function myFunction() {<br> return \"You rock!\";<br>}<br>let varOne = myFunction; // set to equal a function<br>let varTwo = myFunction(); // set to equal the string \"You rock!\"</blockquote>",
|
||||||
|
"<h4>Instructions</h4>",
|
||||||
|
"Fix the code so the variable <code>result</code> is set to the value returned from calling the function <code>getNine</code>."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"function getNine() {",
|
||||||
|
" let x = 6;",
|
||||||
|
" let y = 3;",
|
||||||
|
" return x + y;",
|
||||||
|
"}",
|
||||||
|
"",
|
||||||
|
"let result = getNine;",
|
||||||
|
"console.log(result);"
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert(result == 9, 'message: Your code should fix the variable <code>result</code> so it is set to the number that the function <code>getNine</code> returns.');",
|
||||||
|
"assert(code.match(/getNine\\(\\)/g).length == 2, 'message: Your code should call the <code>getNine</code> function.');"
|
||||||
|
],
|
||||||
|
"solutions": [
|
||||||
|
],
|
||||||
|
"hints": [],
|
||||||
|
"type": "waypoint",
|
||||||
|
"challengeType": 1,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7b85367417b2b2512b3a",
|
||||||
|
"title": "Catch Arguments Passed in the Wrong Order When Calling a Function",
|
||||||
|
"description": [
|
||||||
|
"Continuing the discussion on calling functions, the next bug to watch out for is when a function's arguments are supplied in the incorrect order. If the arguments are different types, such as a function expecting an array and an integer, this will likely throw a runtime error. If the arguments are the same type (all integers, for example), then the logic of the code won't make sense. Make sure to supply all required arguments, in the proper order to avoid these issues.",
|
||||||
|
"<h4>Instructions</h4>",
|
||||||
|
"The following function <code>positivePowers</code> raises a base to a positive exponent. Unfortunately, it's not called properly - fix the code so the value of <code>power</code> is the expected 8."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"function positivePowers(b, e) {",
|
||||||
|
" let result = 1;",
|
||||||
|
" if (e <= 0) return result;",
|
||||||
|
" for (let i = 1; i <= e; i++) {",
|
||||||
|
" result *= b;",
|
||||||
|
" }",
|
||||||
|
" return result;",
|
||||||
|
"}",
|
||||||
|
"",
|
||||||
|
"let base = 2;",
|
||||||
|
"let exp = 3;",
|
||||||
|
"let power = positivePowers(exp, base);",
|
||||||
|
"console.log(power);"
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert(power == 8, 'message: Your code should fix the variable <code>power</code> so it equals 2 raised to the 3rd power, not 3 raised to the 2nd power.');",
|
||||||
|
"assert(code.match(/positivePowers\\(\\s*?base\\s*?,\\s*?exp\\s*?\\);/g), 'message: Your code should use the correct order of the arguments for the <code>positivePowers</code> function call.');"
|
||||||
|
],
|
||||||
|
"solutions": [
|
||||||
|
],
|
||||||
|
"hints": [],
|
||||||
|
"type": "waypoint",
|
||||||
|
"challengeType": 1,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7b86367417b2b2512b3b",
|
||||||
|
"title": "Catch Off By One Errors When Using Indexing",
|
||||||
|
"description": [
|
||||||
|
"<code>Off by one errors</code> (sometimes called OBOE) crop up when you're trying to target a specific index of a string or array (to slice or access a segment), or when looping over the indices of them. JavaScript indexing starts at zero, not one, which means the last index is always one less than the length of the item. If you try to access an index equal to the length, the program may throw an \"index out of range\" reference error or print <code>undefined</code>.",
|
||||||
|
"When you use string or array methods that take index ranges as arguments, it helps to read the documentation and understand if they are inclusive (the item at the given index is part of what's returned) or not. Here are some examples of off by one errors:",
|
||||||
|
"<blockquote>let alphabet = \"abcdefghijklmnopqrstuvwxyz\";<br>let len = alphabet.length;<br>for (let i = 0; i <= len; i++) {<br> // loops one too many times at the end<br> console.log(alphabet[i]);<br>}<br>for (let j = 1; j < len; j++) {<br> // loops one too few times and misses the first character at index 0<br> console.log(alphabet[j]);<br>}<br>for (let k = 0; k < len; k++) {<br> // Goldilocks approves - this is just right<br> console.log(alphabet[k]);<br>}</blockquote>",
|
||||||
|
"<h4>Instructions</h4>",
|
||||||
|
"Fix the two indexing errors in the following function so all the numbers 1 through 5 are printed to the console."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"function countToFive() {",
|
||||||
|
" let firstFive = \"12345\";",
|
||||||
|
" let len = firstFive.length;",
|
||||||
|
" for (let i = 1; i <= len; i++) {",
|
||||||
|
" console.log(firstFive[i]);",
|
||||||
|
" }",
|
||||||
|
"}",
|
||||||
|
"",
|
||||||
|
"countToFive();"
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert(code.match(/i\\s*?=\\s*?0\\s*?;/g).length == 1, 'message: Your code should set the initial condition of the loop so it starts at the first index.');",
|
||||||
|
"assert(!code.match(/i\\s?=\\s*?1\\s*?;/g), 'message: Your code should fix the initial condition of the loop.');",
|
||||||
|
"assert(code.match(/i\\s*?<\\s*?len\\s*?;/g).length == 1, 'message: Your code should set the terminal condition of the loop so it stops at the last index.');",
|
||||||
|
"assert(!code.match(/i\\s*?<=\\s*?len;/g), 'message: Your code should fix the terminal condition of the loop.');"
|
||||||
|
],
|
||||||
|
"solutions": [
|
||||||
|
],
|
||||||
|
"hints": [],
|
||||||
|
"type": "waypoint",
|
||||||
|
"challengeType": 1,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7b86367417b2b2512b3c",
|
||||||
|
"title": "Use Caution When Reinitializing Variables Inside a Loop",
|
||||||
|
"description": [
|
||||||
|
"Sometimes it's necessary to save information, increment counters, or re-set variables within a loop. A potential issue is when variables either should be reinitialized, and aren't, or vice versa. This is particularly dangerous if you accidentally reset the variable being used for the terminal condition, causing an infinite loop.",
|
||||||
|
"Printing variable values with each cycle of your loop by using <code>console.log()</code> can uncover buggy behavior related to resetting, or failing to reset a variable.",
|
||||||
|
"<h4>Instructions</h4>",
|
||||||
|
"The following function is supposed to create a two-dimensional array with <code>m</code> rows and <code>n</code> columns of zeroes. Unfortunately, it's not producing the expected output because the <code>row</code> variable isn't being reinitialized (set back to an empty array) in the outer loop. Fix the code so it returns a correct 3x2 array of zeroes, which looks like <code>[[0, 0], [0, 0], [0, 0]]</code>."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"function zeroArray(m, n) {",
|
||||||
|
" // Creates a 2-D array with m rows and n columns of zeroes",
|
||||||
|
" let newArray = [];",
|
||||||
|
" let row = [];",
|
||||||
|
" for (let i = 0; i < m; i++) {",
|
||||||
|
" // Adds the m-th row into newArray",
|
||||||
|
" ",
|
||||||
|
" for (let j = 0; j < n; j++) {",
|
||||||
|
" // Pushes n zeroes into the current row to create the columns",
|
||||||
|
" row.push(0);",
|
||||||
|
" }",
|
||||||
|
" // Pushes the current row, which now has n zeroes in it, to the array",
|
||||||
|
" newArray.push(row);",
|
||||||
|
" }",
|
||||||
|
" return newArray;",
|
||||||
|
"}",
|
||||||
|
"",
|
||||||
|
"let matrix = zeroArray(3, 2);",
|
||||||
|
"console.log(matrix);"
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert(JSON.stringify(matrix) == \"[[0,0],[0,0],[0,0]]\", 'message: Your code should set the <code>matrix</code> variable to an array holding 3 rows of 2 columns of zeroes each.');",
|
||||||
|
"assert(matrix.length == 3, 'message: The <code>matrix</code> variable should have 3 rows.');",
|
||||||
|
"assert(matrix[0].length == 2 && matrix[1].length === 2 && matrix[2].length === 2, 'message: The <code>matrix</code> variable should have 2 columns in each row.');"
|
||||||
|
],
|
||||||
|
"solutions": [
|
||||||
|
],
|
||||||
|
"hints": [],
|
||||||
|
"type": "waypoint",
|
||||||
|
"challengeType": 1,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7b86367417b2b2512b3d",
|
||||||
|
"title": "Prevent Infinite Loops with a Valid Terminal Condition",
|
||||||
|
"description": [
|
||||||
|
"The final topic is the dreaded infinite loop. Loops are great tools when you need your program to run a code block a certain number of times or until a condition is met, but they need a terminal condition that ends the looping. Infinite loops are likely to freeze or crash the browser, and cause general program execution mayhem, which no one wants.",
|
||||||
|
"There was an example of an infinite loop in the introduction to this section - it had no terminal condition to break out of the <code>while</code> loop inside <code>loopy()</code>. Do NOT call this function!",
|
||||||
|
"<blockquote>function loopy() {<br> while(true) {<br> console.log(\"Hello, world!\");<br> }<br>}</blockquote>",
|
||||||
|
"It's the programmer's job to ensure that the terminal condition, which tells the program when to break out of the loop code, is eventually reached. One error is incrementing or decrementing a counter variable in the wrong direction from the terminal condition. Another one is accidentally resetting a counter or index variable within the loop code, instead of incrementing or decrementing it.",
|
||||||
|
"<h4>Instructions</h4>",
|
||||||
|
"The <code>myFunc()</code> function contains an infinite loop because the terminal condition <code>i != 4</code> will never evaluate to <code>false</code> (and break the looping) - <code>i</code> will increment by 2 each pass, and jump right over 4 since <code>i</code> is odd to start. Fix the comparison operator in the terminal condition so the loop only runs for <code>i</code> less than or equal to 4."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"function myFunc() {",
|
||||||
|
" for (let i = 1; i != 4; i += 2) {",
|
||||||
|
" console.log(\"Still going!\");",
|
||||||
|
" }",
|
||||||
|
"}"
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert(code.match(/i\\s*?<=\\s*?4;/g).length == 1, 'message: Your code should change the comparison operator in the terminal condition (the middle part) of the <code>for</code> loop.');",
|
||||||
|
"assert(!code.match(/i\\s*?!=\\s*?4;/g), 'message: Your code should fix the comparison operator in the terminal condition of the loop.');"
|
||||||
|
],
|
||||||
|
"solutions": [
|
||||||
|
],
|
||||||
|
"hints": [],
|
||||||
|
"type": "waypoint",
|
||||||
|
"challengeType": 1,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
1054
challenges/02-javascript-algorithms-and-data-structures/es6.json
Normal file
1054
challenges/02-javascript-algorithms-and-data-structures/es6.json
Normal file
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "Intermediate Algorithm Scripting",
|
"name": "Intermediate Algorithm Scripting",
|
||||||
"order": 11.5,
|
"order": 8,
|
||||||
"time": "50 hours",
|
"time": "50 hours",
|
||||||
"helpRoom": "HelpJavaScript",
|
"helpRoom": "HelpJavaScript",
|
||||||
"challenges": [
|
"challenges": [
|
||||||
@ -125,6 +125,237 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"id": "aaa48de84e1ecc7c742e1124",
|
||||||
|
"title": "Check for Palindromes",
|
||||||
|
"description": [
|
||||||
|
"Return <code>true</code> if the given string is a palindrome. Otherwise, return <code>false</code>.",
|
||||||
|
"A <dfn>palindrome</dfn> is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing.",
|
||||||
|
"<strong>Note</strong><br>You'll need to remove <strong>all non-alphanumeric characters</strong> (punctuation, spaces and symbols) and turn everything into the same case (lower or upper case) in order to check for palindromes.",
|
||||||
|
"We'll pass strings with varying formats, such as <code>\"racecar\"</code>, <code>\"RaceCar\"</code>, and <code>\"race CAR\"</code> among others.",
|
||||||
|
"We'll also pass strings with special symbols, such as <code>\"2A3*3a2\"</code>, <code>\"2A3 3a2\"</code>, and <code>\"2_A3*3#A2\"</code>.",
|
||||||
|
"Remember to use <a href=\"http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Read-Search-Ask</a> if you get stuck. Write your own code."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"function palindrome(str) {",
|
||||||
|
" // Good luck!",
|
||||||
|
" return true;",
|
||||||
|
"}",
|
||||||
|
"",
|
||||||
|
"",
|
||||||
|
"",
|
||||||
|
"palindrome(\"eye\");"
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert(typeof palindrome(\"eye\") === \"boolean\", 'message: <code>palindrome(\"eye\")</code> should return a boolean.');",
|
||||||
|
"assert(palindrome(\"eye\") === true, 'message: <code>palindrome(\"eye\")</code> should return true.');",
|
||||||
|
"assert(palindrome(\"_eye\") === true, 'message: <code>palindrome(\"_eye\")</code> should return true.');",
|
||||||
|
"assert(palindrome(\"race car\") === true, 'message: <code>palindrome(\"race car\")</code> should return true.');",
|
||||||
|
"assert(palindrome(\"not a palindrome\") === false, 'message: <code>palindrome(\"not a palindrome\")</code> should return false.');",
|
||||||
|
"assert(palindrome(\"A man, a plan, a canal. Panama\") === true, 'message: <code>palindrome(\"A man, a plan, a canal. Panama\")</code> should return true.');",
|
||||||
|
"assert(palindrome(\"never odd or even\") === true, 'message: <code>palindrome(\"never odd or even\")</code> should return true.');",
|
||||||
|
"assert(palindrome(\"nope\") === false, 'message: <code>palindrome(\"nope\")</code> should return false.');",
|
||||||
|
"assert(palindrome(\"almostomla\") === false, 'message: <code>palindrome(\"almostomla\")</code> should return false.');",
|
||||||
|
"assert(palindrome(\"My age is 0, 0 si ega ym.\") === true, 'message: <code>palindrome(\"My age is 0, 0 si ega ym.\")</code> should return true.');",
|
||||||
|
"assert(palindrome(\"1 eye for of 1 eye.\") === false, 'message: <code>palindrome(\"1 eye for of 1 eye.\")</code> should return false.');",
|
||||||
|
"assert(palindrome(\"0_0 (: /-\\ :) 0-0\") === true, 'message: <code>palindrome(\"0_0 (: /-\\ :) 0-0\")</code> should return true.');",
|
||||||
|
"assert(palindrome(\"five|\\_/|four\") === false, 'message: <code>palindrome(\"five|\\_/|four\")</code> should return false.');"
|
||||||
|
],
|
||||||
|
"type": "bonfire",
|
||||||
|
"isRequired": true,
|
||||||
|
"solutions": [
|
||||||
|
"function palindrome(str) {\n var string = str.toLowerCase().split(/[^A-Za-z0-9]/gi).join('');\n var aux = string.split('');\n if (aux.join('') === aux.reverse().join('')){\n return true;\n }\n\n return false;\n}"
|
||||||
|
],
|
||||||
|
"MDNlinks": [
|
||||||
|
"String.prototype.replace()",
|
||||||
|
"String.prototype.toLowerCase()"
|
||||||
|
],
|
||||||
|
"challengeType": 5,
|
||||||
|
"translations": {
|
||||||
|
"es": {
|
||||||
|
"title": "Verifica si es palíndromo",
|
||||||
|
"description": [
|
||||||
|
"Crea una función que devuelva <code>true</code> si una cadena de texto dada es un palíndromo, y que devuelva <code>false</code> en caso contrario",
|
||||||
|
"Un palíndromo es una palabra u oración que se escribe de la misma forma en ambos sentidos, sin tomar en cuenta signos de puntuación, espacios y sin distinguir entre mayúsculas y minúsculas.",
|
||||||
|
"Tendrás que quitar los caracteres no alfanuméricos (signos de puntuación, espacioes y símbolos) y transformar las letras a minúsculas para poder verificar si el texto es palíndromo.",
|
||||||
|
"Te proveeremos textos en varios formatos, como \"racecar\", \"RaceCar\", and \"race CAR\" entre otros.",
|
||||||
|
"También vamos a pasar cadenas con símbolos especiales, tales como <code>\"2A3*3a2\"</code>, <code>\"2A3 3a2\"</code>, y <code>\"2_A3*3#A2\"</code>.",
|
||||||
|
"Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"title": "Procure por Palíndromos",
|
||||||
|
"description": [
|
||||||
|
"Retorne <code>true</code> se o texto fornecida é um palíndromo. Caso contrário, retorne <code>false</code>.",
|
||||||
|
"Um <dfn>palíndromo</dfn> é uma palavra ou sentença que é soletrada da mesma maneira tanto para a frente quanto para trás, ignorando pontuação, maiúsculas e minúsculas, e espaçamento.",
|
||||||
|
"<strong>Nota</strong><br>Você precisará remover <strong>todos caracteres não alfanuméricos</strong> (pontuação, espaços e símbolos) e transformar todas as letras em maiúsculas ou minúsculas para procurar por palíndromos.",
|
||||||
|
"Nós vamos passar textos de vários formatos, tais como <code>\"racecar\"</code>, <code>\"RaceCar\"</code> e <code>\"race CAR\"</code> entre outras.",
|
||||||
|
"Nós também vamos passar textos com símbolos especiais, tais como <code>\"2A3*3a2\"</code>, <code>\"2A3 3a2\"</code> e <code>\"2_A3*3#A2\"</code>.",
|
||||||
|
"Lembre-se de usar <a href=\"http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Ler-Pesquisar-Perguntar</a> se você ficar travado. Escreva seu próprio código."
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "a39963a4c10bc8b4d4f06d7e",
|
||||||
|
"title": "Seek and Destroy",
|
||||||
|
"description": [
|
||||||
|
"You will be provided with an initial array (the first argument in the destroyer function), followed by one or more arguments. Remove all elements from the initial array that are of the same value as these arguments.",
|
||||||
|
"<strong>Note</strong><br> You have to use the <code>arguments</code> object.",
|
||||||
|
"Remember to use <a href=\"http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Read-Search-Ask</a> if you get stuck. Write your own code."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"function destroyer(arr) {",
|
||||||
|
" // Remove all the values",
|
||||||
|
" return arr;",
|
||||||
|
"}",
|
||||||
|
"",
|
||||||
|
"destroyer([1, 2, 3, 1, 2, 3], 2, 3);"
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert.deepEqual(destroyer([1, 2, 3, 1, 2, 3], 2, 3), [1, 1], 'message: <code>destroyer([1, 2, 3, 1, 2, 3], 2, 3)</code> should return <code>[1, 1]</code>.');",
|
||||||
|
"assert.deepEqual(destroyer([1, 2, 3, 5, 1, 2, 3], 2, 3), [1, 5, 1], 'message: <code>destroyer([1, 2, 3, 5, 1, 2, 3], 2, 3)</code> should return <code>[1, 5, 1]</code>.');",
|
||||||
|
"assert.deepEqual(destroyer([3, 5, 1, 2, 2], 2, 3, 5), [1], 'message: <code>destroyer([3, 5, 1, 2, 2], 2, 3, 5)</code> should return <code>[1]</code>.');",
|
||||||
|
"assert.deepEqual(destroyer([2, 3, 2, 3], 2, 3), [], 'message: <code>destroyer([2, 3, 2, 3], 2, 3)</code> should return <code>[]</code>.');",
|
||||||
|
"assert.deepEqual(destroyer([\"tree\", \"hamburger\", 53], \"tree\", 53), [\"hamburger\"], 'message: <code>destroyer([\"tree\", \"hamburger\", 53], \"tree\", 53)</code> should return <code>[\"hamburger\"]</code>.');",
|
||||||
|
"assert.deepEqual(destroyer([\"possum\", \"trollo\", 12, \"safari\", \"hotdog\", 92, 65, \"grandma\", \"bugati\", \"trojan\", \"yacht\"], \"yacht\", \"possum\", \"trollo\", \"safari\", \"hotdog\", \"grandma\", \"bugati\", \"trojan\"), [12,92,65], 'message: <code>destroyer([\"possum\", \"trollo\", 12, \"safari\", \"hotdog\", 92, 65, \"grandma\", \"bugati\", \"trojan\", \"yacht\"], \"yacht\", \"possum\", \"trollo\", \"safari\", \"hotdog\", \"grandma\", \"bugati\", \"trojan\")</code> should return <code>[12,92,65]</code>.');"
|
||||||
|
],
|
||||||
|
"type": "bonfire",
|
||||||
|
"isRequired": true,
|
||||||
|
"solutions": [
|
||||||
|
"function destroyer(arr) {\n var hash = Object.create(null);\n [].slice.call(arguments, 1).forEach(function(e) {\n hash[e] = true;\n });\n // Remove all the values\n return arr.filter(function(e) { return !(e in hash);});\n}\n\ndestroyer([1, 2, 3, 1, 2, 3], 2, 3);\n"
|
||||||
|
],
|
||||||
|
"MDNlinks": [
|
||||||
|
"Arguments object",
|
||||||
|
"Array.prototype.filter()"
|
||||||
|
],
|
||||||
|
"challengeType": 5,
|
||||||
|
"translations": {
|
||||||
|
"es": {
|
||||||
|
"title": "Buscar y Destruir",
|
||||||
|
"description": [
|
||||||
|
"Se te proveerá un arreglo inicial (el primer argumento en la función <code>destroyer</code>), seguido por uno o más argumentos. Elimina todos los elementos del arreglo inicial que tengan el mismo valor que el resto de argumentos.",
|
||||||
|
"Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"title": "Buscar e Destruir",
|
||||||
|
"description": [
|
||||||
|
"Será fornecido a você uma matriz inicial (o primeiro argumento da função destroyer), seguido por um ou mais argumentos. Remova todos os elementos da matriz inicial que possuem o mesmo valor desses argumentos.",
|
||||||
|
"<strong>Nota</strong><br> Você precisa usar o objeto <code>arguments</code>.",
|
||||||
|
"Lembre-se de usar <a href=\"http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Ler-Pesquisar-Perguntar</a> se você ficar travado. Escreva seu próprio código."
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "a8e512fbe388ac2f9198f0fa",
|
||||||
|
"title": "Wherefore art thou",
|
||||||
|
"description": [
|
||||||
|
"Make a function that looks through an array of objects (first argument) and returns an array of all objects that have matching property and value pairs (second argument). Each property and value pair of the source object has to be present in the object from the collection if it is to be included in the returned array.",
|
||||||
|
"For example, if the first argument is <code>[{ first: \"Romeo\", last: \"Montague\" }, { first: \"Mercutio\", last: null }, { first: \"Tybalt\", last: \"Capulet\" }]</code>, and the second argument is <code>{ last: \"Capulet\" }</code>, then you must return the third object from the array (the first argument), because it contains the property and its value, that was passed on as the second argument.",
|
||||||
|
"Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck. Write your own code."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"function whatIsInAName(collection, source) {",
|
||||||
|
" // What's in a name?",
|
||||||
|
" var arr = [];",
|
||||||
|
" // Only change code below this line",
|
||||||
|
" ",
|
||||||
|
" ",
|
||||||
|
" // Only change code above this line",
|
||||||
|
" return arr;",
|
||||||
|
"}",
|
||||||
|
"",
|
||||||
|
"whatIsInAName([{ first: \"Romeo\", last: \"Montague\" }, { first: \"Mercutio\", last: null }, { first: \"Tybalt\", last: \"Capulet\" }], { last: \"Capulet\" });"
|
||||||
|
],
|
||||||
|
"solutions": [
|
||||||
|
"function whatIsInAName(collection, source) {\n var arr = [];\n var keys = Object.keys(source);\n collection.forEach(function(e) {\n if(keys.every(function(key) {return e[key] === source[key];})) {\n arr.push(e); \n }\n });\n return arr;\n}"
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert.deepEqual(whatIsInAName([{ first: \"Romeo\", last: \"Montague\" }, { first: \"Mercutio\", last: null }, { first: \"Tybalt\", last: \"Capulet\" }], { last: \"Capulet\" }), [{ first: \"Tybalt\", last: \"Capulet\" }], 'message: <code>whatIsInAName([{ first: \"Romeo\", last: \"Montague\" }, { first: \"Mercutio\", last: null }, { first: \"Tybalt\", last: \"Capulet\" }], { last: \"Capulet\" })</code> should return <code>[{ first: \"Tybalt\", last: \"Capulet\" }]</code>.');",
|
||||||
|
"assert.deepEqual(whatIsInAName([{ \"apple\": 1 }, { \"apple\": 1 }, { \"apple\": 1, \"bat\": 2 }], { \"apple\": 1 }), [{ \"apple\": 1 }, { \"apple\": 1 }, { \"apple\": 1, \"bat\": 2 }], 'message: <code>whatIsInAName([{ \"apple\": 1 }, { \"apple\": 1 }, { \"apple\": 1, \"bat\": 2 }], { \"apple\": 1 })</code> should return <code>[{ \"apple\": 1 }, { \"apple\": 1 }, { \"apple\": 1, \"bat\": 2 }]</code>.');",
|
||||||
|
"assert.deepEqual(whatIsInAName([{ \"apple\": 1, \"bat\": 2 }, { \"bat\": 2 }, { \"apple\": 1, \"bat\": 2, \"cookie\": 2 }], { \"apple\": 1, \"bat\": 2 }), [{ \"apple\": 1, \"bat\": 2 }, { \"apple\": 1, \"bat\": 2, \"cookie\": 2 }], 'message: <code>whatIsInAName([{ \"apple\": 1, \"bat\": 2 }, { \"bat\": 2 }, { \"apple\": 1, \"bat\": 2, \"cookie\": 2 }], { \"apple\": 1, \"bat\": 2 })</code> should return <code>[{ \"apple\": 1, \"bat\": 2 }, { \"apple\": 1, \"bat\": 2, \"cookie\": 2 }]</code>.');",
|
||||||
|
"assert.deepEqual(whatIsInAName([{ \"apple\": 1, \"bat\": 2 }, { \"apple\": 1 }, { \"apple\": 1, \"bat\": 2, \"cookie\": 2 }], { \"apple\": 1, \"cookie\": 2 }), [{ \"apple\": 1, \"bat\": 2, \"cookie\": 2 }], 'message: <code>whatIsInAName([{ \"apple\": 1, \"bat\": 2 }, { \"apple\": 1 }, { \"apple\": 1, \"bat\": 2, \"cookie\": 2 }], { \"apple\": 1, \"cookie\": 2 })</code> should return <code>[{ \"apple\": 1, \"bat\": 2, \"cookie\": 2 }]</code>.');",
|
||||||
|
"assert.deepEqual(whatIsInAName([{ \"apple\": 1, \"bat\": 2 }, { \"apple\": 1 }, { \"apple\": 1, \"bat\": 2, \"cookie\": 2 }, {\"bat\":2}], { \"apple\": 1, \"bat\": 2 }), [{ \"apple\": 1, \"bat\": 2 }, { \"apple\": 1, \"bat\": 2, \"cookie\":2 }], 'message: <code>whatIsInAName([{ \"apple\": 1, \"bat\": 2 }, { \"apple\": 1 }, { \"apple\": 1, \"bat\": 2, \"cookie\": 2 }, { \"bat\":2 }], { \"apple\": 1, \"bat\": 2 })</code> should return <code>[{ \"apple\": 1, \"bat\": 2 }, { \"apple\": 1, \"bat\": 2, \"cookie\":2 }]</code>.');"
|
||||||
|
],
|
||||||
|
"type": "bonfire",
|
||||||
|
"MDNlinks": [
|
||||||
|
"Global Object",
|
||||||
|
"Object.prototype.hasOwnProperty()",
|
||||||
|
"Object.keys()"
|
||||||
|
],
|
||||||
|
"isRequired": true,
|
||||||
|
"challengeType": 5,
|
||||||
|
"translations": {
|
||||||
|
"es": {
|
||||||
|
"title": "¿Dónde estás que no te veo?",
|
||||||
|
"description": [
|
||||||
|
"Crea una función que busque en un vector de objetos (primer argumento) y devuelva un vector con todos los objetos que compartan el valor indicado para una propiedad dada (segundo argumento). Cada pareja de propiedad y valor debe estar presente en el objeto de la colección para ser incluido en el vector devuelto por la función",
|
||||||
|
"Por ejemplo, si el primer argumento es <code>[{ first: \"Romeo\", last: \"Montague\" }, { first: \"Mercutio\", last: null }, { first: \"Tybalt\", last: \"Capulet\" }]</code>, y el segundo argumento es <code>{ last: \"Capulet\" }</code>, entonces tu función debe devolver el tercer objeto del vector en el primer argumento, ya que contiene la propiedad y el valor indicados en el segundo argumento.",
|
||||||
|
"Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"title": "O Roméo! Roméo!",
|
||||||
|
"description": [
|
||||||
|
"Écris une fonction qui parcourt un array d'objets (premier argument) et renvoie un array de tous les objects ayant les paires de nom/valeur correspondantes à l'objet donné (second argument). Chaque paire de nom et de valeur de l'objet source doit être présente dans les objects renvoyés.",
|
||||||
|
"Par exemple, si le premier argument est <code>[{ first: \"Romeo\", last: \"Montague\" }, { first: \"Mercutio\", last: null }, { first: \"Tybalt\", last: \"Capulet\" }]</code>, et le second argument est <code>{ last: \"Capulet\" }</code>, tu dois renvoyer le troisième objet de l'array (premier argument), parce qu'il contient le nom et sa valeur, donnés en deuxième argument.",
|
||||||
|
"N'oublie pas d'utiliser <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Lire-Chercher-Demander</a> si tu es bloqué. Essaye de trouver un partenaire. Écris ton propre code."
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "a103376db3ba46b2d50db289",
|
||||||
|
"title": "Spinal Tap Case",
|
||||||
|
"description": [
|
||||||
|
"Convert a string to spinal case. Spinal case is all-lowercase-words-joined-by-dashes.",
|
||||||
|
"Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck. Try to pair program. Write your own code."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"function spinalCase(str) {",
|
||||||
|
" // \"It's such a fine line between stupid, and clever.\"",
|
||||||
|
" // --David St. Hubbins",
|
||||||
|
" return str;",
|
||||||
|
"}",
|
||||||
|
"",
|
||||||
|
"spinalCase('This Is Spinal Tap');"
|
||||||
|
],
|
||||||
|
"solutions": [
|
||||||
|
"function spinalCase(str) {\n // \"It's such a fine line between stupid, and clever.\"\n // --David St. Hubbins\n str = str.replace(/([a-z](?=[A-Z]))/g, '$1 ');\n return str.toLowerCase().replace(/\\ |\\_/g, '-');\n}"
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert.deepEqual(spinalCase(\"This Is Spinal Tap\"), \"this-is-spinal-tap\", 'message: <code>spinalCase(\"This Is Spinal Tap\")</code> should return <code>\"this-is-spinal-tap\"</code>.');",
|
||||||
|
"assert.strictEqual(spinalCase('thisIsSpinalTap'), \"this-is-spinal-tap\", 'message: <code>spinalCase(\"thisIsSpinal<wbr>Tap\")</code> should return <code>\"this-is-spinal-tap\"</code>.');",
|
||||||
|
"assert.strictEqual(spinalCase(\"The_Andy_Griffith_Show\"), \"the-andy-griffith-show\", 'message: <code>spinalCase(\"The_Andy_<wbr>Griffith_Show\")</code> should return <code>\"the-andy-griffith-show\"</code>.');",
|
||||||
|
"assert.strictEqual(spinalCase(\"Teletubbies say Eh-oh\"), \"teletubbies-say-eh-oh\", 'message: <code>spinalCase(\"Teletubbies say Eh-oh\")</code> should return <code>\"teletubbies-say-eh-oh\"</code>.');",
|
||||||
|
"assert.strictEqual(spinalCase(\"AllThe-small Things\"), \"all-the-small-things\", 'message: <code>spinalCase(\"AllThe-small Things\")</code> should return <code>\"all-the-small-things\"</code>.');"
|
||||||
|
],
|
||||||
|
"type": "bonfire",
|
||||||
|
"MDNlinks": [
|
||||||
|
"RegExp",
|
||||||
|
"String.prototype.replace()"
|
||||||
|
],
|
||||||
|
"isRequired": true,
|
||||||
|
"challengeType": 5,
|
||||||
|
"translations": {
|
||||||
|
"es": {
|
||||||
|
"title": "separado-por-guiones",
|
||||||
|
"description": [
|
||||||
|
"Convierte la cadena de texto que se te pasa al formato spinal case. Spinal case es cuando escribes todas las palabras en-minúsculas-unidas-por-guiones.",
|
||||||
|
"Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"title": "Trait d'union",
|
||||||
|
"description": [
|
||||||
|
"Convertis la chaîne de caractères en spinal case. Spinal case correspond au bas-de-casse-séparé-par-des-tirets.",
|
||||||
|
"N'oublie pas d'utiliser <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Lire-Chercher-Demander</a> si tu es bloqué. Essaye de trouver un partenaire. Écris ton propre code."
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"id": "a7f4d8f2483413a6ce226cac",
|
"id": "a7f4d8f2483413a6ce226cac",
|
||||||
"title": "Roman Numeral Converter",
|
"title": "Roman Numeral Converter",
|
||||||
@ -200,58 +431,122 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "a8e512fbe388ac2f9198f0fa",
|
"id": "56533eb9ac21ba0edf2244e2",
|
||||||
"title": "Wherefore art thou",
|
"title": "Caesars Cipher",
|
||||||
"description": [
|
"description": [
|
||||||
"Make a function that looks through an array of objects (first argument) and returns an array of all objects that have matching property and value pairs (second argument). Each property and value pair of the source object has to be present in the object from the collection if it is to be included in the returned array.",
|
"One of the simplest and most widely known <dfn>ciphers</dfn> is a <code>Caesar cipher</code>, also known as a <code>shift cipher</code>. In a <code>shift cipher</code> the meanings of the letters are shifted by some set amount.",
|
||||||
"For example, if the first argument is <code>[{ first: \"Romeo\", last: \"Montague\" }, { first: \"Mercutio\", last: null }, { first: \"Tybalt\", last: \"Capulet\" }]</code>, and the second argument is <code>{ last: \"Capulet\" }</code>, then you must return the third object from the array (the first argument), because it contains the property and its value, that was passed on as the second argument.",
|
"A common modern use is the <a href=\"https://en.wikipedia.org/wiki/ROT13\" target='_blank'>ROT13</a> cipher, where the values of the letters are shifted by 13 places. Thus 'A' ↔ 'N', 'B' ↔ 'O' and so on.",
|
||||||
"Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck. Write your own code."
|
"Write a function which takes a <a href=\"https://en.wikipedia.org/wiki/ROT13\" target='_blank'>ROT13</a> encoded string as input and returns a decoded string.",
|
||||||
|
"All letters will be uppercase. Do not transform any non-alphabetic character (i.e. spaces, punctuation), but do pass them on.",
|
||||||
|
"Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck. Try to pair program. Write your own code."
|
||||||
],
|
],
|
||||||
"challengeSeed": [
|
"challengeSeed": [
|
||||||
"function whatIsInAName(collection, source) {",
|
"function rot13(str) { // LBH QVQ VG!",
|
||||||
" // What's in a name?",
|
|
||||||
" var arr = [];",
|
|
||||||
" // Only change code below this line",
|
|
||||||
" ",
|
" ",
|
||||||
" ",
|
" return str;",
|
||||||
" // Only change code above this line",
|
|
||||||
" return arr;",
|
|
||||||
"}",
|
"}",
|
||||||
"",
|
"",
|
||||||
"whatIsInAName([{ first: \"Romeo\", last: \"Montague\" }, { first: \"Mercutio\", last: null }, { first: \"Tybalt\", last: \"Capulet\" }], { last: \"Capulet\" });"
|
"// Change the inputs below to test",
|
||||||
|
"rot13(\"SERR PBQR PNZC\");"
|
||||||
|
],
|
||||||
|
"tail": [
|
||||||
|
""
|
||||||
],
|
],
|
||||||
"solutions": [
|
"solutions": [
|
||||||
"function whatIsInAName(collection, source) {\n var arr = [];\n var keys = Object.keys(source);\n collection.forEach(function(e) {\n if(keys.every(function(key) {return e[key] === source[key];})) {\n arr.push(e); \n }\n });\n return arr;\n}"
|
"var lookup = {\n 'A': 'N','B': 'O','C': 'P','D': 'Q',\n 'E': 'R','F': 'S','G': 'T','H': 'U',\n 'I': 'V','J': 'W','K': 'X','L': 'Y',\n 'M': 'Z','N': 'A','O': 'B','P': 'C',\n 'Q': 'D','R': 'E','S': 'F','T': 'G',\n 'U': 'H','V': 'I','W': 'J','X': 'K',\n 'Y': 'L','Z': 'M' \n};\n\nfunction rot13(encodedStr) {\n var codeArr = encodedStr.split(\"\"); // String to Array\n var decodedArr = []; // Your Result goes here\n // Only change code below this line\n \n decodedArr = codeArr.map(function(letter) {\n if(lookup.hasOwnProperty(letter)) {\n letter = lookup[letter];\n }\n return letter;\n });\n\n // Only change code above this line\n return decodedArr.join(\"\"); // Array to String\n}"
|
||||||
],
|
],
|
||||||
"tests": [
|
"tests": [
|
||||||
"assert.deepEqual(whatIsInAName([{ first: \"Romeo\", last: \"Montague\" }, { first: \"Mercutio\", last: null }, { first: \"Tybalt\", last: \"Capulet\" }], { last: \"Capulet\" }), [{ first: \"Tybalt\", last: \"Capulet\" }], 'message: <code>whatIsInAName([{ first: \"Romeo\", last: \"Montague\" }, { first: \"Mercutio\", last: null }, { first: \"Tybalt\", last: \"Capulet\" }], { last: \"Capulet\" })</code> should return <code>[{ first: \"Tybalt\", last: \"Capulet\" }]</code>.');",
|
"assert(rot13(\"SERR PBQR PNZC\") === \"FREE CODE CAMP\", 'message: <code>rot13(\"SERR PBQR PNZC\")</code> should decode to <code>FREE CODE CAMP</code>');",
|
||||||
"assert.deepEqual(whatIsInAName([{ \"apple\": 1 }, { \"apple\": 1 }, { \"apple\": 1, \"bat\": 2 }], { \"apple\": 1 }), [{ \"apple\": 1 }, { \"apple\": 1 }, { \"apple\": 1, \"bat\": 2 }], 'message: <code>whatIsInAName([{ \"apple\": 1 }, { \"apple\": 1 }, { \"apple\": 1, \"bat\": 2 }], { \"apple\": 1 })</code> should return <code>[{ \"apple\": 1 }, { \"apple\": 1 }, { \"apple\": 1, \"bat\": 2 }]</code>.');",
|
"assert(rot13(\"SERR CVMMN!\") === \"FREE PIZZA!\", 'message: <code>rot13(\"SERR CVMMN!\")</code> should decode to <code>FREE PIZZA!</code>');",
|
||||||
"assert.deepEqual(whatIsInAName([{ \"apple\": 1, \"bat\": 2 }, { \"bat\": 2 }, { \"apple\": 1, \"bat\": 2, \"cookie\": 2 }], { \"apple\": 1, \"bat\": 2 }), [{ \"apple\": 1, \"bat\": 2 }, { \"apple\": 1, \"bat\": 2, \"cookie\": 2 }], 'message: <code>whatIsInAName([{ \"apple\": 1, \"bat\": 2 }, { \"bat\": 2 }, { \"apple\": 1, \"bat\": 2, \"cookie\": 2 }], { \"apple\": 1, \"bat\": 2 })</code> should return <code>[{ \"apple\": 1, \"bat\": 2 }, { \"apple\": 1, \"bat\": 2, \"cookie\": 2 }]</code>.');",
|
"assert(rot13(\"SERR YBIR?\") === \"FREE LOVE?\", 'message: <code>rot13(\"SERR YBIR?\")</code> should decode to <code>FREE LOVE?</code>');",
|
||||||
"assert.deepEqual(whatIsInAName([{ \"apple\": 1, \"bat\": 2 }, { \"apple\": 1 }, { \"apple\": 1, \"bat\": 2, \"cookie\": 2 }], { \"apple\": 1, \"cookie\": 2 }), [{ \"apple\": 1, \"bat\": 2, \"cookie\": 2 }], 'message: <code>whatIsInAName([{ \"apple\": 1, \"bat\": 2 }, { \"apple\": 1 }, { \"apple\": 1, \"bat\": 2, \"cookie\": 2 }], { \"apple\": 1, \"cookie\": 2 })</code> should return <code>[{ \"apple\": 1, \"bat\": 2, \"cookie\": 2 }]</code>.');",
|
"assert(rot13(\"GUR DHVPX OEBJA SBK WHZCF BIRE GUR YNML QBT.\") === \"THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.\", 'message: <code>rot13(\"GUR DHVPX OEBJA SBK WHZCF BIRE GUR YNML QBT.\")</code> should decode to <code>THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.</code>');"
|
||||||
"assert.deepEqual(whatIsInAName([{ \"apple\": 1, \"bat\": 2 }, { \"apple\": 1 }, { \"apple\": 1, \"bat\": 2, \"cookie\": 2 }, {\"bat\":2}], { \"apple\": 1, \"bat\": 2 }), [{ \"apple\": 1, \"bat\": 2 }, { \"apple\": 1, \"bat\": 2, \"cookie\":2 }], 'message: <code>whatIsInAName([{ \"apple\": 1, \"bat\": 2 }, { \"apple\": 1 }, { \"apple\": 1, \"bat\": 2, \"cookie\": 2 }, { \"bat\":2 }], { \"apple\": 1, \"bat\": 2 })</code> should return <code>[{ \"apple\": 1, \"bat\": 2 }, { \"apple\": 1, \"bat\": 2, \"cookie\":2 }]</code>.');"
|
],
|
||||||
],
|
|
||||||
"type": "bonfire",
|
"type": "bonfire",
|
||||||
"MDNlinks": [
|
"MDNlinks": [
|
||||||
"Global Object",
|
"String.prototype.charCodeAt()",
|
||||||
"Object.prototype.hasOwnProperty()",
|
"String.fromCharCode()"
|
||||||
"Object.keys()"
|
],
|
||||||
|
"challengeType": 5,
|
||||||
|
"isRequired": true,
|
||||||
|
"releasedOn": "January 1, 2016",
|
||||||
|
"translations": {
|
||||||
|
"es": {
|
||||||
|
"title": "Cifrado César",
|
||||||
|
"description": [
|
||||||
|
"Uno de los <dfn>cifrados</dfn> más simples y ampliamente conocidos es el <code>cifrado César</code>, también llamado <code>cifrado por desplazamiento</code>. En un <code>cifrado por desplazamiento</code> los significados de las letras se desplazan por una cierta cantidad.",
|
||||||
|
"Un uso moderno común es el cifrado <a href=\"https://es.wikipedia.org/wiki/ROT13\" target='_blank'>ROT13</a> , donde los valores de las letras se desplazan 13 espacios. De esta forma 'A' ↔ 'N', 'B' ↔ 'O' y así.",
|
||||||
|
"Crea una función que tome una cadena de texto cifrada en <a href=\"https://es.wikipedia.org/wiki/ROT13\" target='_blank'>ROT13</a> como argumento y que devuelva la cadena de texto decodificada.",
|
||||||
|
"Todas las letras que se te pasen van a estar en mayúsculas. No transformes ningún caracter no-alfabético (por ejemplo: espacios, puntuación). Simplemente pásalos intactos.",
|
||||||
|
"Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"title": "Cifra de César",
|
||||||
|
"description": [
|
||||||
|
"Uma das mais simples e mais conhecidas <dfn>cifras</dfn> é a <code>cifra de César</code>, também conhecida como <code>cifra de troca</code>. Em uma <code>cifra de troca</code> os significados das letras são deslocados por um determinado valor.",
|
||||||
|
"Um uso moderno comum é a cifra <a href=\"https://en.wikipedia.org/wiki/ROT13\" target='_blank'>ROT13</a>, aonde os valores das letras são deslocados por 13 lugares. Logo 'A' ↔ 'N', 'B' ↔ 'O' e assim por diante.",
|
||||||
|
"Escreva uma função que recebe um texto criptografado com <a href=\"https://en.wikipedia.org/wiki/ROT13\" target='_blank'>ROT13</a> como entrada e retorna o texto desencriptado.",
|
||||||
|
"Todas as letras serão maiúsculas. Não transforme nenhum caracter não alfanuméricos (como espaços, pontuação), mas passe-os adiante.",
|
||||||
|
"Lembre-se de usar <a href=\"http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Ler-Pesquisar-Perguntar</a> se você ficar travado. Escreva seu próprio código."
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "aa7697ea2477d1316795783b",
|
||||||
|
"title": "Pig Latin",
|
||||||
|
"description": [
|
||||||
|
"Translate the provided string to pig latin.",
|
||||||
|
"<a href=\"http://en.wikipedia.org/wiki/Pig_Latin\" target=\"_blank\">Pig Latin</a> takes the first consonant (or consonant cluster) of an English word, moves it to the end of the word and suffixes an \"ay\".",
|
||||||
|
"If a word begins with a vowel you just add \"way\" to the end.",
|
||||||
|
"Input strings are guaranteed to be English words in all lowercase.",
|
||||||
|
"Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck. Try to pair program. Write your own code."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"function translatePigLatin(str) {",
|
||||||
|
" return str;",
|
||||||
|
"}",
|
||||||
|
"",
|
||||||
|
"translatePigLatin(\"consonant\");"
|
||||||
|
],
|
||||||
|
"solutions": [
|
||||||
|
"function translatePigLatin(str) {\n if (isVowel(str.charAt(0))) return str + \"way\";\n var front = [];\n str = str.split('');\n while (str.length && !isVowel(str[0])) {\n front.push(str.shift());\n }\n return [].concat(str, front).join('') + 'ay';\n}\n\nfunction isVowel(c) {\n return ['a', 'e', 'i', 'o', 'u'].indexOf(c.toLowerCase()) !== -1;\n}"
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert.deepEqual(translatePigLatin(\"california\"), \"aliforniacay\", 'message: <code>translatePigLatin(\"california\")</code> should return \"aliforniacay\".');",
|
||||||
|
"assert.deepEqual(translatePigLatin(\"paragraphs\"), \"aragraphspay\", 'message: <code>translatePigLatin(\"paragraphs\")</code> should return \"aragraphspay\".');",
|
||||||
|
"assert.deepEqual(translatePigLatin(\"glove\"), \"oveglay\", 'message: <code>translatePigLatin(\"glove\")</code> should return \"oveglay\".');",
|
||||||
|
"assert.deepEqual(translatePigLatin(\"algorithm\"), \"algorithmway\", 'message: <code>translatePigLatin(\"algorithm\")</code> should return \"algorithmway\".');",
|
||||||
|
"assert.deepEqual(translatePigLatin(\"eight\"), \"eightway\", 'message: <code>translatePigLatin(\"eight\")</code> should return \"eightway\".');"
|
||||||
|
],
|
||||||
|
"type": "bonfire",
|
||||||
|
"MDNlinks": [
|
||||||
|
"Array.prototype.indexOf()",
|
||||||
|
"Array.prototype.push()",
|
||||||
|
"Array.prototype.join()",
|
||||||
|
"String.prototype.substring()",
|
||||||
|
"String.prototype.split()"
|
||||||
],
|
],
|
||||||
"isRequired": true,
|
"isRequired": true,
|
||||||
"challengeType": 5,
|
"challengeType": 5,
|
||||||
"translations": {
|
"translations": {
|
||||||
"es": {
|
"es": {
|
||||||
"title": "¿Dónde estás que no te veo?",
|
"title": "Latín de los cerdos",
|
||||||
"description": [
|
"description": [
|
||||||
"Crea una función que busque en un vector de objetos (primer argumento) y devuelva un vector con todos los objetos que compartan el valor indicado para una propiedad dada (segundo argumento). Cada pareja de propiedad y valor debe estar presente en el objeto de la colección para ser incluido en el vector devuelto por la función",
|
"Traduce la cadena de texto que se te provee al Latín de los cerdos (Pig Latin)",
|
||||||
"Por ejemplo, si el primer argumento es <code>[{ first: \"Romeo\", last: \"Montague\" }, { first: \"Mercutio\", last: null }, { first: \"Tybalt\", last: \"Capulet\" }]</code>, y el segundo argumento es <code>{ last: \"Capulet\" }</code>, entonces tu función debe devolver el tercer objeto del vector en el primer argumento, ya que contiene la propiedad y el valor indicados en el segundo argumento.",
|
"<a href=\"http://es.wikipedia.org/wiki/Pig_Latin\" target=\"_blank\">Pig Latin</a> toma la primera consonante (o grupo de consonantes) de una palabra en inglés, la mueve al final de la palabra y agrega un \"ay\".",
|
||||||
|
"Si la palabra comienza con una vocal, simplemente añade \"way\" al final.",
|
||||||
|
"Cadenas de entrada están garantizadas de ser palabras en Inglés en minúscula.",
|
||||||
"Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
|
"Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"fr": {
|
"fr": {
|
||||||
"title": "O Roméo! Roméo!",
|
"title": "Pig latin",
|
||||||
"description": [
|
"description": [
|
||||||
"Écris une fonction qui parcourt un array d'objets (premier argument) et renvoie un array de tous les objects ayant les paires de nom/valeur correspondantes à l'objet donné (second argument). Chaque paire de nom et de valeur de l'objet source doit être présente dans les objects renvoyés.",
|
"Traduis la phrase donnée en pig latin (verlan anglais)",
|
||||||
"Par exemple, si le premier argument est <code>[{ first: \"Romeo\", last: \"Montague\" }, { first: \"Mercutio\", last: null }, { first: \"Tybalt\", last: \"Capulet\" }]</code>, et le second argument est <code>{ last: \"Capulet\" }</code>, tu dois renvoyer le troisième objet de l'array (premier argument), parce qu'il contient le nom et sa valeur, donnés en deuxième argument.",
|
"Le <a href=\"http://fr.wikipedia.org/wiki/Pig_Latin\" target=\"_blank\">Pig Latin</a> prend la ou les première(s) consonne(s) d'un mot en anglais et les mets à la fin du mot accompagné par le suffixe \"ay\".",
|
||||||
|
"Si un mot commence par une voyelle ajoute \"way\" à la fin du mot.",
|
||||||
|
"Les chaînes de caractères entrées sont garanties d'être des mots anglais, en lettres minuscules.",
|
||||||
"N'oublie pas d'utiliser <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Lire-Chercher-Demander</a> si tu es bloqué. Essaye de trouver un partenaire. Écris ton propre code."
|
"N'oublie pas d'utiliser <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Lire-Chercher-Demander</a> si tu es bloqué. Essaye de trouver un partenaire. Écris ton propre code."
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
@ -318,66 +613,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"id": "aa7697ea2477d1316795783b",
|
|
||||||
"title": "Pig Latin",
|
|
||||||
"description": [
|
|
||||||
"Translate the provided string to pig latin.",
|
|
||||||
"<a href=\"http://en.wikipedia.org/wiki/Pig_Latin\" target=\"_blank\">Pig Latin</a> takes the first consonant (or consonant cluster) of an English word, moves it to the end of the word and suffixes an \"ay\".",
|
|
||||||
"If a word begins with a vowel you just add \"way\" to the end.",
|
|
||||||
"Input strings are guaranteed to be English words in all lowercase.",
|
|
||||||
"Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck. Try to pair program. Write your own code."
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"function translatePigLatin(str) {",
|
|
||||||
" return str;",
|
|
||||||
"}",
|
|
||||||
"",
|
|
||||||
"translatePigLatin(\"consonant\");"
|
|
||||||
],
|
|
||||||
"solutions": [
|
|
||||||
"function translatePigLatin(str) {\n if (isVowel(str.charAt(0))) return str + \"way\";\n var front = [];\n str = str.split('');\n while (str.length && !isVowel(str[0])) {\n front.push(str.shift());\n }\n return [].concat(str, front).join('') + 'ay';\n}\n\nfunction isVowel(c) {\n return ['a', 'e', 'i', 'o', 'u'].indexOf(c.toLowerCase()) !== -1;\n}"
|
|
||||||
],
|
|
||||||
"tests": [
|
|
||||||
"assert.deepEqual(translatePigLatin(\"california\"), \"aliforniacay\", 'message: <code>translatePigLatin(\"california\")</code> should return \"aliforniacay\".');",
|
|
||||||
"assert.deepEqual(translatePigLatin(\"paragraphs\"), \"aragraphspay\", 'message: <code>translatePigLatin(\"paragraphs\")</code> should return \"aragraphspay\".');",
|
|
||||||
"assert.deepEqual(translatePigLatin(\"glove\"), \"oveglay\", 'message: <code>translatePigLatin(\"glove\")</code> should return \"oveglay\".');",
|
|
||||||
"assert.deepEqual(translatePigLatin(\"algorithm\"), \"algorithmway\", 'message: <code>translatePigLatin(\"algorithm\")</code> should return \"algorithmway\".');",
|
|
||||||
"assert.deepEqual(translatePigLatin(\"eight\"), \"eightway\", 'message: <code>translatePigLatin(\"eight\")</code> should return \"eightway\".');"
|
|
||||||
],
|
|
||||||
"type": "bonfire",
|
|
||||||
"MDNlinks": [
|
|
||||||
"Array.prototype.indexOf()",
|
|
||||||
"Array.prototype.push()",
|
|
||||||
"Array.prototype.join()",
|
|
||||||
"String.prototype.substring()",
|
|
||||||
"String.prototype.split()"
|
|
||||||
],
|
|
||||||
"isRequired": true,
|
|
||||||
"challengeType": 5,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Latín de los cerdos",
|
|
||||||
"description": [
|
|
||||||
"Traduce la cadena de texto que se te provee al Latín de los cerdos (Pig Latin)",
|
|
||||||
"<a href=\"http://es.wikipedia.org/wiki/Pig_Latin\" target=\"_blank\">Pig Latin</a> toma la primera consonante (o grupo de consonantes) de una palabra en inglés, la mueve al final de la palabra y agrega un \"ay\".",
|
|
||||||
"Si la palabra comienza con una vocal, simplemente añade \"way\" al final.",
|
|
||||||
"Cadenas de entrada están garantizadas de ser palabras en Inglés en minúscula.",
|
|
||||||
"Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"fr": {
|
|
||||||
"title": "Pig latin",
|
|
||||||
"description": [
|
|
||||||
"Traduis la phrase donnée en pig latin (verlan anglais)",
|
|
||||||
"Le <a href=\"http://fr.wikipedia.org/wiki/Pig_Latin\" target=\"_blank\">Pig Latin</a> prend la ou les première(s) consonne(s) d'un mot en anglais et les mets à la fin du mot accompagné par le suffixe \"ay\".",
|
|
||||||
"Si un mot commence par une voyelle ajoute \"way\" à la fin du mot.",
|
|
||||||
"Les chaînes de caractères entrées sont garanties d'être des mots anglais, en lettres minuscules.",
|
|
||||||
"N'oublie pas d'utiliser <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Lire-Chercher-Demander</a> si tu es bloqué. Essaye de trouver un partenaire. Écris ton propre code."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"id": "afd15382cdfb22c9efe8b7de",
|
"id": "afd15382cdfb22c9efe8b7de",
|
||||||
"title": "DNA Pairing",
|
"title": "DNA Pairing",
|
||||||
@ -487,62 +722,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"id": "a77dbc43c33f39daa4429b4f",
|
|
||||||
"title": "Boo who",
|
|
||||||
"description": [
|
|
||||||
"Check if a value is classified as a boolean primitive. Return true or false.",
|
|
||||||
"Boolean primitives are true and false.",
|
|
||||||
"Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck. Try to pair program. Write your own code."
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"function booWho(bool) {",
|
|
||||||
" // What is the new fad diet for ghost developers? The Boolean.",
|
|
||||||
" return bool;",
|
|
||||||
"}",
|
|
||||||
"",
|
|
||||||
"booWho(null);"
|
|
||||||
],
|
|
||||||
"solutions": [
|
|
||||||
"function booWho(bool) {\n // What is the new fad diet for ghost developers? The Boolean.\n return typeof bool === \"boolean\";\n}\n\nbooWho(null);"
|
|
||||||
],
|
|
||||||
"tests": [
|
|
||||||
"assert.strictEqual(booWho(true), true, 'message: <code>booWho(true)</code> should return true.');",
|
|
||||||
"assert.strictEqual(booWho(false), true, 'message: <code>booWho(false)</code> should return true.');",
|
|
||||||
"assert.strictEqual(booWho([1, 2, 3]), false, 'message: <code>booWho([1, 2, 3])</code> should return false.');",
|
|
||||||
"assert.strictEqual(booWho([].slice), false, 'message: <code>booWho([].slice)</code> should return false.');",
|
|
||||||
"assert.strictEqual(booWho({ \"a\": 1 }), false, 'message: <code>booWho({ \"a\": 1 })</code> should return false.');",
|
|
||||||
"assert.strictEqual(booWho(1), false, 'message: <code>booWho(1)</code> should return false.');",
|
|
||||||
"assert.strictEqual(booWho(NaN), false, 'message: <code>booWho(NaN)</code> should return false.');",
|
|
||||||
"assert.strictEqual(booWho(\"a\"), false, 'message: <code>booWho(\"a\")</code> should return false.');",
|
|
||||||
"assert.strictEqual(booWho(\"true\"), false, 'message: <code>booWho(\"true\")</code> should return false.');",
|
|
||||||
"assert.strictEqual(booWho(\"false\"), false, 'message: <code>booWho(\"false\")</code> should return false.');"
|
|
||||||
],
|
|
||||||
"type": "bonfire",
|
|
||||||
"MDNlinks": [
|
|
||||||
"Boolean Objects"
|
|
||||||
],
|
|
||||||
"isRequired": true,
|
|
||||||
"challengeType": 5,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "¡Bu!",
|
|
||||||
"description": [
|
|
||||||
"Crea una función que verifique si el valor que se le pasa es de tipo booleano. Haz que la función devuelva true o false según corresponda.",
|
|
||||||
"Los primitivos booleanos primitivos son: true y false",
|
|
||||||
"Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"fr": {
|
|
||||||
"title": "Boo !",
|
|
||||||
"description": [
|
|
||||||
"Crée une fonction qui vérifie qu'une valeur est de type booléen. Renvoie true ou false.",
|
|
||||||
"Les primitives booléennes sont true ou false.",
|
|
||||||
"N'oublie pas d'utiliser <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Lire-Chercher-Demander</a> si tu es bloqué. Essaye de trouver un partenaire. Écris ton propre code."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"id": "a105e963526e7de52b219be9",
|
"id": "a105e963526e7de52b219be9",
|
||||||
"title": "Sorted Union",
|
"title": "Sorted Union",
|
||||||
@ -651,56 +830,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"id": "a103376db3ba46b2d50db289",
|
|
||||||
"title": "Spinal Tap Case",
|
|
||||||
"description": [
|
|
||||||
"Convert a string to spinal case. Spinal case is all-lowercase-words-joined-by-dashes.",
|
|
||||||
"Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck. Try to pair program. Write your own code."
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"function spinalCase(str) {",
|
|
||||||
" // \"It's such a fine line between stupid, and clever.\"",
|
|
||||||
" // --David St. Hubbins",
|
|
||||||
" return str;",
|
|
||||||
"}",
|
|
||||||
"",
|
|
||||||
"spinalCase('This Is Spinal Tap');"
|
|
||||||
],
|
|
||||||
"solutions": [
|
|
||||||
"function spinalCase(str) {\n // \"It's such a fine line between stupid, and clever.\"\n // --David St. Hubbins\n str = str.replace(/([a-z](?=[A-Z]))/g, '$1 ');\n return str.toLowerCase().replace(/\\ |\\_/g, '-');\n}"
|
|
||||||
],
|
|
||||||
"tests": [
|
|
||||||
"assert.deepEqual(spinalCase(\"This Is Spinal Tap\"), \"this-is-spinal-tap\", 'message: <code>spinalCase(\"This Is Spinal Tap\")</code> should return <code>\"this-is-spinal-tap\"</code>.');",
|
|
||||||
"assert.strictEqual(spinalCase('thisIsSpinalTap'), \"this-is-spinal-tap\", 'message: <code>spinalCase(\"thisIsSpinal<wbr>Tap\")</code> should return <code>\"this-is-spinal-tap\"</code>.');",
|
|
||||||
"assert.strictEqual(spinalCase(\"The_Andy_Griffith_Show\"), \"the-andy-griffith-show\", 'message: <code>spinalCase(\"The_Andy_<wbr>Griffith_Show\")</code> should return <code>\"the-andy-griffith-show\"</code>.');",
|
|
||||||
"assert.strictEqual(spinalCase(\"Teletubbies say Eh-oh\"), \"teletubbies-say-eh-oh\", 'message: <code>spinalCase(\"Teletubbies say Eh-oh\")</code> should return <code>\"teletubbies-say-eh-oh\"</code>.');",
|
|
||||||
"assert.strictEqual(spinalCase(\"AllThe-small Things\"), \"all-the-small-things\", 'message: <code>spinalCase(\"AllThe-small Things\")</code> should return <code>\"all-the-small-things\"</code>.');"
|
|
||||||
],
|
|
||||||
"type": "bonfire",
|
|
||||||
"MDNlinks": [
|
|
||||||
"RegExp",
|
|
||||||
"String.prototype.replace()"
|
|
||||||
],
|
|
||||||
"isRequired": true,
|
|
||||||
"challengeType": 5,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "separado-por-guiones",
|
|
||||||
"description": [
|
|
||||||
"Convierte la cadena de texto que se te pasa al formato spinal case. Spinal case es cuando escribes todas las palabras en-minúsculas-unidas-por-guiones.",
|
|
||||||
"Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"fr": {
|
|
||||||
"title": "Trait d'union",
|
|
||||||
"description": [
|
|
||||||
"Convertis la chaîne de caractères en spinal case. Spinal case correspond au bas-de-casse-séparé-par-des-tirets.",
|
|
||||||
"N'oublie pas d'utiliser <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Lire-Chercher-Demander</a> si tu es bloqué. Essaye de trouver un partenaire. Écris ton propre code."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"id": "a5229172f011153519423690",
|
"id": "a5229172f011153519423690",
|
||||||
"title": "Sum All Odd Fibonacci Numbers",
|
"title": "Sum All Odd Fibonacci Numbers",
|
||||||
@ -862,51 +991,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"id": "a6e40f1041b06c996f7b2406",
|
|
||||||
"title": "Finders Keepers",
|
|
||||||
"description": [
|
|
||||||
"Create a function that looks through an array (first argument) and returns the first element in the array that passes a truth test (second argument). If no element passes the test, return undefined.",
|
|
||||||
"Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck. Try to pair program. Write your own code."
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"function findElement(arr, func) {",
|
|
||||||
" var num = 0;",
|
|
||||||
" return num;",
|
|
||||||
"}",
|
|
||||||
"",
|
|
||||||
"findElement([1, 2, 3, 4], function(num){ return num % 2 === 0; });"
|
|
||||||
],
|
|
||||||
"solutions": [
|
|
||||||
"function findElement(arr, func) {\n var num;\n arr.some(function(e) {\n if (func(e)) {\n num = e;\n return true;\n }\n });\n return num;\n}"
|
|
||||||
],
|
|
||||||
"tests": [
|
|
||||||
"assert.strictEqual(findElement([1, 3, 5, 8, 9, 10], function(num) { return num % 2 === 0; }), 8, 'message: <code>findElement([1, 3, 5, 8, 9, 10], function(num) { return num % 2 === 0; })</code> should return 8.');",
|
|
||||||
"assert.strictEqual(findElement([1, 3, 5, 9], function(num) { return num % 2 === 0; }), undefined, 'message: <code>findElement([1, 3, 5, 9], function(num) { return num % 2 === 0; })</code> should return undefined.');"
|
|
||||||
],
|
|
||||||
"type": "bonfire",
|
|
||||||
"MDNlinks": [
|
|
||||||
"Array.prototype.filter()"
|
|
||||||
],
|
|
||||||
"isRequired": true,
|
|
||||||
"challengeType": 5,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Buscando la verdad",
|
|
||||||
"description": [
|
|
||||||
"Crea una función que busque dentro de un vector (primer argumento) y que devuelva el primer elemento que pase una prueba de verdad (segundo argumento).",
|
|
||||||
"Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"fr": {
|
|
||||||
"title": "Détecteur de mensonges",
|
|
||||||
"description": [
|
|
||||||
"Crée une fonction qui parcourt un tableau (premier argument) et renvoie le premier élément du tableau qui passe le test (second argument).",
|
|
||||||
"N'oublie pas d'utiliser <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Lire-Chercher-Demander</a> si tu es bloqué. Essaye de trouver un partenaire. Écris ton propre code."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"id": "a5deed1811a43193f9f1c841",
|
"id": "a5deed1811a43193f9f1c841",
|
||||||
"title": "Drop it",
|
"title": "Drop it",
|
||||||
@ -1177,6 +1261,152 @@
|
|||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "a2f1d72d9b908d0bd72bb9f6",
|
||||||
|
"title": "Make a Person",
|
||||||
|
"description": [
|
||||||
|
"Fill in the object constructor with the following methods below:",
|
||||||
|
"<blockquote>getFirstName()\ngetLastName()\ngetFullName()\nsetFirstName(first)\nsetLastName(last)\nsetFullName(firstAndLast)</blockquote>",
|
||||||
|
"Run the tests to see the expected output for each method.",
|
||||||
|
"The methods that take an argument must accept only one argument and it has to be a string.",
|
||||||
|
"These methods must be the only available means of interacting with the object.",
|
||||||
|
"Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck. Try to pair program. Write your own code."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"var Person = function(firstAndLast) {",
|
||||||
|
" return firstAndLast;",
|
||||||
|
"};",
|
||||||
|
"",
|
||||||
|
"var bob = new Person('Bob Ross');",
|
||||||
|
"bob.getFullName();"
|
||||||
|
],
|
||||||
|
"solutions": [
|
||||||
|
"var Person = function(firstAndLast) {\n\n var firstName, lastName;\n\n function updateName(str) { \n firstName = str.split(\" \")[0];\n lastName = str.split(\" \")[1]; \n }\n\n updateName(firstAndLast);\n\n this.getFirstName = function(){\n return firstName;\n };\n \n this.getLastName = function(){\n return lastName;\n };\n \n this.getFullName = function(){\n return firstName + \" \" + lastName;\n };\n \n this.setFirstName = function(str){\n firstName = str;\n };\n \n\n this.setLastName = function(str){\n lastName = str;\n };\n \n this.setFullName = function(str){\n updateName(str);\n };\n};\n\nvar bob = new Person('Bob Ross');\nbob.getFullName();"
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert.deepEqual(Object.keys(bob).length, 6, 'message: <code>Object.keys(bob).length</code> should return 6.');",
|
||||||
|
"assert.deepEqual(bob instanceof Person, true, 'message: <code>bob instanceof Person</code> should return true.');",
|
||||||
|
"assert.deepEqual(bob.firstName, undefined, 'message: <code>bob.firstName</code> should return undefined.');",
|
||||||
|
"assert.deepEqual(bob.lastName, undefined, 'message: <code>bob.lastName</code> should return undefined.');",
|
||||||
|
"assert.deepEqual(bob.getFirstName(), 'Bob', 'message: <code>bob.getFirstName()</code> should return \"Bob\".');",
|
||||||
|
"assert.deepEqual(bob.getLastName(), 'Ross', 'message: <code>bob.getLastName()</code> should return \"Ross\".');",
|
||||||
|
"assert.deepEqual(bob.getFullName(), 'Bob Ross', 'message: <code>bob.getFullName()</code> should return \"Bob Ross\".');",
|
||||||
|
"assert.strictEqual((function () { bob.setFirstName(\"Haskell\"); return bob.getFullName(); })(), 'Haskell Ross', 'message: <code>bob.getFullName()</code> should return \"Haskell Ross\" after <code>bob.setFirstName(\"Haskell\")</code>.');",
|
||||||
|
"assert.strictEqual((function () { var _bob=new Person('Haskell Ross'); _bob.setLastName(\"Curry\"); return _bob.getFullName(); })(), 'Haskell Curry', 'message: <code>bob.getFullName()</code> should return \"Haskell Curry\" after <code>bob.setLastName(\"Curry\")</code>.');",
|
||||||
|
"assert.strictEqual((function () { bob.setFullName(\"Haskell Curry\"); return bob.getFullName(); })(), 'Haskell Curry', 'message: <code>bob.getFullName()</code> should return \"Haskell Curry\" after <code>bob.setFullName(\"Haskell Curry\")</code>.');",
|
||||||
|
"assert.strictEqual((function () { bob.setFullName(\"Haskell Curry\"); return bob.getFirstName(); })(), 'Haskell', 'message: <code>bob.getFirstName()</code> should return \"Haskell\" after <code>bob.setFullName(\"Haskell Curry\")</code>.');",
|
||||||
|
"assert.strictEqual((function () { bob.setFullName(\"Haskell Curry\"); return bob.getLastName(); })(), 'Curry', 'message: <code>bob.getLastName()</code> should return \"Curry\" after <code>bob.setFullName(\"Haskell Curry\")</code>.');"
|
||||||
|
],
|
||||||
|
"type": "bonfire",
|
||||||
|
"MDNlinks": [
|
||||||
|
"Closures",
|
||||||
|
"Details of the Object Model"
|
||||||
|
],
|
||||||
|
"challengeType": 5,
|
||||||
|
"translations": {
|
||||||
|
"es": {
|
||||||
|
"title": "Crea una Persona",
|
||||||
|
"description": [
|
||||||
|
"Completa el constructor de objetos con los métodos especificados a continuación:",
|
||||||
|
"<blockquote>getFirstName()\ngetLastName()\ngetFullName()\nsetFirstName(first)\nsetLastName(last)\nsetFullName(firstAndLast)</blockquote>",
|
||||||
|
"Ejecuta las pruebas para ver el resultado esperado de cada método.",
|
||||||
|
"Las funciones que aceptan argumentos deben aceptar sólo uno, y este tiene que ser una cadena.",
|
||||||
|
"Estos métodos deben ser el único medio para interactuar con el objeto.",
|
||||||
|
"Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"it": {
|
||||||
|
"title": "Crea una Persona",
|
||||||
|
"description": [
|
||||||
|
"Completa il costruttore dell'oggetto con i metodi specificati qui sotto:",
|
||||||
|
"<blockquote>getFirstName()\ngetLastName()\ngetFullName()\nsetFirstName(first)\nsetLastName(last)\nsetFullName(firstAndLast)</blockquote>",
|
||||||
|
"Esegui i test per vedere il risultato atteso per ogni metodo.",
|
||||||
|
"I metodi che richiedono un argomento devono accettarne solo uno e questo deve essere una stringa.",
|
||||||
|
"Questi metodi devono essere l'unica maniera possibile di interagire con l'oggetto.",
|
||||||
|
"Ricorda di usare <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leggi-Cerca-Chiedi</a> se rimani bloccato. Prova a programmare in coppia. Scrivi il codice da te."
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"title": "Faça uma Pessoa",
|
||||||
|
"description": [
|
||||||
|
"Preencha o contrutor do objeto com seguintes métodos:",
|
||||||
|
"<blockquote>getFirstName()\ngetLastName()\ngetFullName()\nsetFirstName(first)\nsetLastName(last)\nsetFullName(firstAndLast)</blockquote>",
|
||||||
|
"Rode os testes para ver o resultado esperado de cada método.",
|
||||||
|
"Os métodos que recebem um argumento deve aceitar somente um argumento e deve ser uma string.",
|
||||||
|
"Esses métodos devem ser o único meio de interação com o objeto.",
|
||||||
|
"Lembre-se de usar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Ler-Procurar-Perguntar</a> se você ficar preso. Tente programar em par. Escreva seu próprio código."
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "af4afb223120f7348cdfc9fd",
|
||||||
|
"title": "Map the Debris",
|
||||||
|
"description": [
|
||||||
|
"Return a new array that transforms the element's average altitude into their orbital periods.",
|
||||||
|
"The array will contain objects in the format <code>{name: 'name', avgAlt: avgAlt}</code>.",
|
||||||
|
"You can read about orbital periods <a href=\"http://en.wikipedia.org/wiki/Orbital_period\" target='_blank'>on wikipedia</a>.",
|
||||||
|
"The values should be rounded to the nearest whole number. The body being orbited is Earth.",
|
||||||
|
"The radius of the earth is 6367.4447 kilometers, and the GM value of earth is 398600.4418 km<sup>3</sup>s<sup>-2</sup>.",
|
||||||
|
"Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck. Try to pair program. Write your own code."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"function orbitalPeriod(arr) {",
|
||||||
|
" var GM = 398600.4418;",
|
||||||
|
" var earthRadius = 6367.4447;",
|
||||||
|
" return arr;",
|
||||||
|
"}",
|
||||||
|
"",
|
||||||
|
"orbitalPeriod([{name : \"sputnik\", avgAlt : 35873.5553}]);"
|
||||||
|
],
|
||||||
|
"solutions": [
|
||||||
|
"function orbitalPeriod(arr) {\n var GM = 398600.4418;\n var earthRadius = 6367.4447;\n var TAU = 2 * Math.PI; \n return arr.map(function(obj) {\n return {\n name: obj.name,\n orbitalPeriod: Math.round(TAU * Math.sqrt(Math.pow(obj.avgAlt+earthRadius, 3)/GM))\n };\n });\n}\n\norbitalPeriod([{name : \"sputkin\", avgAlt : 35873.5553}]);\n"
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert.deepEqual(orbitalPeriod([{name : \"sputnik\", avgAlt : 35873.5553}]), [{name: \"sputnik\", orbitalPeriod: 86400}], 'message: <code>orbitalPeriod([{name : \"sputnik\", avgAlt : 35873.5553}])</code> should return <code>[{name: \"sputnik\", orbitalPeriod: 86400}]</code>.');",
|
||||||
|
"assert.deepEqual(orbitalPeriod([{name: \"iss\", avgAlt: 413.6}, {name: \"hubble\", avgAlt: 556.7}, {name: \"moon\", avgAlt: 378632.553}]), [{name : \"iss\", orbitalPeriod: 5557}, {name: \"hubble\", orbitalPeriod: 5734}, {name: \"moon\", orbitalPeriod: 2377399}], 'message: <code>orbitalPeriod([{name: \"iss\", avgAlt: 413.6}, {name: \"hubble\", avgAlt: 556.7}, {name: \"moon\", avgAlt: 378632.553}])</code> should return <code>[{name : \"iss\", orbitalPeriod: 5557}, {name: \"hubble\", orbitalPeriod: 5734}, {name: \"moon\", orbitalPeriod: 2377399}]</code>.');"
|
||||||
|
],
|
||||||
|
"type": "bonfire",
|
||||||
|
"MDNlinks": [
|
||||||
|
"Math.pow()"
|
||||||
|
],
|
||||||
|
"challengeType": 5,
|
||||||
|
"translations": {
|
||||||
|
"es": {
|
||||||
|
"title": "Ubica los Escombros",
|
||||||
|
"description": [
|
||||||
|
"Crea una función que devuelva un nuevo arreglo que transforme la altitud promedio del elemento en su período orbital.",
|
||||||
|
"El arreglo debe contener objetos en el formato <code>{name: 'name', avgAlt: avgAlt}</code>.",
|
||||||
|
"Puedes leer acerca de períodos orbitales <a href=\"http://en.wikipedia.org/wiki/Orbital_period\" target='_blank'>en wikipedia</a>.",
|
||||||
|
"Los valores deben estar redondeados al número entero más próximo. El cuerpo orbitado es la Tierra",
|
||||||
|
"El radio de la Tierra es 6367.4447 kilómetros, y el valor GM del planeta es de 398600.4418 km<sup>3</sup>s<sup>-2</sup>.",
|
||||||
|
"Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"it": {
|
||||||
|
"title": "Mappa i Detriti",
|
||||||
|
"description": [
|
||||||
|
"Ritorna un nuovo array che trasformi l'altitudine media degli elementi nel loro periodo orbitale.",
|
||||||
|
"L'array conterrà oggetti in formato <code>{name: 'name', avgAlt: avgAlt}</code>.",
|
||||||
|
"Puoi leggere riguardo i periodi orbitali <a href=\"http://en.wikipedia.org/wiki/Orbital_period\" target='_blank'>su wikipedia</a>.",
|
||||||
|
"I valori devono essere arrotondati al numero intero più vicino. Il corpo attorno a cui orbitano gli elementi è la Terra.",
|
||||||
|
"Il raggio della Terra è di 6367.4447 kilometri, e il valore GM della Terra è di 398600.4418 km<sup>3</sup>s<sup>-2</sup>.",
|
||||||
|
"Ricorda di usare <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leggi-Cerca-Chiedi</a> se rimani bloccato. Prova a programmare in coppia. Scrivi il codice da te."
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"title": "Mapeie o Lixo espacial",
|
||||||
|
"description": [
|
||||||
|
"Retorne uma nova matriz que transforma a altitude média do elemento em seu período orbital.",
|
||||||
|
"A matriz vai conter objetos no formato <code>{name: 'name', avgAlt: avgAlt}</code>.",
|
||||||
|
"Você pode ler sobre período orbital <a href=\"https://pt.wikipedia.org/wiki/Per%C3%ADodo_orbital\" target='_blank'>na wikipedia</a>.",
|
||||||
|
"Os valores devem ser arredondados para número inteiro mais próximo. O corpe sendo orbitado é a Terra.",
|
||||||
|
"O raio da terra é 6367.4447 quilômetros, e o valor GM da terra é 398600.4418 km<sup>3</sup>s<sup>-2</sup>.",
|
||||||
|
"Lembre-se de usar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Ler-Procurar-Perguntar</a> se você ficar preso. Tente programar em par. Escreva seu próprio código."
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
@ -1,16 +1,16 @@
|
|||||||
{
|
{
|
||||||
"name": "Claim Your Front End Development Certificate",
|
"name": "Claim Your JavaScript Algorithms and Data Structures Certificate",
|
||||||
"order": 13,
|
"order": 13,
|
||||||
"time": "5 minutes",
|
"time": "5 minutes",
|
||||||
"challenges": [
|
"challenges": [
|
||||||
{
|
{
|
||||||
"id": "561add10cb82ac38a17513be",
|
"id": "587d7dac367417b2b2512b71",
|
||||||
"title": "Claim Your Front End Development Certificate",
|
"title": "Claim Your JavaScript Algorithms and Data Structures Certificate",
|
||||||
"description": [
|
"description": [
|
||||||
[
|
[
|
||||||
"//i.imgur.com/k8btNUB.jpg",
|
"//i.imgur.com/k8btNUB.jpg",
|
||||||
"An image of our Front End Development Certificate",
|
"An image of our JavaScript Algorithms and Data Structures Certificate",
|
||||||
"This challenge will give you your verified Front End Development Certificate. Before we issue your certificate, we must verify that you have completed all of our basic and intermediate algorithm scripting challenges, and all our basic, intermediate, and advanced front end development projects. You must also accept our Academic Honesty Pledge. Click the button below to start this process.",
|
"This challenge will give you your verified JavaScript Algorithms and Data Structures Certificate. Before we issue your certificate, we must verify that you have completed all of our basic and intermediate algorithm scripting challenges, and all our basic, intermediate, and advanced front end development projects. You must also accept our Academic Honesty Pledge. Click the button below to start this process.",
|
||||||
""
|
""
|
||||||
],
|
],
|
||||||
[
|
[
|
||||||
@ -28,7 +28,7 @@
|
|||||||
[
|
[
|
||||||
"//i.imgur.com/Q5Za9U6.jpg",
|
"//i.imgur.com/Q5Za9U6.jpg",
|
||||||
"An image of the word \"Congratulations\"",
|
"An image of the word \"Congratulations\"",
|
||||||
"Congratulations! We've added your Front End Development Certificate to your portfolio page. Unless you choose to hide your solutions, this certificate will remain publicly visible and verifiable.",
|
"Congratulations! We've added your JavaScript Algorithms and Data Structures Certificate to your portfolio page. Unless you choose to hide your solutions, this certificate will remain publicly visible and verifiable.",
|
||||||
""
|
""
|
||||||
]
|
]
|
||||||
],
|
],
|
||||||
@ -192,50 +192,6 @@
|
|||||||
{
|
{
|
||||||
"id": "a97fd23d9b809dac9921074f",
|
"id": "a97fd23d9b809dac9921074f",
|
||||||
"title": "Arguments Optional"
|
"title": "Arguments Optional"
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "bd7158d8c442eddfbeb5bd1f",
|
|
||||||
"title": "Get Set for Ziplines"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "bd7158d8c242eddfaeb5bd13",
|
|
||||||
"title": "Build a Personal Portfolio Webpage"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "bd7158d8c442eddfaeb5bd13",
|
|
||||||
"title": "Build a Random Quote Machine"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "bd7158d8c442eddfaeb5bd0f",
|
|
||||||
"title": "Build a Pomodoro Clock"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "bd7158d8c442eddfaeb5bd17",
|
|
||||||
"title": "Build a JavaScript Calculator"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "bd7158d8c442eddfaeb5bd10",
|
|
||||||
"title": "Show the Local Weather"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "bd7158d8c442eddfaeb5bd1f",
|
|
||||||
"title": "Use the Twitch.tv JSON API"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "bd7158d8c442eddfaeb5bd18",
|
|
||||||
"title": "Stylize Stories on Camper News"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "bd7158d8c442eddfaeb5bd19",
|
|
||||||
"title": "Build a Wikipedia Viewer"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "bd7158d8c442eedfaeb5bd1c",
|
|
||||||
"title": "Build a Tic Tac Toe Game"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "bd7158d8c442eddfaeb5bd1c",
|
|
||||||
"title": "Build a Simon Game"
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"type": "Waypoint",
|
"type": "Waypoint",
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -1,280 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "API Projects",
|
|
||||||
"order": 26,
|
|
||||||
"time": "150 hours",
|
|
||||||
"helpRoom": "HelpBackEnd",
|
|
||||||
"challenges": [
|
|
||||||
{
|
|
||||||
"id": "576d6e1b12fd92c4207a9cbd",
|
|
||||||
"title": "Get Set for our API Development Projects",
|
|
||||||
"description": [
|
|
||||||
[
|
|
||||||
"//i.imgur.com/4IZjWZ3.gif",
|
|
||||||
"A gif showing how to create a c9.io account.",
|
|
||||||
"We recommend building our backend challenges on c9.io, a powerful browser-based development environment. This will save you hours of time that you would spend configuring your local computer to run Node.js and MongoDB - time you could instead spend coding.<br><br>Create a c9.io account by clicking the GitHub symbol in the upper right hand corner of the c9.io page. Click the big plus symbol to create a new workspace. Enter your email address when prompted.",
|
|
||||||
"https://c9.io"
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/XPSVVdS.gif",
|
|
||||||
"A gif showing you how to create a node.js workspace template.",
|
|
||||||
"Click the + button to create a new c9 workspace.<br><br>Give your workspace a name then scroll down and choose the node.js template. Then click the \"Create Workspace\" button.",
|
|
||||||
""
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/ZKN2G9y.gif",
|
|
||||||
"A gif showing you how to create a directory for your project and navigating to it in the console.",
|
|
||||||
"Create a new directory for the project you'll be working on by right-clicking on the top level folder and selecting \"Add Folder\".<br><br>Name the folder then navigate to that directory in your console window.",
|
|
||||||
""
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/GbUOniA.gif",
|
|
||||||
"A gif showing you how to initialize your package.json",
|
|
||||||
"In the console, type <code>npm init</code> to create your package.json file.<br><br>Follow the prompts and press enter to continue for each prompt (you may leave all of the defaults if you wish to do so).",
|
|
||||||
""
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/4ZW6es1.gif",
|
|
||||||
"A gif showing you how to initialize a git repository",
|
|
||||||
"You'll want to use git for version control. First, add a new file titled <code>.gitignore</code><br><br>Open this file and add <code>node_modules</code> on the first line, then save the file<br><br>Next, in your console run the command <code>git init</code> to initialize this directory as a git repository.",
|
|
||||||
""
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/tZscE6c.gif",
|
|
||||||
"A gif showing you how to install express",
|
|
||||||
"Install express and save it as a project dependency by running <code>npm install express --save</code> in the console.",
|
|
||||||
""
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/ZAjiRLZ.gif",
|
|
||||||
"A gif showing you how to create a server.js file and require express",
|
|
||||||
"Create a new file titled <code>server.js</code> in your project directory.<br><br>Require the express module in this file then save the file.",
|
|
||||||
""
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/POEq6n6.gif",
|
|
||||||
"A gif showing you how to set up a hello world example application",
|
|
||||||
"At this point you are ready to begin creating your API project in the server.js file.<br><br>To quickly test your set up you can create a \"hello world\" application and preview it.<br><br>Copy the code from <a href='http://expressjs.com/en/starter/hello-world.html'>the express hello world example</a> into your server.js file with the exception of the port.<br><br>In c9, you'll always want to use port 8080.<br><br>Save the file.",
|
|
||||||
""
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/HcKj0MW.gif",
|
|
||||||
"A gif showing you how to run the application",
|
|
||||||
"To run your application run the command <code>node server.js</code> in your console.",
|
|
||||||
""
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/uSVY5GX.gif",
|
|
||||||
"A gif showing you how to open c9.io's preview window.",
|
|
||||||
"Open up your application in a preview tab by clicking Window > Share > Application > Open.",
|
|
||||||
""
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/zoK7lh6.gif",
|
|
||||||
"A gif showing you how to commit your changes.",
|
|
||||||
"Commit your changes to the git repository.<br><br>Check your git status by entering the command <code>git status</code> into the console.<br><br>Add your files with the command <code>git add .</code>.<br><br>Commit your changes with <code>git commit -m \"initial commit\"</code>.",
|
|
||||||
""
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//imgur.com/idbXyjD.gif",
|
|
||||||
"A gif showing you how to create a new GitHub repository and push your code to it.",
|
|
||||||
"Create a new GitHub repository. Then copy its .git URL.<br><br>Return to c9.io's terminal and set your GitHub remote URL: <code>git remote add origin</code> followed by the URL you copied from GitHub.<br><br>Run <code>git push origin master</code>.<br><br>Now tab back to GitHub and refresh, and you'll see that your code is now on GitHub.<br><br>You can now delete the hello world example code and begin your API project!",
|
|
||||||
"https://github.com/new"
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/Qn0K65B.gif",
|
|
||||||
"A gif showing you how to add add-ons to Heroku.",
|
|
||||||
"We will soon add instructions for getting your API projects deployed to Heroku. For now, develop your projects right on c9.io.",
|
|
||||||
""
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"challengeSeed": [],
|
|
||||||
"tests": [],
|
|
||||||
"type": "Waypoint",
|
|
||||||
"challengeType": 7,
|
|
||||||
"isRequired": false,
|
|
||||||
"translations": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "bd7158d8c443edefaeb5bdef",
|
|
||||||
"title": "Timestamp Microservice",
|
|
||||||
"description": [
|
|
||||||
"<strong>Objective:</strong> Build a full stack JavaScript app that is functionally similar to this: <a href='https://timestamp-ms.herokuapp.com/' target='_blank'>https://timestamp-ms.herokuapp.com/</a> and deploy it to Heroku.",
|
|
||||||
"Note that for each project, you should create a new GitHub repository and a new Heroku project. If you can't remember how to do this, revisit <a href='/challenges/get-set-for-our-api-development-projects'>https://freecodecamp.com/challenges/get-set-for-our-api-development-projects</a>.",
|
|
||||||
"Here are the specific user stories you should implement for this project:",
|
|
||||||
"<strong>User Story:</strong> I can pass a string as a parameter, and it will check to see whether that string contains either a Unix timestamp or a natural language date (example: January 1, 2016).",
|
|
||||||
"<strong>User Story:</strong> If it does, it returns both the Unix timestamp and the natural language form of that date.",
|
|
||||||
"<strong>User Story:</strong> If it does not contain a date or Unix timestamp, it returns null for those properties.",
|
|
||||||
"Once you've finished implementing these user stories, click the \"I've completed this challenge\" button and enter the URLs for both your GitHub repository and your live app running on Heroku.",
|
|
||||||
"You can get feedback on your project by sharing it with your friends on Facebook."
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"gj4eL6satjI"
|
|
||||||
],
|
|
||||||
"tests": [],
|
|
||||||
"isRequired": true,
|
|
||||||
"releasedOn": "January 1, 2016",
|
|
||||||
"type": "basejump",
|
|
||||||
"challengeType": 4,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Microservicio de Marca Temporal",
|
|
||||||
"description": [
|
|
||||||
"<strong>Objetivo:</strong> Desarolla una aplicación de Pila Completa en JavaScript que sea funcionalmente similar a esta: <a href='https://timestamp-ms.herokuapp.com/' target='_blank'>https://timestamp-ms.herokuapp.com/</a> y despliegala en Heroku.",
|
|
||||||
"Ten en cuenta que para cada proyecto, deberías crear un nuevo repositorio en GitHub y un nuevo proyecto en Heroku. Si no recuerdas como hacer esto, vuelve a visitar <a href='/challenges/get-set-for-our-api-development-projects'>https://freecodecamp.com//challenges/get-set-for-our-api-development-projects</a>.",
|
|
||||||
"Aquí están las historias de usuario específicas que debes implementar para este proyecto:",
|
|
||||||
"<strong>Historia de Usuario:</strong> Puedo pasar una cadena como parámetro y comprobará si contiene o no una marca de tiempo para Unix o una fecha en lenguaje natural en inglés (Ejemplo: January 1, 2016).",
|
|
||||||
"<strong>Historia de Usuario:</strong> Si tiene una marca de tiempo para Unix, devuelve tanto la marca de tiempo de Unix como la fecha en lenguaje natural.",
|
|
||||||
"<strong>Historia de Usuario:</strong> Si no contiene una fecha ni una marca de tiempo para Unix, devolverá esas propiedades en <code>null</code>.",
|
|
||||||
"Una vez que hayas terminado de implementar estas historias de usuarios, pulsa el botón \"I've completed this challenge\" e introduce los URLs de tu repositorio en GitHub y de tu aplicación en vivo en Heroku.",
|
|
||||||
"Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiendolo en nuestra <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "bd7158d8c443edefaeb5bdff",
|
|
||||||
"title": "Request Header Parser Microservice",
|
|
||||||
"description": [
|
|
||||||
"<strong>Objective:</strong> Build a full stack JavaScript app that is functionally similar to this: <a href='https://cryptic-ridge-9197.herokuapp.com/api/whoami/' target='_blank'>https://cryptic-ridge-9197.herokuapp.com/api/whoami/</a> and deploy it to Heroku.",
|
|
||||||
"Note that for each project, you should create a new GitHub repository and a new Heroku project. If you can't remember how to do this, revisit <a href='/challenges/get-set-for-our-api-development-projects'>https://freecodecamp.com/challenges/get-set-for-our-api-development-projects</a>.",
|
|
||||||
"Here's the specific user story you should implement for this project:",
|
|
||||||
"<strong>User Story:</strong> I can get the IP address, language, and operating system for my browser as a JSON object.",
|
|
||||||
"Once you've finished implementing these user stories, click the \"I've completed this challenge\" button and enter the URLs for both your GitHub repository and your live app running on Heroku.",
|
|
||||||
"You can get feedback on your project by sharing it with your friends on Facebook."
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"_0oqjSkGoHg"
|
|
||||||
],
|
|
||||||
"tests": [],
|
|
||||||
"isRequired": true,
|
|
||||||
"releasedOn": "January 1, 2016",
|
|
||||||
"type": "basejump",
|
|
||||||
"challengeType": 4,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Microservicio para analizar el encabezado de una petición",
|
|
||||||
"description": [
|
|
||||||
"<strong>Objetivo:</strong> Desarrolla una aplicación de Pila Completa en JavaScript que sea funcionalmente similar a esta: <a href='https://cryptic-ridge-9197.herokuapp.com/api/whoami/' target='_blank'>https://cryptic-ridge-9197.herokuapp.com/api/whoami/</a> y despliegala en Heroku.",
|
|
||||||
"Ten en cuenta que para cada proyecto, deberías crear un nuevo repositorio en GitHub y un nuevo proyecto en Heroku. Si no recuerdas como hacer esto, vuelve a visitar <a href='/challenges/get-set-for-our-api-development-projects'>https://freecodecamp.com//challenges/get-set-for-our-api-development-projects</a>.",
|
|
||||||
"Aquí están las historias de usuario específicas que debes implementar para este proyecto:",
|
|
||||||
"<strong>Historia de Usuario:</strong> Puedo obtener la dirección IP, idioma y sistema operativo de mi navegador.",
|
|
||||||
"Una vez que hayas terminado de implementar estas historias de usuarios, pulsa el botón \"I've completed this challenge\" e introduce los URLs de tu repositorio en GitHub y de tu aplicación en vivo en Heroku.",
|
|
||||||
"Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiendolo en nuestra <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "bd7158d8c443edefaeb5bd0e",
|
|
||||||
"title": "URL Shortener Microservice",
|
|
||||||
"description": [
|
|
||||||
"<strong>Objective:</strong> Build a full stack JavaScript app that is functionally similar to this: <a href='https://little-url.herokuapp.com/' target='_blank'>https://little-url.herokuapp.com/</a> and deploy it to Heroku.",
|
|
||||||
"Note that for each project, you should create a new GitHub repository and a new Heroku project. If you can't remember how to do this, revisit <a href='/challenges/get-set-for-our-api-development-projects'>https://freecodecamp.com/challenges/get-set-for-our-api-development-projects</a>.",
|
|
||||||
"Here are the specific user stories you should implement for this project:",
|
|
||||||
"<strong>User Story:</strong> I can pass a URL as a parameter and I will receive a shortened URL in the JSON response.",
|
|
||||||
"<strong>User Story:</strong> If I pass an invalid URL that doesn't follow the valid http://www.example.com format, the JSON response will contain an error instead.",
|
|
||||||
"<strong>User Story:</strong> When I visit that shortened URL, it will redirect me to my original link.",
|
|
||||||
"<strong>Pro Tip:</strong> Checkout this <a href='http://forum.freecodecamp.com/t/guide-for-using-mongodb-and-deploying-to-heroku/19347' target='_blank'>wiki article</a> for tips on integrating MongoDB on Heroku.",
|
|
||||||
"Once you've finished implementing these user stories, click the \"I've completed this challenge\" button and enter the URLs for both your GitHub repository and your live app running on Heroku.",
|
|
||||||
"You can get feedback on your project by sharing it with your friends on Facebook."
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"B-gY9nAtPIw"
|
|
||||||
],
|
|
||||||
"tests": [],
|
|
||||||
"isRequired": true,
|
|
||||||
"releasedOn": "January 1, 2016",
|
|
||||||
"type": "basejump",
|
|
||||||
"challengeType": 4,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Microservicio para acortar URLs",
|
|
||||||
"description": [
|
|
||||||
"<strong>Objetivo:</strong> Desarrolla una aplicación de Pila Completa en JavaScript que sea funcionalmente similar a esta: <a href='https://little-url.herokuapp.com/' target='_blank'>https://little-url.herokuapp.com/</a> y despliegala en Heroku.",
|
|
||||||
"Ten en cuenta que para cada proyecto, deberías crear un nuevo repositorio en GitHub y un nuevo proyecto en Heroku. Si no recuerdas como hacer esto, vuelve a visitar <a href='/challenges/get-set-for-our-api-development-projects'>https://freecodecamp.com//challenges/get-set-for-our-api-development-projects</a>.",
|
|
||||||
"Aquí están las historias de usuario específicas que debes implementar para este proyecto:",
|
|
||||||
"<strong>Historia de Usuario:</strong> Puedo pasar una URL como parámetro y recibiré una URL acortada en la respuesta JSON.",
|
|
||||||
"<strong>Historia de Usuario:</strong> Si paso una URL inválido que no siga el formato válido http://www.exmaple.com, en cambio la respuesta JSON contendrá un mensaje de error.",
|
|
||||||
"<strong>Historia de Usuario:</strong> Cuando visite el URL acortado, me redirigirá a mi enlace original.",
|
|
||||||
"Una vez que hayas terminado de implementar estas historias de usuarios, pulsa el botón \"I've completed this challenge\" e introduce los URLs de tu repositorio en GitHub y de tu aplicación en vivo en Heroku.",
|
|
||||||
"Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiendolo en nuestra <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "bd7158d8c443edefaeb5bdee",
|
|
||||||
"title": "Image Search Abstraction Layer",
|
|
||||||
"description": [
|
|
||||||
"<strong>Objective:</strong> Build a full stack JavaScript app that allows you to search for images like this: <a href='https://cryptic-ridge-9197.herokuapp.com/api/imagesearch/lolcats%20funny?offset=10' target='_blank'>https://cryptic-ridge-9197.herokuapp.com/api/imagesearch/lolcats%20funny?offset=10</a> and browse recent search queries like this: <a href='https://cryptic-ridge-9197.herokuapp.com/api/latest/imagesearch/' target='_blank'>https://cryptic-ridge-9197.herokuapp.com/api/latest/imagesearch/</a>. Then deploy it to Heroku.",
|
|
||||||
"Note that for each project, you should create a new GitHub repository and a new Heroku project. If you can't remember how to do this, revisit <a href='/challenges/get-set-for-our-api-development-projects'>https://freecodecamp.com/challenges/get-set-for-our-api-development-projects</a>.",
|
|
||||||
"Here are the specific user stories you should implement for this project:",
|
|
||||||
"<strong>User Story:</strong> I can get the image URLs, alt text and page urls for a set of images relating to a given search string.",
|
|
||||||
"<strong>User Story:</strong> I can paginate through the responses by adding a ?offset=2 parameter to the URL.",
|
|
||||||
"<strong>User Story:</strong> I can get a list of the most recently submitted search strings.",
|
|
||||||
"Once you've finished implementing these user stories, click the \"I've completed this challenge\" button and enter the URLs for both your GitHub repository and your live app running on Heroku.",
|
|
||||||
"You can get feedback on your project by sharing it with your friends on Facebook."
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"QIpA1oP8EGQ"
|
|
||||||
],
|
|
||||||
"tests": [],
|
|
||||||
"isRequired": true,
|
|
||||||
"releasedOn": "January 1, 2016",
|
|
||||||
"type": "basejump",
|
|
||||||
"challengeType": 4,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Capa de abstracción para buscar imágenes",
|
|
||||||
"description": [
|
|
||||||
"<strong>Objetivo:</strong> Desarolla una aplicación de Pila Completa en JavaScript que te permite buscar imágenes como esta: <a href='https://cryptic-ridge-9197.herokuapp.com/api/imagesearch/lolcats%20funny?offset=10' target='_blank'>https://cryptic-ridge-9197.herokuapp.com/api/imagesearch/lolcats%20funny?offset=10</a> y examinar las búsquedas recientes como esta: <a href='https://cryptic-ridge-9197.herokuapp.com/api/latest/imagesearch/' target='_blank'>https://cryptic-ridge-9197.herokuapp.com/api/latest/imagesearch/</a>. Después, despliegala en Heroku.",
|
|
||||||
"Ten en cuenta que para cada proyecto, deberías crear un nuevo repositorio en GitHub y un nuevo proyecto en Heroku. Si no recuerdas como hacer esto, vuelve a visitar <a href='/challenges/get-set-for-our-api-development-projects'>https://freecodecamp.com//challenges/get-set-for-our-api-development-projects</a>.",
|
|
||||||
"Aquí están las historias de usuario específicas que debes implementar para este proyecto:",
|
|
||||||
"<strong>Historia de Usuario:</strong> Puedo obtener la URL de una imagen, texto alternativo y URLs de las páginas de un conjunto de imágenes que se relacionen con una cadena de texto dada.",
|
|
||||||
"<strong>Historia de Usuario:</strong> Puedo examinar página a página las respuestas añadiendo un parámetro del estilo <code>?offset=2</code> al URL.",
|
|
||||||
"<strong>Historia de Usuario:</strong> Puedo obtener una lista de las cadenas búscadas que se enviaron más recientemente.",
|
|
||||||
"Una vez que hayas terminado de implementar estas historias de usuarios, pulsa el botón \"I've completed this challenge\" e introduce los URLs de tu repositorio en GitHub y de tu aplicación en vivo en Heroku.",
|
|
||||||
"Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiendolo en nuestra <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "bd7158d8c443edefaeb5bd0f",
|
|
||||||
"title": "File Metadata Microservice",
|
|
||||||
"description": [
|
|
||||||
"<strong>Objective:</strong> Build a full stack JavaScript app that is functionally similar to this: <a href='https://aryanj-file-size.herokuapp.com/' target='_blank'>https://aryanj-file-size.herokuapp.com/</a> and deploy it to Heroku.",
|
|
||||||
"Note that for each project, you should create a new GitHub repository and a new Heroku project. If you can't remember how to do this, revisit <a href='/challenges/get-set-for-our-api-development-projects'>https://freecodecamp.com/challenges/get-set-for-our-api-development-projects</a>.",
|
|
||||||
"Here are the specific user stories you should implement for this project:",
|
|
||||||
"<strong>User Story:</strong> I can submit a FormData object that includes a file upload.",
|
|
||||||
"<strong>User Story:</strong> When I submit something, I will receive the file size in bytes within the JSON response",
|
|
||||||
"<strong>Hint:</strong> You may want to use this package: <a href='https://www.npmjs.com/package/multer' target='_blank'>https://www.npmjs.com/package/multer</a>",
|
|
||||||
"Once you've finished implementing these user stories, click the \"I've completed this challenge\" button and enter the URLs for both your GitHub repository and your live app running on Heroku.",
|
|
||||||
"You can get feedback on your project by sharing it with your friends on Facebook."
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"w_W2-VOgy9g"
|
|
||||||
],
|
|
||||||
"tests": [],
|
|
||||||
"isRequired": true,
|
|
||||||
"releasedOn": "January 1, 2016",
|
|
||||||
"type": "basejump",
|
|
||||||
"challengeType": 4,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Microservicio de metadatos de archivos",
|
|
||||||
"description": [
|
|
||||||
"<strong>Objetivo:</strong> Desarrolla una aplicación de Pila Completa en JavaScript que sea funcionalmente similar a esta: <a href='https://cryptic-ridge-9197.herokuapp.com/' target='_blank'>https://cryptic-ridge-9197.herokuapp.com/</a> y despliegala en Heroku.",
|
|
||||||
"Ten en cuenta que para cada proyecto, deberías crear un nuevo repositorio en GitHub y un nuevo proyecto en Heroku. Si no recuerdas como hacer esto, vuelve a visitar <a href='/challenges/get-set-for-our-api-development-projects'>https://freecodecamp.com//challenges/get-set-for-our-api-development-projects</a>.",
|
|
||||||
"Aquí están las historias de usuario específicas que debes implementar para este proyecto:",
|
|
||||||
"<strong>Historia de Usuario:</strong> Puedo enviar un objeto FormData que incluya una subida de un archivo.",
|
|
||||||
"<strong>Historia de Usuario:</strong> Cuando envío algo, recibiré el tamao del archivo en bytes en la respuesta JSON.",
|
|
||||||
"<strong>Pista:</strong> Puede servirte este paquete: <a href='https://www.npmjs.com/package/multer' target='_blank'>https://www.npmjs.com/package/multer</a>",
|
|
||||||
"Una vez que hayas terminado de implementar estas historias de usuarios, pulsa el botón \"I've completed this challenge\" e introduce los URLs de tu repositorio en GitHub y de tu aplicación en vivo en Heroku.",
|
|
||||||
"Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiendolo en nuestra <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@ -1,85 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "Automated Testing and Debugging",
|
|
||||||
"order": 20,
|
|
||||||
"time": "15 minutes",
|
|
||||||
"helpRoom": "HelpBackEnd",
|
|
||||||
"challenges": [
|
|
||||||
{
|
|
||||||
"id": "cf1111c1c16feddfaeb6bdef",
|
|
||||||
"title": "Use the JavaScript Console",
|
|
||||||
"description": [
|
|
||||||
"Both Chrome and Firefox have excellent JavaScript consoles, also known as DevTools, for debugging your JavaScript.",
|
|
||||||
"You can find <code>Developer tools</code> in your Chrome's menu or <code>Web Console</code> in FireFox's menu. If you're using a different browser, or a mobile phone, we strongly recommend switching to desktop Firefox or Chrome.",
|
|
||||||
"Let's print to this console using the <code>console.log</code> method.",
|
|
||||||
"<code>console.log('Hello world!');</code>"
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"",
|
|
||||||
"",
|
|
||||||
""
|
|
||||||
],
|
|
||||||
"solutions": [
|
|
||||||
"console.log('Hello world!');"
|
|
||||||
],
|
|
||||||
"tests": [
|
|
||||||
"assert(editor.getValue().match(/console\\.log\\(/gi), 'message: You should use the <code>console.log</code> method to log <code>\"Hello world!\"</code> to your JavaScript console.');"
|
|
||||||
],
|
|
||||||
"type": "waypoint",
|
|
||||||
"challengeType": 1,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Utiliza la consola de JavaScript",
|
|
||||||
"description": [
|
|
||||||
"Tanto Chrome como Firefox tienen excelentes consolas JavaScript, también conocidas como DevTools, para depurar tu código JavaScript.",
|
|
||||||
"Puedes encontrar las Herramientas para desarrolladores (<code>Developer tools</code>) en el menú de Chrome o la Consola web (<code>Web Console</code>) en el menú de FireFox. Si estás utilizando un navegador diferente, o un dispositivo móvil, nuestra recomendación es que cambies a la versión de escritorio de Firefox o Chrome.",
|
|
||||||
"Vamos a imprimir en esta consola utilizando el método <code>console.log</code>.",
|
|
||||||
"<code>console.log('Hello world!')</code>"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "cf1111c1c16feddfaeb7bdef",
|
|
||||||
"title": "Using typeof",
|
|
||||||
"description": [
|
|
||||||
"You can use <code>typeof</code> to check the <code>data structure</code>, or type, of a variable.",
|
|
||||||
"Note that in JavaScript, arrays are technically a type of object.",
|
|
||||||
"Try using <code>typeof</code> on each of the following to see which types they have.",
|
|
||||||
"<code>console.log(typeof \"\");</code>",
|
|
||||||
"<code>console.log(typeof 0);</code>",
|
|
||||||
"<code>console.log(typeof []);</code>",
|
|
||||||
"<code>console.log(typeof {});</code>"
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"",
|
|
||||||
"",
|
|
||||||
""
|
|
||||||
],
|
|
||||||
"solutions": [
|
|
||||||
"console.log(typeof \"\");\nconsole.log(typeof 0);\nconsole.log(typeof []);\nconsole.log(typeof {});"
|
|
||||||
],
|
|
||||||
"tests": [
|
|
||||||
"assert(code.match(/console\\.log\\(typeof[\\( ][\"'].*[\"']\\)?\\);/), 'message: You should <code>console.log</code> the <code>typeof</code> a string.');",
|
|
||||||
"assert(code.match(/console\\.log\\(typeof[\\( ]\\d+\\.?\\d*\\)?\\);/), 'message: You should <code>console.log</code> the <code>typeof</code> a number.');",
|
|
||||||
"assert(code.match(/console\\.log\\(typeof[\\( ]\\[\\]\\)?\\);/), 'message: You should <code>console.log</code> the <code>typeof</code> an array.');",
|
|
||||||
"assert(code.match(/console\\.log\\(typeof[\\( ]\\{\\}\\)?\\);/), 'message: You should <code>console.log</code> the <code>typeof</code> an object.');"
|
|
||||||
],
|
|
||||||
"type": "waypoint",
|
|
||||||
"challengeType": 1,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Usando typeof",
|
|
||||||
"description": [
|
|
||||||
"Puedes usar <code>typeof</code> para verificar la <code>estructura de datos</code>, o el tipo, de una variable.",
|
|
||||||
"Ten en cuenta que, en JavaScript, los vectores son técnicamente un tipo de objeto.",
|
|
||||||
"Intenta utilizar <code>typeof</code> en cada uno de los siguientes valores para ver de qué tipo son.",
|
|
||||||
"<code>console.log(typeof(\"\"));</code>",
|
|
||||||
"<code>console.log(typeof(0));</code>",
|
|
||||||
"<code>console.log(typeof([]));</code>",
|
|
||||||
"<code>console.log(typeof({}));</code>"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@ -1,157 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "Claim Your Back End Development Certificate",
|
|
||||||
"order": 29,
|
|
||||||
"time": "5 minutes",
|
|
||||||
"challenges": [
|
|
||||||
{
|
|
||||||
"id": "660add10cb82ac38a17513be",
|
|
||||||
"title": "Claim Your Back End Development Certificate",
|
|
||||||
"description": [
|
|
||||||
[
|
|
||||||
"//i.imgur.com/8v3t84p.jpg",
|
|
||||||
"An image of our Back End Development Certificate",
|
|
||||||
"This challenge will give you your verified Back End Development Certificate. Before we issue your certificate, we must verify that you have completed all of the back end development projects. You must also accept our Academic Honesty Pledge. Click the button below to start this process.",
|
|
||||||
""
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/HArFfMN.jpg",
|
|
||||||
"The definition of plagiarism: Plagiarism (noun) - copying someone else’s work and presenting it as your own without crediting them",
|
|
||||||
"By clicking below, you pledge that all of your submitted code A) is code you or your pair personally wrote, or B) comes from open source libraries like jQuery, or C) has been clearly attributed to its original authors. You also give us permission to audit your challenge solutions and revoke your certificate if we discover evidence of plagiarism.",
|
|
||||||
"#"
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/2qn7tHp.jpg",
|
|
||||||
"An image of the text \"Back End Development Certificate requirements\"",
|
|
||||||
"Let's confirm that you have completed our back end development projects. Click the button below to verify this.",
|
|
||||||
"#"
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/16SIhHO.jpg",
|
|
||||||
"An image of the word \"Congratulations\"",
|
|
||||||
"Congratulations! We've added your Back End Development Certificate to your portfolio page. Unless you choose to hide your solutions, this certificate will remain publicly visible and verifiable.",
|
|
||||||
""
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
{
|
|
||||||
"properties": [
|
|
||||||
"isHonest",
|
|
||||||
"isBackEndCert"
|
|
||||||
],
|
|
||||||
"apis": [
|
|
||||||
"/certificate/honest",
|
|
||||||
"/certificate/verify/back-end"
|
|
||||||
],
|
|
||||||
"stepIndex": [
|
|
||||||
1,
|
|
||||||
2
|
|
||||||
]
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"tests": [
|
|
||||||
{
|
|
||||||
"id": "bd7158d8c443edefaeb5bdef",
|
|
||||||
"title": "Timestamp Microservice"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "bd7158d8c443edefaeb5bdff",
|
|
||||||
"title": "Request Header Parser Microservice"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "bd7158d8c443edefaeb5bd0e",
|
|
||||||
"title": "URL Shortener Microservice"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "bd7158d8c443edefaeb5bdee",
|
|
||||||
"title": "Image Search Abstraction Layer"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "bd7158d8c443edefaeb5bd0f",
|
|
||||||
"title": "File Metadata Microservice"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "bd7158d8c443eddfaeb5bdef",
|
|
||||||
"title": "Build a Voting App"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "bd7158d8c443eddfaeb5bdff",
|
|
||||||
"title": "Build a Nightlife Coordination App"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "bd7158d8c443eddfaeb5bd0e",
|
|
||||||
"title": "Chart the Stock Market"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "bd7158d8c443eddfaeb5bd0f",
|
|
||||||
"title": "Manage a Book Trading Club"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "bd7158d8c443eddfaeb5bdee",
|
|
||||||
"title": "Build a Pinterest Clone"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"type": "Waypoint",
|
|
||||||
"challengeType": 7,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Reclama tu certificado de desarrollo del lado del servidor",
|
|
||||||
"description": [
|
|
||||||
[
|
|
||||||
"//i.imgur.com/8v3t84p.jpg",
|
|
||||||
"Una imagen que muestra nuestro certificado de desarrollo del lado del servidor",
|
|
||||||
"Este desafío te otorga tu certificado autenticado de desarrollo del lado del servidor. Antes de que podamos emitir tu certificado, debemos verificar que has completado todos los proyectos de desarrollo del lado del servidor. También debes aceptar nuestro Juramento de honestidad académica. Pulsa el botón siguiente para iniciar este proceso.",
|
|
||||||
""
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/HArFfMN.jpg",
|
|
||||||
"Plagio (nombre): acción y efecto de plagiar. Plagiar (verbo) - copiar en lo sustancial obras ajenas, dándolas como propias.",
|
|
||||||
"Al pulsar el botón siguiente, juras que todo el código en tus soluciones a los desafíos A) es código que tú o tu compañero escribieron personalmente, o B) proviene de librerías de código abierto como jQuery, o C) ha sido claramente atribuido a sus autores originales. También nos otorgas el permiso para auditar tus soluciones a los desafíos y revocar tu certificado si encontramos evidencia de plagio.",
|
|
||||||
"#"
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/2qn7tHp.jpg",
|
|
||||||
"Una imagen del texto \"Back End Development Certificate requirements\"",
|
|
||||||
"Confirmemos que has completado todos nuestros proyectos de desarrollo del lado del servidor. Pulsa el botón siguiente para hacer la verificación.",
|
|
||||||
"#"
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/16SIhHO.jpg",
|
|
||||||
"Una imagen de la palabra \"Congratulations\"",
|
|
||||||
"¡Felicitaciones! Hemos agregado tu certificado de desarrollo del lado del servidor. A menos que elijas no mostrar tus soluciones, este certificado será públicamente visible y verificable.",
|
|
||||||
""
|
|
||||||
]
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"fr": {
|
|
||||||
"title": "Demandez votre certificat de développement Back End",
|
|
||||||
"description": [
|
|
||||||
[
|
|
||||||
"//i.imgur.com/8v3t84p.jpg",
|
|
||||||
"Une image de notre certificat de développement Back End",
|
|
||||||
"Ce défi vous donnera votre certificat de développement Back End authentifié. Avant que nous ne vous le donnions, nous devons vérifier que vous avez complété tous les projets de développement Back End. Vous devez aussi accepter notre serment de droiture académique. Cliquez le bouton ci-dessous pour commencer cette procédure.",
|
|
||||||
""
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/HArFfMN.jpg",
|
|
||||||
"La définition du plagiat: Plagiat (nom) - copier le travail de quelqu'un d'autre et le presenter comme le votre sans lui en donner crédit.",
|
|
||||||
"En cliquant ci dessous, vous faites le serment que tout le code que vous avez mis en ligne A) est un code que vous ou un pair avez personellement écrit, ou B) qu'il provient de librairies open-source comme jQuery, ou C) qu'il a été cmairement attribué à ses auteurs originaux. Vous nous donnez la permission de consulter vos solutions aux défis et de révoquer votre certificat si nous y trouvons une preuve de plagiat.",
|
|
||||||
"#"
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/2qn7tHp.jpg",
|
|
||||||
"Une image du texte \"Back End Development Certificate requirements\"",
|
|
||||||
"Confirmons que vous avez complété nos projets de développement Back End. Cliquez sur le bouton ci dessous pour vérifier.",
|
|
||||||
"#"
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/16SIhHO.jpg",
|
|
||||||
"Une image du mot \"Congratulations\"",
|
|
||||||
"Félicitations! Nous avons ajouté votre certificat de développement Back End à votre page portfolio. A moins que vous ne choisissiez de cacher vos solutions, ce certificat restera publiquement visible et vérifiable.",
|
|
||||||
""
|
|
||||||
]
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@ -1,395 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "Dynamic Web Application Projects",
|
|
||||||
"order": 27,
|
|
||||||
"time": "250 hours",
|
|
||||||
"helpRoom": "HelpBackEnd",
|
|
||||||
"challenges": [
|
|
||||||
{
|
|
||||||
"id": "bd7158d8c443eddfaeb5bcef",
|
|
||||||
"title": "Get Set for our Dynamic Web Application Projects",
|
|
||||||
"description": [
|
|
||||||
[
|
|
||||||
"//i.imgur.com/4IZjWZ3.gif",
|
|
||||||
"A gif showing how to create a c9.io account.",
|
|
||||||
"We recommend building our full stack Basejump challenges on c9.io, a powerful browser-based development environment. This will save you hours of time that you would spend configuring your local computer to run Node.js and MongoDB - time you could instead spend coding.<br><br>Create a c9.io account by clicking the GitHub symbol in the upper right hand corner of the c9.io page. Click the big plus symbol to create a new workspace. Enter your email address when prompted.",
|
|
||||||
"https://c9.io"
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/F7i5Hhi.gif",
|
|
||||||
"A gif showing how to fill out the new workspace form",
|
|
||||||
"Instead of starting from scratch, we recommend using <a href='http://www.clementinejs.com/' target='_blank'>Clementine.js</a>, a full stack JavaScript \"boilerplate\" that already has some basic code written for you. Clementine.js has a detailed tutorial you can go through to build it yourself, but for now let's just clone its code.<br><br>On c9.io, give your workspace a name, then leave \"Template\" as custom and create your workspace from this GitHub url: <code>https://github.com/johnstonbl01/clementinejs-fcc.git</code>",
|
|
||||||
""
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/42m1vyr.gif",
|
|
||||||
"A gif showing you how to show hidden files.",
|
|
||||||
"Click the gear in the upper right corner of c9.io's file structure. Select \"Show Hidden Files\".",
|
|
||||||
""
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/qrE8xaK.gif",
|
|
||||||
"A gif showing you how to create a new file.",
|
|
||||||
"Right click and create a new file called <code>.env</code>.",
|
|
||||||
""
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/jkQX9SQ.gif",
|
|
||||||
"A gif showing you how to prep your environmental variables in your .env file.",
|
|
||||||
"Open your .env file and paste this into it, then save it:<br><br><code>GITHUB_KEY=<br>GITHUB_SECRET=<br>MONGO_URI=mongodb://localhost:27017/clementinejs<br>PORT=8080<br>APP_URL=http://localhost:8080/</code>",
|
|
||||||
""
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/f3DE7zB.gif",
|
|
||||||
"A gif showing you how to open c9.io's preview window.",
|
|
||||||
"Open up your application in a preview tab by clicking Window > Share > Application > Open.",
|
|
||||||
""
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/Ip0qUdQ.gif",
|
|
||||||
"A gif showing you how to create a GitHub app using c9.io's preview URL.",
|
|
||||||
"Create a GitHub app for authentication and choose an \"Application name\". For the homepage URL, paste the URL from your preview tab. You'll also paste the URL from your preview tab into \"Authorization callback URL\", then add to it: <code>auth/github/callback</code>",
|
|
||||||
"https://github.com/settings/applications/new"
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/qCUVRFb.gif",
|
|
||||||
"A gif showing you how to transfer GitHub's key and secret over to your .env file, as well as your c9.io URL.",
|
|
||||||
"GitHub will create an app and present you with a Client ID and a Client Secret. Set your <code>.env</code> file's <code>GITHUB_KEY</code> equal to the Client ID, and set your <code>.env</code> file's <code>GITHUB_SECRET</code> equal to the Client Secret. Copy the URL from your preview tab and paste it into your <code>.env</code> file as your <code>APP_URL</code>.",
|
|
||||||
""
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/2a20Vah.gif",
|
|
||||||
"A gif showing you how to install MongoDB and start it in c9.io's terminal.",
|
|
||||||
"In your terminal, install MongoDB by entering: <br><br><code>sudo apt-get install mongodb-org</code><br><br> then start MongoDB by entering:<br><br><code>mongod --smallfiles</code>",
|
|
||||||
""
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/dC55pWk.gif",
|
|
||||||
"A gif showing you how to open a new tab in c9.io's terminal.",
|
|
||||||
"Open a new terminal tab with the <code>+</code> button above your terminal, then run <code>npm install</code>",
|
|
||||||
""
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/54OC2Ro.gif",
|
|
||||||
"A gif showing you how to navigate to your preview tab and sign in to your new Clementine.js app.",
|
|
||||||
"Run <code>node server.js</code> to start the server. Refresh your preview tab. You should see the Clementine.js logo. Click \"sign in\" and accept GitHub's prompt to authorize the application.",
|
|
||||||
""
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/2IJfyvN.gif",
|
|
||||||
"A gif showing you how to click the button to trigger an AJAX action with Clementine.js and how to look at your user profile from the GitHub authentication data.",
|
|
||||||
"Click the \"Click Me\" button and you'll see that it increments the number clicks. Click the profile button and you'll see that it has your GitHub information.",
|
|
||||||
""
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/bjO5pnq.gif",
|
|
||||||
"A gif showing you how to create a new GitHub repository and push your code up to it.",
|
|
||||||
"Create a new GitHub repository. Then copy its .git URL.<br><br>Return to c9.io's terminal and set your GitHub remote URL: <code>git remote set-url origin</code> followed by the URL you copied from GitHub.<br><br>Run <code>git push origin master</code>.<br><br>Now tab back to GitHub and refresh, and you'll see that your code is now on GitHub.",
|
|
||||||
"https://github.com/new"
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/Qn0K65B.gif",
|
|
||||||
"A gif showing you how to add add-ons to Heroku.",
|
|
||||||
"We will soon add instructions for getting Clementine running on Heroku. For now, develop your Basejumps right on c9.io.",
|
|
||||||
""
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"challengeSeed": [],
|
|
||||||
"tests": [],
|
|
||||||
"type": "Waypoint",
|
|
||||||
"challengeType": 7,
|
|
||||||
"isRequired": false,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Prepárate para nuestros Proyectos de Desarrollo en el lado del servidor",
|
|
||||||
"description": [
|
|
||||||
[
|
|
||||||
"//i.imgur.com/4IZjWZ3.gif",
|
|
||||||
"Una imagen gif que te muestra cómo crear una cuenta en c9.io.",
|
|
||||||
"Te recomendamos resolver nuestros desafíos de pila completa (full stack) en c9.io, un poderoso ambiente de desarrollo basado en tu navegador. Esto te ahorrará muchas horas que utilizarías configurando tu computadora para correr Node.js y MongoDB - tiempo que podrías utilizar escribiendo código. <br>Crea una cuenta en c9.io pulsando el símbolo de GitHub en la esquina superior derecha de la página de c9.io. Pulsa el botón con el símbolo de suma para crear una área de trabajo nueva. Introduce tu dirección de correo electrónico cuando se te solicite.",
|
|
||||||
"https://c9.io"
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/F7i5Hhi.gif",
|
|
||||||
"Una imagen gif que te muestra cómo llenar el formulario para crear un área de trabajo nueva",
|
|
||||||
"En vez de iniciar desde cero, recomendamos utilizar Clementine.js, un modelo (<em>bolierplate</em>) de JavaScript pila completa (full stack) que viene con código básico ya escrito para ti. Clementine.js tiene un tutorial detallado que puedes seguir para construirlo por ti mismo, pero por ahora simplemente vamos a clonarlo. En c9.io, dale un nombre a tu área de trabajo, luego deja \"Plantilla\" (\"Template\") como personalizado y crea tu espacio de trabajo usando el siguiente url de GitHub: <code>https://github.com/johnstonbl01/clementinejs-fcc.git</code>",
|
|
||||||
""
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/42m1vyr.gif",
|
|
||||||
"Una imagen gif que te muestra cómo mostrar los archivos ocultos.",
|
|
||||||
"Pulsa el engrane en la esquina superior derecha del árbol de archivos de c9.io. Selecciona \"show hidden files\".",
|
|
||||||
""
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/qrE8xaK.gif",
|
|
||||||
"Una imagen gif que te muestra cómo crear un archivo nuevo.",
|
|
||||||
"Haciendo clic derecho, crea un nuevo archivo llamado <code>.env</code>.",
|
|
||||||
""
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/jkQX9SQ.gif",
|
|
||||||
"Una imagen gif que te muestra cómo preparar tus variables de ambiente en tu archivo .env.",
|
|
||||||
"Abre tu archivo .env pega el siguiente código, y luego guárdalo: <br><code>GITHUB_KEY=<br>GITHUB_SECRET=<br>MONGO_URI=mongodb://localhost:27017/clementinejs<br>PORT=8080<br>APP_URL=http://localhost:8080/</code>",
|
|
||||||
""
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/f3DE7zB.gif",
|
|
||||||
"Una imagen gif que te muestra cómo abir la vista previa de la ventana de c9.io.",
|
|
||||||
"Abre tu aplicación en una pestaña de vista previa pulsando window > share > application > open.",
|
|
||||||
""
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/Ip0qUdQ.gif",
|
|
||||||
"Una imagen gif que te muestra cómo crear una aplicación de GitHub usando la URL de vista previa de c9.io.",
|
|
||||||
"Crea una aplicación de GitHub para autenticación y elige un \"Nombre de aplicación\". Para la URL de inicio (homepage), pega la URL de tu pestaña de vista previa. También debes pegar la URL de tu pestaña de vista previa en <code>Authorization callback URL</code>, agrégale: <code>auth/github/callback</code>",
|
|
||||||
"https://github.com/settings/applications/new"
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/qCUVRFb.gif",
|
|
||||||
"Una imagen gif que te muestra cómo transferir tu llave (key) y tu código secreto (secret) de GitHub a tu archivo .env, así como tu URL de c9.io.",
|
|
||||||
"GitHub creará una aplicación y te entregará un ID de cliente (Client ID) y un Código secreto de cliente (Client Secret). Haz que el GITHUB_KEY en tu archivo .env sea igual al ID de cliente, y haz que tu GITHUB_SECRET en el archivo .env sea igual al Código secreto de cliente. Copia la URL de tu pestaña de vista previa y pégala en tu archivo .env como tu APP_URL.",
|
|
||||||
""
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/2a20Vah.gif",
|
|
||||||
"Una imagen gif que te muestra cómo iniciar mongoDB en la terminal de c9.io.",
|
|
||||||
"En tu terminal, instala MongoDB usando el siguiente comando: <br><br><code>sudo apt-get install mongodb-org</code><br><br>. Inicia MongoDB con el siguiente comando: <code>mongod --smallfiles</code>",
|
|
||||||
""
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/dC55pWk.gif",
|
|
||||||
"Una imagen gif que te muestra cómo abrir una nueva pestaña en la terminal de c9.io.",
|
|
||||||
"Abre una nueva pestaña de terminal pulsando el botón de + sobre tu terminal, luego ejecuta <code>npm install</code>",
|
|
||||||
""
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/54OC2Ro.gif",
|
|
||||||
"Una imagen gif que te muestra cómo navegar a tu pestaña de vista previa e ingresar a tu nueva aplicación Clementine.js.",
|
|
||||||
"Ejecuta <code>node server.js</code> para iniciar el servidor. Actualiza tu pestaña de vista previa. Deberías poder ver el logo de Clementine.js. Pulsa \"sign in\" y acepta la solicitud de GitHub para autorizar la aplicación.",
|
|
||||||
""
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/2IJfyvN.gif",
|
|
||||||
"Una imagen gif que te muestra cómo pulsar un botón para desencadenar una acción AJAX con Clementine.js y cómo ver tu perfil de usuario en los datos de autenticación provistos por GitHub.",
|
|
||||||
"Pulsa el botón que dice \"click me\" y verás que se incrementa el número de clics. Pulsa el botón de perfil (profile) y verás la información de tu perfil de GitHub.",
|
|
||||||
""
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/bjO5pnq.gif",
|
|
||||||
"Una imagen gif que te muestra cómo crear un nuevo repositorio de GitHub GitHub y empujar allí tu código.",
|
|
||||||
"Crea un nuevo repositorio en GitHub. Luego copia su ULR .git. <br>Regresa a tu terminal de c9.io y establece tu URL remota de GitHub: <code>git remote set-url origin</code> seguido de la URL que copiaste de GitHub. <br>Ejecuta <code>git push origin master</code>. <br>Ahora ve de regreso a la página de GitHub y actualízala. Verás que tu código ahora está ahora en GitHub.",
|
|
||||||
"https://github.com/new"
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"//i.imgur.com/Qn0K65B.gif",
|
|
||||||
"Una imagen gif que te muestra cómo agregar complementos a Heroku.",
|
|
||||||
"Pronto agregaremos instrucciones para hacer que Clementine corra en Heroku. Por ahora, desarrolla tus Basejumps en c9.io.",
|
|
||||||
""
|
|
||||||
]
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "bd7158d8c443eddfaeb5bdef",
|
|
||||||
"title": "Build a Voting App",
|
|
||||||
"description": [
|
|
||||||
"<strong>Objective:</strong> Build a full stack JavaScript app that is functionally similar to this: <a href='https://fcc-voting-arthow4n.herokuapp.com/' target='_blank'>https://fcc-voting-arthow4n.herokuapp.com/</a> and deploy it to Heroku.",
|
|
||||||
"Note that for each project, you should create a new GitHub repository and a new Heroku project. If you can't remember how to do this, revisit <a href='/challenges/get-set-for-our-dynamic-web-application-projects'>https://freecodecamp.com/challenges/get-set-for-our-dynamic-web-application-projects</a>.",
|
|
||||||
"Here are the specific user stories you should implement for this project:",
|
|
||||||
"<strong>User Story:</strong> As an authenticated user, I can keep my polls and come back later to access them.",
|
|
||||||
"<strong>User Story:</strong> As an authenticated user, I can share my polls with my friends.",
|
|
||||||
"<strong>User Story:</strong> As an authenticated user, I can see the aggregate results of my polls.",
|
|
||||||
"<strong>User Story:</strong> As an authenticated user, I can delete polls that I decide I don't want anymore.",
|
|
||||||
"<strong>User Story:</strong> As an authenticated user, I can create a poll with any number of possible items.",
|
|
||||||
"<strong>User Story:</strong> As an unauthenticated or authenticated user, I can see and vote on everyone's polls.",
|
|
||||||
"<strong>User Story:</strong> As an unauthenticated or authenticated user, I can see the results of polls in chart form. (This could be implemented using Chart.js or Google Charts.)",
|
|
||||||
"<strong>User Story:</strong> As an authenticated user, if I don't like the options on a poll, I can create a new option.",
|
|
||||||
"Once you've finished implementing these user stories, click the \"I've completed this challenge\" button and enter the URLs for both your GitHub repository and your live app running on Heroku.",
|
|
||||||
"You can get feedback on your project by sharing it with your friends on Facebook."
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"JBKnbY_fdg4"
|
|
||||||
],
|
|
||||||
"tests": [],
|
|
||||||
"type": "basejump",
|
|
||||||
"challengeType": 4,
|
|
||||||
"isRequired": true,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"description": [
|
|
||||||
"<strong>Objetivo:</strong> Construye una aplicación de pila completa (full stack) en JavaScript que funcione de forma similar al siguiente proyecto: <a href='https://fcc-voting-arthow4n.herokuapp.com/' target='_blank'>https://fcc-voting-arthow4n.herokuapp.com/</a> y despliégala en Heroku.",
|
|
||||||
"Ten en cuenta que para cada proyecto, debes crear un nuevo repositorio en GitHub y un nuevo proyecto en Heroku. Si no recuerdas cómo hacerlo, visita de nuevo <a href='/challenges/get-set-for-our-dynamic-web-application-projects'>https://freecodecamp.com/challenges/get-set-for-our-dynamic-web-application-projects</a>.",
|
|
||||||
"Estas son las Historias de usuario que debes satisfacer para este proyecto:",
|
|
||||||
"<strong>Historia de usuario:</strong> Como un usuario autenticado, puedo guardar mis votaciones y acceder a ellas posteriormente.",
|
|
||||||
"<strong>Historia de usuario:</strong> Como un usuario autenticado, puedo compartir mis votaciones con mis amigos.",
|
|
||||||
"<strong>Historia de usuario:</strong> Como un usuario autenticado, puedo ver los resultados agregados de mis votaciones.",
|
|
||||||
"<strong>Historia de usuario:</strong> Como un usuario autenticado, puedo eliminar votaciones que ya no quiero tener guardadas.",
|
|
||||||
"<strong>Historia de usuario:</strong> Como un usuario autenticado, puedo crear una votación con cualquier número de opciones.",
|
|
||||||
"<strong>Historia de usuario:</strong> Como un usuario autenticado o no autenticado, puedo ver y votar en las votaciones de otros.",
|
|
||||||
"<strong>Historia de usuario:</strong> Como un usuario autenticado o no autenticado, puedo ver los resultados de las votaciones por medio de un gráfico. (Esto podría implementarse utilizando Chart.js o Google Charts.)",
|
|
||||||
"<strong>Historia de usuario:</strong> Como un usuario autenticado, si no me gustan las opciones en una votación, puedo crear una nueva opción.",
|
|
||||||
"Una vez hayas terminado de implementar estas historias de usuario, pulsa el botón de \"I've completed this challenge\" e incluye las URLs de tu repositorio GitHub y de tu aplicación corriendo en Heroku.",
|
|
||||||
"Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Cuarto de revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "bd7158d8c443eddfaeb5bdff",
|
|
||||||
"title": "Build a Nightlife Coordination App",
|
|
||||||
"description": [
|
|
||||||
"<strong>Objective:</strong> Build a full stack JavaScript app that is functionally similar to this: <a href='http://whatsgoinontonight.herokuapp.com/' target='_blank'>http://whatsgoinontonight.herokuapp.com/</a> and deploy it to Heroku.",
|
|
||||||
"Note that for each project, you should create a new GitHub repository and a new Heroku project. If you can't remember how to do this, revisit <a href='/challenges/get-set-for-our-dynamic-web-application-projects'>https://freecodecamp.com/challenges/get-set-for-our-dynamic-web-application-projects</a>.",
|
|
||||||
"Here are the specific user stories you should implement for this project:",
|
|
||||||
"<strong>User Story:</strong> As an unauthenticated user, I can view all bars in my area.",
|
|
||||||
"<strong>User Story:</strong> As an authenticated user, I can add myself to a bar to indicate I am going there tonight.",
|
|
||||||
"<strong>User Story:</strong> As an authenticated user, I can remove myself from a bar if I no longer want to go there.",
|
|
||||||
"<strong>User Story:</strong> As an unauthenticated user, when I login I should not have to search again.",
|
|
||||||
"<strong>Hint:</strong> Try using the <a href='https://www.yelp.com/developers/documentation/v2/overview' target='_blank'>Yelp API</a> to find venues in the cities your users search for. If you use Yelp's API, be sure to mention so in your app.",
|
|
||||||
"Once you've finished implementing these user stories, click the \"I've completed this challenge\" button and enter the URLs for both your GitHub repository and your live app running on Heroku.",
|
|
||||||
"You can get feedback on your project by sharing it with your friends on Facebook."
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"Gei7QfPmcMw"
|
|
||||||
],
|
|
||||||
"tests": [],
|
|
||||||
"type": "basejump",
|
|
||||||
"challengeType": 4,
|
|
||||||
"isRequired": true,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"description": [
|
|
||||||
"<strong>Objetivo:</strong> Construye una aplicación de pila completa (full stack) en JavaScript que funcione de forma similar al siguiente proyecto: <a href='http://whatsgoinontonight.herokuapp.com/' target='_blank'>http://whatsgoinontonight.herokuapp.com/</a> y despliégala en Heroku.",
|
|
||||||
"Ten en cuenta que para cada proyecto, debes crear un nuevo repositorio en GitHub y un nuevo proyecto en Heroku. Si no recuerdas cómo hacerlo, visita de nuevo <a href='/challenges/get-set-for-our-dynamic-web-application-projects'>https://freecodecamp.com/challenges/get-set-for-our-dynamic-web-application-projects</a>.",
|
|
||||||
"Estas son las Historias de usuario que debes satisfacer para este Basejump:",
|
|
||||||
"<strong>Historia de usuario:</strong> Como un usuario no autenticado, puedo ver todos los bares en mi área.",
|
|
||||||
"<strong>Historia de usuario:</strong> Como un usuario autenticado, puedo agregarme a mí mismo a un bar para indicar que voy a estar allí esta noche.",
|
|
||||||
"<strong>Historia de usuario:</strong> Como un usuario autenticado, puedo removerme de un bar si ya no pienso ir allí.",
|
|
||||||
"<strong>Historia de usuario:</strong> Como un usuario no autenticado, cuando accedo a mi cuenta no debo tener la necesidad de buscar de nuevo.",
|
|
||||||
"<span class='text-info'>Pista:</span> Prueba utilizar el <a href='https://www.yelp.com/developers/documentation/v2/overview' target='_blank'>API de Yelp</a> para encontrar lugares en las ciudades donde tus usuarios buscan. Si utilizas el API de Yelp, asegúrate de mencionarlo en tu aplicación.",
|
|
||||||
"Una vez hayas terminado de implementar estas historias de usuario, pulsa el botón de \"I've completed this challenge\" e incluye las URLs de tu repositorio GitHub y de tu aplicación corriendo en Heroku.",
|
|
||||||
"Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Cuarto de revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "bd7158d8c443eddfaeb5bd0e",
|
|
||||||
"title": "Chart the Stock Market",
|
|
||||||
"description": [
|
|
||||||
"<strong>Objective:</strong> Build a full stack JavaScript app that is functionally similar to this: <a href='http://watchstocks.herokuapp.com/' target='_blank'>http://watchstocks.herokuapp.com/</a> and deploy it to Heroku.",
|
|
||||||
"Note that for each project, you should create a new GitHub repository and a new Heroku project. If you can't remember how to do this, revisit <a href='/challenges/get-set-for-our-dynamic-web-application-projects'>https://freecodecamp.com/challenges/get-set-for-our-dynamic-web-application-projects</a>.",
|
|
||||||
"Here are the specific user stories you should implement for this project:",
|
|
||||||
"<strong>User Story:</strong> I can view a graph displaying the recent trend lines for each added stock.",
|
|
||||||
"<strong>User Story:</strong> I can add new stocks by their symbol name.",
|
|
||||||
"<strong>User Story:</strong> I can remove stocks.",
|
|
||||||
"<strong>User Story:</strong> I can see changes in real-time when any other user adds or removes a stock. For this you will need to use Web Sockets.",
|
|
||||||
"Once you've finished implementing these user stories, click the \"I've completed this challenge\" button and enter the URLs for both your GitHub repository and your live app running on Heroku.",
|
|
||||||
"You can get feedback on your project by sharing it with your friends on Facebook."
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"CENs50cnRgM"
|
|
||||||
],
|
|
||||||
"tests": [],
|
|
||||||
"type": "basejump",
|
|
||||||
"challengeType": 4,
|
|
||||||
"isRequired": true,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"description": [
|
|
||||||
"<strong>Objetivo:</strong> Construye una aplicación de pila completa (full stack) en JavaScript que funcione de forma similar al siguiente proyecto: <a href='http://watchstocks.herokuapp.com/' target='_blank'>http://watchstocks.herokuapp.com/</a> y despliégalo en Heroku.",
|
|
||||||
"Ten en cuenta que para cada proyecto, debes crear un nuevo repositorio en GitHub y un nuevo proyecto en Heroku. Si no recuerdas cómo hacerlo, visita de nuevo <a href='/challenges/get-set-for-our-dynamic-web-application-projects'>https://freecodecamp.com/challenges/get-set-for-our-dynamic-web-application-projects</a>.",
|
|
||||||
"Estas son las Historias de usuario que debes satisfacer para este Basejump:",
|
|
||||||
"<strong>Historia de usuario:</strong> Como usuario, puedo ver un gráfico que me muestre las líneas de tendencia recientes para cada acción agregada.",
|
|
||||||
"<strong>Historia de usuario:</strong> Como usuario, puedo agregar nuevas acciones por su símbolo.",
|
|
||||||
"<strong>Historia de usuario:</strong> Como usuario, puedo remover acciones.",
|
|
||||||
"<strong>Historia de usuario:</strong> Como usuario, puedo ver cambios en tiempo real cuando algún otro usuario agrega o remueve una acción. Puedes usar Web Sockets para hacer esto.",
|
|
||||||
"Una vez hayas terminado de implementar estas historias de usuario, pulsa el botón de \"I've completed this challenge\" e incluye las URLs de tu repositorio GitHub y de tu aplicación corriendo en Heroku.",
|
|
||||||
"Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Cuarto de revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "bd7158d8c443eddfaeb5bd0f",
|
|
||||||
"title": "Manage a Book Trading Club",
|
|
||||||
"description": [
|
|
||||||
"<strong>Objective:</strong> Build a full stack JavaScript app that is functionally similar to this: <a href='http://bookjump.herokuapp.com/' target='_blank'>http://bookjump.herokuapp.com/</a> and deploy it to Heroku.",
|
|
||||||
"Note that for each project, you should create a new GitHub repository and a new Heroku project. If you can't remember how to do this, revisit <a href='/challenges/get-set-for-our-dynamic-web-application-projects'>https://freecodecamp.com/challenges/get-set-for-our-dynamic-web-application-projects</a>.",
|
|
||||||
"Here are the specific user stories you should implement for this project:",
|
|
||||||
"<strong>User Story:</strong> I can view all books posted by every user.",
|
|
||||||
"<strong>User Story:</strong> I can add a new book.",
|
|
||||||
"<strong>User Story:</strong> I can update my settings to store my full name, city, and state.",
|
|
||||||
"<strong>User Story:</strong> I can propose a trade and wait for the other user to accept the trade.",
|
|
||||||
"Once you've finished implementing these user stories, click the \"I've completed this challenge\" button and enter the URLs for both your GitHub repository and your live app running on Heroku.",
|
|
||||||
"You can get feedback on your project by sharing it with your friends on Facebook."
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"mzElFmbGqQI"
|
|
||||||
],
|
|
||||||
"tests": [],
|
|
||||||
"type": "basejump",
|
|
||||||
"challengeType": 4,
|
|
||||||
"isRequired": true,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"description": [
|
|
||||||
"<strong>Objetivo:</strong> Construye una aplicación de pila completa (full stack) en JavaScript que funcione de forma similar al siguiente proyecto: <a href='http://bookjump.herokuapp.com/' target='_blank'>http://bookjump.herokuapp.com/</a> y despliégalo en Heroku.",
|
|
||||||
"Ten en cuenta que para cada proyecto, debes crear un nuevo repositorio en GitHub y un nuevo proyecto en Heroku. Si no recuerdas cómo hacerlo, visita de nuevo <a href='/challenges/get-set-for-our-dynamic-web-application-projects'>https://freecodecamp.com/challenges/get-set-for-our-dynamic-web-application-projects</a>.",
|
|
||||||
"Estas son las Historias de usuario que debes satisfacer para este Basejump:",
|
|
||||||
"<strong>Historia de usuario:</strong> Puedo ver todos los libros agregados por cada usuario.",
|
|
||||||
"<strong>Historia de usuario:</strong> Puedo agregar un nuevo libro.",
|
|
||||||
"<strong>Historia de usuario:</strong> Puedo actualizar mi configuración para que almacene mi nombre completo, ciudad y Estado.",
|
|
||||||
"<strong>Historia de usuario:</strong> Puedo proponer un intercambio y esperar a que algún otro usuario acepte el trato.",
|
|
||||||
"Una vez hayas terminado de implementar estas historias de usuario, pulsa el botón de \"I've completed this challenge\" e incluye las URLs de tu repositorio GitHub y de tu aplicación corriendo en Heroku.",
|
|
||||||
"Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Cuarto de revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "bd7158d8c443eddfaeb5bdee",
|
|
||||||
"title": "Build a Pinterest Clone",
|
|
||||||
"description": [
|
|
||||||
"<strong>Objective:</strong> Build a full stack JavaScript app that is functionally similar to this: <a href='http://pintech.herokuapp.com/' target='_blank'>http://pintech.herokuapp.com/</a> and deploy it to Heroku.",
|
|
||||||
"Note that for each project, you should create a new GitHub repository and a new Heroku project. If you can't remember how to do this, revisit <a href='/challenges/get-set-for-our-dynamic-web-application-projects'>https://freecodecamp.com/challenges/get-set-for-our-dynamic-web-application-projects</a>.",
|
|
||||||
"Here are the specific user stories you should implement for this project:",
|
|
||||||
"<strong>User Story:</strong> As an unauthenticated user, I can login with Twitter.",
|
|
||||||
"<strong>User Story:</strong> As an authenticated user, I can link to images.",
|
|
||||||
"<strong>User Story:</strong> As an authenticated user, I can delete images that I've linked to.",
|
|
||||||
"<strong>User Story:</strong> As an authenticated user, I can see a Pinterest-style wall of all the images I've linked to.",
|
|
||||||
"<strong>User Story:</strong> As an unauthenticated user, I can browse other users' walls of images.",
|
|
||||||
"<strong>User Story:</strong> As an authenticated user, if I upload an image that is broken, it will be replaced by a placeholder image. (can use jQuery broken image detection)",
|
|
||||||
"<strong>Hint:</strong> <a href='http://masonry.desandro.com/' target='_blank'>Masonry.js</a> is a library that allows for Pinterest-style image grids.",
|
|
||||||
"Once you've finished implementing these user stories, click the \"I've completed this challenge\" button and enter the URLs for both your GitHub repository and your live app running on Heroku.",
|
|
||||||
"You can get feedback on your project by sharing it with your friends on Facebook."
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"adrOtJCVP04"
|
|
||||||
],
|
|
||||||
"tests": [],
|
|
||||||
"type": "basejump",
|
|
||||||
"challengeType": 4,
|
|
||||||
"isRequired": true,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"description": [
|
|
||||||
"<strong>Objetivo:</strong> Construye una aplicación de pila completa (full stack) en JavaScript que funcione de forma similar al siguiente proyecto: <a href='http://pintech.herokuapp.com/' target='_blank'>http://pintech.herokuapp.com/</a> y despliégalo en Heroku.",
|
|
||||||
"Ten en cuenta que para cada proyecto, debes crear un nuevo repositorio en GitHub y un nuevo proyecto en Heroku. Si no recuerdas cómo hacerlo, visita de nuevo <a href='/challenges/get-set-for-our-dynamic-web-application-projects'>https://freecodecamp.com/challenges/get-set-for-our-dynamic-web-application-projects</a>.",
|
|
||||||
"Estas son las Historias de usuario que debes satisfacer para este Basejump:",
|
|
||||||
"<strong>Historia de usuario:</strong> Como usuario autenticado, puedo acceder a mi cuenta con Twitter.",
|
|
||||||
"<strong>Historia de usuario:</strong> Como usuario autenticado, puedo agregar enlaces a imágenes.",
|
|
||||||
"<strong>Historia de usuario:</strong> Como usuario autenticado, puedo elimiar imágenes que he agregado.",
|
|
||||||
"<strong>Historia de usuario:</strong> Como usuario autenticado, puedo ver un muro al estilo de Pinterest con todas las imágenes para las que he agregado un enlace.",
|
|
||||||
"<strong>Historia de usuario:</strong> Como usuario no autenticado, puedo navegar los muros de imágenes de otros usuarios.",
|
|
||||||
"<strong>Historia de usuario:</strong> Como usuario autenticado, si agrego una imagen corrupta, será reemplazada por una imagen predeterminada. (Puedes utilizar la detección de imágenes corruptas de jQuery)",
|
|
||||||
"<strong>Pista:</strong> <a href='http://masonry.desandro.com/' target='_blank'>Masonry.js</a> es una librería que permite crear cuadrículas de imágenes al estilo de Pinterest.",
|
|
||||||
"Una vez hayas terminado de implementar estas historias de usuario, pulsa el botón de \"I've completed this challenge\" e incluye las URLs de tu repositorio GitHub y de tu aplicación corriendo en Heroku.",
|
|
||||||
"Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Cuarto de revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@ -1,78 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "Git",
|
|
||||||
"order": 24,
|
|
||||||
"time": "3 hours",
|
|
||||||
"helpRoom": "HelpBackEnd",
|
|
||||||
"challenges": [
|
|
||||||
{
|
|
||||||
"id": "bd7353d8c341eddeaeb5bd0f",
|
|
||||||
"title": "Save your Code Revisions Forever with Git",
|
|
||||||
"description": [
|
|
||||||
"We'll build this Waypoint on Cloud 9, a powerful online code editor with a full Ubuntu Linux workspace, all running in the cloud.",
|
|
||||||
"If you don't already have Cloud 9 account, create one now at <a href='http://c9.io' target='_blank'>http://c9.io</a>.",
|
|
||||||
"Open up <a href='http://c9.io' target='_blank'>http://c9.io</a> and sign in to your account.",
|
|
||||||
"Click on the \"+\" icon at the top right of the c9.io page to create a new workspace.",
|
|
||||||
"Give your workspace a name and an optional description.",
|
|
||||||
"Choose Node.js in the selection area below the name field.",
|
|
||||||
"Click the \"Create workspace\" button.",
|
|
||||||
"Once C9 builds and loads your workspace, you should see a terminal window in the lower right hand corner. In this window use the following commands. You don't need to know what these mean at this point.",
|
|
||||||
"Install <code>git-it</code> with this command: <code>npm install -g git-it</code>",
|
|
||||||
"Before you start, read <a href='https://help.github.com/articles/adding-a-new-ssh-key-to-your-github-account/' target='_blank'>Adding a new SSH key to your GitHub account</a> if you have two-factor authentication set up on your GitHub account.",
|
|
||||||
"Now start the tutorial by running <code>git-it</code>.",
|
|
||||||
"Note that you can resize the c9.io's windows by dragging their borders.",
|
|
||||||
"Make sure that you are always in your project's \"workspace\" directory. You can always navigate back to this directory by running this command: <code>cd ~/workspace</code>.",
|
|
||||||
"You can view this Node School module's source code on GitHub at <a href='https://github.com/jlord/git-it' target='_blank'>https://github.com/jlord/git-it</a>.",
|
|
||||||
"Complete \"Get Git\"",
|
|
||||||
"Complete \"Repository\"",
|
|
||||||
"Complete \"Commit to it\"",
|
|
||||||
"Complete \"Githubbin\"",
|
|
||||||
"Complete \"Remote Control\"",
|
|
||||||
"Complete \"Forks and Clones\"",
|
|
||||||
"Complete \"Branches aren't just for Birds\"",
|
|
||||||
"Complete \"It's a Small World\"",
|
|
||||||
"Complete \"Pull, Never out of Date\"",
|
|
||||||
"Complete \"Requesting you Pull, Please\"",
|
|
||||||
"Complete \"Merge Tada!\"",
|
|
||||||
"Once you've completed these steps, move on to our next challenge."
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"oznlW01iKRA"
|
|
||||||
],
|
|
||||||
"tests": [],
|
|
||||||
"type": "waypoint",
|
|
||||||
"challengeType": 2,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Guarda las revisiones de tu código por siempre con Git",
|
|
||||||
"description": [
|
|
||||||
"Haremos este desafío en Cloud 9, un poderoso editor en línea con un ambiente de trabajo Ubuntu Linux completo, corriendo totalmente en la nube.",
|
|
||||||
"Si todavía no tienes una cuenta en Cloud 9, crea una ahora en <a href='http://c9.io' target='_blank'>http://c9.io</a>.",
|
|
||||||
"Abre <a href='http://c9.io' target='_blank'>http://c9.io</a> y accede a tu cuenta.",
|
|
||||||
"Pulsa el icono \"+\" en la parte superior derecha de la página de c9.io para crear un nuevo espacio de trabajo.",
|
|
||||||
"Dale un nombre a tu espacio de trabajo. Opcionalmente también puede escribir una descripción.",
|
|
||||||
"Elije Node.js entre las opciones en el área debajo del campo donde escribiste el nombre.",
|
|
||||||
"Pulsa el botón que dice \"Create workspace\".",
|
|
||||||
"Una vez C9 termine de cargar tu espacio de trabajo, verás una terminal en la ventana de la esquina inferior derecha. Introduce los comandos siguientes en esa ventana (no te preocupes si no entiendes por ahora qué es lo que hacen):",
|
|
||||||
"Instala <code>git-it</code> usando el siguiente comando: <code>npm install -g git-it</code>",
|
|
||||||
"Ahora inicia el tutorial ejecutando <code>git-it</code>",
|
|
||||||
"Puedes modificar el tamaño de las ventanas en c9.io arrastrándolas por el borde.",
|
|
||||||
"Asegúrate de que siempre te encuentres en el directorio \"workspace\" de tu proyecto. Puedes regresar a este directorio cuando quieras usando el comando: <code>cd ~/workspace</code>.",
|
|
||||||
"Puedes ver el código fuente de este módulo de Node School en GitHub visitando <a href='https://github.com/jlord/git-it' target='_blank'>https://github.com/jlord/git-it</a>.",
|
|
||||||
"Completa \"Get Git\"",
|
|
||||||
"Completa \"Repository\"",
|
|
||||||
"Completa \"Commit to it\"",
|
|
||||||
"Completa \"Githubbin\"",
|
|
||||||
"Completa \"Remote Control\"",
|
|
||||||
"Completa \"Forks and Clones\"",
|
|
||||||
"Completa \"Branches aren't just for Birds\"",
|
|
||||||
"Completa \"It's a Small World\"",
|
|
||||||
"Completa \"Pull, Never out of Date\"",
|
|
||||||
"Completa \"Requesting you Pull, Please\"",
|
|
||||||
"Completa \"Merge Tada!\"",
|
|
||||||
"Una vez hayas terminado con este tutorial, puedes continuar con el siguiente desafío."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@ -1,78 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "MongoDB",
|
|
||||||
"order": 25,
|
|
||||||
"time": "3 hours",
|
|
||||||
"helpRoom": "HelpBackEnd",
|
|
||||||
"challenges": [
|
|
||||||
{
|
|
||||||
"id": "bd7243d8c341eddeaeb5bd0f",
|
|
||||||
"title": "Store Data in MongoDB",
|
|
||||||
"description": [
|
|
||||||
"We'll build this Waypoint on Cloud 9, a powerful online code editor with a full Ubuntu Linux workspace, all running in the cloud.",
|
|
||||||
"If you don't already have Cloud 9 account, create one now at <a href='http://c9.io' target='_blank'>http://c9.io</a>.",
|
|
||||||
"Open up <a href='http://c9.io' target='_blank'>http://c9.io</a> and sign in to your account.",
|
|
||||||
"Click on the \"+\" icon at the top right of the c9.io page to create a new workspace.",
|
|
||||||
"Give your workspace a name and an optional description.",
|
|
||||||
"Choose Node.js in the selection area below the name field.",
|
|
||||||
"Click the \"Create workspace\" button.",
|
|
||||||
"Once C9 builds and loads your workspace, you should see a terminal window in the lower right hand corner. In this window use the following commands. You don't need to know what these mean at this point.",
|
|
||||||
"Install <code>learnyoumongo</code> with this command: <code>npm install learnyoumongo -g</code>",
|
|
||||||
"Install MongoDB with this command: <code>sudo apt-get install mongodb-org</code>",
|
|
||||||
"Set up your mongod alias by following the directions at <a href='https://community.c9.io/t/setting-up-mongodb/1717' target='_blank'>https://community.c9.io/t/setting-up-mongodb/1717</a>.",
|
|
||||||
"Now start the tutorial by running <code>learnyoumongo</code>.",
|
|
||||||
"Whenever you run a command that includes <code>mongod</code> on c9.io, use <code>./mongod</code> instead. Together with the commands used in Step 11, this adds additional parameters to the <code>mongod</code> command to allow MongoDB to run in the C9 environment.",
|
|
||||||
"Note that you can resize the c9.io's windows by dragging their borders.",
|
|
||||||
"Make sure that you are always in your project's \"workspace\" directory. You can always navigate back to this directory by running this command: <code>cd ~/workspace</code>.",
|
|
||||||
"You can view this Node School module's source code on GitHub at <a href='https://github.com/evanlucas/learnyoumongo'>https://github.com/evanlucas/learnyoumongo</a>.",
|
|
||||||
"Complete \"Mongod\"",
|
|
||||||
"Complete \"Connect\"<br><br><strong>Note:</strong> Use the command <code>mongod --port 27017 --smallfiles</code> in place of <code>mongod --port 27017 --dbpath=./data</code> to avoid a duplicate parameter error.<br><br><code>--dbpath=./data</code> is already included in the <code>./mongod</code> command.",
|
|
||||||
"Complete \"Find\"",
|
|
||||||
"Complete \"Find Project\"",
|
|
||||||
"Complete \"Insert\"",
|
|
||||||
"Complete \"Update\"",
|
|
||||||
"Complete \"Remove\"",
|
|
||||||
"Complete \"Count\"",
|
|
||||||
"Complete \"Aggregate\"",
|
|
||||||
"Once you've completed these steps, move on to our next challenge."
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"amdJwuJJt68"
|
|
||||||
],
|
|
||||||
"tests": [],
|
|
||||||
"type": "waypoint",
|
|
||||||
"challengeType": 2,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Guarda tus datos en MongoDB",
|
|
||||||
"description": [
|
|
||||||
"Haremos este desafío en Cloud 9, un poderoso editor en línea con un ambiente de trabajo Ubuntu Linux completo, corriendo totalmente en la nube.",
|
|
||||||
"Si todavía no tienes una cuenta en Cloud 9, crea una ahora en <a href='http://c9.io' target='_blank'>http://c9.io</a>.",
|
|
||||||
"Abre <a href='http://c9.io' target='_blank'>http://c9.io</a> y accede a tu cuenta.",
|
|
||||||
"Pulsa el icono \"+\" en la parte superior derecha de la página de c9.io para crear un nuevo espacio de trabajo.",
|
|
||||||
"Dale un nombre a tu espacio de trabajo. Opcionalmente también puedes escribir una descripción.",
|
|
||||||
"Elige Node.js entre las opciones en el área debajo del campo donde escribiste el nombre.",
|
|
||||||
"Haz click en el botón que dice \"Create workspace\".",
|
|
||||||
"Una vez C9 termine de cargar tu espacio de trabajo, verás una terminal en la ventana de la esquina inferior derecha. Introduce los comandos siguientes en esa ventana (no te preocupes si no entiendes por ahora qué es lo que hacen):",
|
|
||||||
"Instala <code>learnyoumongo</code> usando el siguiente comando: <code>npm install learnyoumongo -g</code>",
|
|
||||||
"Instala MongoDB usando el siguiente comando: <code>sudo apt-get install mongodb-org</code>",
|
|
||||||
"Ahora inicia el tutorial ejecutando <code>learnyoumongo</code>",
|
|
||||||
"Siempre que ejecutes un comando que incluya <code>mongod</code> en c9.io, asegúrate de usar la bandera <code>--nojournal</code>. Por ejemplo: <code>mongod --nojournal</code>.",
|
|
||||||
"Puedes modificar el tamaño de las ventanas en c9.io arrastrándolas por el borde.",
|
|
||||||
"Asegúrate de que siempre te encuentres en el directorio \"workspace\" de tu proyecto. Puedes regresar a este directorio cuando quieras usando el comando: <code>cd ~/workspace</code>.",
|
|
||||||
"Puedes ver el código fuente de este módulo de Node School en GitHub visitando <a href='https://github.com/evanlucas/learnyoumongo'>https://github.com/evanlucas/learnyoumongo</a>.",
|
|
||||||
"Completa \"Mongod\"",
|
|
||||||
"Completa \"Connect\"",
|
|
||||||
"Completa \"Find\"",
|
|
||||||
"Completa \"Find Project\"",
|
|
||||||
"Completa \"Insert\"",
|
|
||||||
"Completa \"Update\"",
|
|
||||||
"Completa \"Remove\"",
|
|
||||||
"Completa \"Count\"",
|
|
||||||
"Completa \"Aggregate\"",
|
|
||||||
"Una vez hayas terminado con este tutorial, puedes continuar con el siguiente desafío."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@ -1,283 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "Node.js and Express.js",
|
|
||||||
"order": 24,
|
|
||||||
"time": "20 hours",
|
|
||||||
"helpRoom": "HelpBackEnd",
|
|
||||||
"challenges": [
|
|
||||||
{
|
|
||||||
"id": "bd7153d8c441eddfaeb5bd0f",
|
|
||||||
"title": "Manage Packages with npm",
|
|
||||||
"description": [
|
|
||||||
"We'll build this Waypoint on Cloud 9, a powerful online code editor with a full Ubuntu Linux workspace, all running in the cloud. <strong>Note:</strong> Cloud 9 supports a <a href='https://docs.c9.io/docs/themes' target='_blank'>high-contrast theme</a> for those with visual impairments.",
|
|
||||||
"If you don't already have a Cloud 9 account, create one now at <a href='http://c9.io' target='_blank'>http://c9.io</a>.",
|
|
||||||
"Open up <a href='http://c9.io' target='_blank'>http://c9.io</a> and sign in to your account.",
|
|
||||||
"Click on the \"+\" icon at the top right of the c9.io page to create a new workspace.",
|
|
||||||
"Give your workspace a name and an optional description.",
|
|
||||||
"Choose \"Blank\" in the template section.",
|
|
||||||
"Click the Create button. Then click into your new workspace.",
|
|
||||||
"In the lower right hand corner you should see a terminal window. In this window use the following commands. You don't need to know what these mean at this point.",
|
|
||||||
"Install <code>how-to-npm</code> with this command: <code>npm install -g how-to-npm</code>.",
|
|
||||||
"Now start the tutorial by running <code>how-to-npm</code>.",
|
|
||||||
"Note that you can resize the c9.io's windows by dragging their borders.",
|
|
||||||
"Make sure that you are always in your project's \"workspace\" directory. You can always navigate back to this directory by running this command: <code>cd ~/workspace</code>.",
|
|
||||||
"Note that you can only add dist tags to the specific version numbers published in steps 8 and 10. If you receive a 403 or 404 error, run <code>how-to-npm</code> and try again.",
|
|
||||||
"Also, if you experience a bug, and you think you understand the concept, you can skip a step by running <code>how-to-npm verify skip</code> in the terminal.",
|
|
||||||
"You can view this Node School module's source code on GitHub at <a href='https://github.com/npm/how-to-npm'>https://github.com/npm/how-to-npm</a>.",
|
|
||||||
"Complete \"Install npm\"",
|
|
||||||
"Complete \"Dev Environment\"",
|
|
||||||
"Complete \"Login\"",
|
|
||||||
"Complete \"Start A Project\"",
|
|
||||||
"Complete \"Install A Module\"",
|
|
||||||
"Complete \"Listing Dependencies\"",
|
|
||||||
"Complete \"npm Test\"",
|
|
||||||
"Complete \"Package Niceties\"",
|
|
||||||
"Complete \"Publish\"",
|
|
||||||
"Complete \"Version\"",
|
|
||||||
"Complete \"Publish Again\"",
|
|
||||||
"Complete \"Dist Tag\"",
|
|
||||||
"Complete \"Dist Tag Removal\"",
|
|
||||||
"Complete \"Outdated\"",
|
|
||||||
"Complete \"Update\"",
|
|
||||||
"Complete \"Rm\"",
|
|
||||||
"Complete \"Finale\"",
|
|
||||||
"Once you've completed these steps, move on to our next challenge."
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"yIz8RTe-bZk"
|
|
||||||
],
|
|
||||||
"tests": [],
|
|
||||||
"type": "waypoint",
|
|
||||||
"challengeType": 2,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Administrando paquetes con NPM",
|
|
||||||
"description": [
|
|
||||||
"Haremos este desafío en Cloud 9, un poderoso editor en línea con un ambiente de trabajo Ubuntu Linux completo, corriendo totalmente en la nube.",
|
|
||||||
"Si todavía no tienes una cuenta en Cloud 9, crea una ahora en <a href='http://c9.io' target='_blank'>http://c9.io</a>.",
|
|
||||||
"Abre <a href='http://c9.io' target='_blank'>http://c9.io</a> y accede a tu cuenta.",
|
|
||||||
"Pulsa el icono \"+\" en la parte superior derecha de la página de c9.io para crear un nuevo espacio de trabajo.",
|
|
||||||
"Dale un nombre a tu espacio de trabajo. Opcionalmente también puedes escribir una descripción.",
|
|
||||||
"Elige Node.js entre las opciones en el área debajo del campo donde escribiste el nombre.",
|
|
||||||
"Haz click en el botón que dice \"Create workspace\".",
|
|
||||||
"Una vez C9 termine de cargar tu espacio de trabajo, verás una terminal en la ventana de la esquina inferior derecha. Introduce los comandos siguientes en esa ventana (no te preocupes si no entiendes por ahora qué es lo que hacen):",
|
|
||||||
"Instala <code>how-to-npm</code> usando el siguiente comando: <code>npm install -g how-to-npm</code>",
|
|
||||||
"Ahora inicia el tutorial ejecutando <code>how-to-npm</code>",
|
|
||||||
"Puedes modificar el tamaño de las ventanas en c9.io arrastrándolas por el borde.",
|
|
||||||
"Asegúrate de que siempre te encuentres en el directorio \"workspace\" de tu proyecto. Puedes regresar a este directorio cuando quieras usando el comando: <code>cd ~/workspace</code>.",
|
|
||||||
"Ten en mente que sólo puedes agregar etiquetas de distribución a los números de versión publicados en las lecciones 8 y 10. Si recibes un error 403 o 404, ejecuta <code>how-to-npm</code> y prueba de nuevo.",
|
|
||||||
"Si te encuentras con algún error (bug), y crees que has comprendido el concepto del ejercicio, puedes saltarte la lección ejecutando <code>how-to-npm verify skip</code> en la terminal.",
|
|
||||||
"Puedes ver el código fuente de este módulo de Node School en GitHub visitando <a href='https://github.com/npm/how-to-npm'>https://github.com/npm/how-to-npm</a>.",
|
|
||||||
"Completa \"Install NPM\"",
|
|
||||||
"Completa \"Dev Environment\"",
|
|
||||||
"Completa \"Login\"",
|
|
||||||
"Completa \"Start a Project\"",
|
|
||||||
"Completa \"Install a Module\"",
|
|
||||||
"Completa \"Listing Dependencies\"",
|
|
||||||
"Completa \"NPM Test\"",
|
|
||||||
"Completa \"Package Niceties\"",
|
|
||||||
"Completa \"Publish\"",
|
|
||||||
"Completa \"Version\"",
|
|
||||||
"Completa \"Publish Again\"",
|
|
||||||
"Una vez hayas completado estas lecciones, puedes saltarte el resto (que todavía requieren algunas correcciones), y continuar con el siguiente desafío."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "bd7153d8c441eddfaeb5bdff",
|
|
||||||
"title": "Start a Node.js Server",
|
|
||||||
"description": [
|
|
||||||
"We'll build this Waypoint on Cloud 9, a powerful online code editor with a full Ubuntu Linux workspace, all running in the cloud. We'll do the first 7 steps of Node School's LearnYouNode challenges.",
|
|
||||||
"If you don't already have Cloud 9 account, create one now at <a href='http://c9.io' target='_blank'>http://c9.io</a>.",
|
|
||||||
"Open up <a href='http://c9.io' target='_blank'>http://c9.io</a> and sign in to your account.",
|
|
||||||
"Click on the \"+\" icon at the top right of the c9.io page to create a new workspace.",
|
|
||||||
"Give your workspace a name and an optional description.",
|
|
||||||
"Choose \"Blank\" in the template section.",
|
|
||||||
"Click the \"Create workspace\" button.",
|
|
||||||
"Once C9 builds and loads your workspace, you should see a terminal window in the lower right hand corner. In this window use the following commands. You don't need to know what these mean at this point.",
|
|
||||||
"Update <code>npm</code> with this command: <code>npm install -g npm</code>.",
|
|
||||||
"Install <code>learnyounode</code> with this command: <code>npm install -g learnyounode</code>.",
|
|
||||||
"Now start this tutorial by running <code>learnyounode</code>.",
|
|
||||||
"Note that you can resize the c9.io's windows by dragging their borders.",
|
|
||||||
"Make sure that you are always in your project's \"workspace\" directory. You can always navigate back to this directory by running this command: <code>cd ~/workspace</code>.",
|
|
||||||
"You can view this Node School module's source code on GitHub at <a href='https://github.com/workshopper/learnyounode'>https://github.com/workshopper/learnyounode</a>.",
|
|
||||||
"Complete \"Hello World\"",
|
|
||||||
"Complete \"Baby Steps\"",
|
|
||||||
"Complete \"My First I/O\"",
|
|
||||||
"Complete \"My First Async I/O\"",
|
|
||||||
"Complete \"Filtered LS\"",
|
|
||||||
"Complete \"Make it Modular\"",
|
|
||||||
"Complete \"HTTP Client\"",
|
|
||||||
"Once you've completed these first 7 steps, move on to our next challenge."
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"Mo1X7fsS1Ms"
|
|
||||||
],
|
|
||||||
"tests": [],
|
|
||||||
"type": "waypoint",
|
|
||||||
"challengeType": 2,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Inicia un servidor en Node.js",
|
|
||||||
"description": [
|
|
||||||
"Haremos este desafío en Cloud 9, un poderoso editor en línea con un ambiente de trabajo Ubuntu Linux completo, corriendo totalmente en la nube.",
|
|
||||||
"Si todavía no tienes una cuenta en Cloud 9, crea una ahora en <a href='http://c9.io' target='_blank'>http://c9.io</a>.",
|
|
||||||
"Abre <a href='http://c9.io' target='_blank'>http://c9.io</a> y accede a tu cuenta.",
|
|
||||||
"Haz click en el icono \"+\" en la parte superior derecha de la página de c9.io para crear un nuevo espacio de trabajo.",
|
|
||||||
"Dale un nombre a tu espacio de trabajo. Opcionalmente también puedes escribir una descripción.",
|
|
||||||
"Elige Node.js entre las opciones en el área debajo del campo donde escribiste el nombre.",
|
|
||||||
"Haz click en el botón que dice \"Create workspace\".",
|
|
||||||
"Una vez C9 termine de cargar tu espacio de trabajo, verás una terminal en la ventana de la esquina inferior derecha. Introduce los comandos siguientes en esa ventana (no te preocupes si no entiendes por ahora qué es lo que hacen):",
|
|
||||||
"Ejecuta el siguiente comando: <code>sudo npm install -g learnyounode</code>",
|
|
||||||
"Ahora inicia el tutorial ejecutando <code>learnyounode</code>",
|
|
||||||
"Puedes modificar el tamaño de las ventanas en c9.io arrastrándolas por el borde.",
|
|
||||||
"Asegúrate de que siempre te encuentres en el directorio \"workspace\" de tu proyecto. Puedes regresar a este directorio cuando quieras usando el comando: <code>cd ~/workspace</code>.",
|
|
||||||
"Puedes ver el código fuente de este módulo de Node School en GitHub visitando <a href='https://github.com/workshopper/learnyounode'>https://github.com/workshopper/learnyounode</a>.",
|
|
||||||
"Completa \"Hello World\"",
|
|
||||||
"Completa \"Baby Steps\"",
|
|
||||||
"Completa \"My First I/O\"",
|
|
||||||
"Completa \"My First Async I/O\"",
|
|
||||||
"Completa \"Filtered LS\"",
|
|
||||||
"Completa \"Make it Modular\"",
|
|
||||||
"Completa \"HTTP Client\"",
|
|
||||||
"Una vez hayas completado estas primeras siete lecciones, continúa con el siguiente desafío."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "bd7153d8c441eddfaeb5bdfe",
|
|
||||||
"title": "Continue working with Node.js Servers",
|
|
||||||
"description": [
|
|
||||||
"Let's continue the LearnYouNode Node School challenge. For this Waypoint, we'll do challenges 8 through 10.",
|
|
||||||
"Make sure that you are always in your project's \"workspace\" directory. You can always navigate back to this directory by running this command: <code>cd ~/workspace</code>.",
|
|
||||||
"Return to the c9.io workspace you created. Now start this tutorial by running <code>learnyounode</code>",
|
|
||||||
"You can view this Node School module's source code on GitHub at <a href='https://github.com/workshopper/learnyounode'>https://github.com/workshopper/learnyounode</a>.",
|
|
||||||
"Complete \"HTTP Collect\"",
|
|
||||||
"Complete \"Juggling Async\"",
|
|
||||||
"Complete \"Time Server\"",
|
|
||||||
"Once you've completed these 3 steps, move on to our next challenge."
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"4B4vWorcFWo"
|
|
||||||
],
|
|
||||||
"tests": [],
|
|
||||||
"type": "waypoint",
|
|
||||||
"challengeType": 2,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Continuemos trabajando con servidores en Node.js",
|
|
||||||
"description": [
|
|
||||||
"Sigamos con el desafío de LearnYouNode de Node School. Para este Waypoint, trabajaremos con las lecciones 11 a 13.",
|
|
||||||
"Asegúrate de que siempre te encuentres en el directorio \"workspace\" de tu proyecto. Puedes regresar a este directorio cuando quieras usando el comando: <code>cd ~/workspace</code>.",
|
|
||||||
"Regresa al espacio de trabajo que creaste en c9.io. Ahora inicia el tutorial ejecutando <code>learnyounode</code>",
|
|
||||||
"Puedes ver el código fuente de este módulo de Node School en GitHub visitando <a href='https://github.com/workshopper/learnyounode'>https://github.com/workshopper/learnyounode</a>.",
|
|
||||||
"Completa \"HTTP Collect\"",
|
|
||||||
"Completa \"Juggling Async\"",
|
|
||||||
"Completa \"Time Server\"",
|
|
||||||
"Una vez hayas completado estas tres lecciones, continúa con el siguiente desafío."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "bd7153d8c441eddfaeb5bdfd",
|
|
||||||
"title": "Finish working with Node.js Servers",
|
|
||||||
"description": [
|
|
||||||
"Let's continue the LearnYouNode Node School challenge. For this Waypoint, we'll do challenges 11 through 13.",
|
|
||||||
"Make sure that you are always in your project's \"workspace\" directory. You can always navigate back to this directory by running this command: <code>cd ~/workspace</code>.",
|
|
||||||
"Return to the c9.io workspace you created for the previous LearnYouNode challenges and start the tutorial by running <code>learnyounode</code>",
|
|
||||||
"You can view this Node School module's source code on GitHub at <a href='https://github.com/workshopper/learnyounode'>https://github.com/workshopper/learnyounode</a>.",
|
|
||||||
"Complete \"HTTP File Server\"",
|
|
||||||
"Complete \"HTTP Uppercaserer\"",
|
|
||||||
"Complete \"HTTP JSON API Server\"",
|
|
||||||
"Once you've completed these final 3 steps, move on to our next challenge."
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"IpEbokErBfQ"
|
|
||||||
],
|
|
||||||
"tests": [],
|
|
||||||
"type": "waypoint",
|
|
||||||
"challengeType": 2,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Terminemos de trabajar con servidores en Node.js",
|
|
||||||
"description": [
|
|
||||||
"Sigamos con el desafío de LearnYouNode de Node School. Para este Waypoint, trabajaremos con las lecciones 11 a 13.",
|
|
||||||
"Asegúrate de que siempre te encuentres en el directorio \"workspace\" de tu proyecto. Puedes regresar a este directorio cuando quieras usando el comando: <code>cd ~/workspace</code>.",
|
|
||||||
"Regresa al espacio de trabajo que creaste en c9.io. Ahora inicia el tutorial ejecutando <code>learnyounode</code>",
|
|
||||||
"Puedes ver el código fuente de este módulo de Node School en GitHub visitando <a href='https://github.com/workshopper/learnyounode'>https://github.com/workshopper/learnyounode</a>.",
|
|
||||||
"Completa \"HTTP File Server\"",
|
|
||||||
"Completa \"HTTP Uppercaserer\"",
|
|
||||||
"Completa \"HTTP JSON API Server\"",
|
|
||||||
"Una vez hayas completado estas tres lecciones, continúa con el último desafío."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "bd7153d8c441eddfaeb5bd1f",
|
|
||||||
"title": "Build Web Apps with Express.js",
|
|
||||||
"description": [
|
|
||||||
"Before we begin using Express.js, read this article on <a href='http://evanhahn.com/understanding-express/' target='_blank'>Understanding Express.js</a>.",
|
|
||||||
"We'll build this Waypoint on Cloud 9, a powerful online code editor with a full Ubuntu Linux workspace, all running in the cloud.",
|
|
||||||
"If you don't already have Cloud 9 account, create one now at <a href='http://c9.io' target='_blank'>http://c9.io</a>.",
|
|
||||||
"Open up <a href='http://c9.io' target='_blank'>http://c9.io</a> and sign in to your account.",
|
|
||||||
"Click on the \"+\" icon at the top right of the c9.io page to create a new workspace.",
|
|
||||||
"Give your workspace a name and an optional description.",
|
|
||||||
"Choose Node.js in the selection area below the name field.",
|
|
||||||
"Click the \"Create workspace\" button.",
|
|
||||||
"Once C9 builds and loads your workspace, you should see a terminal window in the lower right hand corner. In this window use the following commands. You don't need to know what these mean at this point.",
|
|
||||||
"Run this command: <code>git clone https://github.com/FreeCodeCamp/fcc-expressworks.git && chmod 744 fcc-expressworks/setup.sh && fcc-expressworks/setup.sh && source ~/.profile</code>",
|
|
||||||
"Now start this tutorial by running <code>expressworks</code>",
|
|
||||||
"Note that you can resize the c9.io's windows by dragging their borders.",
|
|
||||||
"Make sure that you are always in your project's \"workspace\" directory. You can always navigate back to this directory by running this command: <code>cd ~/workspace</code>.",
|
|
||||||
"You can view this Node School module's source code on GitHub at <a href='https://github.com/azat-co/expressworks'>https://github.com/azat-co/expressworks</a>.",
|
|
||||||
"Complete \"Hello World!\"",
|
|
||||||
"Complete \"Static\"",
|
|
||||||
"Complete \"Jade\" (Jade has been renamed to Pug)",
|
|
||||||
"Complete \"Good Old Form\"",
|
|
||||||
"Complete \"Stylish CSS\"",
|
|
||||||
"Complete \"Param Pam Pam\"",
|
|
||||||
"Complete \"What's In Query\"",
|
|
||||||
"Complete \"JSON Me\"",
|
|
||||||
"Once you've completed these steps, move on to our next challenge."
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"wLweWF8gh-k"
|
|
||||||
],
|
|
||||||
"tests": [],
|
|
||||||
"type": "waypoint",
|
|
||||||
"challengeType": 2,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Creando Web Apps con Express.js",
|
|
||||||
"description": [
|
|
||||||
"Haremos este desafío en Cloud 9, un poderoso editor en línea con un ambiente de trabajo Ubuntu Linux completo, corriendo totalmente en la nube.",
|
|
||||||
"Si todavía no tienes una cuenta en Cloud 9, crea una ahora en <a href='http://c9.io' target='_blank'>http://c9.io</a>.",
|
|
||||||
"Abre <a href='http://c9.io' target='_blank'>http://c9.io</a> y accede a tu cuenta.",
|
|
||||||
"Haz click en el icono \"+\" en la parte superior derecha de la página de c9.io para crear un nuevo espacio de trabajo.",
|
|
||||||
"Dale un nombre a tu espacio de trabajo. Opcionalmente también puedes escribir una descripción.",
|
|
||||||
"Elige Node.js entre las opciones en el área debajo del campo donde escribiste el nombre.",
|
|
||||||
"Haz click en el botón que dice \"Create workspace\".",
|
|
||||||
"Una vez C9 termine de cargar tu espacio de trabajo, verás una terminal en la ventana de la esquina inferior derecha. Introduce los comandos siguientes en esa ventana (no te preocupes si no entiendes por ahora qué es lo que hacen):",
|
|
||||||
"Ejecuta el siguiente comando: <code>git clone https://github.com/FreeCodeCamp/fcc-expressworks.git && chmod 744 fcc-expressworks/setup.sh && fcc-expressworks/setup.sh && source ~/.profile</code>",
|
|
||||||
"Ahora inicia el tutorial ejecutando <code>expressworks</code>",
|
|
||||||
"Puedes modificar el tamaño de las ventanas en c9.io arrastrándolas por el borde.",
|
|
||||||
"Asegúrate de que siempre te encuentres en el directorio \"workspace\" de tu proyecto. Puedes regresar a este directorio cuando quieras usando el comando: <code>cd ~/workspace</code>.",
|
|
||||||
"Puedes ver el código fuente de este módulo de Node School en GitHub visitando <a href='https://github.com/azat-co/expressworks'>https://github.com/azat-co/expressworks</a>..",
|
|
||||||
"Completa \"Hello World!\"",
|
|
||||||
"Completa \"Static\"",
|
|
||||||
"Completa \"Jade\" (Jade ahora se llama Pug)",
|
|
||||||
"Completa \"Good Old Form\"",
|
|
||||||
"Completa \"Stylish CSS\"",
|
|
||||||
"Completa \"Param Pam Pam\"",
|
|
||||||
"Completa \"What's In Query\"",
|
|
||||||
"Completa \"JSON Me\"",
|
|
||||||
"Una vez hayas completado estas lecciones, continúa con el último desafío."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@ -1,10 +1,12 @@
|
|||||||
{
|
{
|
||||||
"name": "Responsive Design with Bootstrap",
|
"name": "Bootstrap",
|
||||||
"order": 3,
|
"order": 2,
|
||||||
"time": "5 hours",
|
"time": "5 hours",
|
||||||
"helpRoom": "Help",
|
"helpRoom": "Help",
|
||||||
"required": [
|
"required": [
|
||||||
{ "link": "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" }
|
{
|
||||||
|
"link": "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css"
|
||||||
|
}
|
||||||
],
|
],
|
||||||
"challenges": [
|
"challenges": [
|
||||||
{
|
{
|
||||||
@ -507,9 +509,9 @@
|
|||||||
"id": "bad87fee1348cd8acef08811",
|
"id": "bad87fee1348cd8acef08811",
|
||||||
"title": "Taste the Bootstrap Button Color Rainbow",
|
"title": "Taste the Bootstrap Button Color Rainbow",
|
||||||
"description": [
|
"description": [
|
||||||
"The <code>btn-primary</code> class styles the app elements it is applied to as the primary action on a page.",
|
"The <code>btn-primary</code> class is the main color you'll use in your app. It is useful for highlighting actions you want your user to take.",
|
||||||
"Add Bootstrap's <code>btn-primary</code> class to your <code>Like</code> button.",
|
"Add Bootstrap's <code>btn-primary</code> class to your button.",
|
||||||
"Note that the <code>Like</code> button will still need the <code>btn</code> and <code>btn-block</code> classes."
|
"Note that this button will still need the <code>btn</code> and <code>btn-block</code> classes."
|
||||||
],
|
],
|
||||||
"challengeSeed": [
|
"challengeSeed": [
|
||||||
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||||||
@ -572,8 +574,8 @@
|
|||||||
"</div>"
|
"</div>"
|
||||||
],
|
],
|
||||||
"tests": [
|
"tests": [
|
||||||
"assert($(\"button\").first().hasClass(\"btn-primary\"), 'message: Your <code>Like</code> button should have the class <code>btn-primary</code>.');",
|
"assert($(\"button\").hasClass(\"btn-primary\"), 'message: Your button should have the class <code>btn-primary</code>.');",
|
||||||
"assert($(\"button\").first().hasClass(\"btn-block\") && $(\"button\").first().hasClass(\"btn\"), 'message: Your <code>Like</code> button should still have the <code>btn</code> and <code>btn-block</code> classes.');",
|
"assert($(\"button\").hasClass(\"btn-block\") && $(\"button\").hasClass(\"btn\"), 'message: Your button should still have the <code>btn</code> and <code>btn-block</code> classes.');",
|
||||||
"assert(code.match(/<\\/button>/g) && code.match(/<button/g) && code.match(/<\\/button>/g).length === code.match(/<button/g).length, 'message: Make sure all your <code>button</code> elements have a closing tag.');"
|
"assert(code.match(/<\\/button>/g) && code.match(/<button/g) && code.match(/<\\/button>/g).length === code.match(/<button/g).length, 'message: Make sure all your <code>button</code> elements have a closing tag.');"
|
||||||
],
|
],
|
||||||
"type": "waypoint",
|
"type": "waypoint",
|
||||||
@ -863,7 +865,7 @@
|
|||||||
"</div>"
|
"</div>"
|
||||||
],
|
],
|
||||||
"tests": [
|
"tests": [
|
||||||
"assert($(\"div.row button\").length === 3, 'message: Your buttons should all be nested within the same <code>div</code> element with the class <code>row</code>.');",
|
"assert($(\"div.row:has(button)\").length > 0, 'message: Your buttons should all be nested within the same <code>div</code> element with the class <code>row</code>.');",
|
||||||
"assert($(\"div.col-xs-4:has(button)\").length > 2, 'message: Each of your Bootstrap buttons should be nested within its own <code>div</code> element with the class <code>col-xs-4</code>.');",
|
"assert($(\"div.col-xs-4:has(button)\").length > 2, 'message: Each of your Bootstrap buttons should be nested within its own <code>div</code> element with the class <code>col-xs-4</code>.');",
|
||||||
"assert(code.match(/<\\/button>/g) && code.match(/<button/g) && code.match(/<\\/button>/g).length === code.match(/<button/g).length, 'message: Make sure each of your <code>button</code> elements has a closing tag.');",
|
"assert(code.match(/<\\/button>/g) && code.match(/<button/g) && code.match(/<\\/button>/g).length === code.match(/<button/g).length, 'message: Make sure each of your <code>button</code> elements has a closing tag.');",
|
||||||
"assert(code.match(/<\\/div>/g) && code.match(/<div/g) && code.match(/<\\/div>/g).length === code.match(/<div/g).length, 'message: Make sure each of your <code>div</code> elements has a closing tag.');"
|
"assert(code.match(/<\\/div>/g) && code.match(/<div/g) && code.match(/<\\/div>/g).length === code.match(/<div/g).length, 'message: Make sure each of your <code>div</code> elements has a closing tag.');"
|
||||||
@ -1503,7 +1505,7 @@
|
|||||||
"</div>"
|
"</div>"
|
||||||
],
|
],
|
||||||
"tests": [
|
"tests": [
|
||||||
"assert($(\"div.row input[type=\\\"radio\\\"]\").length === 2, 'message: Nest all of your radio buttons inside one <code>div</code> with the class <code>row</code>.');",
|
"assert($(\"div.row:has(input[type=\\\"radio\\\"])\").length > 0, 'message: Nest all of your radio buttons inside one <code>div</code> with the class <code>row</code>.');",
|
||||||
"assert($(\"div.col-xs-6:has(input[type=\\\"radio\\\"])\").length > 1, 'message: Nest each of your radio buttons inside its own <code>div</code> with the class <code>col-xs-6</code>.');",
|
"assert($(\"div.col-xs-6:has(input[type=\\\"radio\\\"])\").length > 1, 'message: Nest each of your radio buttons inside its own <code>div</code> with the class <code>col-xs-6</code>.');",
|
||||||
"assert(code.match(/<\\/div>/g) && code.match(/<div/g) && code.match(/<\\/div>/g).length === code.match(/<div/g).length, 'message: Make sure each of your <code>div</code> elements has a closing tag.');"
|
"assert(code.match(/<\\/div>/g) && code.match(/<div/g) && code.match(/<\\/div>/g).length === code.match(/<div/g).length, 'message: Make sure each of your <code>div</code> elements has a closing tag.');"
|
||||||
],
|
],
|
||||||
@ -1606,7 +1608,7 @@
|
|||||||
"</div>"
|
"</div>"
|
||||||
],
|
],
|
||||||
"tests": [
|
"tests": [
|
||||||
"assert($(\"div.row input[type=\\\"checkbox\\\"]\").length === 3, 'message: Nest all of your checkboxes inside one <code>div</code> with the class <code>row</code>.');",
|
"assert($(\"div.row:has(input[type=\\\"checkbox\\\"])\").length > 0, 'message: Nest all of your checkboxes inside one <code>div</code> with the class <code>row</code>.');",
|
||||||
"assert($(\"div.col-xs-4:has(input[type=\\\"checkbox\\\"])\").length > 2, 'message: Nest each of your checkboxes inside its own <code>div</code> with the class <code>col-xs-4</code>.');",
|
"assert($(\"div.col-xs-4:has(input[type=\\\"checkbox\\\"])\").length > 2, 'message: Nest each of your checkboxes inside its own <code>div</code> with the class <code>col-xs-4</code>.');",
|
||||||
"assert(code.match(/<\\/div>/g) && code.match(/<div/g) && code.match(/<\\/div>/g).length === code.match(/<div/g).length, 'message: Make sure each of your <code>div</code> elements has a closing tag.');"
|
"assert(code.match(/<\\/div>/g) && code.match(/<div/g) && code.match(/<\\/div>/g).length === code.match(/<div/g).length, 'message: Make sure each of your <code>div</code> elements has a closing tag.');"
|
||||||
],
|
],
|
||||||
@ -0,0 +1,108 @@
|
|||||||
|
{
|
||||||
|
"name": "Claim Your Front End Libraries Certificate",
|
||||||
|
"order": 13,
|
||||||
|
"time": "5 minutes",
|
||||||
|
"challenges": [
|
||||||
|
{
|
||||||
|
"id": "587d7dbb367417b2b2512bad",
|
||||||
|
"title": "Claim Your Front End Libraries Certificate",
|
||||||
|
"description": [
|
||||||
|
[
|
||||||
|
"//i.imgur.com/k8btNUB.jpg",
|
||||||
|
"An image of our Front End Libraries Certificate",
|
||||||
|
"This challenge will give you your verified Front End Libraries Certificate. Before we issue your certificate, we must verify that you have completed all of our basic and intermediate algorithm scripting challenges, and all our basic, intermediate, and advanced front end development projects. You must also accept our Academic Honesty Pledge. Click the button below to start this process.",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"//i.imgur.com/uLPsUko.jpg",
|
||||||
|
"The definition of plagiarism: Plagiarism (noun) - copying someone else’s work and presenting it as your own without crediting them",
|
||||||
|
"By clicking below, you pledge that all of your submitted code A) is code you or your pair personally wrote, or B) comes from open source libraries like jQuery, or C) has been clearly attributed to its original authors. You also give us permission to audit your challenge solutions and revoke your certificate if we discover evidence of plagiarism.",
|
||||||
|
"#"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"//i.imgur.com/UedoV2G.jpg",
|
||||||
|
"An image of the text \"Front End Development Certificate requirements\"",
|
||||||
|
"Let's confirm that you have completed all of our basic and intermediate algorithm scripting challenges, and all our basic, intermediate, and advanced front end development projects. Click the button below to verify this.",
|
||||||
|
"#"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"//i.imgur.com/Q5Za9U6.jpg",
|
||||||
|
"An image of the word \"Congratulations\"",
|
||||||
|
"Congratulations! We've added your Front End Libraries Certificate to your portfolio page. Unless you choose to hide your solutions, this certificate will remain publicly visible and verifiable.",
|
||||||
|
""
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
{
|
||||||
|
"properties": [
|
||||||
|
"isHonest",
|
||||||
|
"isFrontEndCert"
|
||||||
|
],
|
||||||
|
"apis": [
|
||||||
|
"/certificate/honest",
|
||||||
|
"/certificate/verify/front-end"
|
||||||
|
],
|
||||||
|
"stepIndex": [
|
||||||
|
1,
|
||||||
|
2
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"id": "bd7158d8c442eddfaeb5bd0f",
|
||||||
|
"title": "Build a Pomodoro Clock"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "bd7158d8c442eddfaeb5bd17",
|
||||||
|
"title": "Build a JavaScript Calculator"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7dbc367417b2b2512bae",
|
||||||
|
"title": "Build a Drum Machine"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "bd7157d8c242eddfaeb5bd13",
|
||||||
|
"title": "Build a Markdown Previewer"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "bd7158d8c442eddfaeb5bd13",
|
||||||
|
"title": "Build a Random Quote Machine"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"type": "Waypoint",
|
||||||
|
"challengeType": 7,
|
||||||
|
"translations": {
|
||||||
|
"es": {
|
||||||
|
"title": "Reclama tu certificado de Desarrollo de interfaces",
|
||||||
|
"description": [
|
||||||
|
[
|
||||||
|
"//i.imgur.com/k8btNUB.jpg",
|
||||||
|
"Una imagen que muestra nuestro certificado de Desarrollo de interfaces",
|
||||||
|
"Este desafío te otorga tu certificado autenticado de Desarrollo de interfaces. Antes de que podamos emitir tu certificado, debemos verificar que has completado todos los desafíos básicos e intermedios de diseño de algoritmos, y todos los proyectos básicos e intermedios de desarrollo de interfaces. También debes aceptar nuestro Juramento de honestidad académica. Pulsa el botón siguiente para iniciar este proceso.",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"//i.imgur.com/HArFfMN.jpg",
|
||||||
|
"Plagio (nombre): acción y efecto de plagiar. Plagiar (verbo) - copiar en lo sustancial obras ajenas, dándolas como propias.",
|
||||||
|
"Al pulsar el botón siguiente, juras que todo el código en tus soluciones a los desafíos A) es código que tú o tu compañero escribieron personalmente, o B) proviene de librerías de código abierto como jQuery, o C) ha sido claramente atribuido a sus autores originales. También nos otorgas el permiso para auditar tus soluciones a los desafíos y revocar tu certificado si encontramos evidencia de plagio.",
|
||||||
|
"#"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"//i.imgur.com/14F2Van.jpg",
|
||||||
|
"Una imagen del texto \"Front End Development Certificate requirements\"",
|
||||||
|
"Confirmemos que has completado todos nuestros desafíos básicos e intermedios de diseño de algoritmos, y todos nuestros proyectos básicos e intermedios de desarrollo de interfaces. Pulsa el botón siguiente para hacer la verificación.",
|
||||||
|
"#"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"//i.imgur.com/16SIhHO.jpg",
|
||||||
|
"Una imagen de la palabra \"Congratulations\"",
|
||||||
|
"¡Felicitaciones! Hemos agregado tu certificado de Desarrollo de interfaces a tu portafolio. A menos que elijas no mostrar tus soluciones, este certificado será públicamente visible y verificable.",
|
||||||
|
""
|
||||||
|
]
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -0,0 +1,146 @@
|
|||||||
|
{
|
||||||
|
"name": "Front End Frameworks Projects",
|
||||||
|
"order": 8,
|
||||||
|
"time": "150 hours",
|
||||||
|
"helpRoom": "Help",
|
||||||
|
"challenges": [
|
||||||
|
{
|
||||||
|
"id": "bd7158d8c442eddfaeb5bd13",
|
||||||
|
"title": "Build a Random Quote Machine",
|
||||||
|
"description": [
|
||||||
|
"Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.",
|
||||||
|
"Here's a <a href='http://codepen.io/freeCodeCamp/full/qRZeGZ' target='_blank'>working example</a>. Try not to look at its code.",
|
||||||
|
"You can build your project by forking <a href='http://codepen.io/FCC_test_suites/pen/JbgXab' target='_blank'>this CodePen pen</a>. Or you can use this CDN link to run the tests in any environment you like: <code>https://gitcdn.link/repo/no-stack-dub-sack/testable-projects-fcc/master/build/bundle.js</code>",
|
||||||
|
"Once you're done, submit below the URL to your working project with all its tests passing.",
|
||||||
|
"Remember to use the <a href='https://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask method if you get stuck."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"A9mEKIF"
|
||||||
|
],
|
||||||
|
"tests": [],
|
||||||
|
"type": "zipline",
|
||||||
|
"isRequired": true,
|
||||||
|
"challengeType": 3,
|
||||||
|
"translations": {
|
||||||
|
"es": {
|
||||||
|
"title": "Crea una máquina de frases aleatorias",
|
||||||
|
"description": []
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"title": "Создайте генератор случайных цитат",
|
||||||
|
"description": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "bd7157d8c242eddfaeb5bd13",
|
||||||
|
"title": "Build a Markdown Previewer",
|
||||||
|
"description": [
|
||||||
|
"Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.",
|
||||||
|
"Here's a <a href='http://codepen.io/freeCodeCamp/full/GrZVVO' target='_blank'>working example</a>. Try not to look at its code.",
|
||||||
|
"You can build your project by forking <a href='http://codepen.io/FCC_test_suites/pen/JbgXab' target='_blank'>this CodePen pen</a>. Or you can use this CDN link to run the tests in any environment you like: <code>https://gitcdn.link/repo/no-stack-dub-sack/testable-projects-fcc/master/build/bundle.js</code>",
|
||||||
|
"Once you're done, submit below the URL to your working project with all its tests passing.",
|
||||||
|
"Remember to use the <a href='https://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask method if you get stuck."
|
||||||
|
],
|
||||||
|
"releasedOn": "January 10, 2017",
|
||||||
|
"challengeSeed": [
|
||||||
|
"FFDvuCP"
|
||||||
|
],
|
||||||
|
"tests": [],
|
||||||
|
"type": "zipline",
|
||||||
|
"isRequired": true,
|
||||||
|
"challengeType": 3,
|
||||||
|
"translations": {
|
||||||
|
"es": {
|
||||||
|
"title": "Crea una caja de recetas",
|
||||||
|
"description": []
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"title": "Создайте хранилище рецептов",
|
||||||
|
"description": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7dbc367417b2b2512bae",
|
||||||
|
"title": "Build a Drum Machine",
|
||||||
|
"description": [
|
||||||
|
"Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.",
|
||||||
|
"Here's a <a href='http://codepen.io/freeCodeCamp/full/MJyNMd' target='_blank'>working example</a>. Try not to look at its code.",
|
||||||
|
"You can build your project by forking <a href='http://codepen.io/FCC_test_suites/pen/JbgXab' target='_blank'>this CodePen pen</a>. Or you can use this CDN link to run the tests in any environment you like: <code>https://gitcdn.link/repo/no-stack-dub-sack/testable-projects-fcc/master/build/bundle.js</code>",
|
||||||
|
"Once you're done, submit below the URL to your working project with all its tests passing.",
|
||||||
|
"Remember to use the <a href='https://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask method if you get stuck."
|
||||||
|
],
|
||||||
|
"releasedOn": "January 10, 2016",
|
||||||
|
"challengeSeed": [
|
||||||
|
"OkeFgKL"
|
||||||
|
],
|
||||||
|
"tests": [],
|
||||||
|
"type": "zipline",
|
||||||
|
"isRequired": true,
|
||||||
|
"challengeType": 3,
|
||||||
|
"translations": {
|
||||||
|
"es": {
|
||||||
|
"title": "Crea un Juego de la vida",
|
||||||
|
"description": []
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"title": "Создайте игру \"Жизнь\"",
|
||||||
|
"description": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "bd7158d8c442eddfaeb5bd17",
|
||||||
|
"title": "Build a JavaScript Calculator",
|
||||||
|
"description": [
|
||||||
|
"Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.",
|
||||||
|
"Here's a <a href='http://codepen.io/freeCodeCamp/full/wgGVVX' target='_blank'>working example</a>. Try not to look at its code.",
|
||||||
|
"You can build your project by forking <a href='http://codepen.io/FCC_test_suites/pen/JbgXab' target='_blank'>this CodePen pen</a>. Or you can use this CDN link to run the tests in any environment you like: <code>https://gitcdn.link/repo/no-stack-dub-sack/testable-projects-fcc/master/build/bundle.js</code>",
|
||||||
|
"Once you're done, submit below the URL to your working project with all its tests passing.",
|
||||||
|
"Remember to use the <a href='https://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask method if you get stuck."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"xlAXPjX"
|
||||||
|
],
|
||||||
|
"tests": [],
|
||||||
|
"type": "zipline",
|
||||||
|
"challengeType": 3,
|
||||||
|
"isRequired": true,
|
||||||
|
"translations": {
|
||||||
|
"es": {
|
||||||
|
"title": "Crea una calculadora JavaScript",
|
||||||
|
"description": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "bd7158d8c442eddfaeb5bd0f",
|
||||||
|
"title": "Build a Pomodoro Clock",
|
||||||
|
"description": [
|
||||||
|
"Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.",
|
||||||
|
"Here's a <a href='http://codepen.io/freeCodeCamp/full/XpKrrW' target='_blank'>working example</a>. Try not to look at its code.",
|
||||||
|
"You can build your project by forking <a href='http://codepen.io/FCC_test_suites/pen/JbgXab' target='_blank'>this CodePen pen</a>. Or you can use this CDN link to run the tests in any environment you like: <code>https://gitcdn.link/repo/no-stack-dub-sack/testable-projects-fcc/master/build/bundle.js</code>",
|
||||||
|
"Once you're done, submit below the URL to your working project with all its tests passing.",
|
||||||
|
"Remember to use the <a href='https://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask method if you get stuck."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"u5RTBt4"
|
||||||
|
],
|
||||||
|
"tests": [],
|
||||||
|
"type": "zipline",
|
||||||
|
"isRequired": true,
|
||||||
|
"challengeType": 3,
|
||||||
|
"translations": {
|
||||||
|
"es": {
|
||||||
|
"title": "Crea un reloj pomodoro",
|
||||||
|
"description": []
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"title": "Создайте таймер Pomodoro",
|
||||||
|
"description": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -1,10 +1,12 @@
|
|||||||
{
|
{
|
||||||
"name": "jQuery",
|
"name": "jQuery",
|
||||||
"order": 5,
|
"order": 3,
|
||||||
"time": "3 hours",
|
"time": "3 hours",
|
||||||
"helpRoom": "Help",
|
"helpRoom": "Help",
|
||||||
"required": [
|
"required": [
|
||||||
{ "link": "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" }
|
{
|
||||||
|
"link": "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css"
|
||||||
|
}
|
||||||
],
|
],
|
||||||
"challenges": [
|
"challenges": [
|
||||||
{
|
{
|
||||||
38
challenges/03-front-end-libraries/react-and-redux.json
Normal file
38
challenges/03-front-end-libraries/react-and-redux.json
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
{
|
||||||
|
"name": "React and Redux",
|
||||||
|
"order": 7,
|
||||||
|
"time": "5 hours",
|
||||||
|
"helpRoom": "Help",
|
||||||
|
"challenges": [
|
||||||
|
{
|
||||||
|
"id": "587d7dbc367417b2b2512bb0",
|
||||||
|
"title": "Introduction to the React and Redux Challenges",
|
||||||
|
"description": [
|
||||||
|
[
|
||||||
|
"",
|
||||||
|
"",
|
||||||
|
"The React and Redux challenges have not been ported into Free Code Camp yet. You can visit <a href=\"http://hysterical-amusement.surge.sh/\" target=\"_blank\">this link to work through the alpha version</a> of these challenges. If you have feedback, you can open an issue (or pull request) directly on <a href=\"https://github.com/bonham000/fcc-react-tests-module\" target=\"_blank\">this repository.</a>",
|
||||||
|
""
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"releasedOn": "",
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [],
|
||||||
|
"type": "Waypoint",
|
||||||
|
"challengeType": 7,
|
||||||
|
"isRequired": false,
|
||||||
|
"titleEs": "",
|
||||||
|
"descriptionEs": [
|
||||||
|
[]
|
||||||
|
],
|
||||||
|
"titleFr": "",
|
||||||
|
"descriptionFr": [
|
||||||
|
[]
|
||||||
|
],
|
||||||
|
"titleDe": "",
|
||||||
|
"descriptionDe": [
|
||||||
|
[]
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
44
challenges/03-front-end-libraries/react.json
Normal file
44
challenges/03-front-end-libraries/react.json
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
{
|
||||||
|
"name": "React",
|
||||||
|
"order": 5,
|
||||||
|
"time": "5 hours",
|
||||||
|
"helpRoom": "Help",
|
||||||
|
"challenges": [
|
||||||
|
{
|
||||||
|
"id": "587d7dbc367417b2b2512bb1",
|
||||||
|
"title": "Introduction to the React Challenges",
|
||||||
|
"description": [
|
||||||
|
[
|
||||||
|
"",
|
||||||
|
"",
|
||||||
|
"React is a JavaScript library designed to make it easier to build complex user interfaces. React does this in a few ways:<br><br><ol><li>React allows HTML to render from a JavaScript file.</li><li>React breaks a website's parts into Components that can then be combined to build pages.</li><li>React Components can pass data to each other as properties</li></ol><br><br>React uses a virtual Document Object Model. Instead of changing the DOM directly, React makes a simplified copy of the DOM (the virtual DOM) when the page loads. This allows React to make changes to elements on the page without re-rendering the entire page. This can improve the responsiveness and functionality of single-page applications.<br><br>While not part of the React library and not required, JSX is often paired with React. JSX is a preprocessor for JavaScript written in a syntax akin to XML that results in more readable code.<br><br><strong>Fun fact:</strong>Free Code Camp is built using React.",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"",
|
||||||
|
"",
|
||||||
|
"The React challenges have not been ported into Free Code Camp yet. You can visit <a href=\"http://hysterical-amusement.surge.sh/\" target=\"_blank\">this link to work through the alpha version</a> of these challenges. If you have feedback, you can open an issue (or pull request) directly on <a href=\"https://github.com/bonham000/fcc-react-tests-module\" target=\"_blank\">this repository.</a>",
|
||||||
|
""
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"releasedOn": "",
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [],
|
||||||
|
"type": "Waypoint",
|
||||||
|
"challengeType": 7,
|
||||||
|
"isRequired": false,
|
||||||
|
"titleEs": "",
|
||||||
|
"descriptionEs": [
|
||||||
|
[]
|
||||||
|
],
|
||||||
|
"titleFr": "",
|
||||||
|
"descriptionFr": [
|
||||||
|
[]
|
||||||
|
],
|
||||||
|
"titleDe": "",
|
||||||
|
"descriptionDe": [
|
||||||
|
[]
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
38
challenges/03-front-end-libraries/redux.json
Normal file
38
challenges/03-front-end-libraries/redux.json
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
{
|
||||||
|
"name": "Redux",
|
||||||
|
"order": 6,
|
||||||
|
"time": "5 hours",
|
||||||
|
"helpRoom": "Help",
|
||||||
|
"challenges": [
|
||||||
|
{
|
||||||
|
"id": "587d7dbd367417b2b2512bb2",
|
||||||
|
"title": "Introduction to the Redux Challenges",
|
||||||
|
"description": [
|
||||||
|
[
|
||||||
|
"",
|
||||||
|
"",
|
||||||
|
"The Redux challenges have not been ported into Free Code Camp yet. You can visit <a href=\"http://hysterical-amusement.surge.sh/\" target=\"_blank\">this link to work through the alpha version</a> of these challenges. If you have feedback, you can open an issue (or pull request) directly on <a href=\"https://github.com/bonham000/fcc-react-tests-module\" target=\"_blank\">this repository.</a>",
|
||||||
|
""
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"releasedOn": "",
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [],
|
||||||
|
"type": "Waypoint",
|
||||||
|
"challengeType": 7,
|
||||||
|
"isRequired": false,
|
||||||
|
"titleEs": "",
|
||||||
|
"descriptionEs": [
|
||||||
|
[]
|
||||||
|
],
|
||||||
|
"titleFr": "",
|
||||||
|
"descriptionFr": [
|
||||||
|
[]
|
||||||
|
],
|
||||||
|
"titleDe": "",
|
||||||
|
"descriptionDe": [
|
||||||
|
[]
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
708
challenges/03-front-end-libraries/sass.json
Normal file
708
challenges/03-front-end-libraries/sass.json
Normal file
@ -0,0 +1,708 @@
|
|||||||
|
{
|
||||||
|
"name": "Sass",
|
||||||
|
"order": 4,
|
||||||
|
"time": "5 hours",
|
||||||
|
"helpRoom": "Help",
|
||||||
|
"challenges": [
|
||||||
|
{
|
||||||
|
"id": "587d7dbd367417b2b2512bb3",
|
||||||
|
"title": "Introduction to the Sass Challenges",
|
||||||
|
"description": [
|
||||||
|
[
|
||||||
|
"",
|
||||||
|
"",
|
||||||
|
"Sass, or \"Syntactically Awesome StyleSheets\", is a language extension of CSS. It adds features that aren't available using basic CSS syntax. Sass makes it easier for developers to simplify and maintain the style sheets for their projects.<br><br>Sass can extend the CSS language because it is a preprocessor. It takes code written using Sass syntax, and converts it into basic CSS. This allows you to create variables, nest CSS rules into others, and import other Sass files, among other things. The result is more compact, easier to read code.<br><br>This section introduces the basic features of Sass.",
|
||||||
|
""
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"releasedOn": "",
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [],
|
||||||
|
"type": "Waypoint",
|
||||||
|
"challengeType": 7,
|
||||||
|
"isRequired": false,
|
||||||
|
"titleEs": "",
|
||||||
|
"descriptionEs": [
|
||||||
|
[]
|
||||||
|
],
|
||||||
|
"titleFr": "",
|
||||||
|
"descriptionFr": [
|
||||||
|
[]
|
||||||
|
],
|
||||||
|
"titleDe": "",
|
||||||
|
"descriptionDe": [
|
||||||
|
[]
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7dbd367417b2b2512bb4",
|
||||||
|
"title": "Storing Data with Sass Variables",
|
||||||
|
"required": [
|
||||||
|
{
|
||||||
|
"link": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.9.13/sass.min.js",
|
||||||
|
"raw": true
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"description": [
|
||||||
|
"One feature of Sass that's different than CSS is it uses variables. They are declared and set to store data, similar to JavaScript.",
|
||||||
|
"In Javascript, variables are defined using the <code>let</code> and <code>const</code> keywords. In Sass, variables start with a <code>$</code> followed by the variable name.",
|
||||||
|
"Here are a couple examples:",
|
||||||
|
"<blockquote>$main-fonts: Arial, sans-serif;<br>$headings-color: green;<br><br>//To use variables:<br>h1 {<br> font-family: $main-fonts;<br> color: $headings-color;<br>}</blockquote>",
|
||||||
|
"One example where variables are useful is when a number of elements need to be the same color. If that color is changed, the only place to edit the code is the variable value.",
|
||||||
|
"<h4>Instructions</h4>",
|
||||||
|
"Create a variable <code>$text-color</code> and set it to red. Then change the value of the <code>color</code> property for the <code>.blog-post</code> and <code>h2</code> to the <code>$text-color</code> variable."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"<style>",
|
||||||
|
" ",
|
||||||
|
" ",
|
||||||
|
" .header{",
|
||||||
|
" text-align: center;",
|
||||||
|
" }",
|
||||||
|
" .blog-post h2 {",
|
||||||
|
" color: red;",
|
||||||
|
" }",
|
||||||
|
"</style>",
|
||||||
|
"",
|
||||||
|
"<h1 class=\"header\">Learn Sass</h1>",
|
||||||
|
"<div class=\"blog-post\">",
|
||||||
|
" <h2>Some random title</h2>",
|
||||||
|
" <p>This is a paragraph with some random text in it</p>",
|
||||||
|
"</div>",
|
||||||
|
"<div class=\"blog-post\">",
|
||||||
|
" <h2>Header #2</h2>",
|
||||||
|
" <p>Here is some more random text.</p>",
|
||||||
|
"</div>",
|
||||||
|
"<div class=\"blog-post\">",
|
||||||
|
" <h2>Here is another header</h2>",
|
||||||
|
" <p>Even more random text within a paragraph</p>",
|
||||||
|
"</div>"
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert(code.match(/\\$text-color:\\s*?red;/g), 'message: Your code should have a Sass variable declared for <code>$text-color</code> with a value of red.');",
|
||||||
|
"assert(code.match(/color:\\s*?\\$text-color;/g), 'message: Your code should use the <code>$text-color</code> variable to change the <code>color</code> for the <code>.blog-post</code> and <code>h2</code> items.');",
|
||||||
|
"assert($('.blog-post').css('color') == 'rgb(255, 0, 0)', 'message: Your <code>.blog-post</code> element should have a </code>color</code> of red.');",
|
||||||
|
"assert($('h2').css('color') == 'rgb(255, 0, 0)', 'message: Your <code>h2</code> elements should have a </code>color</code> of red.');"
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "waypoint",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"es": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"cn": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7dbd367417b2b2512bb5",
|
||||||
|
"title": "Nesting CSS with Sass",
|
||||||
|
"required": [
|
||||||
|
{
|
||||||
|
"link": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.9.13/sass.min.js",
|
||||||
|
"raw": true
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"description": [
|
||||||
|
"Sass allows <code>nesting</code> of CSS rules, which is a useful way of organizing a style sheet.",
|
||||||
|
"Normally, each element is targeted on a different line to style it, like so:",
|
||||||
|
"<blockquote>nav {<br> background-color: red;<br>}<br><br>nav ul {<br> list-style: none;<br>}<br><br>li {<br> display: inline-block;<br>}</blockquote>",
|
||||||
|
"For a large project, the CSS file will have many lines and rules. This is where <code>nesting</code> can help organize your code by placing child style rules within the respective parent elements:",
|
||||||
|
"<blockquote>nav {<br> background-color: red;<br><br> ul {<br> list-style: none;<br><br> li {<br> display: inline-block;<br> }<br> }<br>}<br></blockquote>",
|
||||||
|
"<h4>Instructions</h4>",
|
||||||
|
"Use the <code>nesting</code> technique shown above to re-organize the CSS rules for both children of <code>.blog-post</code> element. For testing purposes, the <code>h1</code> should come before the <code>p</code> element."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"<style>",
|
||||||
|
" .blog-post {",
|
||||||
|
" ",
|
||||||
|
" }",
|
||||||
|
" h1 {",
|
||||||
|
" text-align: center;",
|
||||||
|
" color: blue;",
|
||||||
|
" }",
|
||||||
|
" p {",
|
||||||
|
" font-size: 20px;",
|
||||||
|
" }",
|
||||||
|
"</style>",
|
||||||
|
"",
|
||||||
|
"<div class=\"blog-post\">",
|
||||||
|
" <h1>Blog Title</h1>",
|
||||||
|
" <p>This is a paragraph</p>",
|
||||||
|
"</div>"
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert(code.match(/\\.blog-post\\s*?{\\s*?h1\\s*?{\\s*?text-align:\\s*?center;\\s*?color:\\s*?blue;\\s*?}\\s*?p\\s*?{\\s*?font-size:\\s*?20px;\\s*?}\\s*?}/gi), 'message: Your code should re-organize the CSS rules so the <code>h1</code> and <code>p</code> are nested in the <code>.blog-post</code> parent element.');"
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "waypoint",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"es": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"cn": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7dbd367417b2b2512bb6",
|
||||||
|
"title": "Creating Reusable CSS with Mixins",
|
||||||
|
"required": [
|
||||||
|
{
|
||||||
|
"link": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.9.13/sass.min.js",
|
||||||
|
"raw": true
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"description": [
|
||||||
|
"In Sass, a <code>mixin</code> is a group of CSS declarations that can be reused throughout the style sheet.",
|
||||||
|
"Newer CSS features take time before they are fully adopted and ready to use in all browsers. As features are added to browsers, CSS rules using them may need vendor prefixes. Consider \"box-shadow\":",
|
||||||
|
"<blockquote>div {<br> -webkit-box-shadow: 0px 0px 4px #fff;<br> -moz-box-shadow: 0px 0px 4px #fff;<br> -ms-box-shadow: 0px 0px 4px #fff;<br> box-shadow: 0px 0px 4px #fff;<br>}</blockquote>",
|
||||||
|
"It's a lot of typing to re-write this rule for all the elements that have a <code>box-shadow</code>, or to change each value to test different effects.",
|
||||||
|
"<code>Mixins</code> are like functions for CSS. Here is how to write one:",
|
||||||
|
"<blockquote>@mixin box-shadow($x, $y, $blur, $c){ <br> -webkit-box-shadow: $x, $y, $blur, $c;<br> -moz-box-shadow: $x, $y, $blur, $c;<br> -ms-box-shadow: $x, $y, $blur, $c;<br> box-shadow: $x, $y, $blur, $c;<br>}</blockquote>",
|
||||||
|
"The definition starts with <code>@mixin</code> followed by a custom name. The parameters (the <code>$x</code>, <code>$y</code>, <code>$blur</code>, and <code>$c</code> in the example above) are optional.",
|
||||||
|
"Now any time a <code>box-shadow</code> rule is needed, only a single line calling the <code>mixin</code> replaces having to type all the vendor prefixes. A <code>mixin</code> is called with the <code>@include</code> directive:",
|
||||||
|
"<blockquote>div {<br> @include box-shadow(0px, 0px, 4px, #fff);<br>}</blockquote>",
|
||||||
|
"<h4>Instructions</h4>",
|
||||||
|
"Write a <code>mixin</code> for <code>border-radius</code> and give it a <code>$radius</code> parameter. It should use all the vendor prefixes from the example. Then use the <code>border-radius</code> <code>mixin</code> to give the <code>#awesome</code> element a border radius of 15px."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"<style>",
|
||||||
|
" ",
|
||||||
|
" ",
|
||||||
|
" ",
|
||||||
|
" #awesome {",
|
||||||
|
" width: 150px;",
|
||||||
|
" height: 150px;",
|
||||||
|
" background-color: green;",
|
||||||
|
" ",
|
||||||
|
" }",
|
||||||
|
"</style>",
|
||||||
|
"",
|
||||||
|
"<div id=\"awesome\"></div>",
|
||||||
|
" "
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert(code.match(/@mixin\\s+?border-radius\\(\\$radius\\)\\s*?{/gi), 'message: Your code should declare a <code>mixin</code> named <code>border-radius</code> which has a parameter named <code>$radius</code>.');",
|
||||||
|
"assert(code.match(/-webkit-border-radius:\\s*?\\$radius;/gi), 'message: Your code should include the <code>-webkit-border-radius</code> vender prefix that uses the <code>$radius</code> parameter.');",
|
||||||
|
"assert(code.match(/-moz-border-radius:\\s*?\\$radius;/gi), 'message: Your code should include the <code>-moz-border-radius</code> vender prefix that uses the <code>$radius</code> parameter.');",
|
||||||
|
"assert(code.match(/-ms-border-radius:\\s*?\\$radius;/gi), 'message: Your code should include the <code>-ms-border-radius</code> vender prefix that uses the <code>$radius</code> parameter.');",
|
||||||
|
"assert(code.match(/border-radius:\\s*?\\$radius;/gi).length == 4, 'message: Your code should include the general <code>border-radius</code> rule that uses the <code>$radius</code> parameter.');",
|
||||||
|
"assert(code.match(/@include\\s+?border-radius\\(15px\\);/gi), 'message: Your code should call the <code>border-radius mixin</code> using the <code>@include</code> keyword, setting it to 15px.');"
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "waypoint",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"es": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"cn": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7dbe367417b2b2512bb8",
|
||||||
|
"title": "Using @if and @else.",
|
||||||
|
"required": [
|
||||||
|
{
|
||||||
|
"link": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.9.13/sass.min.js",
|
||||||
|
"raw": true
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"description": [
|
||||||
|
"The <code>@if</code> directive in Sass is useful to test for a specific case - it works just like the <code>if</code> statement in JavaScript</code>.",
|
||||||
|
"<blockquote>@mixin make-bold($bool) {<br> @if $bool == bold { font-weight: bold; }<br>}</blockquote>",
|
||||||
|
"And just like in JavaScript, <code>@else if</code> and <code>@else</code> test for more conditions:",
|
||||||
|
"<blockquote>@mixin text-effect($val) {<br> @if $val == danger {color: red;}<br> @else if $val == alert {color: yellow;}<br> @else if $val == success {color: green;}<br> @else {color: black;}<br>}</blockquote>",
|
||||||
|
"<h4>Instructions</h4>",
|
||||||
|
"Create a <code>mixin</code> called <code>border-stroke</code> that takes a parameter <code>$val</code>. The <code>mixin</code> should check for the following conditions using <code>@if</code>, <code>@else if</code>, and <code>@else</code>:",
|
||||||
|
"<blockquote>light - 1px solid black<br>medium - 3px solid black<br>heavy - 6px solid black<br>none - no border</blockquote>"
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"<style>",
|
||||||
|
" ",
|
||||||
|
" ",
|
||||||
|
" ",
|
||||||
|
" #box {",
|
||||||
|
" width: 150px;",
|
||||||
|
" height: 150px;",
|
||||||
|
" background-color: red;",
|
||||||
|
" @include border-stroke(medium);",
|
||||||
|
" } ",
|
||||||
|
"</style>",
|
||||||
|
"",
|
||||||
|
"<div id=\"box\"></div>"
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert(code.match(/@mixin\\s+?border-stroke\\(\\$val\\)\\s*?{/gi), 'message: Your code should declare a <code>mixin</code> named <code>border-stroke</code> which has a parameter named <code>$val</code>.');",
|
||||||
|
"assert(code.match(/@if\\s+?\\$val\\s*?===?\\s*?light\\s*?{\\s*?border:\\s*?1px\\s+?solid\\s+?black;\\s*?}/gi), 'message: Your <code>mixin</code> should have an <code>@if</code> statement to check if <code>$val</code> is light, and to set the <code>border</code> to 1px solid black.');",
|
||||||
|
"assert(code.match(/@else\\s+?if\\s+?\\$val\\s*?===?\\s*?medium\\s*?{\\s*?border:\\s*?3px\\s+?solid\\s+?black;\\s*?}/gi), 'message: Your <code>mixin</code> should have an <code>@else if</code> statement to check if <code>$val</code> is medium, and to set the <code>border</code> to 3px solid black.');",
|
||||||
|
"assert(code.match(/@else\\s+?if\\s+?\\$val\\s*?===?\\s*?heavy\\s*?{\\s*?border:\\s*?6px\\s+?solid\\s+?black;\\s*?}/gi), 'message: Your <code>mixin</code> should have an <code>@else if</code> statement to check if <code>$val</code> is heavy, and to set the <code>border</code> to 6px solid black.');",
|
||||||
|
"assert(code.match(/@else\\s*?{\\s*?border:\\s*?none;\\s*?}/gi), 'message: Your <code>mixin</code> should have an <code>@else</code> statement to set the <code>border</code> to none.');"
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "waypoint",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"es": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"cn": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7dbe367417b2b2512bb9",
|
||||||
|
"title": "Continuing with @for",
|
||||||
|
"required": [
|
||||||
|
{
|
||||||
|
"link": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.9.13/sass.min.js",
|
||||||
|
"raw": true
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"description": [
|
||||||
|
"The <code>@for</code> directive adds styles in a loop, very similar to a <code>for</code> loop in JavaScript.",
|
||||||
|
"<code>@for</code> is used in two ways: \"start through end\" or \"start to end\". The main difference is that \"start to end\" <em>excludes</em> the end number, and \"start through end\" <em>includes</em> the end number.",
|
||||||
|
"Here's a start <b>through</b> end example:",
|
||||||
|
"<blockquote>@for $i from 1 through 12 {<br> .col-#{$i} { width: 100%/12 * $i; }<br>}</blockquote>",
|
||||||
|
"The <code>#{$i}</code> part is the syntax to combine a variable (<code>i</code>) with text to make a string. When the Sass file is converted to CSS, it looks like this:",
|
||||||
|
"<blockquote>.col-1 {<br> width: 8.33333%;<br>}<br><br>.col-2 {<br> width: 16.66667%;<br>}<br><br>...<br><br>.col-12 {<br> width: 100%;<br>}</blockquote>",
|
||||||
|
"This is a powerful way to create a grid layout. Now you have twelve options for column widths available as CSS classes.",
|
||||||
|
"<h4>Instructions</h4>",
|
||||||
|
"Write a <code>@for</code> directive that takes a variable <code>$j</code> that goes from 1 <b>to</b> 6.",
|
||||||
|
"It should create 5 classes called <code>.text-1</code> to <code>.text-5</code> where each has a <code>font-size</code> set to 10px multiplied by the index."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"<style>",
|
||||||
|
" ",
|
||||||
|
" ",
|
||||||
|
" ",
|
||||||
|
"</style>",
|
||||||
|
"",
|
||||||
|
"<p class=\"text-1\">Hello</p>",
|
||||||
|
"<p class=\"text-2\">Hello</p>",
|
||||||
|
"<p class=\"text-3\">Hello</p>",
|
||||||
|
"<p class=\"text-4\">Hello</p>",
|
||||||
|
"<p class=\"text-5\">Hello</p>"
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert(code.match(/@for /g), 'message: Your code should use the <code>@for</code> directive.');",
|
||||||
|
"assert($('.text-1').css('font-size') == '10px', 'message: Your <code>.text-1</code> class should have a <code>font-size</code> of 10px.');",
|
||||||
|
"assert($('.text-2').css('font-size') == '20px', 'message: Your <code>.text-2</code> class should have a <code>font-size</code> of 20px.');",
|
||||||
|
"assert($('.text-3').css('font-size') == '30px', 'message: Your <code>.text-3</code> class should have a <code>font-size</code> of 30px.');",
|
||||||
|
"assert($('.text-4').css('font-size') == '40px', 'message: Your <code>.text-4</code> class should have a <code>font-size</code> of 40px.');",
|
||||||
|
"assert($('.text-5').css('font-size') == '50px', 'message: Your <code>.text-5</code> class should have a <code>font-size</code> of 50px.');"
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "waypoint",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"es": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"cn": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7dbf367417b2b2512bba",
|
||||||
|
"title": "Expanding with @each",
|
||||||
|
"required": [
|
||||||
|
{
|
||||||
|
"link": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.9.13/sass.min.js",
|
||||||
|
"raw": true
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"description": [
|
||||||
|
"The last challenge showed how the <code>@for</code> directive uses a starting and ending value to loop a certain number of times. Sass also offers the <code>@each</code> directive which loops over each item in a list or map.",
|
||||||
|
"On each iteration, the variable gets assigned to the current value from the list or map.",
|
||||||
|
"<blockquote>@each $color in blue, red, green {<br> .#{$color}-text {color: $color;}<br>}</blockquote>",
|
||||||
|
"A map has slightly different syntax. Here's an example:",
|
||||||
|
"<blockquote>$colors: (color1: blue, color2: red, color3: green);<br><br>@each $key, $color in $colors {<br> .#{$color}-text {color: $color;}<br>}</blockquote>",
|
||||||
|
"Note that the <code>$key</code> variable is needed to reference the keys in the map. Otherwise, the compiled CSS would have <code>color1</code>, <code>color2</code>... in it.",
|
||||||
|
"Both of the above code examples are converted into the following CSS:",
|
||||||
|
"<blockquote>.blue-text {<br> color: blue;<br>}<br><br>.red-text {<br> color: red;<br>}<br><br>.green-text {<br> color: green;<br>}</blockquote>",
|
||||||
|
"<h4>Instructions</h4>",
|
||||||
|
"Write an <code>@each</code> directive that goes through a list: <code>blue, black, red</code> and assigns each variable to a <code>.color-bg</code> class, where the \"color\" part changes for each item.",
|
||||||
|
"Each class should set the <code>background-color</code> the respective color."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"<style>",
|
||||||
|
" ",
|
||||||
|
" ",
|
||||||
|
" ",
|
||||||
|
" div {",
|
||||||
|
" height: 200px;",
|
||||||
|
" width: 200px;",
|
||||||
|
" }",
|
||||||
|
"</style>",
|
||||||
|
"",
|
||||||
|
"<div class=\"blue-bg\"></div>",
|
||||||
|
"<div class=\"black-bg\"></div>",
|
||||||
|
"<div class=\"red-bg\"></div>"
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert(code.match(/@each /g), 'message: Your code should use the <code>@each</code> directive.');",
|
||||||
|
"assert($('blue-bg').css('background-color') == 'rgb(0, 0, 255)', 'message: Your <code>.blue-bg</code> class should have a <code>background-color</code> of blue.');",
|
||||||
|
"assert($('black-bg').css('background-color') == 'rgb(0, 0, 0)', 'message: Your <code>.black-bg</code> class should have a <code>background-color</code> of black.');",
|
||||||
|
"assert($('red-bg').css('background-color') == 'rgb(255, 0, 0)', 'message: Your <code>.red-bg</code> class should have a <code>background-color</code> of red.');"
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "waypoint",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"es": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"cn": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7dbf367417b2b2512bbb",
|
||||||
|
"title": "Wrapping up with @while",
|
||||||
|
"required": [
|
||||||
|
{
|
||||||
|
"link": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.9.13/sass.min.js",
|
||||||
|
"raw": true
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"description": [
|
||||||
|
"The <code>@while</code> directive is an option with similar functionality to the JavaScript <code>while</code> loop. It creates CSS rules until a condition is met.",
|
||||||
|
"The <code>@for</code> challenge gave an example to create a simple grid system. This can also work with <code>@while</code>.",
|
||||||
|
"<blockquote>$x: 1;<br>@while $x < 13 {<br> .col-#{$x} { width: 100%/12 * $x;}<br> $x: $x + 1;<br>}</blockquote>",
|
||||||
|
"First, define a variable <code>$x</code> and set it to 1. Next, use the <code>@while</code> directive to create the grid system <i>while</i> <code>$x</code> is less than 13.",
|
||||||
|
"After setting the CSS rule for <code>width</code>, <code>$x</code> is incremented by 1 to avoid an infinite loop.",
|
||||||
|
"<h4>Instructions</h4>",
|
||||||
|
"Use <code>@while</code> to create a series of classes with different <code>font-sizes</code>.",
|
||||||
|
"There should be 10 different classes from <code>text-1</code> to <code>text-10</code>. Then set <code>font-size</code> to 5px multiplied by the current index number. Make sure to avoid an infinite loop!"
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"<style>",
|
||||||
|
" ",
|
||||||
|
" ",
|
||||||
|
" ",
|
||||||
|
"</style>",
|
||||||
|
"",
|
||||||
|
"<p class=\"text-1\">Hello</p>",
|
||||||
|
"<p class=\"text-2\">Hello</p>",
|
||||||
|
"<p class=\"text-3\">Hello</p>",
|
||||||
|
"<p class=\"text-4\">Hello</p>",
|
||||||
|
"<p class=\"text-5\">Hello</p>",
|
||||||
|
"<p class=\"text-6\">Hello</p>",
|
||||||
|
"<p class=\"text-7\">Hello</p>",
|
||||||
|
"<p class=\"text-8\">Hello</p>",
|
||||||
|
"<p class=\"text-9\">Hello</p>",
|
||||||
|
"<p class=\"text-10\">Hello</p>"
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert(code.match(/@while /g), 'message: Your code should use the <code>@while</code> directive.');",
|
||||||
|
"assert(code.match(/\\$.*:\\s*?1;/gi), 'message: Your code should set an index variable to 1 to start.');",
|
||||||
|
"assert(code.match(/\\$(.*):\\s*?\\$\\1\\s*?\\+\\s*?1;/gi), 'message: Your code should increment the counter variable.');",
|
||||||
|
"assert($('.text-1').css('font-size') == '5px', 'message: Your <code>.text-1</code> class should have a <code>font-size</code> of 5px.');",
|
||||||
|
"assert($('.text-2').css('font-size') == '10px', 'message: Your <code>.text-2</code> class should have a <code>font-size</code> of 10px.');",
|
||||||
|
"assert($('.text-3').css('font-size') == '15px', 'message: Your <code>.text-3</code> class should have a <code>font-size</code> of 15px.');",
|
||||||
|
"assert($('.text-4').css('font-size') == '20px', 'message: Your <code>.text-4</code> class should have a <code>font-size</code> of 20px.');",
|
||||||
|
"assert($('.text-5').css('font-size') == '25px', 'message: Your <code>.text-5</code> class should have a <code>font-size</code> of 25px.');",
|
||||||
|
"assert($('.text-6').css('font-size') == '30px', 'message: Your <code>.text-6</code> class should have a <code>font-size</code> of 30px.');",
|
||||||
|
"assert($('.text-7').css('font-size') == '35px', 'message: Your <code>.text-7</code> class should have a <code>font-size</code> of 35px.');",
|
||||||
|
"assert($('.text-8').css('font-size') == '40px', 'message: Your <code>.text-8</code> class should have a <code>font-size</code> of 40px.');",
|
||||||
|
"assert($('.text-9').css('font-size') == '45px', 'message: Your <code>.text-9</code> class should have a <code>font-size</code> of 45px.');",
|
||||||
|
"assert($('.text-10').css('font-size') == '50px', 'message: Your <code>.text-10</code> class should have a <code>font-size</code> of 50px.');"
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "waypoint",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"es": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"cn": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7dbf367417b2b2512bbc",
|
||||||
|
"title": "Partials",
|
||||||
|
"required": [
|
||||||
|
{
|
||||||
|
"link": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.9.13/sass.min.js",
|
||||||
|
"raw": true
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"description": [
|
||||||
|
"<code>Partials</code> in Sass are separate files that hold segments of CSS code. These are imported and used in other Sass files. This is a great way to group similar code into a module to keep it organized.",
|
||||||
|
"Names for <code>partials</code> start with the underscore (<code>_</code>) character, which tells Sass it is a small segment of CSS and not to convert it into a CSS file. Also, Sass files end with the <code>.scss</code> file extension. To bring the code in the <code>partial</code> into another Sass file, use the <code>@import</code> directive.",
|
||||||
|
"For example, if all your <code>mixins</code> are saved in a <code>partial</code> named \"_mixins.scss\", and they are needed in the \"main.scss\" file, this is how to use them in the main file:",
|
||||||
|
"<blockquote>// In the main.scss file<br><br>@import 'mixins'</blockquote>",
|
||||||
|
"Note that the underscore is not needed in the <code>import</code> statement - Sass understands it is a <code>partial</code>. Once a <code>partial</code> is imported into a file, all variables, <code>mixins</code>, and other code are available to use.",
|
||||||
|
"<h4>Instructions</h4>",
|
||||||
|
"Write an <code>@import</code> statement to import a <code>partial</code> named <code>_variables.scss</code> into the main.scss file."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"// The main.scss file",
|
||||||
|
"",
|
||||||
|
"",
|
||||||
|
"",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert(code.match(/@import\\s+?('|\")variables\\1/gi), 'message: Your code should use the <code>@import</code> directive, and should not include the underscore in the file name.');"
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "waypoint",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"es": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"cn": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7fa5367417b2b2512bbd",
|
||||||
|
"title": "Extend your CSS styles",
|
||||||
|
"required": [
|
||||||
|
{
|
||||||
|
"link": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.9.13/sass.min.js",
|
||||||
|
"raw": true
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"description": [
|
||||||
|
"Sass has a feature called <code>extend</code> that makes it easy to borrow the CSS rules from one element and build upon them in another.",
|
||||||
|
"For example, the below block of CSS rules style a <code>.panel</code> class. It has a <code>background-color</code>, <code>height</code> and <code>border</code>.",
|
||||||
|
"<blockquote>.panel{<br> background-color: red;<br> height: 70px;<br> border: 2px solid green;<br>}</blockquote>",
|
||||||
|
"Now you want another panel called <code>.big-panel</code>. It has the same base properties as <code>.panel</code>, but also needs a <code>width</code> and <code>font-size</code>.",
|
||||||
|
"It's possible to copy and paste the initial CSS rules from <code>.panel</code>, but the code becomes repetitive as you add more types of panels.",
|
||||||
|
"The <code>extend</code> directive is a simple way to reuse the rules written for one element, then add more for another:",
|
||||||
|
"<blockquote>.big-panel{<br> @extend .panel;<br> width: 150px;<br> font-size: 2em;<br>}</blockquote>",
|
||||||
|
"The <code>.big-panel</code> will have the same properties as <code>.panel</code> in addition to the new styles.",
|
||||||
|
"<h4>Instructions</h4>",
|
||||||
|
"Make a class <code>.info-important</code> that extends <code>.info</code> and also has a <code>background-color</code> set to magenta."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"<style>",
|
||||||
|
" h3{",
|
||||||
|
" text-align: center;",
|
||||||
|
" }",
|
||||||
|
" .info{",
|
||||||
|
" width: 200px;",
|
||||||
|
" border: 1px solid black;",
|
||||||
|
" margin: 0 auto;",
|
||||||
|
" }",
|
||||||
|
" ",
|
||||||
|
" ",
|
||||||
|
" ",
|
||||||
|
" ",
|
||||||
|
"</style>",
|
||||||
|
"<h3>Posts</h3>",
|
||||||
|
"<div class=\"info-important\">",
|
||||||
|
" <p>This is an important post. It should extend the class \".info\" and have its own CSS styles.</p>",
|
||||||
|
"</div>",
|
||||||
|
"",
|
||||||
|
"<div class=\"info\">",
|
||||||
|
" <p>This is a simple post. It has basic styling and can be extended for other uses.</p>",
|
||||||
|
"</div>"
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert(code.match(/@extend\\s+?\\.info/g), 'message: Your code should use the <code>@extend</code> directive to extend the <code>info</code> class.');",
|
||||||
|
"assert($('.info-important').css('background-color') == 'rgb(255, 0, 255)', 'message: Your <code>info-important</code> class should have a <code>background-color</code> set to magenta.');",
|
||||||
|
"assert($('.info-important').css('width') == '200px', 'message: Your <code>info-important</code> class should inherit the styling from the <code>info</code> class.');"
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "waypoint",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"es": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"cn": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -0,0 +1,108 @@
|
|||||||
|
{
|
||||||
|
"name": "Claim Your Data Visualization Certificate",
|
||||||
|
"order": 13,
|
||||||
|
"time": "5 minutes",
|
||||||
|
"challenges": [
|
||||||
|
{
|
||||||
|
"id": "587d7fa5367417b2b2512bbe",
|
||||||
|
"title": "Claim Your Data Visualization Certificate",
|
||||||
|
"description": [
|
||||||
|
[
|
||||||
|
"//i.imgur.com/k8btNUB.jpg",
|
||||||
|
"An image of our Data Visualization Certificate",
|
||||||
|
"This challenge will give you your verified Data Visualization Certificate. Before we issue your certificate, we must verify that you have completed all of our basic and intermediate algorithm scripting challenges, and all our basic, intermediate, and advanced front end development projects. You must also accept our Academic Honesty Pledge. Click the button below to start this process.",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"//i.imgur.com/uLPsUko.jpg",
|
||||||
|
"The definition of plagiarism: Plagiarism (noun) - copying someone else’s work and presenting it as your own without crediting them",
|
||||||
|
"By clicking below, you pledge that all of your submitted code A) is code you or your pair personally wrote, or B) comes from open source libraries like jQuery, or C) has been clearly attributed to its original authors. You also give us permission to audit your challenge solutions and revoke your certificate if we discover evidence of plagiarism.",
|
||||||
|
"#"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"//i.imgur.com/UedoV2G.jpg",
|
||||||
|
"An image of the text \"Front End Development Certificate requirements\"",
|
||||||
|
"Let's confirm that you have completed all of our basic and intermediate algorithm scripting challenges, and all our basic, intermediate, and advanced front end development projects. Click the button below to verify this.",
|
||||||
|
"#"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"//i.imgur.com/Q5Za9U6.jpg",
|
||||||
|
"An image of the word \"Congratulations\"",
|
||||||
|
"Congratulations! We've added your Data Visualization Certificate to your portfolio page. Unless you choose to hide your solutions, this certificate will remain publicly visible and verifiable.",
|
||||||
|
""
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
{
|
||||||
|
"properties": [
|
||||||
|
"isHonest",
|
||||||
|
"isFrontEndCert"
|
||||||
|
],
|
||||||
|
"apis": [
|
||||||
|
"/certificate/honest",
|
||||||
|
"/certificate/verify/front-end"
|
||||||
|
],
|
||||||
|
"stepIndex": [
|
||||||
|
1,
|
||||||
|
2
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"id": "587d7fa6367417b2b2512bc0",
|
||||||
|
"title": "Visualize Data with a Treemap Diagram"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7fa6367417b2b2512bbf",
|
||||||
|
"title": "Visualize Data with a Choropleth Map"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "bd7188d8c242eddfaeb5bd13",
|
||||||
|
"title": "Visualize Data with a Heat Map"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "bd7178d8c242eddfaeb5bd13",
|
||||||
|
"title": "Visualize Data with a Scatterplot Graph"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "bd7168d8c242eddfaeb5bd13",
|
||||||
|
"title": "Visualize Data with a Bar Chart"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"type": "Waypoint",
|
||||||
|
"challengeType": 7,
|
||||||
|
"translations": {
|
||||||
|
"es": {
|
||||||
|
"title": "Reclama tu certificado de Desarrollo de interfaces",
|
||||||
|
"description": [
|
||||||
|
[
|
||||||
|
"//i.imgur.com/k8btNUB.jpg",
|
||||||
|
"Una imagen que muestra nuestro certificado de Desarrollo de interfaces",
|
||||||
|
"Este desafío te otorga tu certificado autenticado de Desarrollo de interfaces. Antes de que podamos emitir tu certificado, debemos verificar que has completado todos los desafíos básicos e intermedios de diseño de algoritmos, y todos los proyectos básicos e intermedios de desarrollo de interfaces. También debes aceptar nuestro Juramento de honestidad académica. Pulsa el botón siguiente para iniciar este proceso.",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"//i.imgur.com/HArFfMN.jpg",
|
||||||
|
"Plagio (nombre): acción y efecto de plagiar. Plagiar (verbo) - copiar en lo sustancial obras ajenas, dándolas como propias.",
|
||||||
|
"Al pulsar el botón siguiente, juras que todo el código en tus soluciones a los desafíos A) es código que tú o tu compañero escribieron personalmente, o B) proviene de librerías de código abierto como jQuery, o C) ha sido claramente atribuido a sus autores originales. También nos otorgas el permiso para auditar tus soluciones a los desafíos y revocar tu certificado si encontramos evidencia de plagio.",
|
||||||
|
"#"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"//i.imgur.com/14F2Van.jpg",
|
||||||
|
"Una imagen del texto \"Front End Development Certificate requirements\"",
|
||||||
|
"Confirmemos que has completado todos nuestros desafíos básicos e intermedios de diseño de algoritmos, y todos nuestros proyectos básicos e intermedios de desarrollo de interfaces. Pulsa el botón siguiente para hacer la verificación.",
|
||||||
|
"#"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"//i.imgur.com/16SIhHO.jpg",
|
||||||
|
"Una imagen de la palabra \"Congratulations\"",
|
||||||
|
"¡Felicitaciones! Hemos agregado tu certificado de Desarrollo de interfaces a tu portafolio. A menos que elijas no mostrar tus soluciones, este certificado será públicamente visible y verificable.",
|
||||||
|
""
|
||||||
|
]
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -0,0 +1,134 @@
|
|||||||
|
{
|
||||||
|
"name": "Data Visualization Projects",
|
||||||
|
"order": 3,
|
||||||
|
"time": "150 hours",
|
||||||
|
"helpRoom": "Help",
|
||||||
|
"challenges": [
|
||||||
|
{
|
||||||
|
"id": "bd7168d8c242eddfaeb5bd13",
|
||||||
|
"title": "Visualize Data with a Bar Chart",
|
||||||
|
"description": [
|
||||||
|
"Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.",
|
||||||
|
"Here's a <a href='http://codepen.io/freeCodeCamp/full/GrZVaM' target='_blank'>working example</a>. Try not to look at its code.",
|
||||||
|
"You can build your project by forking <a href='http://codepen.io/FCC_test_suites/pen/JbgXab' target='_blank'>this CodePen pen</a>. Or you can use this CDN link to run the tests in any environment you like: <code>https://gitcdn.link/repo/no-stack-dub-sack/testable-projects-fcc/master/build/bundle.js</code>",
|
||||||
|
"Once you're done, submit below the URL to your working project with all its tests passing.",
|
||||||
|
"Remember to use the <a href='https://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask method if you get stuck."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"G6iPE6W"
|
||||||
|
],
|
||||||
|
"tests": [],
|
||||||
|
"isRequired": true,
|
||||||
|
"releasedOn": "January 1, 2016",
|
||||||
|
"type": "zipline",
|
||||||
|
"challengeType": 3,
|
||||||
|
"translations": {
|
||||||
|
"es": {
|
||||||
|
"title": "Visualiza datos utilizando un gráfico de barras",
|
||||||
|
"description": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "bd7178d8c242eddfaeb5bd13",
|
||||||
|
"title": "Visualize Data with a Scatterplot Graph",
|
||||||
|
"description": [
|
||||||
|
"Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.",
|
||||||
|
"Here's a <a href='http://codepen.io/freeCodeCamp/full/bgpXyK' target='_blank'>working example</a>. Try not to look at its code.",
|
||||||
|
"You can build your project by forking <a href='http://codepen.io/FCC_test_suites/pen/JbgXab' target='_blank'>this CodePen pen</a>. Or you can use this CDN link to run the tests in any environment you like: <code>https://gitcdn.link/repo/no-stack-dub-sack/testable-projects-fcc/master/build/bundle.js</code>",
|
||||||
|
"Once you're done, submit below the URL to your working project with all its tests passing.",
|
||||||
|
"Remember to use the <a href='https://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask method if you get stuck."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"opubu3f"
|
||||||
|
],
|
||||||
|
"tests": [],
|
||||||
|
"isRequired": true,
|
||||||
|
"releasedOn": "January 1, 2016",
|
||||||
|
"type": "zipline",
|
||||||
|
"challengeType": 3,
|
||||||
|
"translations": {
|
||||||
|
"es": {
|
||||||
|
"title": "Visualiza datos utilizando un gráfico de dispersión",
|
||||||
|
"description": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "bd7188d8c242eddfaeb5bd13",
|
||||||
|
"title": "Visualize Data with a Heat Map",
|
||||||
|
"description": [
|
||||||
|
"Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.",
|
||||||
|
"Here's a <a href='http://codepen.io/freeCodeCamp/full/JEXgeY' target='_blank'>working example</a>. Try not to look at its code.",
|
||||||
|
"You can build your project by forking <a href='http://codepen.io/FCC_test_suites/pen/JbgXab' target='_blank'>this CodePen pen</a>. Or you can use this CDN link to run the tests in any environment you like: <code>https://gitcdn.link/repo/no-stack-dub-sack/testable-projects-fcc/master/build/bundle.js</code>",
|
||||||
|
"Once you're done, submit below the URL to your working project with all its tests passing.",
|
||||||
|
"Remember to use the <a href='https://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask method if you get stuck."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"s4XtjKa"
|
||||||
|
],
|
||||||
|
"tests": [],
|
||||||
|
"isRequired": true,
|
||||||
|
"releasedOn": "January 1, 2016",
|
||||||
|
"type": "zipline",
|
||||||
|
"challengeType": 3,
|
||||||
|
"translations": {
|
||||||
|
"es": {
|
||||||
|
"title": "Visualiza datos utilizando un mapa de calor",
|
||||||
|
"description": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7fa6367417b2b2512bbf",
|
||||||
|
"title": "Visualize Data with a Choropleth Map",
|
||||||
|
"description": [
|
||||||
|
"Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.",
|
||||||
|
"Here's a <a href='http://codepen.io/freeCodeCamp/full/EZKqza' target='_blank'>working example</a>. Try not to look at its code.",
|
||||||
|
"You can build your project by forking <a href='http://codepen.io/FCC_test_suites/pen/JbgXab' target='_blank'>this CodePen pen</a>. Or you can use this CDN link to run the tests in any environment you like: <code>https://gitcdn.link/repo/no-stack-dub-sack/testable-projects-fcc/master/build/bundle.js</code>",
|
||||||
|
"Once you're done, submit below the URL to your working project with all its tests passing.",
|
||||||
|
"Remember to use the <a href='https://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask method if you get stuck."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"K3qqL7U"
|
||||||
|
],
|
||||||
|
"tests": [],
|
||||||
|
"isRequired": true,
|
||||||
|
"releasedOn": "January 15, 2017",
|
||||||
|
"type": "zipline",
|
||||||
|
"challengeType": 3,
|
||||||
|
"translations": {
|
||||||
|
"es": {
|
||||||
|
"title": "",
|
||||||
|
"description": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7fa6367417b2b2512bc0",
|
||||||
|
"title": "Visualize Data with a Treemap Diagram",
|
||||||
|
"description": [
|
||||||
|
"This isn't ready yet. Here's the issue: https://github.com/freeCodeCamp/CurriculumExpansion/issues/65",
|
||||||
|
"Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.",
|
||||||
|
"Here's a <a href='' target='_blank'>working example</a>. Try not to look at its code.",
|
||||||
|
"You can build your project by forking <a href='http://codepen.io/FCC_test_suites/pen/JbgXab' target='_blank'>this CodePen pen</a>. Or you can use this CDN link to run the tests in any environment you like: <code>https://gitcdn.link/repo/no-stack-dub-sack/testable-projects-fcc/master/build/bundle.js</code>",
|
||||||
|
"Once you're done, submit below the URL to your working project with all its tests passing.",
|
||||||
|
"Remember to use the <a href='https://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask method if you get stuck."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
""
|
||||||
|
],
|
||||||
|
"tests": [],
|
||||||
|
"isRequired": true,
|
||||||
|
"releasedOn": "January 15, 2017",
|
||||||
|
"type": "zipline",
|
||||||
|
"challengeType": 3,
|
||||||
|
"translations": {
|
||||||
|
"es": {
|
||||||
|
"title": "",
|
||||||
|
"description": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
2279
challenges/04-data-visualization/data-visualization-with-d3.json
Normal file
2279
challenges/04-data-visualization/data-visualization-with-d3.json
Normal file
File diff suppressed because it is too large
Load Diff
849
challenges/04-data-visualization/json-apis-and-ajax.json
Normal file
849
challenges/04-data-visualization/json-apis-and-ajax.json
Normal file
@ -0,0 +1,849 @@
|
|||||||
|
{
|
||||||
|
"name": "JSON APIs and Ajax",
|
||||||
|
"order": 2,
|
||||||
|
"time": "2 hours",
|
||||||
|
"helpRoom": "Help",
|
||||||
|
"required": [
|
||||||
|
{
|
||||||
|
"link": "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"challenges": [
|
||||||
|
{
|
||||||
|
"id": "587d7fad367417b2b2512be0",
|
||||||
|
"title": "Introduction to the JSON APIs and Ajax Challenges",
|
||||||
|
"description": [
|
||||||
|
[
|
||||||
|
"http://imgs.xkcd.com/comics/api.png",
|
||||||
|
"XKCD web comic with a user sitting at a computer reading the instructions for an API Guide for a site. The text below notes \"If you do things right, it can take people awhile to realize that your 'API documentation' is just instructions for how to look at your website.\"",
|
||||||
|
"Similar to how User Interfaces help people use programs, Application Programming Interfaces (APIs) help programs interact with other programs. APIs are tools that computers use to communicate with one another, in part to send and receive data. You can use API functionality in your page once you understand how to make requests and process data from it. Programmers often use Ajax technologies when working with APIs.<br><br>The term Ajax originated as an acronym for Asynchronous JavaScript And XML. It refers to a group of technologies that make asynchronous requests to a server to transfer data, then load any returned data into the page. An asynchronous process has a couple key properties. The browser does not stop loading a page to wait for the server's response. Also, the browser inserts updated data into part of the page without having to refresh the entire page.<br><br>User experience benefits from asynchronous processes in several ways. Pages load faster since the browser isn't waiting for the server to respond in the middle of a page render. Requests and transfers happen in the background, without interrupting what the user is doing. When the browser receives new data, only the necessary area of the page refreshes. These qualities especially enhance the user experience for single page applications.<br><br>The data transferred between the browser and server is often in a format called JavaScript Object Notation (JSON). JSON resembles JavaScript object literal syntax, except that it's transferred as a string. Once received, it can be converted into an object and used in a script.<br><br>This section covers how to transfer and use data using Ajax technologies with a Free Code Camp API.",
|
||||||
|
""
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"releasedOn": "",
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [],
|
||||||
|
"type": "Waypoint",
|
||||||
|
"challengeType": 7,
|
||||||
|
"isRequired": false,
|
||||||
|
"titleEs": "",
|
||||||
|
"descriptionEs": [
|
||||||
|
[]
|
||||||
|
],
|
||||||
|
"titleFr": "",
|
||||||
|
"descriptionFr": [
|
||||||
|
[]
|
||||||
|
],
|
||||||
|
"titleDe": "",
|
||||||
|
"descriptionDe": [
|
||||||
|
[]
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7fad367417b2b2512be1",
|
||||||
|
"title": "Trigger Click Events with JavaScript",
|
||||||
|
"description": [
|
||||||
|
"This section covers how to get data from APIs. APIs - or Application Programming Interfaces - are tools that computers use to communicate with one another.",
|
||||||
|
"You'll learn how to update HTML with the data we get from these APIs using a technology called Ajax.",
|
||||||
|
"You want your code to execute only once your page has finished loading. For that purpose, you can attach a JavaScript event to the document called <code>DOMContentLoaded</code>. Here's the code that does this:",
|
||||||
|
"<blockquote>document.addEventListener('DOMContentLoaded',function() {<br><br>});</blockquote>",
|
||||||
|
"Next, you can implement a click event handler that goes inside of the <code>DOMContentLoaded</code> function by adding the following code:",
|
||||||
|
"<code>document.getElementById('getMessage').onclick=function(){};</code>",
|
||||||
|
"<h4>Instructions</h4>",
|
||||||
|
"Add a click event handler inside of the <code>DOMContentLoaded</code> function for the element with id of <code>getMessage</code>."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"<script>",
|
||||||
|
" document.addEventListener('DOMContentLoaded',function(){",
|
||||||
|
" // Add your code below this line",
|
||||||
|
" ",
|
||||||
|
" ",
|
||||||
|
" // Add your code above this line",
|
||||||
|
" });",
|
||||||
|
"</script>",
|
||||||
|
"<style>",
|
||||||
|
" body {",
|
||||||
|
" text-align: center;",
|
||||||
|
" font-family: \"Helvetica\", sans-serif;",
|
||||||
|
" }",
|
||||||
|
" h1 {",
|
||||||
|
" font-size: 2em;",
|
||||||
|
" font-weight: bold;",
|
||||||
|
" }",
|
||||||
|
" .box {",
|
||||||
|
" border-radius: 5px;",
|
||||||
|
" background-color: #eee;",
|
||||||
|
" padding: 20px 5px;",
|
||||||
|
" }",
|
||||||
|
" button {",
|
||||||
|
" color: white;",
|
||||||
|
" background-color: #4791d0;",
|
||||||
|
" border-radius: 5px;",
|
||||||
|
" border: 1px solid #4791d0;",
|
||||||
|
" padding: 5px 10px 8px 10px;",
|
||||||
|
" }",
|
||||||
|
" button:hover {",
|
||||||
|
" background-color: #0F5897;",
|
||||||
|
" border: 1px solid #0F5897;",
|
||||||
|
" }",
|
||||||
|
"</style>",
|
||||||
|
"<h1>Cat Photo Finder</h1> ",
|
||||||
|
"<p class=\"message box\">",
|
||||||
|
" The message will go here",
|
||||||
|
"</p>",
|
||||||
|
"<p>",
|
||||||
|
" <button id=\"getMessage\">",
|
||||||
|
" Get Message",
|
||||||
|
" </button>",
|
||||||
|
"</p>"
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert(code.match(/document\\.getElementById\\(\\s*?('|\")getMessage\\1\\s*?\\)/g), 'message: Your code should use the <code>document.getElementById</code> method to select the <code>getMessage</code> element.');",
|
||||||
|
"assert(code.match(/\\.onclick=function\\(\\s*?\\)\\s*?{\\s*?};/g), 'message: Your code should add an <code>onclick</code> event handler.');"
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "waypoint",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7fad367417b2b2512be2",
|
||||||
|
"title": "Change Text with Click Events",
|
||||||
|
"description": [
|
||||||
|
"When the click event happens, you can use JavaScript to update an HTML element.",
|
||||||
|
"For example, when a user clicks the \"Get Message\" button, it changes the text of the element with the class <code>message</code> to say \"Here is the message\".",
|
||||||
|
"This works by adding the following code within the click event:",
|
||||||
|
"<code>document.getElementsByClassName('message')[0].innerHTML=\"Here is the message\";</code>",
|
||||||
|
"<h4>Instructions</h4>",
|
||||||
|
"Add code inside the <code>onclick</code> event handler to change the text inside the <code>message</code> element to say \"Here is the message\"."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"<script>",
|
||||||
|
" document.addEventListener('DOMContentLoaded',function(){",
|
||||||
|
" document.getElementById('getMessage').onclick=function(){",
|
||||||
|
" // Add your code below this line",
|
||||||
|
" ",
|
||||||
|
" ",
|
||||||
|
" // Add your code above this line",
|
||||||
|
" }",
|
||||||
|
" });",
|
||||||
|
"</script>",
|
||||||
|
"<style>",
|
||||||
|
" body {",
|
||||||
|
" text-align: center;",
|
||||||
|
" font-family: \"Helvetica\", sans-serif;",
|
||||||
|
" }",
|
||||||
|
" h1 {",
|
||||||
|
" font-size: 2em;",
|
||||||
|
" font-weight: bold;",
|
||||||
|
" }",
|
||||||
|
" .box {",
|
||||||
|
" border-radius: 5px;",
|
||||||
|
" background-color: #eee;",
|
||||||
|
" padding: 20px 5px;",
|
||||||
|
" }",
|
||||||
|
" button {",
|
||||||
|
" color: white;",
|
||||||
|
" background-color: #4791d0;",
|
||||||
|
" border-radius: 5px;",
|
||||||
|
" border: 1px solid #4791d0;",
|
||||||
|
" padding: 5px 10px 8px 10px;",
|
||||||
|
" }",
|
||||||
|
" button:hover {",
|
||||||
|
" background-color: #0F5897;",
|
||||||
|
" border: 1px solid #0F5897;",
|
||||||
|
" }",
|
||||||
|
"</style>",
|
||||||
|
"<h1>Cat Photo Finder</h1> ",
|
||||||
|
"<p class=\"message box\">",
|
||||||
|
" The message will go here",
|
||||||
|
"</p>",
|
||||||
|
"<p>",
|
||||||
|
" <button id=\"getMessage\">",
|
||||||
|
" Get Message",
|
||||||
|
" </button>",
|
||||||
|
"</p>"
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert(code.match(/document\\.getElementsByClassName\\(\\s*?('|\")message\\1\\s*?\\)\\[0\\]\\.innerHTML\\s*?=\\s*?('|\")Here is the message\\2/g), 'message: Your code should use the <code>document.getElementsByClassName</code> method to select the element with class <code>message</code> and set its <code>innerHTML</code> to the given string.');"
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "waypoint",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7fae367417b2b2512be3",
|
||||||
|
"title": "Get JSON with the JavaScript XMLHttpRequest Method",
|
||||||
|
"description": [
|
||||||
|
"You can also request data from an external source. This is where APIs come into play.",
|
||||||
|
"Remember that APIs - or Application Programming Interfaces - are tools that computers use to communicate with one another.",
|
||||||
|
"Most web APIs transfer data in a format called JSON. JSON stands for JavaScript Object Notation.",
|
||||||
|
"JSON syntax looks very similar to JavaScript object literal notation. JSON has object properties and their current values, sandwiched between a <code>{</code> and a <code>}</code>.",
|
||||||
|
"These properties and their values are often referred to as \"key-value pairs\".",
|
||||||
|
"However, JSON transmitted by APIs are sent as <code>bytes</code>, and your application receives it as a <code>string</code>. These can be converted into JavaScript objects, but they are not JavaScript objects by default. The <code>JSON.parse</code> method parses the string and constructs the JavaScript object described by it.",
|
||||||
|
"You can request the JSON from Free Code Camp's Cat Photo API. Here's the code you can put in your click event to do this:",
|
||||||
|
"<blockquote>req=new XMLHttpRequest();<br>req.open(\"GET\",'/json/cats.json',true);<br>req.send();<br>req.onload=function(){<br> json=JSON.parse(req.responseText);<br> document.getElementsByClassName('message')[0].innerHTML=JSON.stringify(json);<br>};</blockquote>",
|
||||||
|
"Here's a review of what each piece is doing. The JavaScript <code>XMLHttpRequest</code> object has a number of properties and methods that are used to transfer data. First, an instance of the <code>XMLHttpRequest</code> object is created and saved in the <code>req</code> variable.",
|
||||||
|
"Next, the <code>open</code> method initializes a request - this example is requesting data from an API, therefore is a \"GET\" request. The second argument for <code>open</code> is the URL of the API you are requesting data from. The third argument is a Boolean value where <code>true</code> makes it an asynchronous request.",
|
||||||
|
"The <code>send</code> method sends the request. Finally, the <code>onload</code> event handler parses the returned data and applies the <code>JSON.stringify</code> method to convert the JavaScript object into a string. This string is then inserted as the message text.",
|
||||||
|
"<h4>Instructions</h4>",
|
||||||
|
"Update the code to create and send a \"GET\" request to the Free Code Camp Cat Photo API. Then click the \"Get Message\" button. Your Ajax function will replace the \"The message will go here\" text with the raw JSON output from the API."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"<script>",
|
||||||
|
" document.addEventListener('DOMContentLoaded',function(){",
|
||||||
|
" document.getElementById('getMessage').onclick=function(){",
|
||||||
|
" // Add your code below this line",
|
||||||
|
" ",
|
||||||
|
" ",
|
||||||
|
" // Add your code above this line",
|
||||||
|
" };",
|
||||||
|
" });",
|
||||||
|
"</script>",
|
||||||
|
"<style>",
|
||||||
|
" body {",
|
||||||
|
" text-align: center;",
|
||||||
|
" font-family: \"Helvetica\", sans-serif;",
|
||||||
|
" }",
|
||||||
|
" h1 {",
|
||||||
|
" font-size: 2em;",
|
||||||
|
" font-weight: bold;",
|
||||||
|
" }",
|
||||||
|
" .box {",
|
||||||
|
" border-radius: 5px;",
|
||||||
|
" background-color: #eee;",
|
||||||
|
" padding: 20px 5px;",
|
||||||
|
" }",
|
||||||
|
" button {",
|
||||||
|
" color: white;",
|
||||||
|
" background-color: #4791d0;",
|
||||||
|
" border-radius: 5px;",
|
||||||
|
" border: 1px solid #4791d0;",
|
||||||
|
" padding: 5px 10px 8px 10px;",
|
||||||
|
" }",
|
||||||
|
" button:hover {",
|
||||||
|
" background-color: #0F5897;",
|
||||||
|
" border: 1px solid #0F5897;",
|
||||||
|
" }",
|
||||||
|
"</style>",
|
||||||
|
"<h1>Cat Photo Finder</h1> ",
|
||||||
|
"<p class=\"message box\">",
|
||||||
|
" The message will go here",
|
||||||
|
"</p>",
|
||||||
|
"<p>",
|
||||||
|
" <button id=\"getMessage\">",
|
||||||
|
" Get Message",
|
||||||
|
" </button>",
|
||||||
|
"</p>"
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert(code.match(/new\\s+?XMLHttpRequest\\(\\s*?\\)/g), 'message: Your code should create a new <code>XMLHttpRequest</code>.');",
|
||||||
|
"assert(code.match(/\\.open\\(\\s*?('|\")GET\\1\\s*?,\\s*?('|\")\\/json\\/cats\\.json\\2\\s*?,\\s*?true\\s*?\\)/g), 'message: Your code should use the <code>open</code> method to initialize a \"GET\" request to the Free Code Camp Cat Photo API.');",
|
||||||
|
"assert(code.match(/\\.send\\(\\s*\\)/g), 'message: Your code should use the <code>send</code> method to send the request.');",
|
||||||
|
"assert(code.match(/\\.onload=function\\(\\s*?\\)\\s*?{/g), 'message: Your code should have an <code>onload</code> event handler set to a function.');",
|
||||||
|
"assert(code.match(/JSON\\.parse\\(.*\\.responseText\\)/g), 'message: Your code should use the <code>JSON.parse</code> method to parse the <code>responseText</code>.');",
|
||||||
|
"assert(code.match(/document\\.getElementsByClassName\\(\\s*?('|\")message\\1\\s*?\\)\\[0\\]\\.innerHTML\\s*?=\\s*?JSON\\.stringify\\(.+?\\)/g), 'message: Your code should get the element with class <code>message</code> and change its inner HTML to the string of JSON data.');"
|
||||||
|
],
|
||||||
|
"solutions": [
|
||||||
|
|
||||||
|
],
|
||||||
|
"hints": [],
|
||||||
|
"type": "waypoint",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7fae367417b2b2512be4",
|
||||||
|
"title": "Access the JSON Data from an API",
|
||||||
|
"description": [
|
||||||
|
"In the previous challenge, you saw how to get JSON data from the Free Code Camp Cat Photo API.",
|
||||||
|
"Now you'll take a closer look at the returned data to better understand the JSON format. Recall some notation in JavaScript:",
|
||||||
|
"<blockquote>[ ] -> Square brackets represent an array<br>{ } -> Curly brackets represent an object<br>\" \" -> Double quotes represent a string. They are also used for key names in JSON</blockquote>",
|
||||||
|
"Understanding the structure of the data that an API returns is important because it influences how you retrieve the values you need.",
|
||||||
|
"On the right, click the \"Get Message\" button to load the Free Code Camp Cat Photo API JSON into the HTML.",
|
||||||
|
"The first and last character you see in the JSON data are square brackets <code>[ ]</code>. This means that the returned data is an array. The second character in the JSON data is a curly <code>{</code> bracket, which starts an object. Looking closely, you can see that there are three separate objects. The JSON data is an array of three objects, where each object contains information about a cat photo.",
|
||||||
|
"You learned earlier that objects contain \"key-value pairs\" that are separated by commas. In the Cat Photo example, the first object has <code>\"id\":0</code> where \"id\" is a key and 0 is its corresponding value. Similarly, there are keys for \"imageLink\", \"altText\", and \"codeNames\". Each cat photo object has these same keys, but with different values.",
|
||||||
|
"Another interesting \"key-value pair\" in the first object is <code>\"codeNames\":[\"Juggernaut\",\"Mrs. Wallace\",\"ButterCup\"]</code>. Here \"codeNames\" is the key and its value is an array of three strings. It's possible to have arrays of objects as well as a key with an array as a value.",
|
||||||
|
"Remember how to access data in arrays and objects. Arrays use bracket notation to access a specific index of an item. Objects use either bracket or dot notation to access the value of a given property. Here's an example that prints the \"altText\" of the first cat photo - note that the parsed JSON data in the editor is saved in a variable called <code>json</code>:",
|
||||||
|
"<blockquote>console.log(json[0].altText);<br>// Prints \"A white cat wearing a green helmet shaped melon on it's head.\"</blockquote>",
|
||||||
|
"<h4>Instructions</h4>",
|
||||||
|
"For the cat with the \"id\" of 2, print to the console the second value in the <code>codeNames</code> array. You should use bracket and dot notation on the object (which is saved in the variable <code>json</code>) to access the value."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"<script>",
|
||||||
|
" document.addEventListener('DOMContentLoaded',function(){",
|
||||||
|
" document.getElementById('getMessage').onclick=function(){",
|
||||||
|
" req=new XMLHttpRequest();",
|
||||||
|
" req.open(\"GET\",'/json/cats.json',true);",
|
||||||
|
" req.send();",
|
||||||
|
" req.onload=function(){",
|
||||||
|
" json=JSON.parse(req.responseText);",
|
||||||
|
" document.getElementsByClassName('message')[0].innerHTML=JSON.stringify(json);",
|
||||||
|
" // Add your code below this line",
|
||||||
|
" ",
|
||||||
|
" ",
|
||||||
|
" // Add your code above this line",
|
||||||
|
" };",
|
||||||
|
" };",
|
||||||
|
" });",
|
||||||
|
"</script>",
|
||||||
|
"<style>",
|
||||||
|
" body {",
|
||||||
|
" text-align: center;",
|
||||||
|
" font-family: \"Helvetica\", sans-serif;",
|
||||||
|
" }",
|
||||||
|
" h1 {",
|
||||||
|
" font-size: 2em;",
|
||||||
|
" font-weight: bold;",
|
||||||
|
" }",
|
||||||
|
" .box {",
|
||||||
|
" border-radius: 5px;",
|
||||||
|
" background-color: #eee;",
|
||||||
|
" padding: 20px 5px;",
|
||||||
|
" }",
|
||||||
|
" button {",
|
||||||
|
" color: white;",
|
||||||
|
" background-color: #4791d0;",
|
||||||
|
" border-radius: 5px;",
|
||||||
|
" border: 1px solid #4791d0;",
|
||||||
|
" padding: 5px 10px 8px 10px;",
|
||||||
|
" }",
|
||||||
|
" button:hover {",
|
||||||
|
" background-color: #0F5897;",
|
||||||
|
" border: 1px solid #0F5897;",
|
||||||
|
" }",
|
||||||
|
"</style>",
|
||||||
|
"<h1>Cat Photo Finder</h1> ",
|
||||||
|
"<p class=\"message box\">",
|
||||||
|
" The message will go here",
|
||||||
|
"</p>",
|
||||||
|
"<p>",
|
||||||
|
" <button id=\"getMessage\">",
|
||||||
|
" Get Message",
|
||||||
|
" </button>",
|
||||||
|
"</p>"
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert(code.match(/(?:json\\[2\\]\\.codeNames\\[1\\]|json\\[2\\]\\[('|\")codeNames\\1\\]\\[1\\])/g), 'message: Your code should use bracket and dot notation to access the proper code name, and print \"Loki\" to the console.');"
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "waypoint",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7fae367417b2b2512be5",
|
||||||
|
"title": "Convert JSON Data to HTML",
|
||||||
|
"description": [
|
||||||
|
"Now that you're getting data from a JSON API, you can display it in the HTML.",
|
||||||
|
"You can use a <code>forEach</code> method to loop through the data since the cat photo objects are held in an array. As you get to each item, you can modify the HTML elements.",
|
||||||
|
"First, declare an html variable with <code>var html = \"\";</code>.",
|
||||||
|
"Then, loop through the JSON, adding HTML to the variable that wraps the key names in <code>strong</code> tags, followed by the value. When the loop is finished, you render it.",
|
||||||
|
"Here's the code that does this:",
|
||||||
|
"<blockquote>json.forEach(function(val) {</br> var keys = Object.keys(val);</br> html += \"<div class = 'cat'>\";</br> keys.forEach(function(key) {</br> html += \"<strong>\" + key + \"</strong>: \" + val[key] + \"<br>\";</br> });</br> html += \"</div><br>\";</br>});</blockquote>",
|
||||||
|
"<h4>Instructions</h4>",
|
||||||
|
"Add a <code>forEach</code> method to loop over the JSON data and create the HTML elements to display it."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"<script>",
|
||||||
|
" document.addEventListener('DOMContentLoaded',function(){",
|
||||||
|
" document.getElementById('getMessage').onclick=function(){",
|
||||||
|
" req=new XMLHttpRequest();",
|
||||||
|
" req.open(\"GET\",'/json/cats.json',true);",
|
||||||
|
" req.send();",
|
||||||
|
" req.onload=function(){",
|
||||||
|
" json=JSON.parse(req.responseText);",
|
||||||
|
" var html = \"\";",
|
||||||
|
" // Add your code below this line",
|
||||||
|
" ",
|
||||||
|
" ",
|
||||||
|
" ",
|
||||||
|
" // Add your code above this line",
|
||||||
|
" document.getElementsByClassName('message')[0].innerHTML=html;",
|
||||||
|
" };",
|
||||||
|
" };",
|
||||||
|
" });",
|
||||||
|
"</script>",
|
||||||
|
"<style>",
|
||||||
|
" body {",
|
||||||
|
" text-align: center;",
|
||||||
|
" font-family: \"Helvetica\", sans-serif;",
|
||||||
|
" }",
|
||||||
|
" h1 {",
|
||||||
|
" font-size: 2em;",
|
||||||
|
" font-weight: bold;",
|
||||||
|
" }",
|
||||||
|
" .box {",
|
||||||
|
" border-radius: 5px;",
|
||||||
|
" background-color: #eee;",
|
||||||
|
" padding: 20px 5px;",
|
||||||
|
" }",
|
||||||
|
" button {",
|
||||||
|
" color: white;",
|
||||||
|
" background-color: #4791d0;",
|
||||||
|
" border-radius: 5px;",
|
||||||
|
" border: 1px solid #4791d0;",
|
||||||
|
" padding: 5px 10px 8px 10px;",
|
||||||
|
" }",
|
||||||
|
" button:hover {",
|
||||||
|
" background-color: #0F5897;",
|
||||||
|
" border: 1px solid #0F5897;",
|
||||||
|
" }",
|
||||||
|
"</style>",
|
||||||
|
"<h1>Cat Photo Finder</h1> ",
|
||||||
|
"<p class=\"message box\">",
|
||||||
|
" The message will go here",
|
||||||
|
"</p>",
|
||||||
|
"<p>",
|
||||||
|
" <button id=\"getMessage\">",
|
||||||
|
" Get Message",
|
||||||
|
" </button>",
|
||||||
|
"</p>"
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert(code.match(/json\\.forEach/g), 'message: Your code should use a <code>forEach</code> method to loop over the JSON data from the API.');"
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "waypoint",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7fae367417b2b2512be6",
|
||||||
|
"title": "Render Images from Data Sources",
|
||||||
|
"description": [
|
||||||
|
"The last few challenges showed that each object in the JSON array contains an <code>imageLink</code> key with a value that is the URL of a cat's image.",
|
||||||
|
"When you're looping through these objects, you can use this <code>imageLink</code> property to display this image in an <code>img</code> element.",
|
||||||
|
"Here's the code that does this:",
|
||||||
|
"<code>html += \"<img src = '\" + val.imageLink + \"' \" + \"alt='\" + val.altText + \"'>\";</code>",
|
||||||
|
"<h4>Instructions</h4>",
|
||||||
|
"Add code to use the <code>imageLink</code> and <code>altText</code> properties in an <code>img</code> tag."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"<script>",
|
||||||
|
" document.addEventListener('DOMContentLoaded',function(){",
|
||||||
|
" document.getElementById('getMessage').onclick=function(){",
|
||||||
|
" req=new XMLHttpRequest();",
|
||||||
|
" req.open(\"GET\",'/json/cats.json',true);",
|
||||||
|
" req.send();",
|
||||||
|
" req.onload=function(){",
|
||||||
|
" json=JSON.parse(req.responseText);",
|
||||||
|
" var html = \"\";",
|
||||||
|
" json.forEach(function(val) {",
|
||||||
|
" html += \"<div class = 'cat'>\";",
|
||||||
|
" // Add your code below this line",
|
||||||
|
" ",
|
||||||
|
" ",
|
||||||
|
" // Add your code above this line",
|
||||||
|
" html += \"</div><br>\";",
|
||||||
|
" });",
|
||||||
|
" document.getElementsByClassName('message')[0].innerHTML=html;",
|
||||||
|
" };",
|
||||||
|
" };",
|
||||||
|
" });",
|
||||||
|
"</script>",
|
||||||
|
"<style>",
|
||||||
|
" body {",
|
||||||
|
" text-align: center;",
|
||||||
|
" font-family: \"Helvetica\", sans-serif;",
|
||||||
|
" }",
|
||||||
|
" h1 {",
|
||||||
|
" font-size: 2em;",
|
||||||
|
" font-weight: bold;",
|
||||||
|
" }",
|
||||||
|
" .box {",
|
||||||
|
" border-radius: 5px;",
|
||||||
|
" background-color: #eee;",
|
||||||
|
" padding: 20px 5px;",
|
||||||
|
" }",
|
||||||
|
" button {",
|
||||||
|
" color: white;",
|
||||||
|
" background-color: #4791d0;",
|
||||||
|
" border-radius: 5px;",
|
||||||
|
" border: 1px solid #4791d0;",
|
||||||
|
" padding: 5px 10px 8px 10px;",
|
||||||
|
" }",
|
||||||
|
" button:hover {",
|
||||||
|
" background-color: #0F5897;",
|
||||||
|
" border: 1px solid #0F5897;",
|
||||||
|
" }",
|
||||||
|
"</style>",
|
||||||
|
"<h1>Cat Photo Finder</h1> ",
|
||||||
|
"<p class=\"message box\">",
|
||||||
|
" The message will go here",
|
||||||
|
"</p>",
|
||||||
|
"<p>",
|
||||||
|
" <button id=\"getMessage\">",
|
||||||
|
" Get Message",
|
||||||
|
" </button>",
|
||||||
|
"</p>"
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert(code.match(/val\\.imageLink/g), 'message: You should use the <code>imageLink</code> property to display the images.');"
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "waypoint",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7fae367417b2b2512be7",
|
||||||
|
"title": "Pre-filter JSON",
|
||||||
|
"description": [
|
||||||
|
"If you don't want to render every cat photo you get from the Free Code Camp Cat Photo API, you can pre-filter the JSON before looping through it.",
|
||||||
|
"Given that the JSON data is stored in an array, you can use the <code>filter</code> method to filter out the cat whose \"id\" key has a value of 1.",
|
||||||
|
"Here's the code to do this:",
|
||||||
|
"<blockquote>json = json.filter(function(val) {<br> return (val.id !== 1);<br>});</blockquote>",
|
||||||
|
"<h4>Instructions</h4>",
|
||||||
|
"Add code to <code>filter</code> the json data to remove the cat with the \"id\" value of 1."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"<script>",
|
||||||
|
" document.addEventListener('DOMContentLoaded',function(){",
|
||||||
|
" document.getElementById('getMessage').onclick=function(){",
|
||||||
|
" req=new XMLHttpRequest();",
|
||||||
|
" req.open(\"GET\",'/json/cats.json',true);",
|
||||||
|
" req.send();",
|
||||||
|
" req.onload=function(){",
|
||||||
|
" json=JSON.parse(req.responseText);",
|
||||||
|
" var html = \"\";",
|
||||||
|
" // Add your code below this line",
|
||||||
|
" ",
|
||||||
|
" ",
|
||||||
|
" // Add your code above this line",
|
||||||
|
" json.forEach(function(val) {",
|
||||||
|
" html += \"<div class = 'cat'>\"",
|
||||||
|
" ",
|
||||||
|
" html += \"<img src = '\" + val.imageLink + \"' \" + \"alt='\" + val.altText + \"'>\"",
|
||||||
|
" ",
|
||||||
|
" html += \"</div>\"",
|
||||||
|
" });",
|
||||||
|
" document.getElementsByClassName('message')[0].innerHTML=html;",
|
||||||
|
" };",
|
||||||
|
" }; ",
|
||||||
|
" });",
|
||||||
|
"</script>",
|
||||||
|
"<style>",
|
||||||
|
" body {",
|
||||||
|
" text-align: center;",
|
||||||
|
" font-family: \"Helvetica\", sans-serif;",
|
||||||
|
" }",
|
||||||
|
" h1 {",
|
||||||
|
" font-size: 2em;",
|
||||||
|
" font-weight: bold;",
|
||||||
|
" }",
|
||||||
|
" .box {",
|
||||||
|
" border-radius: 5px;",
|
||||||
|
" background-color: #eee;",
|
||||||
|
" padding: 20px 5px;",
|
||||||
|
" }",
|
||||||
|
" button {",
|
||||||
|
" color: white;",
|
||||||
|
" background-color: #4791d0;",
|
||||||
|
" border-radius: 5px;",
|
||||||
|
" border: 1px solid #4791d0;",
|
||||||
|
" padding: 5px 10px 8px 10px;",
|
||||||
|
" }",
|
||||||
|
" button:hover {",
|
||||||
|
" background-color: #0F5897;",
|
||||||
|
" border: 1px solid #0F5897;",
|
||||||
|
" }",
|
||||||
|
"</style>",
|
||||||
|
"<h1>Cat Photo Finder</h1> ",
|
||||||
|
"<p class=\"message box\">",
|
||||||
|
" The message will go here",
|
||||||
|
"</p>",
|
||||||
|
"<p>",
|
||||||
|
" <button id=\"getMessage\">",
|
||||||
|
" Get Message",
|
||||||
|
" </button>",
|
||||||
|
"</p>"
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert(code.match(/json\\.filter/g), 'message: Your code should use the <code>filter</code> method.');"
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "waypoint",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7faf367417b2b2512be8",
|
||||||
|
"title": "Get Geolocation Data",
|
||||||
|
"description": [
|
||||||
|
"Another cool thing you can do is access your user's current location. Every browser has a built in navigator that can give you this information.",
|
||||||
|
"The navigator will get the user's current longitude and latitude.",
|
||||||
|
"You will see a prompt to allow or block this site from knowing your current location. The challenge can be completed either way, as long as the code is correct.",
|
||||||
|
"By selecting allow, you will see the text on the output phone change to your latitude and longitude.",
|
||||||
|
"Here's code that does this:",
|
||||||
|
"<blockquote>if (navigator.geolocation){<br> navigator.geolocation.getCurrentPosition(function(position) {<br> document.getElementById('data').innerHTML=\"latitude: \"+ position.coords.latitude + \"<br>longitude: \" + position.coords.longitude;<br> });<br>}</blockquote>",
|
||||||
|
"First, it checks if the <code>navigator.geolocation</code> object exists. If it does, the <code>getCurrentPosition</code> method on that object is called, which initiates an asynchronous request for the user's position. If the request is successful, the callback function in the method runs. This function accesses the <code>position</code> object's values for latitude and longitude using dot notation and updates the HTML.",
|
||||||
|
"<h4>Instructions</h4>",
|
||||||
|
"Add the example code inside the <code>script</code> tags to check a user's current location and insert it into the HTML."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"<script>",
|
||||||
|
" // Add your code below this line",
|
||||||
|
" ",
|
||||||
|
" ",
|
||||||
|
" // Add your code above this line",
|
||||||
|
"</script>",
|
||||||
|
"<h4>You are here:</h4>",
|
||||||
|
"<div id=\"data\">",
|
||||||
|
"",
|
||||||
|
"</div>"
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert(code.match(/navigator\\.geolocation\\.getCurrentPosition/g), 'message: Your code should use <code>navigator.geolocation</code> to access the user's current location.');",
|
||||||
|
"assert(code.match(/position\\.coords\\.latitude/g), 'message: Your code should use <code>position.coords.latitude</code> to display the user's latitudinal location.');",
|
||||||
|
"assert(code.match(/position\\.coords\\.longitude/g), 'message: Your code should use <code>position.coords.longitude</code> to display the user's longitudinal location.');",
|
||||||
|
"assert(code.match(/document\\.getElementById\\(\\s*?('|\")data\\1\\s*?\\)\\.innerHTML/g), 'message: You should display the user's position within the <code>data</code> div element.');"
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "waypoint",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7faf367417b2b2512be9",
|
||||||
|
"title": "Post Data with the JavaScript XMLHttpRequest Method",
|
||||||
|
"description": [
|
||||||
|
"In the previous examples, you received data from an external resource. You can also send data to an external resource, as long as that resource supports Ajax requests and you know the URL.",
|
||||||
|
"JavaScript's <code>XMLHttpRequest</code> method is also used to post data to a server. Here's an example:",
|
||||||
|
"<blockquote>req=new XMLHttpRequest();<br>req.open(\"POST\",url,true);<br>req.setRequestHeader('Content-Type','text/plain');<br>req.onreadystatechange=function(){<br> if(req.readyState==4 && req.status==200){<br> document.getElementsByClassName('message')[0].innerHTML=req.responseText;<br> }<br>};<br>req.send(userName);</blockquote>",
|
||||||
|
"You've seen several of these methods before. Here the <code>open</code> method initializes the request as a \"POST\" to the given URL of the external resource, and uses the <code>true</code> Boolean to make it asynchronous.",
|
||||||
|
"The <code>setRequestHeader</code> method sets the value of an HTTP request header, which contains information about the sender and the request. It must be called after the <code>open</code> method, but before the <code>send</code> method. The two parameters are the name of the header and the value to set as the body of that header.",
|
||||||
|
"Next, the <code>onreadystatechange</code> event listener handles a change in the state of the request. A <code>readyState</code> of 4 means the operation is complete, and a <code>status</code> of 200 means it was a successful request. The document's HTML can be updated.",
|
||||||
|
"Finally, the <code>send</code> method sends the request with the <code>userName</code> value, which was given by the user in the <code>input</code> field.",
|
||||||
|
"<h4>Instructions</h4>",
|
||||||
|
"Update the code to create and send a \"POST\" request. Then enter your name in input box and click \"Send Message\". Your Ajax function will replace \"Reply from Server will be here.\" with the reply of the server. In this case, it is your name appended with \" loves cats\"."
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
"<script>",
|
||||||
|
" document.addEventListener('DOMContentLoaded',function(){",
|
||||||
|
" document.getElementById('sendMessage').onclick=function(){",
|
||||||
|
" ",
|
||||||
|
" var userName=document.getElementById('name').value;",
|
||||||
|
" // Add your code below this line",
|
||||||
|
" ",
|
||||||
|
" ",
|
||||||
|
" // Add your code above this line",
|
||||||
|
" };",
|
||||||
|
" });",
|
||||||
|
"</script>",
|
||||||
|
"<style>",
|
||||||
|
" body {",
|
||||||
|
" text-align: center;",
|
||||||
|
" font-family: \"Helvetica\", sans-serif;",
|
||||||
|
" }",
|
||||||
|
" h1 {",
|
||||||
|
" font-size: 2em;",
|
||||||
|
" font-weight: bold;",
|
||||||
|
" }",
|
||||||
|
" .box {",
|
||||||
|
" border-radius: 5px;",
|
||||||
|
" background-color: #eee;",
|
||||||
|
" padding: 20px 5px;",
|
||||||
|
" }",
|
||||||
|
" button {",
|
||||||
|
" color: white;",
|
||||||
|
" background-color: #4791d0;",
|
||||||
|
" border-radius: 5px;",
|
||||||
|
" border: 1px solid #4791d0;",
|
||||||
|
" padding: 5px 10px 8px 10px;",
|
||||||
|
" }",
|
||||||
|
" button:hover {",
|
||||||
|
" background-color: #0F5897;",
|
||||||
|
" border: 1px solid #0F5897;",
|
||||||
|
" }",
|
||||||
|
"</style>",
|
||||||
|
"<h1>Cat Friends</h1> ",
|
||||||
|
"<p class=\"message box\">",
|
||||||
|
" Reply from Server will be here",
|
||||||
|
"</p>",
|
||||||
|
"<p>",
|
||||||
|
" <label for=\"name\">Your name:",
|
||||||
|
" <input type=\"text\" id=\"name\"/>",
|
||||||
|
" </label>",
|
||||||
|
" <button id=\"sendMessage\">",
|
||||||
|
" Send Message",
|
||||||
|
" </button>",
|
||||||
|
"</p>"
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
"assert(code.match(/new\\s+?XMLHttpRequest\\(\\s*?\\)/g), 'message: Your code should create a new <code>XMLHttpRequest</code>.');",
|
||||||
|
"assert(code.match(/\\.open\\(\\s*?('|\")POST\\1\\s*?,\\s*?url\\s*?,\\s*?true\\s*?\\)/g), 'message: Your code should use the <code>open</code> method to initialize a \"POST\" request to the server.');",
|
||||||
|
"assert(code.match(/\\.setRequestHeader\\(\\s*?('|\")Content-Type\\1\\s*?,\\s*?('|\")text\\/plain\\2\\s*?\\)/g), 'message: Your code should use the <code>setRequestHeader</code> method.');",
|
||||||
|
"assert(code.match(/\\.onreadystatechange\\s*?=/g), 'message: Your code should have an <code>onreadystatechange</code> event handler set to a function.');",
|
||||||
|
"assert(code.match(/document\\.getElementsByClassName\\(\\s*?('|\")message\\1\\s*?\\)\\[0\\]\\.innerHTML\\s*?=\\s*?.+?\\.responseText/g), 'message: Your code should get the element with class <code>message</code> and change its inner HTML to the <code>responseText</code>.');",
|
||||||
|
"assert(code.match(/\\.send\\(\\s*?userName\\s*?\\)/g), 'message: Your code should use the <code>send</code> method.');"
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "waypoint",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -1,22 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "Accessibility",
|
|
||||||
"order": 5.5,
|
|
||||||
"time": "0 hours",
|
|
||||||
"isComingSoon": true,
|
|
||||||
"challenges": [
|
|
||||||
{
|
|
||||||
"id": "bd7128d8c441eddfbeb5bddd",
|
|
||||||
"title": "Learn Accessibility Challenges",
|
|
||||||
"description": [],
|
|
||||||
"challengeSeed": [],
|
|
||||||
"tests": [],
|
|
||||||
"type": "hike",
|
|
||||||
"challengeType": 6,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Accessibility"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "Agile",
|
|
||||||
"order": 6,
|
|
||||||
"time": "0 hours",
|
|
||||||
"isComingSoon": true,
|
|
||||||
"challenges": [
|
|
||||||
{
|
|
||||||
"id": "bd7128d8c441eddfbec5bdde",
|
|
||||||
"title": "Learn Agile Challenges",
|
|
||||||
"description": [],
|
|
||||||
"challengeSeed": [],
|
|
||||||
"tests": [],
|
|
||||||
"type": "hike",
|
|
||||||
"challengeType": 6,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Agile"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@ -1,118 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "Big O Notation",
|
|
||||||
"order": 4,
|
|
||||||
"time": "30 minutes",
|
|
||||||
"challenges": [
|
|
||||||
{
|
|
||||||
"id": "56b15f15632298c12f31517b",
|
|
||||||
"title": "What It Is and Why You Should Care",
|
|
||||||
"description": [
|
|
||||||
"Time complexity is a way of discussing how long specific algorithms take. This is useful in streamlining software so it works as fast as possible.",
|
|
||||||
"When you're writing code, you should be aware of how long it's going to take to execute. Nobody wants to create a product that users find frustrating due to slow use.",
|
|
||||||
"Time complexity is talked about in relation to an algorithm, a collection of one or more functions.",
|
|
||||||
"Big O Notation specifically helps you identify when an algorithm wouldn't 'scale' well, or work well with varying amounts of users, information, or other inputs.",
|
|
||||||
"This does NOT correspond with Moore's law - no matter how big and fast your computer is, if the algorithm is exponentially inefficient, it's realistically unusable.",
|
|
||||||
"Additionally, questions about Big O Notation and time complexity can be used as interview questions.",
|
|
||||||
"Your employers will want to know that the code you write will not take too long to load on the page for the users, and knowledge of Big O Notation shows that you're cognizant of that while writing your code.",
|
|
||||||
"The take-away from this video is that Big O Notation helps you identify where there could be problems (sometimes BIG problems) in speed and memory when your site or app grows."
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"KSNx22U4uWE"
|
|
||||||
],
|
|
||||||
"tests": [
|
|
||||||
[
|
|
||||||
"If an algorithm is efficient for small amounts of data, it will be equally efficient for large amounts of data.",
|
|
||||||
false,
|
|
||||||
"It depends on the algorithm and the data it's processing."
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"Big O Notation reflects the speed of an algorithm in terms of the expected input.",
|
|
||||||
true
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"type": "hike",
|
|
||||||
"challengeType": 6,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "¿Qué es y porque te debe interesar?",
|
|
||||||
"description": [
|
|
||||||
"La complejidad temporal es una forma de discutir cunto tiempo toma un algoritmo específico. Esto es útil al ajustar software para que opere tan rápido como sea posible.",
|
|
||||||
"Cuando escribes código, debes tener en cuenta cuanto se va a demorar su ejecución. Nadie quiere crear un producto que fruste a los usuarios por su lentitud.",
|
|
||||||
"Se habla de complejidad temporal en relación con un algoritmo, una colección de una o más funciones.",
|
|
||||||
"La notación O mayúscula ayuda a identificar de manera específica cuando un algoritmo no 'escalaría' bien, o no funcionaría bien con una cantidad que varia de usuarios, de información o de algún otro recurso.",
|
|
||||||
"Esto no tiene correspondencia con la ley de Moore - no importa cuando grande y rápido sea tu computador, si un algoritmo es exponencialmente ineficiente, en realidad no es utilizable.",
|
|
||||||
"Además, pueden haber preguntas en entrevistas sobre la notación O mayúscula y de complejidad temporal.",
|
|
||||||
"Tu empleador podrá querer saber que el código que escribes no tardará demasiado en cargar en la página de los usuarios, y el conocimiento de la notación O mayúscula muestra que reconoces esto mientras escribies tu código.",
|
|
||||||
"Lo que esperamos que te quede de este video es que la notación O mayúscula te ayuda a identificar cuando podría haber problemas (en ocasiones problemas MAYÚSCULOS) en velocidad y memoria cuando tu sitio o aplicación crezcan."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "56b15f15632298c12f31517a",
|
|
||||||
"title": "A Few Examples",
|
|
||||||
"description": [
|
|
||||||
"Time complexity is commonly estimated by counting the number of elementary operations (elementary operation = an operation that takes a fixed amount of time to perform) performed in the algorithm.",
|
|
||||||
"Time complexity is classified by the nature of the function O(n). O represents the function, and (n) represents the number of elements to be acted on.",
|
|
||||||
"Worst-case time complexity, the longest it could possibly take with any valid input, is the most common way to express time complexity.",
|
|
||||||
"When you discuss Big-O notation, that is generally referring to the worst case scenario.",
|
|
||||||
"For example, if we have to search two lists for common entries, we will calculate as if both entries would be at the very end of each list, just to be safe that we don't underestimate how long it could take.",
|
|
||||||
"O(1) - determining if a number is odd or even. O(1) is a static amount of time, the same no matter how much information is there or how many users there are.",
|
|
||||||
"O(log N) - finding a word in the dictionary (using binary search). Binary search is an example of a type of 'divide and conquer' algorithm.",
|
|
||||||
"O(N) - reading a book",
|
|
||||||
"O(N log N) - sorting a deck of playing cards (using merge sort)",
|
|
||||||
"O(N^2) - checking if you have everything on your shopping list in your cart",
|
|
||||||
"O(infinity) - tossing a coin until it lands on heads",
|
|
||||||
"As a rule of thumb, anything with N^2 or any other exponent is NOT a good algorithm for a site with multiple users.",
|
|
||||||
"If your algorithm slows down exponentially with the input, you're going to want to look for a more efficient way to solve that problem.",
|
|
||||||
"Whenever you’re coding loops within loops, you want to be especially mindful of time complexity.",
|
|
||||||
"Big O Cheat Sheet is the place to look once you can classify your algorithm, like as a 'merge-sort' or a 'quick-sort'.",
|
|
||||||
"<a href='http://bigocheatsheet.com/' target='_blank'>bigocheatsheet.com/</a>",
|
|
||||||
"Princeton Coursera course is NOT for the faint of heart. With examples and practice in Java, this course will cover iterating over data specifically with Java, sorting, and searching algorithms.",
|
|
||||||
"<a href='http://coursera.org/course/algs4partI' target='_blank'>coursera.org/course/algs4partI</a>"
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"-Eiw_-v__Vo"
|
|
||||||
],
|
|
||||||
"tests": [
|
|
||||||
[
|
|
||||||
"Algorithms expressed exponentially like O(C^N), where C is a constant can work well in certain situations, so you shouldn't avoid them completely.",
|
|
||||||
false,
|
|
||||||
"While they can work in certain small scale situations, they aren't good practice because they will not work larger scale."
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"All algorithms can be broken down to complete in a static amount of time if you do it effectively.",
|
|
||||||
false,
|
|
||||||
"Not all algorithms can be simplified to that extent, but you should always try to find the simplest way to solve your problem."
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"type": "hike",
|
|
||||||
"challengeType": 6,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Unos pocos ejemplos",
|
|
||||||
"description": [
|
|
||||||
"La complejidad en tiempo comunmente se estima contando la cantidad de operaciones elementales que un algoritmo efectua (una operación elemental es una cuya ejecución requiere una cantidad de tiempo fijo).",
|
|
||||||
"La complejidad temporal se clasifica por la naturaleza de la función O(n) donde O representa una función matemática para el tiempo que tarda el algoritmo y n representa la cantidad de elementos sobre los que actua el algoritmo.",
|
|
||||||
"La complejidad en el peor caso, es la que más se demoraría con una entrada válida, es la forma más comun de expresar la complejidad.",
|
|
||||||
"Cuando discutes la notación O mayúscula, esta se refiere al peor caso.",
|
|
||||||
"Por ejemplo, si debemos buscar elementos comunes en dos listas, haremos el cálculo suponiendo que los elementos comunes estuvieran justamente al final de cada una de las lista, para no subestimar cuando nos tomaría encontrarlos.",
|
|
||||||
"O(1) - por ejemplo determinar si un número es par o impar, tarda lo mismo sin importar cuanta información haya o cuantos usuarios haya.",
|
|
||||||
"O(log N) - encontrar una palabra en un diccionario (utilizando búsqueda binaria). La búsqueda binaria es un ejemplo de un tipo de algoritmo 'divide y vencerás'.",
|
|
||||||
"O(N) - leer un libro",
|
|
||||||
"O(N log N) - ordenar una plia de cartas (usando ordenamiento por mezcla)",
|
|
||||||
"O(N^2) - revisar que todo lo de una lista de compras está en el carrito de compras",
|
|
||||||
"O(infinito) - lanzar una moneda hasta que caiga cara",
|
|
||||||
"Como regla, todo lo que sea N^2 o cualquier exponente mayor no es un buen algoritmo para un sitio con muchos usuarios.",
|
|
||||||
"Si tu algoritmo se hace más lento de manera exponencial a medida que aumenta la entrada, querrás buscar una forma más eficiente de resolver el problema.",
|
|
||||||
"Siempre que programes ciclos dentro de ciclos, querrás ser especialmente cuidadoso de la complejidad temporal.",
|
|
||||||
"La hoja de copialina de la notación O mayúscula es el lugar donde mirar para clasificar tu algoritmo, como el de un 'ordenamiento por mezcla' o un 'ordenamiento rápido'.",
|
|
||||||
"<a href='http://bigocheatsheet.com/' target='_blank'>bigocheatsheet.com/</a>",
|
|
||||||
"El curso de Coursera de Princeton no es para débiles de corazón. Con ejemplos y prácticas en Java, este curso cubre iteración sobre los datos especifcamente algoritmos de ordenamiento y búsqueda.",
|
|
||||||
"<a href='http://coursera.org/course/algs4partI' target='_blank'>coursera.org/course/algs4partI</a>"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@ -1,369 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "Chrome Developer Tools",
|
|
||||||
"order": 3,
|
|
||||||
"time": "1 hour",
|
|
||||||
"challenges": [
|
|
||||||
{
|
|
||||||
"id": "56b15f15632298c12f315184",
|
|
||||||
"title": "Elements",
|
|
||||||
"description": [
|
|
||||||
"This is basic info and a mini-lesson on the Elements tab of Chrome Dev Tools. Check out more in-depth documentation here: <a href='https://developers.google.com/web/tools/chrome-devtools/inspect-styles/' target='_blank'>developers.google.com/web/tools/chrome-devtools/inspect-styles/</a>",
|
|
||||||
"We will be using the webpage mckellen.com/ per suggestion of Free Code Camp user kmiasko.",
|
|
||||||
"If you right click and select 'Inspect element', you can have access to the elements tab. You can change text, background color, text color, and any other CSS or HTML you'd like!",
|
|
||||||
"These changes don't set up automatically, so don't use this as an IDE or a place to create or edit anything you want to save. You can set up something called 'persistent authoring' to save.",
|
|
||||||
"Cascade, inherit, and other CSS rules still apply, so keep that in mind as you play around. Additionally, overridden styles will be shown as having a strike through them.",
|
|
||||||
"It should also be noted that all of the code you're seeing in this 'tree' is current HTML, not the original when the page loaded. If you use JavaScript or jQuery to change something, it will be updated on this tree.",
|
|
||||||
"Padding, border, and margins are easily inspected and edited using the colorful box on the right or bottom side.",
|
|
||||||
"Please check out the Chrome Dev Tools documentation at <a href='http://developers.google.com/web/tools/chrome-devtools/' target='_blank'>developers.google.com/web/tools/chrome-devtools/</a>"
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"oz32JxUx1Fk"
|
|
||||||
],
|
|
||||||
"tests": [
|
|
||||||
[
|
|
||||||
"The elements tab is where you should go if you want to edit HTML and CSS of an existing web page.",
|
|
||||||
true
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"Any changes you make are saved, so it's safe to use as an editing tool.",
|
|
||||||
false,
|
|
||||||
"These changes are temporary, so if you find a great fix or idea, put it into your own documents so you don't lose your progress!"
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"type": "hike",
|
|
||||||
"challengeType": 6,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Elementos",
|
|
||||||
"description": [
|
|
||||||
"Esta es información básica y una mini-lección sobre la pestaña Elements en las herramientas de desarrollo de Chrome. Echa un vistazo a la documentación más detallada aquí: <a href='https://developers.google.com/web/tools/chrome-devtools/inspect-styles/' target='_blank'>developers.google.com/web/tools/chrome-devtools/inspect-styles/</a>",
|
|
||||||
"Vamos a utilizar la página web mckellen.com/ por sugerencia del usuario de FreeCodeCamp kmiasko.",
|
|
||||||
"Si pulsas con el botón derecho y seleccionas 'Inspeccionar elemento', tendrás acceso a la pestaña elements. ¡Puedes cambiar el texto, el color de fondo, el color de texto y cualquier otra propiedad CSS o elemento HTML que desees!",
|
|
||||||
"Estos cambios no se establecen de forma automática, por lo que no debes usar el inspector como un IDE o como un lugar para crear o editar cualquier cosa que desees guardar. Puedes configurar algo que se llama 'autoría persistente' para salvar.",
|
|
||||||
"Las reglas de CSS como cascada, herencia y otras se aplican, así que tenlo en cuenta a medida que juegas. Además, los estilos anulados se muestran con un tachado sobre ellos. ",
|
|
||||||
"También hay que señalar que todo el código que veas en ese 'árbol' es código HTML actual, no el original que había cuando se cargó la página. Si utilizas jQuery o JavaScript para cambiar algo, esté árbol se actualizará.",
|
|
||||||
"El relleno, los bordes y los márgenes se inspeccionan fácilmente y puedes editarlos usando la caja con colores que encontrarás al lado derecho o en la parte de abajo.",
|
|
||||||
"Por favor, echa un vistazo a la documentación de las herramientas de desarrollo de Chrome en <a href='http://developers.google.com/web/tools/chrome-devtools/' target='_blank'>developers.google.com/web/tools/chrome-devtools/</a>"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "56b15f15632298c12f315183",
|
|
||||||
"title": "Network",
|
|
||||||
"description": [
|
|
||||||
"The network tab helps answer questions like 'Which element or part of the page took the longest?' or 'What initiated a request?'.",
|
|
||||||
"The network panel records detailed information about how long each element of your page or app takes to load.",
|
|
||||||
"Every request is recorded in the log, which can be found lower in the network panel.",
|
|
||||||
"If you look at the line on the side, you'll notice a pattern of colors. Those colors each represent a different type of content in the request.",
|
|
||||||
"The longer the line is a certain color, the longer that type of content took in that request. Ultimately, you want short lines, and if any request has long lines, you know what may be slowing down the web page.",
|
|
||||||
"If you click a request in the log, you can get even more detailed information.",
|
|
||||||
"Check out more in-depth documentation here: <a href='https://developers.google.com/web/tools/chrome-devtools/network-performance/resource-loading' target='_blank'>developers.google.com/web/tools/chrome-devtools/network-performance/resource-loading</a>"
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"dsVbhlBIfz0"
|
|
||||||
],
|
|
||||||
"tests": [
|
|
||||||
[
|
|
||||||
"The Network tab is a good place to look to determine what requests are being made and how long they're taking.",
|
|
||||||
true
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"Like all of the tabs in Chrome Developer tools, there are many ways to view and utilize the information it offers.",
|
|
||||||
true
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"type": "hike",
|
|
||||||
"challengeType": 6,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "red",
|
|
||||||
"description": [
|
|
||||||
"La pestaña network (red) ayuda a responder preguntas como '¿Qué elemento o parte de la página fue el más demorado?' o '¿Qué inició una petición?'",
|
|
||||||
"El panel de red registra información detallada sobre cuánto tarda en cargar cada elemento de su página o aplicación.",
|
|
||||||
"Cada solicitud se registra en la bitácora, que se puede encontrar en la parte inferior del panel de red.",
|
|
||||||
"Si te fijas en la línea al lado derecho, te darás cuenta de un patrón de colores. Cada color representa un tipo diferente de contenido en la solicitud. ",
|
|
||||||
"Cuanto más larga sea la línea de un color determinado, tanto más tiempo tomó ese tipo de contenido en la solicitud. En últimas quieres líneas cortas, y si cualquier solicitud tiene largas líneas, sabes que puede estar ralentizando la página web.",
|
|
||||||
"Si pulsas sobre una solicitud en la bitácora, podrás obtener información más detallada.",
|
|
||||||
"Consulta más documentación detallada aquí: <a href='https://developers.google.com/web/tools/chrome-devtools/network-performance/resource-loading' target='_blank'>developers.google.com/web/tools/chrome-devtools/network-performance/resource-loading</a>"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "56b15f15632298c12f315182",
|
|
||||||
"title": "Sources",
|
|
||||||
"description": [
|
|
||||||
"The 'Sources' tab is most useful for debugging JavaScript. The bigger your project is, the harder it can be to find exactly where a problem occurs.",
|
|
||||||
"You can select different parts of the code to be 'breakpoints', checkpoints that will stop the code at that exact moment.",
|
|
||||||
"There are different breakpoints you can watch for, like for a specific line of code, on a DOM event, a server request called XMLHTTP request, or a JavaScript event.",
|
|
||||||
"When you set a breakpoint, the browser pauses everything when it interprets that line of code or event.",
|
|
||||||
"By slowing everything down and giving yourself a chance to examine what's happening at every spot you've set, you can keep track of exactly what's happening in the page or app.",
|
|
||||||
"Once all of the breakpoints are set, you can step through the code and examine the state of your page or app at every breakpoint.",
|
|
||||||
"Just like with elements, you can live-edit through Dev Tools, but remember to save those changes however you can so your progress isn't lost.",
|
|
||||||
"Check out more in-depth documentation here: <a href='https://developers.google.com/web/tools/chrome-devtools/javascript/add-breakpoints' target='_blank'>developers.google.com/web/tools/chrome-devtools/javascript/add-breakpoints/</a>"
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"CoESC2XGZLg"
|
|
||||||
],
|
|
||||||
"tests": [
|
|
||||||
[
|
|
||||||
"Debugging can be done easily in the 'Sources' tab of Chrome Dev Tools.",
|
|
||||||
true
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"These breakpoints are already established, but you can edit where they are in the code.",
|
|
||||||
false,
|
|
||||||
"You set up all of the breakpoints in the debugger."
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"type": "hike",
|
|
||||||
"challengeType": 6,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Fuentes",
|
|
||||||
"description": [
|
|
||||||
"La pestaña 'fuentes' es más útil para la depuración de JavaScript. Cuanto más grande sea tu proyecto, tanto más difícil resulta encontrar exactamente dónde se produce un problema. ",
|
|
||||||
"Puedes seleccionar diferentes partes del código para ser 'puntos de interrupción', puestos de control que detendrán la ejecución del código en ese preciso momento. ",
|
|
||||||
"Hay diferentes puntos de interrupción que puedes establecer, por ejemplo una línea de código específica, un evento del DOM, una petición del servidor llamada solicitud XMLHTTP, o un evento de JavaScript.",
|
|
||||||
"Cuando estableces un punto de interrupción, el navegador detiene todo cuando llega a interpretar esa línea de código o evento.",
|
|
||||||
"Al reducir la velocidad de todo y darte la oportunidad de examinar lo que está sucediendo en cada punto que hayas configurado, podrás controlar exactamente lo que está sucediendo en la página o aplicación.",
|
|
||||||
"Una vez has establecido todos los puntos de interrupción, puedes recorrer el código y examinar el estado de tu página o aplicación en cada punto de interrupción.",
|
|
||||||
"Al igual que con los elementos, puedes editar en vivo mediante las herramientas de desarrollo, pero recuerda que debes guardar esos cambios para que no pierdas tu progreso.",
|
|
||||||
"Revisa documentación más detallada aquí: <a href='https://developers.google.com/web/tools/chrome-devtools/javascript/add-breakpoints' target='_blank'>developers.google.com/web/tools/chrome-devtools/javascript/add-breakpoints/</a>"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "56b15f15632298c12f315181",
|
|
||||||
"title": "Timeline",
|
|
||||||
"description": [
|
|
||||||
"The Timeline panel lets you record and analyze all the activity in your application as it runs. It's the best place to start investigating perceived performance issues in your application.",
|
|
||||||
"Just like you use network to find out how long things take to communicate with the internet and you use sources to find out where something is broken, you can use the timeline to figure out what's going on and how long it takes in even more detail.",
|
|
||||||
"With the timeline you record events using the small circle button. You can record (or capture) stacks, profile js, memory, and paint (CSS).",
|
|
||||||
"When you record (capture) these, it sets them up in small, detailed logs that you can organize many ways to fit you.",
|
|
||||||
"All of this will help you to better understand what's happening in the browser, particularly which events require more browser memory than others.",
|
|
||||||
"When you're using timeline, remember to use this 'clear' button and to start recording before you load the page, depending on what you want to capture.",
|
|
||||||
"You'll notice that when you record JS events, clicking on the title or 'function call' on the left will take you to the document and line of that function using the resource panel.",
|
|
||||||
"Check out more in-depth documentation here: <a href='https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/timeline-tool' target='_blank'>developers.google.com/web/tools/chrome-devtools/evaluate-performance/timeline-tool</a>"
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"mxsZlsG8tKA"
|
|
||||||
],
|
|
||||||
"tests": [
|
|
||||||
[
|
|
||||||
"The 'Timeline' tab records how long it takes APIs to return information.",
|
|
||||||
false,
|
|
||||||
"The 'Timeline' tab is best utilized as a starting place for performance issues that relate to speed and memory usage"
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"You need to press 'record' to start capturing information when using the 'Timeline' tab.",
|
|
||||||
true
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"type": "hike",
|
|
||||||
"challengeType": 6,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Línea de tiempo",
|
|
||||||
"description": [
|
|
||||||
"El panel Línea de tiempo te permite grabar y analizar toda la actividad en tu aplicación mientras se ejecuta. Es el mejor lugar para comenzar a investigar los problemas de rendimiento que percibas en tu aplicación. ",
|
|
||||||
"Al igual que usas el panel de red para averiguar cuánto tiempo toman las partes de la página para comunicarse con el Internet y utilizas fuentes para averiguar dónde algo se daña, puedes utilizar la línea de tiempo para averiguar con más detalle lo que está pasando y el tiempo que tarda.",
|
|
||||||
"En el panel línea de tiempo grabas acontecimientos con el pequeño botón circular. Puedes grabar (o capturar) pilas, perfiles js, la memoria y la presentación (CSS). ",
|
|
||||||
"Al grabarlos (capturalos), quedan en pequeños y detallados registros que puedes organizar de muchas maneras para que se adapten a tus necesidades.",
|
|
||||||
"Todo esto te ayudará a entender mejor lo que está pasando en el navegador, en particular cuáles eventos requieren más memoria del navegador.",
|
|
||||||
"Cuando uses la línea de tiempo, recuerda que debes utilizar el botón 'limpiar' (clear) para iniciar la grabación y antes de cargar la página, dependiendo de lo que desees capturar.",
|
|
||||||
"Te darás cuenta de que cuando grabas eventos JS, al pulsar en el título o en una 'llamada a una función' al lado izquierdo, te llevará al documento y a la línea de esa función en el panel de recursos. ",
|
|
||||||
"Revisa documentación más detallada aquí: <a href='https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/timeline-tool' target='_blank'>developers.google.com/web/tools/chrome-devtools/evaluate-performance/timeline-tool</a>"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "56b15f15632298c12f315180",
|
|
||||||
"title": "Profiles",
|
|
||||||
"description": [
|
|
||||||
"The Profiles panel lets you profile the execution time and memory usage of a web app or page. This primarily applies to the JavaScript running on your page or app.",
|
|
||||||
"There are three types of profiles you can collect: CPU profile, HEAP snapshot, and HEAP profile. HEAP profiles have more to do with memory usage, while a CPU profile has more to do with JavaScript performance.",
|
|
||||||
"A profiler called V8 is used while your code runs to pinpoint what in the JavaScript takes the most time, making it easy to optimize your code.",
|
|
||||||
"Each of these profiles can be viewed on the left, and you can take multiple profiles of each. Overall, the profiles tab is helpful when optimizing code.",
|
|
||||||
"Check out more in-depth documentation here: <a href='https://developers.google.com/web/tools/chrome-devtools/memory-problems/allocation-profiler' target='_blank'>developers.google.com/web/tools/chrome-devtools/memory-problems/allocation-profiler</a>"
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"fvfqnFYXF_8"
|
|
||||||
],
|
|
||||||
"tests": [
|
|
||||||
[
|
|
||||||
"When you take a profile or a snapshot, the information that's collected will be viewable in only one format.",
|
|
||||||
false,
|
|
||||||
"Like all of the tabs in Chrome Dev Tools, there are multiple ways to view and interpret information."
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"After hitting 'record', consider refreshing the page depending on what data you are trying to capture. ",
|
|
||||||
true
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"type": "hike",
|
|
||||||
"challengeType": 6,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Perfiles",
|
|
||||||
"description": [
|
|
||||||
"El panel Perfiles te permite perfilar el tiempo de ejecución y el uso de memoria de una aplicación web o de una página. Esto se aplica principalmente a la ejecución de JavaScript en su página o aplicación. ",
|
|
||||||
"Hay tres tipos de perfiles que se pueden recolectar: el perfil de la CPU, instantáneas de la memoria con estructura montón (Heap), y el perfil de la memoria con estructura montón. Los perfiles de memoria en estructura montón tienen más que ver con el uso de memoria, mientras que un perfil de la CPU tiene más que ver con el rendimiento de JavaScript. ",
|
|
||||||
"Un perfilador llamado V8 se usa mientras se ejecuta el código para identificar lo que en el JavaScript toma mucho tiempo, facilitándote de esta forma optimizar tu código.",
|
|
||||||
"Cada uno de estos perfiles se puede ver a la izquierda, y se puede tomar múltiples perfiles de cada uno. En general, la pestaña de perfiles es muy útil cuando deseas optimizar tu código. ",
|
|
||||||
"Revisa documentación más detallada aquí: <a href='https://developers.google.com/web/tools/chrome-devtools/memory-problems/allocation-profiler' target='_blank'>developers.google.com/web/tools/chrome-devtools/memory-problems/allocation-profiler</a>"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "56b15f15632298c12f31517f",
|
|
||||||
"title": "Resources",
|
|
||||||
"description": [
|
|
||||||
"The Resources panel lets you inspect resources that are loaded in the inspected page including IndexedDB or Web SQL databases, local and session storage, cookies, Application Cache, images, fonts, and style sheets.",
|
|
||||||
"You can view and edit all of this information within the browser.",
|
|
||||||
"As you get into more advanced web building, play around with the resources panel and see how it can help you understand the requirements of your app and page in real time.",
|
|
||||||
"Check out more in-depth documentation here: <a href='http://developers.google.com/web/tools/iterate/manage-data/index' target='_blank'>developers.google.com/web/tools/iterate/manage-data/index</a>"
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"Po2cW_K0ZYE"
|
|
||||||
],
|
|
||||||
"tests": [
|
|
||||||
[
|
|
||||||
"The 'Resources' tab helps you view external resources such as SQL and cookies.",
|
|
||||||
true
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"type": "hike",
|
|
||||||
"challengeType": 6,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Recursos",
|
|
||||||
"description": [
|
|
||||||
"El panel de Recursos te permite inspeccionar los recursos que se cargan en la página, incluyendo IndexedDB o bases de datos SQL Web, almacenamiento local y de sesión, las galletas (cookies), memoria caché de aplicaciones, imágenes, fuentes y hojas de estilo.",
|
|
||||||
"Puedes ver y editar toda esta información dentro del navegador.",
|
|
||||||
"A medida que vayas construyendo aplicaciones web más avanzadas, juega con el panel de recursos y verás cómo te ayudará a entender los requisitos de tu aplicación y de tu página en tiempo real.",
|
|
||||||
"Revisa documentación más detallada aquí: <a href='http://developers.google.com/web/tools/iterate/manage-data/index' target='_blank'>developers.google.com/web/tools/iterate/manage-data/index</a>"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "56b15f15632298c12f31517e",
|
|
||||||
"title": "Audits",
|
|
||||||
"description": [
|
|
||||||
"The Audit tool walks you through how to improve your page step by step.",
|
|
||||||
"In this video, we use this tool on the quote generator that I made as a front end development project.",
|
|
||||||
"The suggestions you'd get using the Audit tool are generated automatically.",
|
|
||||||
"This is important to keep in mind so you can contextualize them with your other knowledge of your site.",
|
|
||||||
"Sometimes, it might be right, but sometimes, for your situation it might be wrong.",
|
|
||||||
"Use this tool when you want to improve your site or app, but you aren't sure where to start."
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"Z4F0sLwMP8g"
|
|
||||||
],
|
|
||||||
"tests": [
|
|
||||||
[
|
|
||||||
"The Audit tab will suggest ways to improve a webpage.",
|
|
||||||
true
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"While you don't NEED to do everything suggested, you probably should.",
|
|
||||||
false,
|
|
||||||
"If you don't understand an error or suggestion, do more research before making major changes."
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"type": "hike",
|
|
||||||
"challengeType": 6,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Las auditorías",
|
|
||||||
"description": [
|
|
||||||
"La herramienta de auditoría te guía para mejorar tu página paso a paso.",
|
|
||||||
"En este vídeo, se utiliza esta herramienta con un generador de citas aleatorias desarrollado como uno de los proyectos de desarrollo de interfaces.",
|
|
||||||
"Las sugerencias que se ven, se generan automáticamente con la función de auditoría.",
|
|
||||||
"Es importante tenerlas en cuenta para contextualizarlos con el resto de conocimiento que tienes de tu sitio.",
|
|
||||||
"A veces, puede ser que sea lo acertado, pero en ocasiones, por tu situación las sugerencias que da son equivocadas.",
|
|
||||||
"Usa esta herramienta cuando desees mejorar tu sitio o aplicación, pero no sepas por dónde empezar."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "56b15f15632298c12f31517d",
|
|
||||||
"title": "Console",
|
|
||||||
"description": [
|
|
||||||
"The Console panel provides two primary functions: logging diagnostic information in the development process and providing a shell prompt which can be used to interact with the document and Dev Tools.",
|
|
||||||
"When using the console, you can view raw or structured data by using standard JS statements and console-specific commands.",
|
|
||||||
"An example of structured data would be the information returned from an API in JSON. I used this a lot when I was building my first front end development projects for Free Code Camp.",
|
|
||||||
"You should know that messages stack up, and you can clear them by typing and entering 'clear()'. You can also save the log by selecting 'Preserve Log'.",
|
|
||||||
"There are different commands that will log differently, like console.log() for basic logging, console.error() & console.warn() for 'eye catching stuff'.",
|
|
||||||
"The console can track exceptions, which basically means when something goes wrong. It can even pause the code during those exceptions, a function that you might remember from the 'Source' tab.",
|
|
||||||
"Check out more in-depth documentation here: <a href='https://developers.google.com/web/tools/chrome-devtools/console/' target='_blank'>developers.google.com/web/tools/chrome-devtools/console/</a>"
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"zMg3PO8MtyI"
|
|
||||||
],
|
|
||||||
"tests": [
|
|
||||||
[
|
|
||||||
"The console in Chrome Dev Tools has many similarities to the console of a computer.",
|
|
||||||
true
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"This video is in-depth and covers everything you need to know.",
|
|
||||||
false,
|
|
||||||
"Please review the documentation linked in the description."
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"type": "hike",
|
|
||||||
"challengeType": 6,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Consola",
|
|
||||||
"description": [
|
|
||||||
"El panel de la consola ofrece dos funciones principales: registro de datos de diagnóstico en el proceso de desarrollo y proporcionar un intérprete de órdenes que puedes utilizar para interactuar con el documento y las Herramientas de desarrollo",
|
|
||||||
"Al utilizar la consola, puedes ver los datos en bruto o estructurados mediante instrucciones estándar JS y órdenes específicas para la consola.",
|
|
||||||
"Un ejemplo de datos estructurados sería la información JSON que devuelva una API. Muy útil cuando se construyen las primeras aplicaciones de desarrollo de interfaces para FreeCodeCamp.",
|
|
||||||
"Debes saber que los mensajes se apilan y que puedes limpiarlos escribiendo <code>clear()</code>. También puedes guardar la bitácora seleccionando 'Preserve Log'. ",
|
|
||||||
"Hay diferentes órdenes que registrarán en bitácoras de manera diferente, como console.log() para registrar información básica, console.error() y console.warn() para registrar en bitácoras 'información llamativa'.",
|
|
||||||
"La consola puede realizar un seguimiento de excepciones, que básicamente registra cuando algo sale mal. Puede incluso hacer una pausa en el código durante esas excepciones, función que posiblemente recuerdes de la pestaña 'Fuente'. ",
|
|
||||||
"Revisa documentación más detallada aquí: <a href='https://developers.google.com/web/tools/chrome-devtools/console/' target='_blank'>developers.google.com/web/tools/chrome-devtools/console/</a>"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "56b15f15632298c12f31517c",
|
|
||||||
"title": "Summary",
|
|
||||||
"description": [
|
|
||||||
"1.) Chrome Dev Tools are awesome, and the more you can dive in and try to use them, the faster your skill level will grow.",
|
|
||||||
"2.) Use the documentation, even if you've never read documentation before: <a href='http://developers.google.com/web/tools/chrome-devtools/' target='_blank'>developers.google.com/web/tools/chrome-devtools/</a>",
|
|
||||||
"3.) Once you start to get comfortable in one tab, stretch yourself. Working effectively with all of the tabs will serve you exponentially more than sticking in your comfort zone."
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"ssU_F-bbQyk"
|
|
||||||
],
|
|
||||||
"tests": [
|
|
||||||
[
|
|
||||||
"Device mode allows you to view your page in different sizes of screens with different network connections.",
|
|
||||||
true
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"type": "hike",
|
|
||||||
"challengeType": 6,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Resumen",
|
|
||||||
"description": [
|
|
||||||
", Las herramientas de desarrollo de Chrome son impresionantes, y cuanto más te puedas sumergir y tratar de utilizarlas, más rápido aumentará tu nivel. ",
|
|
||||||
", Utiliza la documentación, incluso si nunca has leído documentación antes: <a href='http://developers.google.com/web/tools/chrome-devtools/' target='_blank'>developers.google.com/web/tools/chrome-devtools/</a> ",
|
|
||||||
", Una vez que comiences a sentirte cómodo en una pestaña, rétate aprendiendo a usar una diferente. Trabajar eficazmente con todas las pestañas te servirá exponencialmente más que pegarte en tu zona de confort."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
File diff suppressed because it is too large
Load Diff
@ -1,22 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "Computer Science",
|
|
||||||
"order": 7,
|
|
||||||
"time": "0 hours",
|
|
||||||
"isComingSoon": true,
|
|
||||||
"challenges": [
|
|
||||||
{
|
|
||||||
"id": "bd7128d8c441eddfbeb5bddc",
|
|
||||||
"title": "Learn Computer Science Challenges",
|
|
||||||
"description": [],
|
|
||||||
"challengeSeed": [],
|
|
||||||
"tests": [],
|
|
||||||
"type": "hike",
|
|
||||||
"challengeType": 6,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Computer Science"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "Data Visualization",
|
|
||||||
"order": 8,
|
|
||||||
"time": "0 hours",
|
|
||||||
"isComingSoon": true,
|
|
||||||
"challenges": [
|
|
||||||
{
|
|
||||||
"id": "bd7128d8c441eddfbeb5bdde",
|
|
||||||
"title": "Learn Data Visualization Challenges",
|
|
||||||
"description": [],
|
|
||||||
"challengeSeed": [],
|
|
||||||
"tests": [],
|
|
||||||
"type": "hike",
|
|
||||||
"challengeType": 6,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Data Visualization"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "DevOps",
|
|
||||||
"order": 16,
|
|
||||||
"time": "0 hours",
|
|
||||||
"isComingSoon": true,
|
|
||||||
"challenges": [
|
|
||||||
{
|
|
||||||
"id": "bd7128d8c441eddfbeb5bdd5",
|
|
||||||
"title": "Learn DevOps Challenges",
|
|
||||||
"description": [],
|
|
||||||
"challengeSeed": [],
|
|
||||||
"tests": [],
|
|
||||||
"type": "hike",
|
|
||||||
"challengeType": 6,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "DevOps"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@ -1,87 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "The DOM",
|
|
||||||
"order": 1,
|
|
||||||
"time": "30 minutes",
|
|
||||||
"challenges": [
|
|
||||||
{
|
|
||||||
"id": "56b15f15632298c12f31518f",
|
|
||||||
"title": "What's the Document Object Model?",
|
|
||||||
"description": [
|
|
||||||
"The DOM is the browser's internal, programmatic representation of a webpage. Languages like JavaScript allow you to modify the DOM, and thus the website without editing the HTML of the page.",
|
|
||||||
"Technically, the DOM is an API (application programming interface). There are many types of APIs, but this particular API interacts with XML and HTML documents. It's in charge of how those documents are accessed and manipulated.",
|
|
||||||
"Really, you can do a lot with the DOM, and if you're already scripting in JS and jQuery, you're already doing it.",
|
|
||||||
"You can insert new things, elements, or alter style or content for elements that already exist.",
|
|
||||||
"This can be done with pure JavaScript, like: document.getElementById(id), element.getElementsByTagName(name), or document.createElement(name).",
|
|
||||||
"You can also use libraries like jQuery to simplify, standardize and automate manipulating the DOM, like: $('#box2').append('This will be added to box2!')"
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"80Mr2Z6Qikc"
|
|
||||||
],
|
|
||||||
"tests": [
|
|
||||||
[
|
|
||||||
"The DOM is complex and difficult to access.",
|
|
||||||
false,
|
|
||||||
"The DOM is easily accessed and manipulated with JavaScript and jQuery."
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"The DOM is an API that is a part of the browser.",
|
|
||||||
true
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"type": "hike",
|
|
||||||
"challengeType": 6,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "¿Qué es el Modelo de objetos del documento?",
|
|
||||||
"description": [
|
|
||||||
"El DOM es la representación interna y programática de una página web del navegador. Lenguajes como javascript te permiten modificar el DOM, y por lo tanto el sitio web, sin editar el código HTML de la página.",
|
|
||||||
"Técnicamente, el DOM es un API (interfaz de programación de aplicaciones). Hay varios tipos de APIs, pero este API en particular interactúa con documentos XML y HTML. Está a cargo de cómo se accesan y se manipulan esos documentos.",
|
|
||||||
"De hecho, puedes hacer muchas cosas con el DOM. De hecho, ya lo estás haciendo desde el momento en que estás escribiendo código en JS y jQuery.",
|
|
||||||
"Puedes insertar nuevos elementos, o cambiar el estilo o contenido de los elementos previamente existentes.",
|
|
||||||
"Esto se puede hacer con javascript puro, como: document.getElementById(id), element.getElementsByTagName(name), o document.createElement(name).",
|
|
||||||
"También puedes usar librerías como jQuery para simplificar, estandarizar y automatizar la manipulación del DOM, como por ejemplo: $('#caja2').append('Esto se agregará a caja2!')"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "56b15f15632298c12f31518e",
|
|
||||||
"title": "Style in the Header, Script in the Footer",
|
|
||||||
"description": [
|
|
||||||
"Maybe you've been told that links to style sheets (CSS) should be included in the header and that links to script (JS) should be included in the footer. Ever asked yourself why?",
|
|
||||||
"If you've ever seen a webpage that loads the text first, then after a bit loads the formatting and style, you've seen a page that didn't have the links to style and script in the correct places.",
|
|
||||||
"This all has to do with how the browser decides it's loaded enough information to display. There's an event called 'DOMContentLoaded', and once that event happens, whatever is loaded will be displayed.",
|
|
||||||
"The DOM will tell the browser it's ready once the HTML is loaded, and sometimes the CSS and JS hasn't caught up. However, if you place the CSS in the header and the JS in the footer, you can ensure that all content will be loaded before the DOM triggers the 'DOMContentLoaded' event, the event that shows the user your content.",
|
|
||||||
"This is a simple explanation, as most of these videos are. For more information, I really liked this resource: <a href='http://ablogaboutcode.com/2011/06/14/how-javascript-loading-works-domcontentloaded-and-onload' target='_blank'>ablogaboutcode.com/2011/06/14/how-javascript-loading-works-domcontentloaded-and-onload</a>"
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"i1rQi9Maem8"
|
|
||||||
],
|
|
||||||
"tests": [
|
|
||||||
[
|
|
||||||
"Placing the style in the header and the script in the footer ensures the page is loaded for the user as you want it to appear.",
|
|
||||||
true
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"The CSS link should go in the header and the JS link should go in the footer. If you don't do it just that way, the webpage will crash.",
|
|
||||||
false,
|
|
||||||
"The webpage won't necessarily crash, but it might load in an unattractive or dysfunctional way."
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"type": "hike",
|
|
||||||
"challengeType": 6,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Estilo en el encabezado, código al pie de página",
|
|
||||||
"description": [
|
|
||||||
"Creo que ya te habrán dicho que los enlaces a código de estilo (CSS) deben ser incluidos en el encabezado (<code>header</code>) y que los enlaces al código (JS) deben estar incluidos al pie de página (<code>footer</code>). ¿Alguna vez te preguntaste por qué?",
|
|
||||||
"Si alguna vez has visto una página web que carga el texto primero, y después de un momento carga el formato y el estilo, entonces era una página que no tenía los enlaces hacia el estilo y el código en los lugares correctos.",
|
|
||||||
"Esto tiene que ver con la forma en que el navegador decide si ha cargado suficiente información para mostrar. Hay un evento llamado 'DOMContentLoaded', y una vez que ese evento ocurre, lo que sea que se haya cargado hasta entonces será mostrado.",
|
|
||||||
"El DOM le dirá al navegador que está listo una vez que el código HTML ha sido cargado, y a veces el CSS y JS no se han alcanzado a cargar. Si pones el CSS en el encabezado y el JS al pie de página, puedes estar seguro que todo el contenido será cargado antes que el DOM desencadene el evento 'DOMContentLoaded', el cual muestra tu contenido al usuario.",
|
|
||||||
"Esta es una explicación simplificada, al igual que la que encontrarás en el resto de estos videos. Si quieres más información, creo que el siguiente enlace es de bastante ayuda: <a href='http://ablogaboutcode.com/2011/06/14/how-javascript-loading-works-domcontentloaded-and-onload' target='_blank'>ablogaboutcode.com/2011/06/14/how-javascript-loading-works-domcontentloaded-and-onload</a>"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "Embedded and Internet of Things",
|
|
||||||
"order": 9,
|
|
||||||
"time": "0 hours",
|
|
||||||
"isComingSoon": true,
|
|
||||||
"challenges": [
|
|
||||||
{
|
|
||||||
"id": "bd7128d8c441eddfbeb5bdda",
|
|
||||||
"title": "Learn Embedded and Internet of Things Challenges",
|
|
||||||
"description": [],
|
|
||||||
"challengeSeed": [],
|
|
||||||
"tests": [],
|
|
||||||
"type": "hike",
|
|
||||||
"challengeType": 6,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Embedded and Internet of Things"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "Game Development",
|
|
||||||
"order": 10,
|
|
||||||
"time": "0 hours",
|
|
||||||
"isComingSoon": true,
|
|
||||||
"challenges": [
|
|
||||||
{
|
|
||||||
"id": "bd7128d8c441eddfbeb5bdd0",
|
|
||||||
"title": "Learn Game Development Challenges",
|
|
||||||
"description": [],
|
|
||||||
"challengeSeed": [],
|
|
||||||
"tests": [],
|
|
||||||
"type": "hike",
|
|
||||||
"challengeType": 6,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Game Development"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "Gamification",
|
|
||||||
"order": 12,
|
|
||||||
"time": "0 hours",
|
|
||||||
"isComingSoon": true,
|
|
||||||
"challenges": [
|
|
||||||
{
|
|
||||||
"id": "bd7128d8c441eddfbeb5bdd9",
|
|
||||||
"title": "Learn Gamification Challenges",
|
|
||||||
"description": [],
|
|
||||||
"challengeSeed": [],
|
|
||||||
"tests": [],
|
|
||||||
"type": "hike",
|
|
||||||
"challengeType": 6,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Gamification"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@ -1,369 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "JavaScript Lingo",
|
|
||||||
"order": 2,
|
|
||||||
"time": "1 hour",
|
|
||||||
"challenges": [
|
|
||||||
{
|
|
||||||
"id": "56b15f15632298c12f31518c",
|
|
||||||
"title": "MDN and Documentation",
|
|
||||||
"description": [
|
|
||||||
"This is a basic intro to MDN and the concept of documentation.",
|
|
||||||
"MDN, Mozilla Developer Network, is a fantastic open source collaboration that documents not only JavaScript, but many other languages and topics. If you haven't heard of them, you should check them out now. I get lots of information from <a href='http://developer.mozilla.org/en-US/docs/Web/JavaScript' target='_blank'>developer.mozilla.org/en-US/docs/Web/JavaScript</a>",
|
|
||||||
"When I say documentation, I am talking about information that is provided about the product to its users. The documentation at MDN isn't necessarily written by the people behind JS. Brendan Eich created JS in 1995, but it's now a community driven project that continues to grow.",
|
|
||||||
"As you continue to learn JavaScript, jQuery, and pretty much any languages or services for development or programming, documentation is your friend. ",
|
|
||||||
"The faster you get comfortable reading and referencing documentation, the faster you will grow as a developer.",
|
|
||||||
"These videos aren't going to teach you JavaScript - you will be introduced to terms and concepts that will be valuable as you continue to practice and learn."
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"NFaZKFTycmc"
|
|
||||||
],
|
|
||||||
"tests": [
|
|
||||||
[
|
|
||||||
"Documentation is not a good way to learn a programming language.",
|
|
||||||
false,
|
|
||||||
"Documentation can be your best friend once you learn how to get the most from it."
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"Mozilla Developer Network is a great resource that should be referenced regularly.",
|
|
||||||
true
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"type": "hike",
|
|
||||||
"challengeType": 6,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "MDN y Documentación",
|
|
||||||
"description": [
|
|
||||||
"Esta es una introducción básica a MDN y el concepto de la documentación.",
|
|
||||||
"MDN, Mozilla Developer Network, es una fantástica colaboración de fuentes abiertas que documenta no sólo JavaScript, sino muchos otros lenguajes y temas. Si no has oído hablar de ellos, deberías darles un vistazo ahora. Personalmente obtengo mucha información de <a href='http://developer.mozilla.org/es/docs/Web/JavaScript' target='_blank'>developer.mozilla.org/es/docs/Web/JavaScript</a>",
|
|
||||||
"Cuando digo documentación, estoy hablando acerca de la información que se proporciona sobre el producto a sus usuarios. La documentación de MDN no necesariamente está escrita por la gente detrás de JS. Brendan Eich creó JS en 1995, pero hoy en día el proyecto continúa creciendo gracias a un esfuerzo comunitario. ",
|
|
||||||
"A medida que continúes aprendiendo JavaScript, jQuery, y prácticamente cualquier otro lenguaje o servicio para desarrollo o programación, la documentación será tu amiga.",
|
|
||||||
"Cuanto más rápido te sientas cómodo leyendo y referenciando documentación, más rápido crecerás como desarrollador.",
|
|
||||||
"Estos vídeos no van a enseñarte JavaScript - te presentan términos y conceptos que serán valiosos a medida que continúes practicando y aprendiendo."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "56b15f15632298c12f31518d",
|
|
||||||
"title": "Value Types",
|
|
||||||
"description": [
|
|
||||||
"Learn about the three most basic types of values: booleans, strings, and numbers.",
|
|
||||||
"A boolean is a true or false value. These words are special and reserved. You can't name a variable 'true', because that word is already universal as a boolean (as is 'false').",
|
|
||||||
"A string is a set of characters that is set between either single (') or double (\") quotation marks. This string can be named 'true', as long as it's between those quotation marks.",
|
|
||||||
"Numbers are pretty self-explanatory - a number is a value that consists only of digits, though it can also contain a decimal or a negative sign."
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"fahY2YY5Atg"
|
|
||||||
],
|
|
||||||
"tests": [
|
|
||||||
[
|
|
||||||
"Numbers can include decimals.",
|
|
||||||
true
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"If a value is text that isn't the word true or false, it's a string. ",
|
|
||||||
false,
|
|
||||||
"To be a string, the content must be wrapped in either single or double quotations."
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"type": "hike",
|
|
||||||
"challengeType": 6,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Tipos de valores",
|
|
||||||
"description": [
|
|
||||||
"Aprende sobre los tres tipos más básicos de valores: Booleanos, cadenas y números",
|
|
||||||
"Un booleano es un valor <code>true</code> (verdadero) o <code>false</code> (falso). Estas palabras son especiales y reservadas. No puedes nombrar a una variable como \"true\", porque esa palabra es ya universal como un valor lógico (así como lo es \"false\"). ",
|
|
||||||
"Una cadena es un conjunto de caracteres que se establecen entre apóstrofes (') o entre comillas (\"). Una cadena puede ser \"true\", siempre y cuando sea con comillas o con apóstrofes. ",
|
|
||||||
"Los números se explican por sí mismos - un número es un valor que se compone sólo de dígitos, aunque también puede contener un decimal o un signo negativo."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "56b15f15632298c12f31518b",
|
|
||||||
"title": "Variables & camelCase",
|
|
||||||
"description": [
|
|
||||||
"We are going to cover what constitutes a variable, and the reasoning behind camelCase.",
|
|
||||||
"A variable also referred to as 'var', is the name or placeholder for a boolean, string, number, or another piece of static information.",
|
|
||||||
"You can use Google Dev Tools to inspect the Free Code Camp home page and look for some variables.",
|
|
||||||
"You 'declare' variables the first time with 'var' in front of it, but those can be referenced later in your script.",
|
|
||||||
"camelCase is the way that JavaScript pushes words together and still keeps them legible. The first letter of the first word is lowercase, along with the remainder of the word, but the first letter of every consecutive word is capitalized. There are no spaces. Examples: brianaLovesHerPets, bestFoodIsCheese, and codeIsWorthLearning.",
|
|
||||||
"When you name variables, utilize camelCase. Also try to keep the names descriptive and short so that others (and yourself!) can tell what that variable is referring to just by the name."
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"NJhXiR1z7Kg"
|
|
||||||
],
|
|
||||||
"tests": [
|
|
||||||
[
|
|
||||||
"camelCase is mandatory in JavaScript.",
|
|
||||||
false,
|
|
||||||
"Though camelCase is widely used, it isn't mandatory. It's not a bad idea to get used to using it sooner rather than later."
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"Variables can only hold information that is a boolean, string, or number.",
|
|
||||||
false,
|
|
||||||
"Variables can hold all kinds of static information including arrays and objects."
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"type": "hike",
|
|
||||||
"challengeType": 6,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Variables y capitalizaciónCamello",
|
|
||||||
"description": [
|
|
||||||
"Vamos a cubrir lo que constituye una variable, y el razonamiento detrás de la capitalizaciónCamello (<em>camelCase</em>).",
|
|
||||||
"Una variable, también conocida como una 'var', es el nombre o el espacio para un booleano, una cadena, un número, u otra pieza de información estática.",
|
|
||||||
"Puedes usar las Herramientas de desarrollo de Google para inspeccionar la página principal de FreeCodeCamp y buscar algunas variables.",
|
|
||||||
"Tu 'declaras' variables por primera vez con <code>var</code> en frente de ella, pero después puedes referenciarla más adelante en tu programa.",
|
|
||||||
"capitalizaciónCamello es una forma en la que juntas varias palabras y aún así las mantienes legibles. La primera letra de la primera palabra va en minúsculas al igual que el resto de la primera palabra, pero la primera letra de cada palabra que siga se escribe en mayúsculas. No hay espacios. Ejemplos: brianaAmaSusMascotas, laMejorComidaEsElQueso, y valeLaPenaAprenderProgramacion.",
|
|
||||||
"Al asignar un nombre de variable, usa capitalizaciónCamello. Además, trata de mantener los nombres descriptivos y cortos para que los demás (¡e incluso tu!) puedan entender a lo que se refiere la variable simplemente por el nombre."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "56b15f15632298c12f31518a",
|
|
||||||
"title": "Arrays & Objects",
|
|
||||||
"description": [
|
|
||||||
"If you want to store more than one piece of information to a variable, you can do so by creating an array or an object.",
|
|
||||||
"**Disclaimer: Objects in JS are not exactly the same as objects in other languages. We will discuss objects here as they pertain to JS.",
|
|
||||||
"Arrays are sets of data between [square, brackets]. Data is separated by commas. That data can be in the form of a boolean, string, number, or even another array. We call that a nested array.",
|
|
||||||
"Objects are a type of data that can look or behave similar to an array in the way that it's more data stored in one variable in an organized way. You'll hear it referred to as JSON, and when you make API calls to other sites (getting information to display on your own page) it will frequently be returned in JSON.",
|
|
||||||
"An example of object notation is: var obj = {'name' : 'Briana', 'food' : 'cheese', 'dog' : 'Maurice'};",
|
|
||||||
"Notice the curly brackets, the 'keys' with values like name or food,, and the value called a 'property' that is tied to the 'key', like Briana or cheese. These are ALL stored as strings, although booleans, numbers, and other types of data are also valid."
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"yHLGUxt0EKc"
|
|
||||||
],
|
|
||||||
"tests": [
|
|
||||||
[
|
|
||||||
"Arrays are easy to spot because of their [square brackets]. ",
|
|
||||||
true
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"Objects in JavaScript are the same as objects in every other language.",
|
|
||||||
false,
|
|
||||||
"Objects in JS are slightly different, but as long as you understand the context for JS, you'll be fine until you decide to learn one of those other languages."
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"type": "hike",
|
|
||||||
"challengeType": 6,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Vectores y objetos",
|
|
||||||
"description": [
|
|
||||||
"Si desea almacenar más de una pieza de información en una variable, puedes hacerlo mediante la creación de un vector o de un objeto.",
|
|
||||||
"** Exención de responsabilidad: Los objetos de JS no son exactamente lo mismo que los objetos en otros lenguajes. Vamos a discutir aquí objetos con respecto a JS. ",
|
|
||||||
"Los vectores son conjuntos de valores entre [corchetes]. Los valores se separan con comas. Cada valor puede ser booleano, cadena, número, o incluso otro vector. A esto último le llamamos vector anidado. A un vector compuesto por vectores de la misma longitud le llamamos matriz. ",
|
|
||||||
"Los objetos son un tipo de datos que pueden verse o comportarse como un vector, en la medida que se trata de más valores almacenados en una variable de una manera organizada. Oirás que un objeto se puede representar en JSON, y con frecuencia cuando haces llamadas a la API de algunos sitios (para obtener información que necesitas mostrar en tu propia página) está será devuelta en JSON. ",
|
|
||||||
"Un ejemplo de la notación de objetos es: <code>var obj = { 'nombre': 'Briana', 'comida': 'queso', 'perro': 'Maurice'};</code>",
|
|
||||||
"Fíjate que un objeto se encierra entre llaves { ... }, que los diferentes atributos se separan por comas, que cada atributo consta de una palabra llave y de un valor. Por ejemplo son llaves 'nombre', 'comida' y 'perro' y sus respectivos valores son 'Briana', 'queso' y 'Maurice'. En este ejmplo todos los valores fueron cadenas, aunque también son válidos booleanos, números y otros tipos de datos."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "56b15f15632298c12f315189",
|
|
||||||
"title": "Finding and Indexing Data in Arrays",
|
|
||||||
"description": [
|
|
||||||
"There are many reasons you might need to access a certain piece of data from within a larger set, and you do that by referencing its index.",
|
|
||||||
"We won't get into syntax now, but you should know that the first thing in an array is actually index 0.",
|
|
||||||
"This goes for strings and objects, too. All of these indices start at 0, so if you're looking asking the code to find indexArr[2], you're really going to get the third piece of information in that array."
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"FACqPCLxPTY"
|
|
||||||
],
|
|
||||||
"tests": [
|
|
||||||
[
|
|
||||||
"The first entry in array has the index of 1.",
|
|
||||||
false,
|
|
||||||
"The first entry in an array has an index of 0."
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"Arrays must contain all of the same type of information, like booleans.",
|
|
||||||
false,
|
|
||||||
"Arrays can contain any mix of data types."
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"type": "hike",
|
|
||||||
"challengeType": 6,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Encontrando e indexando valores en vectores",
|
|
||||||
"description": [
|
|
||||||
"Hay muchas razones por las que puedes necesitar acceder a una determinada pieza de información al interior de un conjunto más amplio, lo cual haces referenciando su índice.",
|
|
||||||
"No vamos a entrar en la sintaxis, pero debes saber que el primer elemento en un vector tiene en realidad el índice 0.",
|
|
||||||
"Esto también aplica para cadenas y objetos. Todos estos índices comienzan en 0, por lo que si en tu programa usas <code>miVector[2]</code>, realmente vas a obtener la tercera pieza de información del vector <code>miVector</code>."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "56b15f15632298c12f315188",
|
|
||||||
"title": "Manipulating Data",
|
|
||||||
"description": [
|
|
||||||
"Methods and functions are ways you can manipulate variables or other sets of information.",
|
|
||||||
"Methods are built into JavaScript, and you will become more familiar with these as you write functions for the bonfires.",
|
|
||||||
"I'd suggest looking through the MDN (Mozilla Developer Network that we discussed in the first video) to familiarize yourself with the sheer amount and general potential for the methods that exist. <a href='http://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Methods_Index' target='_blank'>developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Methods_Index</a>",
|
|
||||||
"Examples include '.split(' ')', which will turn a string into an array and can do so in many different ways. Methods are powerful - many times when you want your script to do something, there's a method for that.",
|
|
||||||
"Functions, like variables, are something you define and create.",
|
|
||||||
"During your algorithm practice at Free Code Camp, you will create functions that take a certain piece of information and manipulate it in whatever way you choose.",
|
|
||||||
"You'll become more familiar with syntax there, but for now, just remember that with methods and functions you can do almost anything with your code."
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"vZAm3Ve9CGM"
|
|
||||||
],
|
|
||||||
"tests": [
|
|
||||||
[
|
|
||||||
"Whenever there's a specific manipulation you want to apply, you should check the methods before writing your own code.",
|
|
||||||
true
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"When writing your own functions, you should keep your code clean by only using minimal amounts of methods. ",
|
|
||||||
false,
|
|
||||||
"Methods are there to help you! Use them in your own functions as well as on their own."
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"type": "hike",
|
|
||||||
"challengeType": 6,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Manipulación de los datos",
|
|
||||||
"description": [
|
|
||||||
"Métodos y funciones son formas con las que puedes modificar variables u otros conjuntos de información.",
|
|
||||||
"Los métodos están integrados en JavaScript, y te familiarizarás con estos cuando realices los desafíos sobre algoritmos.",
|
|
||||||
"Me gustaría sugerirte dar un vistazo a MDN (Mozilla Developer Network que discutimos en el primer video) para que te familiarices con la cantidad y el potencial general de los métodos que existen. <a href='http://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Methods_Index' target='_blank'>developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Methods_Index</a>",
|
|
||||||
"Los ejemplos incluyen <code>.split (' ')</code>, que convertirá una cadena en un vector y puede hacerlo de muchas maneras diferentes. Los métodos son de gran alcance - muchas veces cuando quieres que tu programa haga algo, ya habrá un método para eso.",
|
|
||||||
"Las funciones, al igual que las variables, son algo que tu defines y creas.",
|
|
||||||
"Durante tu práctica con algoritmos en FreeCodeCamp, vas a crear funciones que reciben una determinada pieza de información y la manipulan de la forma que elijas.",
|
|
||||||
"Vas a estar más familiarizado con la sintaxis, pero por ahora, sólo recuerda que con los métodos y funciones puedes hacer casi cualquier cosa con tu código."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "56b15f15632298c12f315187",
|
|
||||||
"title": "Math",
|
|
||||||
"description": [
|
|
||||||
"There is a static object named 'Math' in JS with many built in properties and methods.",
|
|
||||||
"You'll want to investigate this further whenever you're manipulating numbers. Check MDN documentation before writing your own functions, because they may already be defined there.",
|
|
||||||
"Examples include Math.random() which will return a random number in a given range and Math.round() which will round the input to the nearest integer.",
|
|
||||||
"I used Math.random() when I built the random quote generator for the Free Code Camp front end development project.",
|
|
||||||
"When you're working with numbers, you should also be aware that JS has an interesting attribute called 'floating-point format'.",
|
|
||||||
"Depending on the amount of numbers, the size of those numbers, and the number of computations, JS may return something that is inaccurate by .00004.",
|
|
||||||
"There are ways around this, and in general it doesn't pose issues, but it's something you should be aware of in the event you run into some problems that aren't making sense."
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"pyU5zV4tIL4"
|
|
||||||
],
|
|
||||||
"tests": [
|
|
||||||
[
|
|
||||||
"When talking about Math in JavaScript, all of the methods and functions work like they would on any calculator.",
|
|
||||||
false,
|
|
||||||
"Remember 'floating-point format'."
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"There are special methods and functions specific for the 'Math' object.",
|
|
||||||
true
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"type": "hike",
|
|
||||||
"challengeType": 6,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Matemáticas",
|
|
||||||
"description": [
|
|
||||||
"Hay un objeto estático de nombre 'Math' en JS con muchos propiedades y métodos incluidos.",
|
|
||||||
"Vas a querer investigar más de este cuando manipules números. Consulta la documentación de MDN antes de escribir tus propias funciones, pues ya podrían estar definidas allí. ",
|
|
||||||
"Los ejemplos incluyen <code>Math.random()</code> que devolverá un número aleatorio en un rango y <code>Math.round()</code> que redondeará el número decimal que reciba al entero más cercano.",
|
|
||||||
"Yo utilicé <code>Math.random()</code> cuando construí el generador de citas aleatorias como proyecto de desarrollo de interfaces en FreeCodeCamp.",
|
|
||||||
"Cuando trabajes con números, también debes estar consciente de que JS tiene un atributo interesante llamado 'formato de coma flotante'.",
|
|
||||||
"Dependiendo de la cantidad de números, su tamaño y la cantidad de cálculos, JS puede devolver un número que es inexacto en 0,00004.",
|
|
||||||
"Hay maneras de evitar esto, y en general no plantean problemas, pero es algo que debes tener en cuenta si te encuentras con algunos problemas que parecen no tienen sentido."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "56b15f15632298c12f315186",
|
|
||||||
"title": "Loops",
|
|
||||||
"description": [
|
|
||||||
"If there's a set of data, (we'll use an array for this example, but it doesn't have to be,) and you want to perform the same manipulation to every piece in that set of data, you can use something called a loop.",
|
|
||||||
"Loops have some complex syntax to get used to at first, but once you have it, they're extremely useful. I used loops in many of my algorithm solutions.",
|
|
||||||
"You don't need to understand everything here - just know that loops exist when you need to traverse a set of data and they can cut down on the amount of code you need to write."
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"Hzzmqhc3U0o"
|
|
||||||
],
|
|
||||||
"tests": [
|
|
||||||
[
|
|
||||||
"There's only one type of loop.",
|
|
||||||
false,
|
|
||||||
"There are many types of loops that fit many different needs."
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"Loops can only traverse arrays.",
|
|
||||||
false,
|
|
||||||
"Loops can be built to fit many different situations."
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"type": "hike",
|
|
||||||
"challengeType": 6,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Ciclos",
|
|
||||||
"description": [
|
|
||||||
"Si hay un conjunto de valores (vamos a utilizar un vector en este ejemplo, pero no tiene que ser así) y deseas realizar la misma operación a cada valor del conjunto, puedes usar algo llamado ciclo. ",
|
|
||||||
"Los ciclos tienen una sintaxis compleja a la que inicialmente es difícil acostumbrarse, pero una vez que la entiendas, son de gran utilidad. Yo usé ciclos en muchas de mis soluciones. ",
|
|
||||||
"No es necesario que entiendas todo aquí - sólo que sepas que existen ciclos cuando necesitas recorrer un conjunto de datos y que pueden reducir la cantidad de código que debes escribir."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "56b15f15632298c12f315185",
|
|
||||||
"title": "Regular Expressions",
|
|
||||||
"description": [
|
|
||||||
"RegExp is not formatted like anything else in JS, and can have a steep learning curve.",
|
|
||||||
"RegExp can also be an incredibly useful and efficient tool.",
|
|
||||||
"Using RegExp, you can match, replace, search, and split a string, one of the most difficult types of values to manipulate.",
|
|
||||||
"Like with all of the other videos, we won't get into the nitty gritty, but I want to show you a few examples of where RegExp is useful.",
|
|
||||||
"If you wanted to create a registration page that verified passwords contained at least a number and a capital letter, you could use RegExp.",
|
|
||||||
"If you wanted to ensure that dates entered in a page were all valid dates in the future, you could use RegExp.",
|
|
||||||
"While there are limitless ways to use RegExp, many of them include validating or automatically editing information."
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"EgFjQ8ug3W8"
|
|
||||||
],
|
|
||||||
"tests": [
|
|
||||||
[
|
|
||||||
"RegExp can be a useful tool when working with strings. ",
|
|
||||||
true
|
|
||||||
],
|
|
||||||
[
|
|
||||||
"RegExp can be intimidating, and if you don't like it, you can probably just avoid using it.",
|
|
||||||
false,
|
|
||||||
"Be patient with RegExp and with yourself. It can be a great tool that saves you from writing too much or inefficient code."
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"type": "hike",
|
|
||||||
"challengeType": 6,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "expresiones regulares (RegExp)",
|
|
||||||
"description": [
|
|
||||||
"Las RegExp no siguen el formato del resto de JS, y pueden requerir una curva de aprendizaje.",
|
|
||||||
"Las epresiones regulares (abreviado <em>RegExp</em>) también pueden ser una herramienta muy útil y eficiente.",
|
|
||||||
"Usando RegExp, puedes hacer coincidir, reemplazar, buscar y dividir una cadena, uno de los tipos más difíciles de manipular.",
|
|
||||||
"Al igual que con todos los otros videos, no vamos a entrar en detalles, pero quiero mostrar algunos ejemplos donde las RegExp son útiles.",
|
|
||||||
"Si quisieras crear una página de registro que verifique las contraseñas para que contengan al menos un número y una letra mayúscula, puedes usar expresiones regulares.",
|
|
||||||
"Si quieres asegurarte de que las fechas introducidas en una página sean todas fechas válidas en el futuro, puedes usar RegExp.",
|
|
||||||
"Si bien hay infinitas maneras de utilizar RegExp, muchas de estas incluyen validaciones o ediciones automáticas de información."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "Machine Learning",
|
|
||||||
"order": 13,
|
|
||||||
"time": "0 hours",
|
|
||||||
"isComingSoon": true,
|
|
||||||
"challenges": [
|
|
||||||
{
|
|
||||||
"id": "bd7128d8c441eddfbeb5bdd8",
|
|
||||||
"title": "Learn Machine Learning Challenges",
|
|
||||||
"description": [],
|
|
||||||
"challengeSeed": [],
|
|
||||||
"tests": [],
|
|
||||||
"type": "hike",
|
|
||||||
"challengeType": 6,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Machine Learning"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "Math for Programmers",
|
|
||||||
"order": 14,
|
|
||||||
"time": "0 hours",
|
|
||||||
"isComingSoon": true,
|
|
||||||
"challenges": [
|
|
||||||
{
|
|
||||||
"id": "bd7128d8c441eddfbeb5bdd7",
|
|
||||||
"title": "Learn Math for Programmers Challenges",
|
|
||||||
"description": [],
|
|
||||||
"challengeSeed": [],
|
|
||||||
"tests": [],
|
|
||||||
"type": "hike",
|
|
||||||
"challengeType": 6,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Math for Programmers"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "Mobile JavaScript Development",
|
|
||||||
"order": 15,
|
|
||||||
"time": "0 hours",
|
|
||||||
"isComingSoon": true,
|
|
||||||
"challenges": [
|
|
||||||
{
|
|
||||||
"id": "bd7128d8c441eddfbeb5bdd6",
|
|
||||||
"title": "Learn Mobile JavaScript Development Challenges",
|
|
||||||
"description": [],
|
|
||||||
"challengeSeed": [],
|
|
||||||
"tests": [],
|
|
||||||
"type": "hike",
|
|
||||||
"challengeType": 6,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Mobile JavaScript Development"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "Software Engineering Principles",
|
|
||||||
"order": 17,
|
|
||||||
"time": "0 hours",
|
|
||||||
"isComingSoon": true,
|
|
||||||
"challenges": [
|
|
||||||
{
|
|
||||||
"id": "bd7128d8c441ecdfbeb5bdd5",
|
|
||||||
"title": "Learn Software Engineering Principles Challenges",
|
|
||||||
"description": [],
|
|
||||||
"challengeSeed": [],
|
|
||||||
"tests": [],
|
|
||||||
"type": "hike",
|
|
||||||
"challengeType": 6,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Software Engineering Principles"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "Statistics",
|
|
||||||
"order": 18,
|
|
||||||
"time": "0 hours",
|
|
||||||
"isComingSoon": true,
|
|
||||||
"challenges": [
|
|
||||||
{
|
|
||||||
"id": "bd7128d8c441eddfbeb5bdd4",
|
|
||||||
"title": "Learn Statistics Challenges",
|
|
||||||
"description": [],
|
|
||||||
"challengeSeed": [],
|
|
||||||
"tests": [],
|
|
||||||
"type": "hike",
|
|
||||||
"challengeType": 6,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Statistics"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "Tools",
|
|
||||||
"order": 19,
|
|
||||||
"time": "0 hours",
|
|
||||||
"isComingSoon": true,
|
|
||||||
"challenges": [
|
|
||||||
{
|
|
||||||
"id": "bd7128d8c441eddfbeb5bdd3",
|
|
||||||
"title": "Learn Tools Challenges",
|
|
||||||
"description": [],
|
|
||||||
"challengeSeed": [],
|
|
||||||
"tests": [],
|
|
||||||
"type": "hike",
|
|
||||||
"challengeType": 6,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Tools"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "User Experience Design",
|
|
||||||
"order": 20,
|
|
||||||
"time": "0 hours",
|
|
||||||
"isComingSoon": true,
|
|
||||||
"challenges": [
|
|
||||||
{
|
|
||||||
"id": "bd7128d8c441eddfbeb5bdd2",
|
|
||||||
"title": "Learn User Experience Design Challenges",
|
|
||||||
"description": [],
|
|
||||||
"challengeSeed": [],
|
|
||||||
"tests": [],
|
|
||||||
"type": "hike",
|
|
||||||
"challengeType": 6,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "User Experience Design"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "Visual Design",
|
|
||||||
"order": 21,
|
|
||||||
"time": "0 hours",
|
|
||||||
"isComingSoon": true,
|
|
||||||
"challenges": [
|
|
||||||
{
|
|
||||||
"id": "bd7128d8c441eddfbeb5bdd1",
|
|
||||||
"title": "Learn Visual Design Challenges",
|
|
||||||
"description": [],
|
|
||||||
"challengeSeed": [],
|
|
||||||
"tests": [],
|
|
||||||
"type": "hike",
|
|
||||||
"challengeType": 6,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Visual Design"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@ -0,0 +1,264 @@
|
|||||||
|
{
|
||||||
|
"name": "API and Microservice Projects",
|
||||||
|
"order": 4,
|
||||||
|
"time": "150 hours",
|
||||||
|
"helpRoom": "HelpBackend",
|
||||||
|
"challenges": [
|
||||||
|
{
|
||||||
|
"id": "bd7158d8c443edefaeb5bdef",
|
||||||
|
"title": "Timestamp Microservice",
|
||||||
|
"description": [
|
||||||
|
"Build a full stack JavaScript app that is functionally similar to this: <a href='https://curse-arrow.gomix.me/' target='_blank'>https://curse-arrow.gomix.me/</a> on GoMix or on your own publicly accessible domain.",
|
||||||
|
"Start by remixing this boilerplate GoMix project: <a href='https://gomix.com/#!/project/shimmer-ripper'>https://gomix.com/#!/project/shimmer-ripper</a>. Then get all the tests for the below user stories to pass."
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text": "I can pass a string as a parameter, and it will check to see whether that string contains either a unix timestamp or a natural language date (example: January 1, 2016).",
|
||||||
|
"testString": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "If it does, it returns both the Unix timestamp and the natural language form of that date.",
|
||||||
|
"testString": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "If it does not contain a date or Unix timestamp, it returns null for those properties.",
|
||||||
|
"testString": ""
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "basejump",
|
||||||
|
"isRequired": true,
|
||||||
|
"releasedOn": "January 1, 2016",
|
||||||
|
"challengeType": 4,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"es": {
|
||||||
|
"title": "Microservicio de Marca Temporal",
|
||||||
|
"description": [
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "bd7158d8c443edefaeb5bdff",
|
||||||
|
"title": "Request Header Parser Microservice",
|
||||||
|
"description": [
|
||||||
|
"Build a full stack JavaScript app that is functionally similar to this: <a href='https://dandelion-roar.gomix.me/' target='_blank'>https://dandelion-roar.gomix.me/</a> on GoMix or on your own publicly accessible domain.",
|
||||||
|
"Start by remixing this boilerplate GoMix project: <a href='https://gomix.com/#!/project/shimmer-ripper'>https://gomix.com/#!/project/shimmer-ripper</a>. Then get all the tests for the below user stories to pass."
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text": "I can get the IP address, language and operating system for my browser.",
|
||||||
|
"testString": ""
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "basejump",
|
||||||
|
"isRequired": true,
|
||||||
|
"releasedOn": "January 1, 2016",
|
||||||
|
"challengeType": 4,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"es": {
|
||||||
|
"title": "Microservicio para analizar el encabezado de una petición",
|
||||||
|
"description": [
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "bd7158d8c443edefaeb5bd0e",
|
||||||
|
"title": "URL Shortener Microservice",
|
||||||
|
"description": [
|
||||||
|
"Build a full stack JavaScript app that is functionally similar to this: <a href='https://thread-paper.gomix.me/' target='_blank'>https://thread-paper.gomix.me/</a> on GoMix or on your own publicly accessible domain.",
|
||||||
|
"Start by remixing this boilerplate GoMix project: <a href='https://gomix.com/#!/project/shimmer-ripper'>https://gomix.com/#!/project/shimmer-ripper</a>. Then get all the tests for the below user stories to pass."
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text": "I can pass a URL as a parameter and I will receive a shortened URL in the JSON response.",
|
||||||
|
"testString": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "If I pass an invalid URL that doesn't follow the valid http://www.example.com format, the JSON response will contain an error instead.",
|
||||||
|
"testString": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "When I visit that shortened URL, it will redirect me to my original link.",
|
||||||
|
"testString": ""
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "basejump",
|
||||||
|
"isRequired": true,
|
||||||
|
"releasedOn": "January 1, 2016",
|
||||||
|
"challengeType": 4,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"es": {
|
||||||
|
"title": "Microservicio para acortar URLs",
|
||||||
|
"description": [
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "bd7158d8c443edefaeb5bdee",
|
||||||
|
"title": "Exercise Tracker",
|
||||||
|
"description": [
|
||||||
|
"Build a full stack JavaScript app that is functionally similar to this: <a href='https://fuschia-custard.gomix.me/' target='_blank'>https://fuschia-custard.gomix.me/</a> on GoMix or on your own publicly accessible domain.",
|
||||||
|
"Start by remixing this boilerplate GoMix project: <a href='https://gomix.com/#!/project/fcc-message'>https://gomix.com/#!/project/fcc-message</a>. Then get all the tests for the below user stories to pass."
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text": "I can create a user by posting form data username to /api/exercise/new-user and returned will be an object with username and <code>_id</code>.",
|
||||||
|
"testString": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "I can get an array of all users by getting api/exercise/users with the same info as when creating a user.",
|
||||||
|
"testString": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "I can add an exercise to any user by posting form data userId(_id), description, duration, and optionally date to /api/exercise/add. If no date supplied it will use current date. Returned will the the user object with also with the exercise fields added.",
|
||||||
|
"testString": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "I can retrieve a full exercise log of any user by getting /api/exercise/log with a parameter of userId(_id). Return will be the user object with added array log and count (total exercise count).",
|
||||||
|
"testString": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "I can retrieve part of the log of any user by also passing along optional parameters of from & to or limit. (Date format yyyy-mm-dd, limit = int)",
|
||||||
|
"testString": ""
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "basejump",
|
||||||
|
"isRequired": true,
|
||||||
|
"releasedOn": "January 1, 2016",
|
||||||
|
"challengeType": 4,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"es": {
|
||||||
|
"title": "Capa de abstracción para buscar imágenes",
|
||||||
|
"description": [
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "bd7158d8c443edefaeb5bd0f",
|
||||||
|
"title": "File Metadata Microservice",
|
||||||
|
"description": [
|
||||||
|
"Build a full stack JavaScript app that is functionally similar to this: <a href='https://purple-paladin.gomix.me/' target='_blank'>https://purple-paladin.gomix.me/</a> on GoMix or on your own publicly accessible domain.",
|
||||||
|
"Start by remixing this boilerplate GoMix project: <a href='https://gomix.com/#!/project/shimmer-ripper'>https://gomix.com/#!/project/shimmer-ripper</a>. Then get all the tests for the below user stories to pass."
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text": "I can submit a FormData object that includes a file upload.",
|
||||||
|
"testString": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "When I submit something, I will receive the file size in bytes within the JSON response.",
|
||||||
|
"testString": ""
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "basejump",
|
||||||
|
"isRequired": true,
|
||||||
|
"releasedOn": "January 1, 2016",
|
||||||
|
"challengeType": 4,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"es": {
|
||||||
|
"title": "Microservicio de metadatos de archivos",
|
||||||
|
"description": [
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
553
challenges/05-apis-and-microservices/basic-node-and-express.json
Normal file
553
challenges/05-apis-and-microservices/basic-node-and-express.json
Normal file
@ -0,0 +1,553 @@
|
|||||||
|
{
|
||||||
|
"name": "Basic Node and Express",
|
||||||
|
"order": 2,
|
||||||
|
"time": "5 hours",
|
||||||
|
"helpRoom": "Help",
|
||||||
|
"challenges": [
|
||||||
|
{
|
||||||
|
"id": "587d7fb0367417b2b2512bec",
|
||||||
|
"title": "Introduction to the Basic Node and Express Challenges",
|
||||||
|
"description": [
|
||||||
|
[
|
||||||
|
"",
|
||||||
|
"",
|
||||||
|
"Node.js is a JavaScript tool that allows developers to write backend (server-side) programs in JavaScript. Node.js comes with a handful of built-in modules--small, independent programs--that help facilitate this purpose. Some of the core modules include:<br><br><ul><li>HTTP: a module that acts as a server</li><li>File System: a module that reads and modifies files</li><li>Path: a module for working with directory and file paths</li><li>Assertion Testing: a module that checks code against prescribed constraints</li></ul><br>Express, while not included with Node.js, is another module often used with it. Express runs between the server created by Node.js and the frontend pages of a web application. Express also handles an application's routing. Routing directs users to the correct page based on their interaction with the application.<br><br>While there are alternatives to using Express, its simplicity makes it a good place to begin when learning the interaction between a backend powered by Node.js and the frontend.",
|
||||||
|
""
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"releasedOn": "",
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [],
|
||||||
|
"type": "Waypoint",
|
||||||
|
"challengeType": 7,
|
||||||
|
"isRequired": false,
|
||||||
|
"titleEs": "",
|
||||||
|
"descriptionEs": [
|
||||||
|
[]
|
||||||
|
],
|
||||||
|
"titleFr": "",
|
||||||
|
"descriptionFr": [
|
||||||
|
[]
|
||||||
|
],
|
||||||
|
"titleDe": "",
|
||||||
|
"descriptionDe": [
|
||||||
|
[]
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7fb0367417b2b2512bed",
|
||||||
|
"title": "Meet the Node console",
|
||||||
|
"description": [
|
||||||
|
"During the development process, is important to be able to check what’s going on in your code. Node is just a javascript environment. Like client side javascript, you can use the console to display useful debug information. On your local machine, you would see the console output in a terminal. On HyperDev you can open the logs in the lower part of the screen. You can toggle the log panel if you push the button ‘Logs’ (top-left, under the app name).",
|
||||||
|
"To get started, just put the classic Hello World in the console. We recommend to keep the log panel open while working at these challenges. Reading the logs you can be aware of the nature of the errors that may occur."
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text" : "<code>\"Hello World\"</code> should be in the console",
|
||||||
|
"testString" : "getUserInput => $.get(getUserInput('url') + '/_api/hello-console').then(data => { assert.isTrue(data.passed, '\"Hello World\" is not in the server console'); }, xhr => { throw new Error(xhr.responseText); })"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "backend",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7fb0367417b2b2512bee",
|
||||||
|
"title": "Start a working Express Server",
|
||||||
|
"description": [
|
||||||
|
"In the first two lines of the file myApp.js you can see how it’s easy to create an Express app object. This object has several methods, and we will learn many of them in these challenges. One fundamental method is app.listen(<port>). It tells your server to listen on a given port, putting it in running state. You can see it at the bottom of the file. It is inside comments because for testing reasons we need the app to be running in background. All the code that you may want to add goes between these two fundamental parts. HyperDev stores the port number in the environemet variable process.env.PORT. Its value is 3000.",
|
||||||
|
"Let’s serve our first string ! In Express, routes takes the following structure: app.METHOD(PATH, HANDLER). METHOD is an http method in lowercase. PATH is a relative path on the server (it can be a string, or even a regular expression). HANDLER is a function that Express calls when the route is matched.",
|
||||||
|
"Handlers take the form function(req, res) {...}, where req is the request object, and res is the response object. For example, the handler",
|
||||||
|
"<code>function(req, res) {</code>",
|
||||||
|
"<code> res.send('Response String');</code>",
|
||||||
|
"<code>}</code>",
|
||||||
|
"will serve the string 'Response String'.",
|
||||||
|
"Use the app.get() method to serve the string Hello Express, to GET requests matching the / root path. Be sure that your code works by looking at the logs, then see the results in your browser, clicking the button ‘Show Live’ in the HyperDev UI."
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text" : "Your app should serve the string 'Hello Express'",
|
||||||
|
"testString" : "getUserInput => $.get(getUserInput('url')).then(data => { assert.equal(data, 'Hello Express', 'Your app does not serve the text \"Hello Express\"'); }, xhr => { throw new Error(xhr.responseText); })"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "backend",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7fb0367417b2b2512bef",
|
||||||
|
"title": "Serve an HTML file",
|
||||||
|
"description": [
|
||||||
|
"We can respond with a file using the method res.sendFile(<file>).",
|
||||||
|
"You can put it inside the app.get('/', ...) route handler. Behind the scenes this method will set the appropriate headers to instruct your browser on how to handle the file you want to send, according to its type. Then it will read and send the file. This method needs an absolute file-path. We recommend you to use the node global variable __dirname to calculate the path.",
|
||||||
|
"e.g. absolutePath = __dirname + relativePath/file.ext .",
|
||||||
|
"The file to send is /views/index.html. Try to ‘Show Live’ your app, you should see a big HTML heading (and a form that we will use later…), with no style applied.",
|
||||||
|
"Note: You can edit the solution of the preceding challenge, or create a new one. If you create a new solution, keep in mind that Express evaluates the routes from top to bottom. It executes the handler for the first match. You have to comment out the preceding solution, or the server will keep responding with a string."
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text" : "Your app should serve the file views/index.html",
|
||||||
|
"testString" : "getUserInput => $.get(getUserInput('url')).then(data => { assert.match(data, /<h1>.*<\\/h1>/. 'Your app does not serve the expected HTML'); }, xhr => { throw new Error(xhr.responseText); })"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "backend",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7fb0367417b2b2512bf0",
|
||||||
|
"title": "Serve Static assets",
|
||||||
|
"description": [
|
||||||
|
"An HTML server usually has one or more directories that are accessible by the user. You can place there the static assets needed by your application (stylesheets, scripts, images). In Express you can put in place this functionality using the middleware express.static(<public-dir-absolute_path>). If don’t know what a midleware is, don’t worry. We’ll discuss about it later in details. Basically middleware are function that intercept route handlers, adding some kind of information. A middleware needs to be mounted using the method app.use([optional-path], <mware function>). The first path argument is optional. If you don’t pass it, the middleware will be executed for all the requests.",
|
||||||
|
"Mount the express.static() middleware for all the requests with app.use(). The absolute path to the assets folder is __dirname + /public.",
|
||||||
|
"Now your app should be able to serve a CSS stylesheet. From outside the public folder will appear mounted to the root directory. Your front-page should look a little better now"
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text" : "Your app should serve asset files from the <code>/public</code> directory",
|
||||||
|
"testString" : "getUserInput => $.get(getUserInput('url') + '/style.css').then(data => { assert.match(data, /body\\s*\\{[^\\}]*\\}/, 'Your app does not serve static assets'); }, xhr => { throw new Error(xhr.responseText); })"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "backend",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7fb1367417b2b2512bf1",
|
||||||
|
"title": "Serve JSON on a specific route",
|
||||||
|
"description": [
|
||||||
|
"While an HTML server serves (you guessed it ?) HTML, an API serves data. A REST API allows data exchange in a simple way, without the need for clients to know any detail about the server. The client only needs to know where the resource is (the URL), and the action it wants to perform on it (the verb). The GET verb is used when you are fetching some information, without modifying anything. In these days the preferred data format to move these informations around the web is JSON. In few words JSON is a convenient way to represent a JavaScript object as a string, so it can be easily transmitted.",
|
||||||
|
"Let’s create a route that responds with JSON at the path (/json). You can do it as usual, with the app.get() method. Inside the route handler use the method res.json(<object>). This method closes the request-response loop, returning the data. Behind the scenes it converts a valid Javascript object into a string. Then sets the appropriate headers to tell your browser that you are serving JSON, and sends the data back. A valid object has the usual structure {key: data}. data can ba a number, a string, a nested objects or an array. data can also be a variable or the result of a function call. It will be evaluated before converting into a string.",
|
||||||
|
"Serve the object <code>{message: 'json'}</code> as a response in JSON format, to the GET requests to the route /json. Point your browser to <your-app-url>/json, you should see the message on the screen."
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text" : "The endpoint /json should serve the json <code>{\"message\": \"Hello json\"}</code>",
|
||||||
|
"testString" : "getUserInput => $.get(getUserInput('url') + '/json').then(data => { assert.equal(data.message, 'Hello json', 'The \\'/json\\' endpoint does not serve the right data'); }, xhr => { throw new Error(xhr.responseText); })"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "backend",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7fb1367417b2b2512bf2",
|
||||||
|
"title": "Use the .env file",
|
||||||
|
"description": [
|
||||||
|
"The .env file is an hidden file that is used to pass environment variables to your application. This file is secret, noone but you can access it. In this file you should store data that you want to keep secret. For example you can store API keys from external services or your database URI. You can also use it to store configuration options. Setting that options you can change the behavior of your application, without the need of rewriting some code. The environment variables are accessible from the app as process.env.VAR_NAME. The process.env object is a global Node object. The variables are passed as strings. By convention the variable names are all uppercase, with words separated by _. The .env is a shell file so you don’t need to quote names or values, and there cannot be space around the = e.g. VAR_NAME=value. Usually you will put each variable definition on a separate line.",
|
||||||
|
"We are going to use one environment variable as a configuration option. Store the variable MESSAGE_STYLE=uppercase in the .env file. Then change the GET /json route handler so that if process.env.MESSAGE_STYLE equals to \"uppercase\" the response object becomes {message: HELLO JSON}."
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text" : "The response of the endpoint /json should change setting the environment variable MESSAGE_STYLE",
|
||||||
|
"testString" : "getUserInput => $.get(getUserInput('url') + '/_api/use-env-vars').then(data => { assert.isTrue(data.passed, 'The response of \"/json\" does not change according to MESSAGE_STYLE'); }, xhr => { throw new Error(xhr.responseText); })"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "backend",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7fb1367417b2b2512bf3",
|
||||||
|
"title": "Implement a Root-level Request Logger Middleware",
|
||||||
|
"description": [
|
||||||
|
"Before we introduced the express.static() middleware function. Now it’s time to see what middleware is, in more detail. Middleware functions are functions that take 3 arguments: the request object, the response object, and the next function in the application’s request-response cycle. These functions execute some code that can have side effects on the app, and usually add informations to the request or response objects. They can also end the cycle sending the response, when some condition is met. If they don’t send the response, when they are done they start the execution of the next function in the stack. This is triggered calling the 3rd argument next(). More information here in the express documentation.",
|
||||||
|
"Look at the following example :",
|
||||||
|
"<code>function(req, res, next) {</code>",
|
||||||
|
"<code> console.log(\"I'm middleware...\" );</code>",
|
||||||
|
"<code> next();</code>",
|
||||||
|
"<code>}</code>",
|
||||||
|
"Let’s suppose we mounted this function on a route. When a request matches the route, it displays the string “I’m middleware…”. Then it executes the next function in the stack.",
|
||||||
|
"In this exercise we are going to build a root-level middleware. As we have seen in challenge 4, to mount a middleware function at root level we can use the method app.use(<mware-function). In this case the function will be executed for all the request. If you want a function to be executed let’s say only for POST request, you could use app.post(<mware-function>). Analogous methods exist for all the http verbs (GET, DELETE, PUT, …).",
|
||||||
|
"Build a simple logger. For every request, it should log in the console a string taking the following format : method path - ip. You can get the request method (http verb), the relative route path, and the caller’s ip from the request object, using req.method, req.path and req.ip. Remember to call next() when you are done, or your server will be stuck forever. Be sure to have the ‘Logs’ opened, and see what happens when some request arrives…",
|
||||||
|
"Hint: Express evaluates functions in order. This is true for middleware too. If you want it to work for all the routes, it should be mounted before them."
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text" : "Root level logger middleware should be active",
|
||||||
|
"testString" : "getUserInput => $.get(getUserInput('url') + '/_api/root-middleware-logger').then(data => { assert.isTrue(data.passed, 'root-level logger is not working as expected'); }, xhr => { throw new Error(xhr.responseText); })"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "backend",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7fb1367417b2b2512bf4",
|
||||||
|
"title": "Chain Middleware to Create a Time Server",
|
||||||
|
"description": [
|
||||||
|
"Middleware can be mounted at a specific route using app.METHOD('<path>', mware). Middleware can also be chained inside route definition.",
|
||||||
|
"Look at the following example :",
|
||||||
|
"<code>app.get('/user', function(req, res, next){</code>",
|
||||||
|
"<code> req.user = getTheUserSync(); // Hypotetical Synchronous operation</code>",
|
||||||
|
"<code> next();</code>",
|
||||||
|
"<code>}, function(req, res) {</code>",
|
||||||
|
"<code> res.send(req.user)</code>",
|
||||||
|
"<code>})</code>",
|
||||||
|
"This approach is useful to split the server operations into smaller units. That leads a to a better app structure, and the possibility to reuse code in different places. This approach can be also used to perform some validation on the data. At each point of the middleware stack you can block the execution of the current chain and pass control to functions specifically desinged to handle errors. Or you can pass control to the next matching route, to handle special cases. We will see how in the advanced express section.",
|
||||||
|
"In the route app.get('/now', ...) chain a middleware function and the final handler. In the middleware function you should add the current time to the request object in the req.time key. You can use new Date().toString(). In the handler, respond with a json object, taking the structure {time: req.time}.",
|
||||||
|
"Hint: The test will not pass if you don’t chain the middleware. If you mount the function somewhere else, the test will fail, even if the output result is correct."
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text" : "The /now endpoint should have mounted middleware",
|
||||||
|
"testString" : "getUserInput => $.get(getUserInput('url') + '/_api/chain-middleware-time').then(data => { assert.equal(data.stackLength, 2, '\"/now\" route has no mounted middleware'); }, xhr => { throw new Error(xhr.responseText); })"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text" : "The /now endpoint should return a time that is +/- 20 secs from now",
|
||||||
|
"testString" : "getUserInput => $.get(getUserInput('url') + '/_api/chain-middleware-time').then(data => { var now = new Date(); assert.isAtMost(Math.abs(new Date(data.time) - now), 20000, 'the returned time is not between +- 20 secs from now'); }, xhr => { throw new Error(xhr.responseText); })"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "backend",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7fb2367417b2b2512bf5",
|
||||||
|
"title": "Get Route Parameter Input from the Client",
|
||||||
|
"description": [
|
||||||
|
"When building an API, we have to allow users to comunicate us what they want to get from our service. For example, if the client is requesting informations about a user stored in the database, she needs a way to let us know which user she is interested in. One possible way to get this result, is using route parameters. Route parameters are named segments of the URL, delimited by slashes (/). Each segment captures the value of the part of the URL which match its position. The captured values are populated in the req.params object.",
|
||||||
|
"<code>route_path: '/user/:userId/book/:bookId'</code>",
|
||||||
|
"<code>actual_request_URL: '/user/546/book/6754' </code>",
|
||||||
|
"<code>req.params: {userId: '546', bookId: '6754'}</code>",
|
||||||
|
"Build an echo server, mounted at the route GET /:word/echo. Respond with a json document, taking the structure {echo: <word>}. You can find the word to be repeated at req.params.word. You can test your route from your browser the address bar, visiting some matching routes, e.g. <your-app-rootpath>/freecodecamp/echo"
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text" : "Test 1 : Your echo server should repeat words correctly",
|
||||||
|
"testString" : "getUserInput => $.get(getUserInput('url') + '/eChOtEsT/echo').then(data => { assert.equal(data.echo, 'eChOtEsT', 'Test 1: the echo server is not working as expected') }, xhr => { throw new Error(xhr.responseText); })"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text" : "Test 2 : Your echo server should repeat words correctly",
|
||||||
|
"testString" : "getUserInput => $.get(getUserInput('url') + '/ech0-t3st/echo').then(data => { assert.equal(data.echo, 'ech0-t3st', 'Test 2: the echo server is not working as expected') }, xhr => { throw new Error(xhr.responseText); })"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "backend",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7fb2367417b2b2512bf6",
|
||||||
|
"title": "Get Query Parameter Input from the Client",
|
||||||
|
"description": [
|
||||||
|
"Another common way to get input from the client is by encoding the data after the route path, using a Query string. The query string is delimited by a question mark ?, and includes field=value couples. Each couple is separated by an ampersand &. Express can parse the data from the query string, and populate the object req.query. Some character cannot be in URLs, so the query string needs to be encoded. If you use the API from javascript, you can use specific methods to encode/decode the URL.",
|
||||||
|
"<code>route_path: '/library'</code>",
|
||||||
|
"<code>actual_request_URL: '/library?userId=546&bookId=6754' </code>",
|
||||||
|
"<code>req.query: {userId: '546', bookId: '6754'}</code>",
|
||||||
|
"Build an API endpoint, mounted at GET /name. Respond with a json document, taking the structure <code>{ name: '<firstname> <lastname>'}</code>. The first and last name parameters should be encoded in a query string e.g. ?first=<firstname>&last=<lastname>.",
|
||||||
|
"TIP: In the following exercise we are going to receive data from a POST request, at the same /name route path. If you want you can use the method app.route(<path>).get(<handler>).post(<handler>). This syntax allows you to chain different verb handlers on the same path route. You can save a bit of typing, and have cleaner code."
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text" : "Test 1 : Your API endpoint should respond with the correct name",
|
||||||
|
"testString" : "getUserInput => $.get(getUserInput('url') + '/name?first=Mick&last=Jagger').then(data => { assert.equal(data.name, 'Mick Jagger', 'Test 1: \"GET /name\" route does not behave as expected') }, xhr => { throw new Error(xhr.responseText); })"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text" : "Test 2 : Your APi endpoint should respond with the correct name",
|
||||||
|
"testString" : "getUserInput => $.get(getUserInput('url') + '/name?last=Richards&first=Keith').then(data => { assert.equal(data.name, 'Keith Richards', 'Test 2: \"GET /name\" route does not behave as expected') }, xhr => { throw new Error(xhr.responseText); })"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "backend",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7fb2367417b2b2512bf7",
|
||||||
|
"title": "Use Body-Parser to Parse POST Requests",
|
||||||
|
"description": [
|
||||||
|
"Besides GET there is another common http verb , it is POST. POST is the default method used to send client data with HTML forms. In the REST convention POST is used to send data to create new items in the database (a new user, or a new blog post). We don’t have a database in this project, but we are going to learn how to handle POST requests anyway.",
|
||||||
|
"In these kind of request the data doesn’t appear in the URL, it is hidden in the request body. This is a part of the HTML request, also called payload. Since HTML is text based, even if you don’t see the data, it doesn’t mean that they are secret. The raw content of an HTTP Post is shown below:",
|
||||||
|
"<code>POST /path/subpath HTTP/1.0</code>",
|
||||||
|
"<code>From: john@example.com</code>",
|
||||||
|
"<code>User-Agent: someBrowser/1.0</code>",
|
||||||
|
"<code>Content-Type: application/x-www-form-urlencoded</code>",
|
||||||
|
"<code>Content-Length: 20</code>",
|
||||||
|
"<code>name=John+Doe&age=25</code>",
|
||||||
|
"As you can see the body is encoded like the query string. This is the default format used by HTML forms. With Ajax we can also use JSON to be able to handle data having a more complex structure. There is also another type of encoding : multipart/form-data. This one is used to upload binary files.",
|
||||||
|
"In this exercise we will use an urlencoded body.",
|
||||||
|
"To parse the data coming from POST requests, you have to install a package: the body-parser. This package allows you to use a series of middleware, which can decode data in different formats. See the docs here.",
|
||||||
|
"Install the body-parser module in your package.json. Then require it at the top of the file. Store it in a variable named bodyParser.",
|
||||||
|
"The middleware to handle url encoded data is returned by bodyParser.urlencoded({extended: false}). extended=false is a configuration options that tells the parser to use the classic encoding. When using it, values can be only strings or arrays. The extended version allows more data flexibility, but is outmatched by JSON. app.use() the function returned by the previous method call. As usual, the middleware must be mounted before all the routes which need it."
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text" : "The 'body-parser' middleware should be mounted",
|
||||||
|
"testString" : "getUserInput => $.get(getUserInput('url') + '/_api/add-body-parser').then(data => { assert.isAbove(data.mountedAt, 0, '\"body-parser\" is not mounted correctly') }, xhr => { throw new Error(xhr.responseText); })"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "backend",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7fb2367417b2b2512bf8",
|
||||||
|
"title": "Get Data from POST Requests",
|
||||||
|
"description": [
|
||||||
|
"Mount a POST handler at the path /name. It’s the same path as before. We have prepared a form in the html frontpage. It will submit the same data of exercise 10 (Query string). If the body-parser is configured correctly, you should find the parameters in the object req.body. Have a look at the usual library example :",
|
||||||
|
"<code>route: POST '/library'</code>",
|
||||||
|
"<code>urlencoded_body: userId=546&bookId=6754 </code>",
|
||||||
|
"<code>req.body: {userId: '546', bookId: '6754'}</code>",
|
||||||
|
"Respond with the same JSON object as before: {name: '<firstname> <lastname>'}. Test if your endpoint works using the html form we provided in the app frontpage.",
|
||||||
|
"Tip: There are several other http methods other than GET and POST. And by convention there is a corrispondence between the http verb, and the operation you are going to execute on the server. The conventional mapping is :",
|
||||||
|
"POST (sometimes PUT) - Create a new resource using the information sent with the request,",
|
||||||
|
"GET - Read an existing resource without modifying it,",
|
||||||
|
"PUT or PATCH (sometimes POST) - Update a resource using the data sent,",
|
||||||
|
"DELETE => Delete a resource.",
|
||||||
|
"There are also a couple of other methods which are used to negotiate a connection with the server. Except from GET, all the other methods listed above can have a payload (i.e. the data into the request body). The body-parser middleware works with these methods as well."
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text" : "Test 1 : Your API endpoint should respond with the correct name",
|
||||||
|
"testString" : "getUserInput => $.post(getUserInput('url') + '/name', {first: 'Mick', last: 'Jagger'}).then(data => { assert.equal(data.name, 'Mick Jagger', 'Test 1: \"POST /name\" route does not behave as expected') }, xhr => { throw new Error(xhr.responseText); })"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text" : "Test 2 : Your API endpoint should respond with the correct name",
|
||||||
|
"testString" : "getUserInput => $.post(getUserInput('url') + '/name', {first: 'Keith', last: 'Richards'}).then(data => { assert.equal(data.name, 'Keith Richards', 'Test 2: \"POST /name\" route does not behave as expected') }, xhr => { throw new Error(xhr.responseText); })"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "backend",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -0,0 +1,108 @@
|
|||||||
|
{
|
||||||
|
"name": "Claim Your APIs and Microservices Certificate",
|
||||||
|
"order": 13,
|
||||||
|
"time": "5 minutes",
|
||||||
|
"challenges": [
|
||||||
|
{
|
||||||
|
"id": "587d7fb3367417b2b2512bf9",
|
||||||
|
"title": "Claim Your APIs and Microservices Certificate",
|
||||||
|
"description": [
|
||||||
|
[
|
||||||
|
"//i.imgur.com/k8btNUB.jpg",
|
||||||
|
"An image of our APIs and Microservices Certificate",
|
||||||
|
"This challenge will give you your verified APIs and Microservices Certificate. Before we issue your certificate, we must verify that you have completed all of our basic and intermediate algorithm scripting challenges, and all our basic, intermediate, and advanced front end development projects. You must also accept our Academic Honesty Pledge. Click the button below to start this process.",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"//i.imgur.com/uLPsUko.jpg",
|
||||||
|
"The definition of plagiarism: Plagiarism (noun) - copying someone else’s work and presenting it as your own without crediting them",
|
||||||
|
"By clicking below, you pledge that all of your submitted code A) is code you or your pair personally wrote, or B) comes from open source libraries like jQuery, or C) has been clearly attributed to its original authors. You also give us permission to audit your challenge solutions and revoke your certificate if we discover evidence of plagiarism.",
|
||||||
|
"#"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"//i.imgur.com/UedoV2G.jpg",
|
||||||
|
"An image of the text \"Front End Development Certificate requirements\"",
|
||||||
|
"Let's confirm that you have completed all of our basic and intermediate algorithm scripting challenges, and all our basic, intermediate, and advanced front end development projects. Click the button below to verify this.",
|
||||||
|
"#"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"//i.imgur.com/Q5Za9U6.jpg",
|
||||||
|
"An image of the word \"Congratulations\"",
|
||||||
|
"Congratulations! We've added your APIs and Microservices Certificate to your portfolio page. Unless you choose to hide your solutions, this certificate will remain publicly visible and verifiable.",
|
||||||
|
""
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
{
|
||||||
|
"properties": [
|
||||||
|
"isHonest",
|
||||||
|
"isFrontEndCert"
|
||||||
|
],
|
||||||
|
"apis": [
|
||||||
|
"/certificate/honest",
|
||||||
|
"/certificate/verify/front-end"
|
||||||
|
],
|
||||||
|
"stepIndex": [
|
||||||
|
1,
|
||||||
|
2
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"id": "bd7158d8c443edefaeb5bdef",
|
||||||
|
"title": "Timestamp Microservice"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "bd7158d8c443edefaeb5bdff",
|
||||||
|
"title": "Request Header Parser Microservice"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "bd7158d8c443edefaeb5bd0e",
|
||||||
|
"title": "URL Shortener Microservice"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "bd7158d8c443edefaeb5bd0f",
|
||||||
|
"title": "File Metadata Microservice"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "bd7158d8c443edefaeb5bdee",
|
||||||
|
"title": "Exercise Tracker"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"type": "Waypoint",
|
||||||
|
"challengeType": 7,
|
||||||
|
"translations": {
|
||||||
|
"es": {
|
||||||
|
"title": "Reclama tu certificado de Desarrollo de interfaces",
|
||||||
|
"description": [
|
||||||
|
[
|
||||||
|
"//i.imgur.com/k8btNUB.jpg",
|
||||||
|
"Una imagen que muestra nuestro certificado de Desarrollo de interfaces",
|
||||||
|
"Este desafío te otorga tu certificado autenticado de Desarrollo de interfaces. Antes de que podamos emitir tu certificado, debemos verificar que has completado todos los desafíos básicos e intermedios de diseño de algoritmos, y todos los proyectos básicos e intermedios de desarrollo de interfaces. También debes aceptar nuestro Juramento de honestidad académica. Pulsa el botón siguiente para iniciar este proceso.",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"//i.imgur.com/HArFfMN.jpg",
|
||||||
|
"Plagio (nombre): acción y efecto de plagiar. Plagiar (verbo) - copiar en lo sustancial obras ajenas, dándolas como propias.",
|
||||||
|
"Al pulsar el botón siguiente, juras que todo el código en tus soluciones a los desafíos A) es código que tú o tu compañero escribieron personalmente, o B) proviene de librerías de código abierto como jQuery, o C) ha sido claramente atribuido a sus autores originales. También nos otorgas el permiso para auditar tus soluciones a los desafíos y revocar tu certificado si encontramos evidencia de plagio.",
|
||||||
|
"#"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"//i.imgur.com/14F2Van.jpg",
|
||||||
|
"Una imagen del texto \"Front End Development Certificate requirements\"",
|
||||||
|
"Confirmemos que has completado todos nuestros desafíos básicos e intermedios de diseño de algoritmos, y todos nuestros proyectos básicos e intermedios de desarrollo de interfaces. Pulsa el botón siguiente para hacer la verificación.",
|
||||||
|
"#"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"//i.imgur.com/16SIhHO.jpg",
|
||||||
|
"Una imagen de la palabra \"Congratulations\"",
|
||||||
|
"¡Felicitaciones! Hemos agregado tu certificado de Desarrollo de interfaces a tu portafolio. A menos que elijas no mostrar tus soluciones, este certificado será públicamente visible y verificable.",
|
||||||
|
""
|
||||||
|
]
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -0,0 +1,492 @@
|
|||||||
|
{
|
||||||
|
"name": "Managing Packages with npm",
|
||||||
|
"order": 1,
|
||||||
|
"time": "5 hours",
|
||||||
|
"helpRoom": "Help",
|
||||||
|
"challenges": [
|
||||||
|
{
|
||||||
|
"id": "587d7fb3367417b2b2512bfa",
|
||||||
|
"title": "Introduction to the Managing Packages with npm Challenges",
|
||||||
|
"description": [
|
||||||
|
[
|
||||||
|
"",
|
||||||
|
"",
|
||||||
|
"The Node Package Manager (npm) is a command-line tool used by developers to share and control modules (or packages) of JavaScript code written for use with Node.js.<br><br>When starting a new project, npm generates a <code>package.json</code> file. This file lists the package dependencies for your project. Since npm packages are regularly updated, the <code>package.json</code> file allows you to set specific version numbers for each dependency. This ensures that updates to a package don't break your project.<br><br>npm saves packages in a folder named <code>node_modules</code>. These packages can be installed in two ways:<br><br><ol><li>globally in a root <code>node_modules</code> folder, accessible by all projects.</li><li>locally within a project's own <code>node_modules</code> folder, accessible only to that project.</li></ol><br>Most developers prefer to install packages local to each project to create a separation between the dependencies of different projects.",
|
||||||
|
""
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"releasedOn": "",
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [],
|
||||||
|
"type": "Waypoint",
|
||||||
|
"challengeType": 7,
|
||||||
|
"isRequired": false,
|
||||||
|
"titleEs": "",
|
||||||
|
"descriptionEs": [
|
||||||
|
[]
|
||||||
|
],
|
||||||
|
"titleFr": "",
|
||||||
|
"descriptionFr": [
|
||||||
|
[]
|
||||||
|
],
|
||||||
|
"titleDe": "",
|
||||||
|
"descriptionDe": [
|
||||||
|
[]
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7fb3367417b2b2512bfb",
|
||||||
|
"title": "Using Package.json, The Core of Any Node.js Project or npm Package",
|
||||||
|
"description": [
|
||||||
|
"The file package.json is the center of any Node.js project or npm package. It stores information about your project just like the <head>-section in a HTML document describes the content of a webpage. The package.json consists of a single JSON-object where information is stored in \"key\": value-pairs. There are only two required fields in a minimal package.json - name and version - but it’s a good practice to provide additional information about your project that could be useful to future users or maintainers.",
|
||||||
|
"The author-field",
|
||||||
|
"If you go to the HyperDev-project that you set up previously and look at on the left side of your screen, you’ll find the file tree where you can see an overview of the various files in your project. Under the file tree’s back-end section, you’ll find package.json - the file that we’ll be improving in the next couple of challenges.",
|
||||||
|
"One of the most common pieces of information in this file is the author-field that specifies who’s the creator of a project. It can either be a string or an object with contact details. The object is recommended for bigger projects but in our case, a simple string like the following example will do.",
|
||||||
|
"<code>\"author\": \"Jane Doe\",</code>",
|
||||||
|
"Instructions",
|
||||||
|
"Add your name to the author-field in the package.json of your HyperDev project.",
|
||||||
|
"Remember that you’re writing JSON.",
|
||||||
|
"All field-names must use double-quotes (\"), e.g. \"author\"",
|
||||||
|
"All fields must be separated with a comma (,)"
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text": "package.json should have a valid \"author\" key" ,
|
||||||
|
"testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert(packJson.author, '\"author\" is missing'); }, xhr => { throw new Error(xhr.responseText); })"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "backend",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7fb3367417b2b2512bfc",
|
||||||
|
"title": "Add a Description to Your package.json",
|
||||||
|
"description": [
|
||||||
|
"The next part of a good package.json is the description-field, where a short but informative description about your project belongs.",
|
||||||
|
"If you some day plan to publishing a package to npm, remember that this is the string that should sell your idea to the user when they decide whether to install your package or not. However, that’s not the only use case for the description: Since it’s a great way to summarize what a project does, it’s just as important for your normal Node.js-projects to help other developers, future maintainers or even your future self understand the project quickly.",
|
||||||
|
"Regardless of what you plan for your project, a description is definitely recommended. Let’s add something similar to this:",
|
||||||
|
"<code>\"description\": \"A project that does something awesome\",</code>",
|
||||||
|
"Instructions",
|
||||||
|
"Add a description to the package.json in your HyperDev project.",
|
||||||
|
"Remember to use double-quotes for field-names (\") and commas (,) to separate fields."
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text": "package.json should have a valid \"description\" key",
|
||||||
|
"testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert(packJson.description, '\"description\" is missing'); }, xhr => { throw new Error(xhr.responseText); })"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "backend",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7fb4367417b2b2512bfd",
|
||||||
|
"title": "Add Keywords to Your package.json",
|
||||||
|
"description": [
|
||||||
|
"The keywords-field is where you can describe your project using related keywords.",
|
||||||
|
"Example",
|
||||||
|
"<code>\"keywords\": [ \"descriptive\", \"related\", \"words\" ],</code>",
|
||||||
|
"As you can see, this field is structured as an array of double-quoted strings.",
|
||||||
|
"Instructions",
|
||||||
|
"Add an array of suitable strings to the keywords-field in the package.json of your HyperDev project.",
|
||||||
|
"One of the keywords should be freecodecamp."
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text": "package.json should have a valid \"keywords\" key",
|
||||||
|
"testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert(packJson.keywords, '\"keywords\" is missing'); }, xhr => { throw new Error(xhr.responseText); })"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "\"keywords\" field should be an Array",
|
||||||
|
"testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.isArray(packJson.keywords, '\"keywords\" is not an array'); }, xhr => { throw new Error(xhr.responseText); })"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "\"keywords\" should include \"freecodecamp\"",
|
||||||
|
"testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.include(packJson.keywords, 'freecodecamp', '\"keywords\" does not include \"freecodecamp\"'); }, xhr => { throw new Error(xhr.responseText); })"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "backend",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7fb4367417b2b2512bfe",
|
||||||
|
"title": "Add a license to your package.json",
|
||||||
|
"description": [
|
||||||
|
"TODO: This challenge could be used to inspire more people to develop OSS - we should really improve this description.",
|
||||||
|
"The license-field is where you inform users of your project what they are allowed to do with it.",
|
||||||
|
"Some common licenses for open source projects include MIT and BSD. http://choosealicense.com is a great resource if you want to learn more about what license could fit your project.",
|
||||||
|
"License information is not required. Copyright laws in most countries will give you ownership of what you create by default. However, it’s always a good practice to explicitly state what users can and can’t do.",
|
||||||
|
"Example",
|
||||||
|
"<code>\"license\": \"MIT\",</code>",
|
||||||
|
"Instructions",
|
||||||
|
"Fill the license-field in the package.json of your HyperDev project as you find suitable."
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text": "package.json should have a valid \"license\" key",
|
||||||
|
"testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert(packJson.license, '\"license\" is missing'); }, xhr => { throw new Error(xhr.responseText); })"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "backend",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7fb4367417b2b2512bff",
|
||||||
|
"title": "Add a Version to Your package.json",
|
||||||
|
"description": [
|
||||||
|
"The version is together with name one of the required fields in a package.json. This field describes the current version of your project.",
|
||||||
|
"Example",
|
||||||
|
"<code>\"version\": \"1.2\",</code>",
|
||||||
|
"Instructions",
|
||||||
|
"Add a version to the package.json in your HyperDev project."
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text": "package.json should have a valid \"version\" key",
|
||||||
|
"testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert(packJson.version, '\"version\" is missing'); }, xhr => { throw new Error(xhr.responseText); })"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "backend",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7fb4367417b2b2512c00",
|
||||||
|
"title": "Expand your project with external packages from npm",
|
||||||
|
"description": [
|
||||||
|
"One of the biggest reasons to use a package manager is their powerful dependency management. Instead of manually having to make sure that you get all dependencies whenever you set up a project on a new computer, npm automatically installs everything for you. But how can npm know exactly what your project needs? Meet the dependencies-section of your package.json.",
|
||||||
|
"In the dependencies-section, packages your project require are stored using the following format:",
|
||||||
|
"<code>\"dependencies\": {</code>",
|
||||||
|
"<code> \"package-name\": \"version\",</code>",
|
||||||
|
"<code> \"express\": \"4.14.0\"</code>",
|
||||||
|
"<code>}</code>",
|
||||||
|
"Instructions",
|
||||||
|
"Add version 2.14.0 of the package moment to the dependencies-field of your package.json",
|
||||||
|
"Moment is a handy library for working with time and dates."
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text": "\"dependencies\" should include \"moment\"",
|
||||||
|
"testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.property(packJson.dependencies, 'moment', '\"dependencies\" does not include \"moment\"'); }, xhr => { throw new Error(xhr.responseText); })"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "\"moment\" version should be \"2.14.0\"",
|
||||||
|
"testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.match(packJson.dependencies.moment, /^[\\^\\~]?2\\.14\\.0/, 'Wrong version of \"moment\" installed. It should be 2.14.0'); }, xhr => { throw new Error(xhr.responseText); })"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "backend",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7fb5367417b2b2512c01",
|
||||||
|
"title": "Manage npm Dependencies By Understanding Semantic Versioning",
|
||||||
|
"description": [
|
||||||
|
"Versions of the npm packages in the dependencies-section of your package.json follow what’s called Semantic Versioning (SemVer), an industry standard for software versioning aiming to make it easier to manage dependencies. Libraries, frameworks or other tools published on npm should use SemVer in order to clearly communicate what kind of changes that projects who depend on the package can expect if they update.",
|
||||||
|
"SemVer doesn’t make sense in projects without public APIs - so unless your project is similar to the examples above, use another versioning format.",
|
||||||
|
"So why do you need to understand SemVer?",
|
||||||
|
"Knowing SemVer can be useful when you develop software that use external dependencies (which you almost always do). One day, your understanding of these numbers will save you from accidentally introducing breaking changes to your project without understanding why things “that worked yesterday” suddenly doesn’t.",
|
||||||
|
"This is how Semantic Versioning works according to the official website:",
|
||||||
|
"Given a version number MAJOR.MINOR.PATCH, increment the:",
|
||||||
|
"MAJOR version when you make incompatible API changes,",
|
||||||
|
"MINOR version when you add functionality in a backwards-compatible manner, and",
|
||||||
|
"PATCH version when you make backwards-compatible bug fixes.",
|
||||||
|
"This means that PATCHes are bug fixes and MINORs add new features but neither of them break what worked before. Finally, MAJORs add changes that won’t work with earlier versions.",
|
||||||
|
"Example",
|
||||||
|
"A semantic version number: 1.3.8",
|
||||||
|
"Instructions",
|
||||||
|
"In the dependencies-section of your package.json, change the version of moment to match MAJOR version 2, MINOR version 10 and PATCH version 2"
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text": "\"dependencies\" should include \"moment\"",
|
||||||
|
"testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.property(packJson.dependencies, 'moment', '\"dependencies\" does not include \"moment\"'); }, xhr => { throw new Error(xhr.responseText); })"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "\"moment\" version should be \"2.10.2\"",
|
||||||
|
"testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.match(packJson.dependencies.moment, /^[\\^\\~]?2\\.10\\.2/, 'Wrong version of \"moment\". It should be 2.10.2'); }, xhr => { throw new Error(xhr.responseText); })"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "backend",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7fb5367417b2b2512c02",
|
||||||
|
"title": "Use the tilde-character to always use the latest patch version of a dependency",
|
||||||
|
"description": [
|
||||||
|
"In the last challenge, we told npm to only include a specific version of a package. That’s a useful way to freeze your dependencies if you need to make sure that different parts of your project stay compatible with each other. But in most use cases you don’t want to miss bug fixes, since they often include important security patches and (hopefully) don’t break things in doing so.",
|
||||||
|
"To allow a npm dependency to get updated to the latest PATCH-version, you can prefix the dependency’s version with the tilde-character (~). In package.json, our current rule for how npm may upgrade moment is to use a specific version only (2.10.2), but we want to allow the latest 2.10.x-version.",
|
||||||
|
"Example",
|
||||||
|
"<code>\"some-package-name\": \"~1.3.8\" allows updates to any 1.3.x version.</code>",
|
||||||
|
"Instructions",
|
||||||
|
"Use the tilde-character (~) to prefix the version of moment in your dependencies and allow npm to update it to any new PATCH release.",
|
||||||
|
"Note that the version numbers themselves not should be changed."
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text": "\"dependencies\" should include \"moment\"",
|
||||||
|
"testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.property(packJson.dependencies, 'moment', '\"dependencies\" does not include \"moment\"'); }, xhr => { throw new Error(xhr.responseText); })"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "\"moment\" version should match \"~2.10.x\"",
|
||||||
|
"testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.match(packJson.dependencies.moment, /^\\~2\\.10\\./. 'Wrong version of \"moment\". It should be ~2.10.2'); }, xhr => { throw new Error(xhr.responseText); })"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "backend",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7fb5367417b2b2512c03",
|
||||||
|
"title": "Use the caret-character to use the latest minor version of a dependency",
|
||||||
|
"description": [
|
||||||
|
"Similar to how the tilde (~) we learned about in the last challenge allow npm to install the latest PATCH for a dependency, the caret (^) allows npm to install future updates as well. The difference is that the caret will allow both MINOR updates and PATCHes.",
|
||||||
|
"At the moment, your current version of moment should be ~2.10.2 which allows npm to install to the latest 2.10.x-version. If we instead were to use the caret (^) as our version prefix, npm would instead be allowed to update to any 2.x.x-version.",
|
||||||
|
"Example",
|
||||||
|
"<code>\"some-package-name\": \"^1.3.8\" allows updates to any 1.x.x version.</code>",
|
||||||
|
"Instructions",
|
||||||
|
"Use the caret-character (^) to prefix the version of moment in your dependencies and allow npm to update it to any new MINOR release.",
|
||||||
|
"Note that the version numbers themselves not should be changed."
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text": "\"dependencies\" should include \"moment\"",
|
||||||
|
"testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.property(packJson.dependencies, 'moment', '\"dependencies\" does not include \"moment\"'); }, xhr => { throw new Error(xhr.responseText); })"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "\"moment\" version should match \"^2.x.x\"",
|
||||||
|
"testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.match(packJson.dependencies.moment, /^\\^2\\./, 'Wrong version of \"moment\". It should be ^2.10.2'); }, xhr => { throw new Error(xhr.responseText); })"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "backend",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7fb5367417b2b2512c04",
|
||||||
|
"title": "Remove a package from your dependencies",
|
||||||
|
"description": [
|
||||||
|
"Now you’ve tested a few ways you can manage dependencies of your project by using the package.json's dependencies-section. You’ve included external packages by adding them to the file and even told npm what types of versions you want by using special characters as the tilde (~) or the caret (^).",
|
||||||
|
"But what if you want to remove an external package that you no longer need? You might already have guessed it - Just remove the corresponding \"key\": value-pair for that from your dependencies.",
|
||||||
|
"This same method applies to removing other fields in your package.json as well",
|
||||||
|
"Instructions",
|
||||||
|
"Remove the package moment from your dependencies.",
|
||||||
|
"Make sure you have the right amount of commas after removing it."
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text": "\"dependencies\" should not include \"moment\"",
|
||||||
|
"testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.notProperty(packJson.dependencies, 'moment', '\"dependencies\" still includes \"moment\"'); }, xhr => { throw new Error(xhr.responseText); })"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "backend",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
506
challenges/05-apis-and-microservices/mongodb-and-mongoose.json
Normal file
506
challenges/05-apis-and-microservices/mongodb-and-mongoose.json
Normal file
@ -0,0 +1,506 @@
|
|||||||
|
{
|
||||||
|
"name": "MongoDB and Mongoose",
|
||||||
|
"order": 3,
|
||||||
|
"time": "5 hours",
|
||||||
|
"helpRoom": "Help",
|
||||||
|
"challenges": [
|
||||||
|
{
|
||||||
|
"id": "587d7fb5367417b2b2512c05",
|
||||||
|
"title": "Introduction to the MongoDB and Mongoose Challenges",
|
||||||
|
"description": [
|
||||||
|
[
|
||||||
|
"",
|
||||||
|
"",
|
||||||
|
"MongoDB is a database that stores data records (documents) for use by an application. Mongo is a non-relational, \"NoSQL\" database. This means Mongo stores all data associated within one record, instead of storing it across many preset tables as in a SQL database. Some benefits of this storage model are:<br><br><ul><li>Scalability: by default, non-relational databases are split (or \"sharded\") across many systems instead of only one. This makes it easier to improve performance at a lower cost.</li><li>Flexibility: new datasets and properties can be added to a document without the need to make a new table for that data.</li><li>Replication: copies of the database run in parallel so if one goes down, one of the copies becomes the new primary data source.</li></ul><br>While there are many non-relational databases, Mongo's use of JSON as its document storage structure makes it a logical choice when learning backend JavaScript. Accessing documents and their properties is like accessing objects in JavaScript.<br><br>Mongoose.js is an npm module for Node.js that allows you to write objects for Mongo as you would in JavaScript. This can make is easier to construct documents for storage in Mongo.",
|
||||||
|
""
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"releasedOn": "",
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [],
|
||||||
|
"type": "Waypoint",
|
||||||
|
"challengeType": 7,
|
||||||
|
"isRequired": false,
|
||||||
|
"titleEs": "",
|
||||||
|
"descriptionEs": [
|
||||||
|
[]
|
||||||
|
],
|
||||||
|
"titleFr": "",
|
||||||
|
"descriptionFr": [
|
||||||
|
[]
|
||||||
|
],
|
||||||
|
"titleDe": "",
|
||||||
|
"descriptionDe": [
|
||||||
|
[]
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7fb6367417b2b2512c06",
|
||||||
|
"title": "Install and Set Up Mongoose",
|
||||||
|
"description": [
|
||||||
|
"Add mongodb and mongoose to the project’s package.json. Then require mongoose. Store your mLab database URI in the private .env file as MONGO_URI. Connect to the database using mongoose.connect(<Your URI>)"
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text": "\"mongodb\" dependency should be in package.json",
|
||||||
|
"testString": "getUserInput => $.get(getUserInput('url') + '/_api/file/package.json').then(data => { var packJson = JSON.parse(data); assert.property(packJson.dependencies, 'mongodb'); }, xhr => { throw new Error(xhr.responseText); })"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "\"mongoose\" dependency should be in package.json",
|
||||||
|
"testString": "getUserInput => $.get(getUserInput('url') + '/_api/file/package.json').then(data => { var packJson = JSON.parse(data); assert.property(packJson.dependencies, 'mongooose'); }, xhr => { throw new Error(xhr.responseText); })"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "backend",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7fb6367417b2b2512c07",
|
||||||
|
"title": "Create a Model",
|
||||||
|
"description": [
|
||||||
|
"First of all we need a Schema. Each schema maps to a MongoDB collection. It defines the shape of the documents within that collection.",
|
||||||
|
"Schemas are building block for Models. They can be nested to create complex models, but in this case we’ll keep things simple.",
|
||||||
|
"A model allows you to create instances of your objects, called documents.",
|
||||||
|
"Create a person having this prototype :",
|
||||||
|
"<code>- Person Prototype -</code>",
|
||||||
|
"<code>--------------------</code>",
|
||||||
|
"<code>name : string [required]</code>",
|
||||||
|
"<code>age : number</code>",
|
||||||
|
"<code>favoriteFoods : array of strings (*) </code>",
|
||||||
|
"Use the mongoose basic schema types. If you want you can also add",
|
||||||
|
"more fields, use simple validators like required or unique,",
|
||||||
|
"and set default values. See the <a href='http://mongoosejs.com/docs/guide.html'>mongoose docs</a>.",
|
||||||
|
"[C]RUD Part I - CREATE",
|
||||||
|
"Note: HyperDev is a real server, and in real servers the interactions with the db happen in handler functions. These function are executed when some event happens (e.g. someone hits an endpoint on your API). We’ll follow the same approach in these exercises. The done() function is a callback that tells us that we can proceed after completing an asynchronous operation such as inserting, searching, updating or deleting. It’s following the Node convention and should be called as done(null, data) on success, or done(err) on error.",
|
||||||
|
"Warning - When interacting with remote services, errors may occur !",
|
||||||
|
"<code>/* Example */</code>",
|
||||||
|
"<code>var someFunc = function(done) {</code>",
|
||||||
|
"<code> //... do something (risky) ...</code>",
|
||||||
|
"<code> if(error) return done(error);</code>",
|
||||||
|
"<code> done(null, result);</code>",
|
||||||
|
"<code>};</code>"
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text": "Creating an instance from a mongoose schema should succeed",
|
||||||
|
"testString": "getUserInput => $.post(getUserInput('url') + '/_api/mongoose-model', {name: 'Mike', age: 28, favoriteFoods: ['pizza', 'cheese']}).then(data => { assert.equal(data.name, 'Mike', '\"model.name\" is not what expected'); assert.equal(data.age, '28', '\"model.age\" is not what expected'); assert.isArray(data.favoriteFoods, '\"model.favoriteFoods\" is not an Array'); assert.include(data.favoriteFoods, 'pizza', '\"model.favoriteFoods\" does not include the expected items'); assert.include(data.favoriteFoods, 'cheese', '\"model.favoriteFoods\" does not include the expected items'); }, xhr => { throw new Error(xhr.responseText); })"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "backend",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7fb6367417b2b2512c09",
|
||||||
|
"title": "Create and Save a Record of a Model",
|
||||||
|
"description": [
|
||||||
|
"Create a document instance using the Person constructor you build before. Pass to the constructor an object having the fields name, age, and favoriteFoods. Their types must be conformant to the ones in the Person Schema. Then call the method document.save() on the returned document instance. Pass to it a callback using the Node convention. This is a common pattern, all the following CRUD methods take a callback function like this as the last argument.",
|
||||||
|
"<code>/* Example */</code>",
|
||||||
|
"<code>// ...</code>",
|
||||||
|
"<code>person.save(function(err, data) {</code>",
|
||||||
|
"<code>// ...do your stuff here...</code>",
|
||||||
|
"<code>});</code>"
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text": "Creating and saving a db item should succeed",
|
||||||
|
"testString": "getUserInput => $.get(getUserInput('url') + '/_api/create-and-save-person').then(data => { assert.isString(data.name, '\"item.name\" should be a String'); assert.isNumber(data.age, '28', '\"item.age\" should be a Number'); assert.isArray(data.favoriteFoods, '\"item.favoriteFoods\" should be an Array'); assert.equal(data.__v, 0, 'The db item should be not previously edited'); }, xhr => { throw new Error(xhr.responseText); })"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "backend",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7fb7367417b2b2512c0a",
|
||||||
|
"title": "Create Many Records with Model.create()",
|
||||||
|
"description": [
|
||||||
|
"Sometimes you need to create many instances of your models, e.g. when seeding a database with initial data. Model.create() takes an array of objects like [{name: 'John', ...}, {...}, ...] as the first argument, and saves them all in the db. Create many people with Model.create(), using the function argument arrayOfPeople."
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text": "Creating many db items at once should succeed",
|
||||||
|
"testString": "getUserInput => $.ajax({url: getUserInput('url') + '/_api/create-many-people', type: 'POST', contentType:'application/json', data: JSON.stringify([{name: 'John', age: 24, favoriteFoods: ['pizza', 'salad']}, {name: 'Mary', age: 21, favoriteFoods: ['onions', 'chicken']}])}).then(data => { assert.isArray(data, 'the response should be an array'); assert.equal(data.length, 2, 'the response does not contain the expected number of items'); assert.equal(data[0].name, 'John', 'The first item is not correct'); assert.equal(data[0].__v, 0, 'The first item should be not previously edited'); assert.equal(data[1].name, 'Mary', 'The second item is not correct'); assert.equal(data[1].__v, 0, 'The second item should be not previously edited'); }, xhr => { throw new Error(xhr.responseText); })"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "backend",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7fb7367417b2b2512c0b",
|
||||||
|
"title": "Use Model.find()",
|
||||||
|
"description": [
|
||||||
|
"Find all the people having a given name, using Model.find() -> [Person]",
|
||||||
|
"In its simplest usage, Model.find() accepts a query document (a JSON object ) as the first argument, then a callback. It returns an array of matches. It supports an extremely wide range of search options. Check it in the docs. Use the function argument personName as search key."
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text": "Find all items corresponding to a criteria should succeed",
|
||||||
|
"testString": "getUserInput => $.post(getUserInput('url') + '/_api/find-all-by-name', {name: 'r@nd0mN4m3', age: 24, favoriteFoods: ['pizza']}).then(data => { assert.isArray(data, 'the response should be an Array'); assert.equal(data[0].name, 'r@nd0mN4m3', 'item.name is not what expected'); assert.equal(data[0].__v, 0, 'The item should be not previously edited'); }, xhr => { throw new Error(xhr.responseText); })"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "backend",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7fb7367417b2b2512c0c",
|
||||||
|
"title": "Use Model.findOne()",
|
||||||
|
"description": [
|
||||||
|
"Model.findOne() behaves like .find(), but it returns only one document (not an array), even if there are items. It is especially useful when searching by properties that you have declared as unique. Find just one person which has a certain food in her favorites, using Model.findOne() -> Person. Use the function argument food as search key."
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text": "Find one item should succeed",
|
||||||
|
"testString": "getUserInput => $.post(getUserInput('url') + '/_api/find-one-by-food', {name: 'Gary', age: 46, favoriteFoods: ['chicken salad']}).then(data => { assert.equal(data.name, 'Gary', 'item.name is not what expected'); assert.deepEqual(data.favoriteFoods, ['chicken salad'], 'item.favoriteFoods is not what expected'); assert.equal(data.__v, 0, 'The item should be not previously edited'); }, xhr => { throw new Error(xhr.responseText); })"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "backend",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7fb7367417b2b2512c0d",
|
||||||
|
"title": "Use Model.findById()",
|
||||||
|
"description": [
|
||||||
|
"When saving a document, mongodb automatically adds the field _id, and set it to a unique alphanumeric key. Searching by _id is an extremely frequent operation, so moongose provides a dedicated method for it. Find the (only!!) person having a given _id, using Model.findById() -> Person. Use the function argument personId as search key."
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text": "Find an item by Id should succeed",
|
||||||
|
"testString": "getUserInput => $.get(getUserInput('url') + '/_api/find-by-id').then(data => { assert.equal(data.name, 'test', 'item.name is not what expected'); assert.equal(data.age, 0, 'item.age is not what expected'); assert.deepEqual(data.favoriteFoods, ['none'], 'item.favoriteFoods is not what expected'); assert.equal(data.__v, 0, 'The item should be not previously edited'); }, xhr => { throw new Error(xhr.responseText); })"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "backend",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7fb8367417b2b2512c0e",
|
||||||
|
"title": "Perform Classic Updates by Running Find, Edit, then Save",
|
||||||
|
"description": [
|
||||||
|
"In the good old days this was what you needed to do if you wanted to edit a document and be able to use it somehow e.g. sending it back in a server response. Mongoose has a dedicated updating method : Model.update(). It is binded to the low-level mongo driver. It can bulk edit many documents matching certain criteria, but it doesn’t send back the updated document, only a ‘status’ message. Furthermore it makes model validations difficult, because it just directly calls the mongo driver.",
|
||||||
|
"Find a person by _id ( use any of the above methods ) with the parameter personId as search key. Add “hamburger” to the list of her favoriteFoods (you can use Array.push()). Then - inside the find callback - save() the updated Person.",
|
||||||
|
"[*] Hint: This may be tricky if in your Schema you declared favoriteFoods as an Array, without specifying the type (i.e. [String]). In that casefavoriteFoods defaults to Mixed type, and you have to manually mark it as edited using document.markModified('edited-field'). (http://mongoosejs.com/docs/schematypes.html - #Mixed )"
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text": "Find-edit-update an item should succeed",
|
||||||
|
"testString": "getUserInput => $.post(getUserInput('url') + '/_api/find-edit-save', {name:'Poldo', age: 40, favoriteFoods:['spaghetti']}).then(data => { assert.equal(data.name, 'Poldo', 'item.name is not what expected'); assert.equal(data.age, 40, 'item.age is not what expected'); assert.deepEqual(data.favoriteFoods, ['spaghetti', 'hamburger'], 'item.favoriteFoods is not what expected'); assert.equal(data.__v, 1, 'The item should be previously edited'); }, xhr => { throw new Error(xhr.responseText); })"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "backend",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7fb8367417b2b2512c0f",
|
||||||
|
"title": "Perform New Updates Using Model.findOneAndUpdate()",
|
||||||
|
"description": [
|
||||||
|
"Recent versions of mongoose have methods to simplify documents updating. Some more advanced features (i.e. pre/post hooks, validation) behave differently with this approach, so the Classic method is still useful in many situations. findByIdAndUpdate() can be used when searching by Id.",
|
||||||
|
"Find a person by Name and set her age to 20. Use the function parameter personName as search key.",
|
||||||
|
"Hint: We want you to return the updated document. o do that you need to pass the options document { new: true } as the 3rd argument to findOneAndUpdate(). By default these methods return the unmodified object."
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text": "findOneAndUpdate an item should succeed",
|
||||||
|
"testString": "getUserInput => $.post(getUserInput('url') + '/_api/find-one-update', {name:'Dorian Gray', age: 35, favoriteFoods:['unknown']}).then(data => { assert.equal(data.name, 'Dorian Gray', 'item.name is not what expected'); assert.equal(data.age, 20, 'item.age is not what expected'); assert.deepEqual(data.favoriteFoods, ['unknown'], 'item.favoriteFoods is not what expected'); assert.equal(data.__v, 0, 'findOneAndUpdate does not increment version by design !!!'); }, xhr => { throw new Error(xhr.responseText); })"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "backend",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7fb8367417b2b2512c10",
|
||||||
|
"title": "Delete one Record",
|
||||||
|
"description": [
|
||||||
|
"Delete one person by her _id. You should use one of the methods findByIdAndRemove() or findOneAndRemove(). They are like the previous update methods. They pass the removed document to the cb. As usual, use the function argument personId as search key."
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text": "Deleting an item should succeed",
|
||||||
|
"testString": "getUserInput => $.post(getUserInput('url') + '/_api/remove-one-person', {name:'Jason Bourne', age: 36, favoriteFoods:['apples']}).then(data => { assert.equal(data.name, 'Jason Bourne', 'item.name is not what expected'); assert.equal(data.age, 36, 'item.age is not what expected'); assert.deepEqual(data.favoriteFoods, ['apples'], 'item.favoriteFoods is not what expected'); assert.equal(data.__v, 0); assert.equal(data.count, 0, 'the db items count is not what expected'); }, xhr => { throw new Error(xhr.responseText); })"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "backend",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7fb8367417b2b2512c11",
|
||||||
|
"title": "Delete Many Records with Model.remove()",
|
||||||
|
"description": [
|
||||||
|
"Model.remove() is useful to delete all the documents matching given criteria. Delete all the people whose name is “Mary”, using Model.remove(). Pass to it a query ducument with the “name” field set, and of course a callback.",
|
||||||
|
"Note: Model.remove() doesn’t return the deleted document, but a JSON object containing the outcome of the operation, and the number of items affected. Don’t forget to pass it to the done() callback, since we use it in tests."
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text": "Deleting many items at once should succeed",
|
||||||
|
"testString": "getUserInput => $.ajax({url: getUserInput('url') + '/_api/remove-many-people', type: 'POST', contentType:'application/json', data: JSON.stringify([{name: 'Mary', age: 16, favoriteFoods: ['lollipop']}, {name: 'Mary', age: 21, favoriteFoods: ['steak']}])}).then(data => { assert.isTrue(!!data.ok, 'The mongo stats are not what expected'); assert.equal(data.n, 2, 'The number of items affected is not what expected'); assert.equal(data.count, 0, 'the db items count is not what expected'); }, xhr => { throw new Error(xhr.responseText); })"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "backend",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7fb9367417b2b2512c12",
|
||||||
|
"title": "Chain Search Query Helpers",
|
||||||
|
"description": [
|
||||||
|
"If you don’t pass the callback as the last argument to Model.find() (or to the other search methods), the query is not executed. You can store the query in a variable for later use. This kind of object enables you to build up a query using chaining syntax. The actual db search is executed when you finally chain the method .exec(). Pass your callback to this last method. There are many query helpers, here we’ll use the most ‘famous’ ones.",
|
||||||
|
"Find people who like \"burrito\". Sort them by name, limit the results to two documents, and hide their age. Chain .find(), .sort(), .limit(), .select(), and then .exec(). Pass the done(err, data) callback to exec()."
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text": "Chaining query helpers should succeed",
|
||||||
|
"testString": "getUserInput => $.ajax({url: getUserInput('url') + '/_api/query-tools', type: 'POST', contentType:'application/json', data: JSON.stringify([{name: 'Pablo', age: 26, favoriteFoods: ['burrito', 'hot-dog']}, {name: 'Ashley', age: 32, favoriteFoods: ['steak', 'burrito']}, {name: 'Mario', age: 51, favoriteFoods: ['burrito', 'prosciutto']} ]) }).then(data => { assert.isArray(data, 'the response should be an Array'); assert.equal(data.length, 2, 'the data array length is not what expected'); assert.notProperty(data[0], 'age', 'The returned first item has too many properties'); assert.equal(data[0].name, 'Ashley', 'The returned first item name is not what expected'); assert.notProperty(data[1], 'age', 'The returned second item has too many properties'); assert.equal(data[1].name, 'Mario', 'The returned second item name is not what expected');}, xhr => { throw new Error(xhr.responseText); })"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "backend",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -1,28 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "Nonprofit Projects",
|
|
||||||
"order": 22,
|
|
||||||
"time": "800 Hours",
|
|
||||||
"isLocked": true,
|
|
||||||
"message": "To qualify for these nonprofit projects, you must first earn all three foundational certifications: Front End, Data Visualization, and Back End",
|
|
||||||
"challenges": [
|
|
||||||
{
|
|
||||||
"title": "Greenfield Nonprofit Project #1",
|
|
||||||
"isRequired": true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Greenfield Nonprofit Project #2",
|
|
||||||
"isRequired": true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Legacy Code Nonprofit Project #1",
|
|
||||||
"isRequired": true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Legacy Code Nonprofit Project #2",
|
|
||||||
"isRequired": true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Claim your Full Stack Development Certification"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@ -0,0 +1,514 @@
|
|||||||
|
{
|
||||||
|
"name": "Advanced Node and Express",
|
||||||
|
"order": 3,
|
||||||
|
"time": "5 hours",
|
||||||
|
"helpRoom": "Help",
|
||||||
|
"challenges": [
|
||||||
|
{
|
||||||
|
"id": "587d7fb9367417b2b2512c13",
|
||||||
|
"title": "Authenticate as a Guest User",
|
||||||
|
"description": [
|
||||||
|
"Cool, we can see messages now, but before we let people to write messages they need to authenticate first.",
|
||||||
|
"We will use passport and friends for our authentications process, since its well documented and it makes things quite easier. By the end of this challenge, you should be able to login to the website as a guest user with the credentials:",
|
||||||
|
"username: 'guestuser'",
|
||||||
|
"password: 'guestuser'",
|
||||||
|
"You can check how passport works internally by viewing the best answer from this URL: http://stackoverflow.com/questions/11142882/how-do-cookies-and-sessions-work",
|
||||||
|
"Food for thought: Those have to be done all together in order to be easily testable if its too much, we must find a way of testing is passport middlewares that users initialized and validate that they work properly.",
|
||||||
|
"Note: This is the most difficult challenge of these series, be patient and very careful while reading the tips' documentation and have in mind that google is your friend as long as you pay Note at the date on the stackoverflow answers you come accross.",
|
||||||
|
"Instructions:",
|
||||||
|
"1) add the 'express-session', passport' and 'passport-local' modules into the package.json file",
|
||||||
|
"2) use express-session middleware #tip1",
|
||||||
|
"3) use passport.session() middleware #tip2",
|
||||||
|
"4) use passport.session() middleware",
|
||||||
|
"5) use passport.serialize() middleware",
|
||||||
|
"6) use passport.deserialize() middleware",
|
||||||
|
"7) use the passport-local.Strategy middleware #tip3",
|
||||||
|
"8) create a login route at POST '/auth/local' #tip2, #tip4 the route should redirect to the index page at path '/' on success or fail login",
|
||||||
|
"9) on the res.render('index') arguments add the session user on the 'user' key help: the session user should exist at the request object: 'req.user'",
|
||||||
|
"10) on the index.pug file use an if conditional expression to control what will be rendered #tip5 if the user argument is defined, include chatInput.pug and signout.pug othewise, include authentication.pug.",
|
||||||
|
"Note: Make sure restart the server(do and undo any change in the code for it to auto restart) before you run the unit tests, so that the server's state is cleaned."
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text": "",
|
||||||
|
"testString": ""
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [
|
||||||
|
"express-session readme: https://github.com/expressjs/session",
|
||||||
|
"passport readme: https://github.com/jaredhanson/passport",
|
||||||
|
"passport-local readme: https://github.com/jaredhanson/passport-local",
|
||||||
|
"res.redirect: https://expressjs.com/en/4x/api.html#res.redirect",
|
||||||
|
"pug docs: https://pugjs.org/api/getting-started.html"
|
||||||
|
],
|
||||||
|
"type": "waypoint",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7fc0367417b2b2512c33",
|
||||||
|
"title": "Log the Guest User Out",
|
||||||
|
"description": [
|
||||||
|
"Lets continue by letting the user to logout from the app.",
|
||||||
|
"You can check how passport works internally by viewing the best answer from this URL: http://stackoverflow.com/questions/11142882/how-do-cookies-and-sessions-work",
|
||||||
|
"Instructions:",
|
||||||
|
"1) create a logout route at POST '/auth/logout'",
|
||||||
|
"2) the route should clear the user's session from the server",
|
||||||
|
"3) the route should redirect to the index page at path '/' after logout is performed"
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [
|
||||||
|
"passport repo: https://github.com/jaredhanson/passport",
|
||||||
|
"res.redirect: https://expressjs.com/en/4x/api.html#res.redirect"
|
||||||
|
],
|
||||||
|
"type": "waypoint",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7fc0367417b2b2512c32",
|
||||||
|
"title": "Signup a New User",
|
||||||
|
"description": [
|
||||||
|
"Lets continue by letting a user to register to the app.",
|
||||||
|
"You can check how passport works internally by viewing the best answer from this URL: http://stackoverflow.com/questions/11142882/how-do-cookies-and-sessions-work",
|
||||||
|
"Instructions:",
|
||||||
|
"1) create a register route at POST '/auth/local/register'",
|
||||||
|
"2) the route should create a user with the User.create method",
|
||||||
|
"3) on successful create, the route should authenticate the user as well just like on the 'auth/local' route",
|
||||||
|
"4) the route should redirect to the index page at path '/' on error or success",
|
||||||
|
"Remember that on an express route you are able to use multiple middleware functions that are going to be called after an other.",
|
||||||
|
"For example: ",
|
||||||
|
"<code>app.post('/some/post/route',</code>",
|
||||||
|
"<code> function method1(req, res, next) {</code>",
|
||||||
|
"<code> console.info('I am method 1');</code>",
|
||||||
|
"<code> next();</code>",
|
||||||
|
"<code> },</code>",
|
||||||
|
"<code> someExternalMiddleware(),</code>",
|
||||||
|
"<code> function(req, res, next) {</code>",
|
||||||
|
"<code> res.redirect('/');</code>",
|
||||||
|
"<code> }</code>",
|
||||||
|
"<code>);</code>",
|
||||||
|
"ctrl-f '#challenge' in this file to fill in the missing code to complete this challenge"
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text": "",
|
||||||
|
"testString": ""
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [
|
||||||
|
"passport repo: https://github.com/jaredhanson/passport",
|
||||||
|
"res.redirect: https://expressjs.com/en/4x/api.html#res.redirect"
|
||||||
|
],
|
||||||
|
"type": "waypoint",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7fbf367417b2b2512c31",
|
||||||
|
"title": "Send a New Message by Responding with a Model",
|
||||||
|
"description": [
|
||||||
|
"Lets continue by letting a user to send a message in the app.",
|
||||||
|
"Instructions:",
|
||||||
|
"1) create a messaging route at POST '/api/message'",
|
||||||
|
"message format expected from the database:",
|
||||||
|
"<code>var args = {</code>",
|
||||||
|
"<code> creator: {</code>",
|
||||||
|
"<code> id: sessionUser._id,</code>",
|
||||||
|
"<code> name: sessionUser.name,</code>",
|
||||||
|
"<code> avatarUrl: sessionUser.avatarUrl</code>",
|
||||||
|
"<code> },</code>",
|
||||||
|
"<code> text: body.text,</code>",
|
||||||
|
"<code> geo: body.geo || {}</code>",
|
||||||
|
"<code>};</code>",
|
||||||
|
"1) Use the req.body for the request body and req.user for the session user data.",
|
||||||
|
"2) the route should be accessible only to authenticated users check that req.isAuthenticated() returns true or that req.user is defined",
|
||||||
|
"3) if the user is not authenticated the route should respond with status 403 and <code>{message: 'not authenticated'}</code> in the body",
|
||||||
|
"4) the route should create a message with the Message.create method",
|
||||||
|
"5) on error, the route should respond with status 400 and the error in the body",
|
||||||
|
"6) on success, the route should respond with status 201 and the message model as returned by the database in the body. The response data should follow the following format: <code>{model: messageJsonFromDB}</code>. The client should do a dummy reload to display the change."
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text": "",
|
||||||
|
"testString": ""
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [
|
||||||
|
"res.redirect: https://expressjs.com/en/4x/api.html#res.redirect"
|
||||||
|
],
|
||||||
|
"type": "waypoint",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7fbf367417b2b2512c30",
|
||||||
|
"title": "Send a New Message with a Partial Template Compilation",
|
||||||
|
"description": [
|
||||||
|
"On the previous challenge we were reloading the page after we pushed a new message into the chat",
|
||||||
|
"However, thats a really bad way to handle user input.",
|
||||||
|
"In this challenge you will have to partially compile a template and send it back on the client.",
|
||||||
|
"That way the client will be able to append the html that it got into the page's DOM and the reload",
|
||||||
|
"will not be needed. Cool hah?",
|
||||||
|
"Instructions:",
|
||||||
|
"1) change the current success response on the api/message route. It should respond with the following format: <code>{model: messageJsonFromDB, view: htmlData}</code>",
|
||||||
|
"The html data should be generated with the pug package and the compileFile method. The file you will need",
|
||||||
|
"to compile is the chatMessage.pug which represents a single message. args required:",
|
||||||
|
"user: <session user>,",
|
||||||
|
"message: <message created>"
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text": "",
|
||||||
|
"testString": ""
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [
|
||||||
|
" pug compileFile: https://pugjs.org/api/getting-started.html"
|
||||||
|
],
|
||||||
|
"type": "waypoint",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7fbf367417b2b2512c2f",
|
||||||
|
"title": "Send a New Message by Making the App Realtime with Websockets",
|
||||||
|
"description": [
|
||||||
|
"So we were able to create a message and responde with its partial html so that it can directly",
|
||||||
|
"be appanded in the page.",
|
||||||
|
"But what about the other users that are into the page?",
|
||||||
|
"If you open two different browser windows and send a message from one of them, the other one will",
|
||||||
|
"need to refresh the page to see the page. That's not cool, right?",
|
||||||
|
"This is where websockets come into the game to make the page look realtime.",
|
||||||
|
"In this challenge you will emit a web socket event after a new message is created at 'api/message'",
|
||||||
|
"so that all connected clients can update their dom.",
|
||||||
|
"You will see a dublicate left aligned message on the sender's page. This is fine...for now",
|
||||||
|
"Instructions:",
|
||||||
|
"1) include the socket.io package into the server package.json & initialize socket.io",
|
||||||
|
"2) include the socket.io library into the client at index.pug. The socket.io package serves the client automatically at: '/socket.io/socket.io.js'",
|
||||||
|
"3) emit a socket event at id: 'chat.message' with data {model: messageJsonFromDB, view: htmlData}",
|
||||||
|
"4) For the html data, use the same method you used in the previous challenge. However, in this case do not pass a user parameter so that the template can understand that it has to generate a template for the receiver. (Received messages are left alligned.)",
|
||||||
|
"The html data should be generated with the pug package and the compileFile method. The file you will need to compile is the chatMessage.pug which represents a single message. args required:",
|
||||||
|
"user: <session user>,",
|
||||||
|
"message: <message created>"
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text": "",
|
||||||
|
"testString": ""
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [
|
||||||
|
"socket.io docs: http://socket.io/docs/",
|
||||||
|
"pug docs :: compileFile: https://pugjs.org/api/getting-started.html"
|
||||||
|
],
|
||||||
|
"type": "waypoint",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7fbf367417b2b2512c2d",
|
||||||
|
"title": "Retrieve the Route of an Authenticated User",
|
||||||
|
"description": [
|
||||||
|
"Let's get rid of that duplicate message, shall we?",
|
||||||
|
"The client will look at the message model's creator emitted with the websocket and compare them with themselves. If they are not the creator they will append the message into their page.",
|
||||||
|
"However, the way we authenticated with passport only sends a httpOnly cookie to the client. The deal with html-only cookies, is that they are not readable from javascript for security reasons.",
|
||||||
|
"Therefore the client has no way of know its data, unless we server them for them.",
|
||||||
|
"In this challenge we will create a route where the client can retrieve their user data.",
|
||||||
|
"Instructions:",
|
||||||
|
"1) Create route GET '/api/me'",
|
||||||
|
"2) The route should always respond with status 200",
|
||||||
|
"3) The route should return {name: 'guest'} when the user is not authenticated",
|
||||||
|
"4) Otherwise it should return the authenticated user from the session"
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text": "",
|
||||||
|
"testString": ""
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "waypoint",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7fbe367417b2b2512c2c",
|
||||||
|
"title": "Use Geolocation by IP Route to Request Package for External Resources",
|
||||||
|
"description": [
|
||||||
|
"Things seem to work a lot better at this point, but our users would really like a message footer that would snitch each other's location.",
|
||||||
|
"Don't worry about the details, all you need to know is that the client will need another route from you in order to retrieve their geolocation via ip.",
|
||||||
|
"To do that we will query another site and we will respond with the data we get.",
|
||||||
|
"Instructions:",
|
||||||
|
"1) Include the request package into package.json",
|
||||||
|
"2) Create route GET '/api/geo'",
|
||||||
|
"3) Use the request module to query on this url: http://freegeoip.net/json/<request ip>'",
|
||||||
|
"4) You will need to set enable the trust proxy option for express in order to access the ip from the request object. Dont' bother too much with it, the default options will do for our case.",
|
||||||
|
"5) On request error the route should responde with status 500 and the error in the body",
|
||||||
|
"6) Othewise it should responde with the status code and body returned by the remote server"
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text": "",
|
||||||
|
"testString": ""
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [
|
||||||
|
"request readme: https://github.com/request/request",
|
||||||
|
"express enable: http://expressjs.com/en/api.html#app.enable"
|
||||||
|
],
|
||||||
|
"type": "waypoint",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d7fbe367417b2b2512c2b",
|
||||||
|
"title": "Get Geodata from Cookies",
|
||||||
|
"description": [
|
||||||
|
"Right now the client requests for the geolocation data by their ip and sends it to the server every time they are creating a message.",
|
||||||
|
"That makes sense, but it would be better to cache the geolocation data so that we do not request all the time the external api. Geolocation data do not change that often after all.",
|
||||||
|
"This can be done by setting a cookie on the response header. In express to do that we could use the res.cookie utility.",
|
||||||
|
"Instructions:",
|
||||||
|
"1) update route GET '/api/geo' so that it will set a cookie before responding with json. You may use res.cookie to do the job.",
|
||||||
|
"2) include package cookie-parser on package.json",
|
||||||
|
"3) update route POST '/api/message' so that it will create the message withe the geolocation taken from the cookie instead of the body of the request ctrl-f '#challenge' in this file to fill in the missing code to complete this challenge"
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text": "",
|
||||||
|
"testString": ""
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [
|
||||||
|
"express res.cookie: http://expressjs.com/en/api.html#res.cookie",
|
||||||
|
"express cookie parser: https://github.com/expressjs/cookie-parser"
|
||||||
|
],
|
||||||
|
"type": "waypoint",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d8246367417b2b2512c34",
|
||||||
|
"title": "Access the Default Avatar File Route",
|
||||||
|
"description": [
|
||||||
|
"Did you notice that broken avatar in the app?",
|
||||||
|
"Don't you think its about time to fixed it?",
|
||||||
|
"We have set the default url of the user's avatar to be be at /avatar/default.",
|
||||||
|
"That means that you will have to create a route that will return the file data.",
|
||||||
|
"Until now we used routes to return json and htmls. However in this case we are going",
|
||||||
|
"to pipe a read stream into the response in order to respond with the file data.",
|
||||||
|
"Use following line to get the path of the path of the avatar:",
|
||||||
|
"var avatarPath = path.join(__dirname, 'node_modules/fcc-advanced-express/img/defaultAvatar.png');",
|
||||||
|
"Instructions:",
|
||||||
|
"1) Create route GET '/avatar/default'",
|
||||||
|
"2) Use node's native file system library to get a read stream of the avatar file",
|
||||||
|
"3) pipe the read stream into the response. You may hit the route on your browser to check if u see an image.",
|
||||||
|
"Note: remember that piping file data to the response works with any type of file. All files contain data that if piped to the response can be sent to the browser. Try to pipe a js script and you will be able to see if on your browser if you hit the route :)"
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text": "",
|
||||||
|
"testString": ""
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [
|
||||||
|
"express res.cookie: http://expressjs.com/en/api.html#res.cookie",
|
||||||
|
"express cookie parser: https://github.com/expressjs/cookie-parser"
|
||||||
|
],
|
||||||
|
"type": "waypoint",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -0,0 +1,108 @@
|
|||||||
|
{
|
||||||
|
"name": "Claim Your Information Security and Quality Assurance Certificate",
|
||||||
|
"order": 13,
|
||||||
|
"time": "5 minutes",
|
||||||
|
"challenges": [
|
||||||
|
{
|
||||||
|
"id": "587d8247367417b2b2512c35",
|
||||||
|
"title": "Claim Your Information Security and Quality Assurance Certificate",
|
||||||
|
"description": [
|
||||||
|
[
|
||||||
|
"//i.imgur.com/k8btNUB.jpg",
|
||||||
|
"An image of our Information Security and Quality Assurance Certificate",
|
||||||
|
"This challenge will give you your verified Information Security and Quality Assurance Certificate. Before we issue your certificate, we must verify that you have completed all of our basic and intermediate algorithm scripting challenges, and all our basic, intermediate, and advanced front end development projects. You must also accept our Academic Honesty Pledge. Click the button below to start this process.",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"//i.imgur.com/uLPsUko.jpg",
|
||||||
|
"The definition of plagiarism: Plagiarism (noun) - copying someone else’s work and presenting it as your own without crediting them",
|
||||||
|
"By clicking below, you pledge that all of your submitted code A) is code you or your pair personally wrote, or B) comes from open source libraries like jQuery, or C) has been clearly attributed to its original authors. You also give us permission to audit your challenge solutions and revoke your certificate if we discover evidence of plagiarism.",
|
||||||
|
"#"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"//i.imgur.com/UedoV2G.jpg",
|
||||||
|
"An image of the text \"Front End Development Certificate requirements\"",
|
||||||
|
"Let's confirm that you have completed all of our basic and intermediate algorithm scripting challenges, and all our basic, intermediate, and advanced front end development projects. Click the button below to verify this.",
|
||||||
|
"#"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"//i.imgur.com/Q5Za9U6.jpg",
|
||||||
|
"An image of the word \"Congratulations\"",
|
||||||
|
"Congratulations! We've added your Information Security and Quality Assurance Certificate to your portfolio page. Unless you choose to hide your solutions, this certificate will remain publicly visible and verifiable.",
|
||||||
|
""
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"challengeSeed": [
|
||||||
|
{
|
||||||
|
"properties": [
|
||||||
|
"isHonest",
|
||||||
|
"isFrontEndCert"
|
||||||
|
],
|
||||||
|
"apis": [
|
||||||
|
"/certificate/honest",
|
||||||
|
"/certificate/verify/front-end"
|
||||||
|
],
|
||||||
|
"stepIndex": [
|
||||||
|
1,
|
||||||
|
2
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"id": "587d8249367417b2b2512c42",
|
||||||
|
"title": "Issue Tracker"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d8249367417b2b2512c41",
|
||||||
|
"title": "Metric-Imperial Converter"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d824a367417b2b2512c43",
|
||||||
|
"title": "Personal Library"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d824a367417b2b2512c44",
|
||||||
|
"title": "Stock Price Checker"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d824a367417b2b2512c45",
|
||||||
|
"title": "Anonymous Message Board"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"type": "Waypoint",
|
||||||
|
"challengeType": 7,
|
||||||
|
"translations": {
|
||||||
|
"es": {
|
||||||
|
"title": "Reclama tu certificado de Desarrollo de interfaces",
|
||||||
|
"description": [
|
||||||
|
[
|
||||||
|
"//i.imgur.com/k8btNUB.jpg",
|
||||||
|
"Una imagen que muestra nuestro certificado de Desarrollo de interfaces",
|
||||||
|
"Este desafío te otorga tu certificado autenticado de Desarrollo de interfaces. Antes de que podamos emitir tu certificado, debemos verificar que has completado todos los desafíos básicos e intermedios de diseño de algoritmos, y todos los proyectos básicos e intermedios de desarrollo de interfaces. También debes aceptar nuestro Juramento de honestidad académica. Pulsa el botón siguiente para iniciar este proceso.",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"//i.imgur.com/HArFfMN.jpg",
|
||||||
|
"Plagio (nombre): acción y efecto de plagiar. Plagiar (verbo) - copiar en lo sustancial obras ajenas, dándolas como propias.",
|
||||||
|
"Al pulsar el botón siguiente, juras que todo el código en tus soluciones a los desafíos A) es código que tú o tu compañero escribieron personalmente, o B) proviene de librerías de código abierto como jQuery, o C) ha sido claramente atribuido a sus autores originales. También nos otorgas el permiso para auditar tus soluciones a los desafíos y revocar tu certificado si encontramos evidencia de plagio.",
|
||||||
|
"#"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"//i.imgur.com/14F2Van.jpg",
|
||||||
|
"Una imagen del texto \"Front End Development Certificate requirements\"",
|
||||||
|
"Confirmemos que has completado todos nuestros desafíos básicos e intermedios de diseño de algoritmos, y todos nuestros proyectos básicos e intermedios de desarrollo de interfaces. Pulsa el botón siguiente para hacer la verificación.",
|
||||||
|
"#"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"//i.imgur.com/16SIhHO.jpg",
|
||||||
|
"Una imagen de la palabra \"Congratulations\"",
|
||||||
|
"¡Felicitaciones! Hemos agregado tu certificado de Desarrollo de interfaces a tu portafolio. A menos que elijas no mostrar tus soluciones, este certificado será públicamente visible y verificable.",
|
||||||
|
""
|
||||||
|
]
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -0,0 +1,438 @@
|
|||||||
|
{
|
||||||
|
"name": "Information Security with HelmetJS",
|
||||||
|
"order": 1,
|
||||||
|
"time": "5 hours",
|
||||||
|
"helpRoom": "HelpBackend",
|
||||||
|
"challenges": [
|
||||||
|
{
|
||||||
|
"id": "587d8247367417b2b2512c36",
|
||||||
|
"title": "Install and Require Helmet.js",
|
||||||
|
"description": [
|
||||||
|
"Helmet helps you secure your Express apps by setting various HTTP headers. Install the package, then require it."
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text": "\"helmet\" dependency should be in package.json",
|
||||||
|
"testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.property(packJson.dependencies, 'helmet'); }, xhr => { throw new Error(xhr.responseText); })"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "backend",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d8247367417b2b2512c37",
|
||||||
|
"title": "Hide potentially dangerous information using helmet.hidePoweredBy()",
|
||||||
|
"description": [
|
||||||
|
"Hackers can exploit known vulnerabilities in Express/Node if they see that your site is powered by Express. X-Powered-By: Express is sent in every request coming from Express by default. The helmet.hidePoweredBy() middleware will remove the X-Powered-By header. You can also explicitly set the header to something else, to throw people off. e.g. app.use(helmet.hidePoweredBy({ setTo: 'PHP 4.2.0' }))"
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text": "helmet.hidePoweredBy() middleware should be mounted correctly",
|
||||||
|
"testString": "getUserInput => $.get(getUserInput('url') + '/_api/app-info').then(data => { assert.include(data.appStack, 'hidePoweredBy'); assert.notEqual(data.headers['x-powered-by'], 'Express')}, xhr => { throw new Error(xhr.responseText); })"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "backend",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d8247367417b2b2512c38",
|
||||||
|
"title": "Mitigate the risk of clickjacking - helmet.frameguard()",
|
||||||
|
"description": [
|
||||||
|
"Your page could be put in a <frame> or <iframe> without your consent. This can result in clickjacking attacks, among other things. Clickjacking is a technique of tricking a user into interacting with a page different from what the user thinks it is. This can be obtained executing your page in a malicious context, by mean of iframing. In that context a hacker can put a hidden layer over your page. Hidden buttons can be used to run bad scripts. This middleware sets the X-Frame-Options header. It restricts who can put your site in a frame. It has three modes: DENY, SAMEORIGIN, and ALLOW-FROM.",
|
||||||
|
"We don’t need our app to be framed. You should use helmet.frameguard() passing with the configuration object {action: 'deny'}."
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text": "helmet.frameguard() middleware should be mounted correctly",
|
||||||
|
"testString": "getUserInput => $.get(getUserInput('url') + '/_api/app-info').then(data => { assert.include(data.appStack, 'frameguard', 'helmet.frameguard() middleware is not mounted correctly'); }, xhr => { throw new Error(xhr.responseText); })"
|
||||||
|
}, {
|
||||||
|
"text": "helmet.frameguard() 'action' should be set to 'DENY'",
|
||||||
|
"testString": "getUserInput => $.get(getUserInput('url') + '/_api/app-info').then(data => { assert.property(data.headers, 'x-frame-options'); assert.equal(data.headers['x-frame-options'], 'DENY');}, xhr => { throw new Error(xhr.responseText); })"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "backend",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d8247367417b2b2512c39",
|
||||||
|
"title": "Mitigate the risk of Cross Site Scripting (XSS) Attacks - helmet.xssFilter()",
|
||||||
|
"description": [
|
||||||
|
"Cross-site scripting (XSS) is a frequent type of attack where malicious script are injected into vulnerable pages, on the purpouse of stealing sensitive data like session cookies, or passwords.",
|
||||||
|
"The basic rule to lower the risk of an XSS attack is simple: “Never trust user’s input”. As a developer you should always sanitize all the input coming from the outside. This includes data coming from forms, GET query urls, and even from POST bodies. Sanitizing means that you should find and encode the characters that may be dangerous e.g. <, >.",
|
||||||
|
"Modern browsers can help mitigating the risk by adopting better software strategies. Often these are configurable via http headers.",
|
||||||
|
"The X-XSS-Protection HTTP header is a basic protection. The browser detects a potential injected script using an heuristic filter. If the header is enabled, the browser changes the script code, neutralizing it.",
|
||||||
|
"It still has limited support."
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text": "helmet.xssFilter() middleware should be mounted correctly",
|
||||||
|
"testString": "getUserInput => $.get(getUserInput('url') + '/_api/app-info').then(data => { assert.include(data.appStack, 'xXssProtection'); assert.property(data.headers, 'x-xss-protection'); }, xhr => { throw new Error(xhr.responseText); })"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "backend",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d8248367417b2b2512c3a",
|
||||||
|
"title": "Avoid inferring the response MIME type - helmet.noSniff()",
|
||||||
|
"description": [
|
||||||
|
"Browsers can use content or MIME sniffing to adapt to different datatypes coming from a response. They override the Content-Type headers to guess and process the data. While this can be convenient in some scenarios, it can also lead to some dangerous attacks. This middleware sets the X-Content-Type-Options header to nosniff. This instructs the browser to not bypass the provided Content-Type."
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text": "helmet.noSniff() middleware should be mounted correctly",
|
||||||
|
"testString": "getUserInput => $.get(getUserInput('url') + '/_api/app-info').then(data => { assert.include(data.appStack, 'nosniff'); assert.equal(data.headers['x-content-type-options'], 'nosniff'); }, xhr => { throw new Error(xhr.responseText); })"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "backend",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d8248367417b2b2512c3b",
|
||||||
|
"title": "Prevent IE from opening untrusted HTML - helmet.ieNoOpen()",
|
||||||
|
"description": [
|
||||||
|
"Some web applications will serve untrusted HTML for download. Some versions of Internet Explorer by default open those HTML files in the context of your site. This means that an untrusted HTML page could start doing bad things in the context of your pages. This middleware sets the X-Download-Options header to noopen. This will prevent IE users from executing downloads in the trusted site’s context."
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text": "helmet.ieNoOpen() middleware should be mounted correctly",
|
||||||
|
"testString": "getUserInput => $.get(getUserInput('url') + '/_api/app-info').then(data => { assert.include(data.appStack, 'ienoopen'); assert.equal(data.headers['x-download-options'], 'noopen'); }, xhr => { throw new Error(xhr.responseText); })"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "backend",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d8248367417b2b2512c3c",
|
||||||
|
"title": "Ask browsers to access your site via HTTPS only - helmet.hsts()",
|
||||||
|
"description": [
|
||||||
|
"HTTP Strict Transport Security (HSTS) is a web security policy which helps to protect websites against protocol downgrade attacks and cookie hijacking. If your website can be accessed via HTTPS you can ask user’s browsers to avoid using insecure HTTP. By setting the header Strict-Transport-Security, you tell the browsers to use HTTPS for the future requests in a specified amount of time. This will work for the requests coming after the initial request.",
|
||||||
|
"Configure helmet.hsts() to use HTTPS for the next 90 days. Pass the config object {maxAge: timeInMilliseconds, force: true}. HyperDev already has hsts enabled. To override its settings you need to set the field \"force\" to true in the config object. We will intercept and restore the HyperDev header, after inspecting it for testing.",
|
||||||
|
"Note: Configuring HTTPS on a custom website requires the acquisition of a domain, and a SSL/TSL Certificate."
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text": "helmet.hsts() middleware should be mounted correctly",
|
||||||
|
"testString": "getUserInput => $.get(getUserInput('url') + '/_api/app-info').then(data => { assert.include(data.appStack, 'hsts'); assert.property(data.headers, 'strict-transport-security'); }, xhr => { throw new Error(xhr.responseText); })"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "maxAge should be equal to 7776000 ms (90 days)",
|
||||||
|
"testString": "getUserInput => $.get(getUserInput('url') + '/_api/app-info').then(data => { assert.match(data.headers['strict-transport-security'], /^max-age=777600000;?/); }, xhr => { throw new Error(xhr.responseText); })"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "backend",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d8248367417b2b2512c3d",
|
||||||
|
"title": "Disable DNS Prefetching - helmet.dnsPrefetchControl()",
|
||||||
|
"description": [
|
||||||
|
"To improve performance, most browsers prefetch DNS records for the links in a page. In that way the destination ip is already known when the user clicks on a link. This may lead to over-use of the DNS service (if you own a big website, visited by millions people…), privacy issues (one eavesdropper could infer that you are on a certain page), or page statistics alteration (some links may appear visited even if they are not). If you have high security needs you can disable DNS prefetching, at the cost of a performance penalty."
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text": "helmet.dnsPrefetchControl() middleware should be mounted correctly",
|
||||||
|
"testString": "getUserInput => $.get(getUserInput('url') + '/_api/app-info').then(data => { assert.include(data.appStack, 'dnsPrefetchControl'); assert.equal(data.headers['x-dns-prefetch-control'], 'off'); }, xhr => { throw new Error(xhr.responseText); })"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "backend",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d8249367417b2b2512c3e",
|
||||||
|
"title": "Disable Client-Side Caching - helmet.noCache()",
|
||||||
|
"description": [
|
||||||
|
"If you are releasing an update for your website, and you want the users to always download the newer version, you can (try to) disable caching on client’s browser. It can be useful in development too. Caching has performance benefits, and you will lose them, use this option only when there is a real need."
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text": "helmet.noCache() middleware should be mounted correctly",
|
||||||
|
"testString": "getUserInput => $.get(getUserInput('url') + '/_api/app-info').then(data => { assert.include(data.appStack, 'nocache'); assert.equal(data.headers['cache-control'], 'no-store, no-cache, must-revalidate, proxy-revalidate'); }, xhr => { throw new Error(xhr.responseText); })"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "backend",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d8249367417b2b2512c3f",
|
||||||
|
"title": "Set a Content Security Policy - helmet.contentSecurityPolicy()",
|
||||||
|
"description": [
|
||||||
|
"This challenge highlights one promising new defense that can significantly reduce the risk and impact of many type of attacks in modern browsers. By setting and configuring a Content Security Policy you can prevent the injection of anything unintended into your page. This will protect protect your app from XSS vulnerabilities, undesidered tracking, malicious frames, and much more. CSP works by defining a whitelist of content sources which are trusted. You can configure them for each kind of resource a web page may need (scripts, stylesheets, fonts, frames, media, and so on…). There are multiple directives available, so a website owner can have a granular control. See HTML 5 Rocks, KeyCDN for more details. Unfortunately CSP in unsupported by older browser.",
|
||||||
|
"By default, directives are wide open, so it’s important to set the defaultSrc directive as a fallback. Helmet supports both defaultSrc and default-src naming styles. The fallback applies for most of the unspecified directives. In this exercise, use helmet.contentSecurityPolicy(), and configure it setting the defaultSrc directive to [\"self\"] (the list of allowed sources must be in an array), in order to trust only your website address by default. Set also the scriptSrc directive so that you will allow scripts to be downloaded from your website, and from the domain 'trusted-cdn.com'.",
|
||||||
|
"Hint: in the \"'self'\" keyword, the single quotes are part of the keyword itself, so it needs to be enclosed in double quotes to be working."
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text": "helmet.csp() middleware should be mounted correctly",
|
||||||
|
"testString": "getUserInput => $.get(getUserInput('url') + '/_api/app-info').then(data => { assert.include(data.appStack, 'csp'); }, xhr => { throw new Error(xhr.responseText); })"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "Your csp config is not correct. defaultSrc should be [\"'self'\"] and scriptSrc should be [\"'self'\", 'trusted-cdn.com']",
|
||||||
|
"testString": "getUserInput => $.get(getUserInput('url') + '/_api/app-info').then(data => { var cspHeader = Object.keys(data.headers).filter(function(k){ return k === 'content-security-policy' || k === 'x-webkit-csp' || k === 'x-content-security-policy' })[0]; assert.equal(data.headers[cspHeader], \"default-src 'self'; script-src 'self' trusted-cdn.com\"); }, xhr => { throw new Error(xhr.responseText); })"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "backend",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d8249367417b2b2512c40",
|
||||||
|
"title": "The ‘parent’ helmet() middleware",
|
||||||
|
"description": [
|
||||||
|
"app.use(helmet()) will automatically include all the middleware introduced above, except noCache(), and contentSecurityPolicy(), but these can be enabled if necessary. You can also disable or configure any other middleware individually, using a configuration object.",
|
||||||
|
"// Example",
|
||||||
|
"<code>app.use(helmet({</code>",
|
||||||
|
"<code> frameguard: { // configure</code>",
|
||||||
|
"<code> action: 'deny'</code>",
|
||||||
|
"<code> },</code>",
|
||||||
|
"<code> contentSecurityPolicy: { // enable and configure</code>",
|
||||||
|
"<code> directives: {</code>",
|
||||||
|
"<code> defaultSrc: [\"self\"],</code>",
|
||||||
|
"<code> styleSrc: ['style.com'],</code>",
|
||||||
|
"<code> }</code>",
|
||||||
|
"<code> },</code>",
|
||||||
|
"<code> dnsPrefetchControl: false // disable</code>",
|
||||||
|
"<code>}))</code>",
|
||||||
|
"We introduced each middleware separately for teaching purpose, and for ease of testing. Using the ‘parent’ helmet() middleware is easiest, and cleaner, for a real project."
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text": "no tests - it's a descriptive challenge",
|
||||||
|
"testString": "assert(true)"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "backend",
|
||||||
|
"challengeType": 0,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -0,0 +1,398 @@
|
|||||||
|
{
|
||||||
|
"name": "Information Security and Quality Assurance Projects",
|
||||||
|
"order": 4,
|
||||||
|
"time": "150 hours",
|
||||||
|
"helpRoom": "HelpBackend",
|
||||||
|
"challenges": [
|
||||||
|
{
|
||||||
|
"id": "587d8249367417b2b2512c41",
|
||||||
|
"title": "Metric-Imperial Converter",
|
||||||
|
"description": [
|
||||||
|
"Build a full stack JavaScript app that is functionally similar to this: <a href='https://hard-twilight.gomix.me/' target='_blank'>https://hard-twilight.gomix.me/</a> on GoMix or on your own publicly accessible domain.",
|
||||||
|
"Start by remixing this boilerplate GoMix project: <a href='https://gomix.com/#!/project/fcc-convert'>https://gomix.com/#!/project/fcc-convert</a>. Then get all the tests for the below user stories to pass."
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text": "I will prevent the client from trying to guess(sniff) the MIME type.",
|
||||||
|
"testString": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "I will prevent cross-site scripting (XSS) attacks.",
|
||||||
|
"testString": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "I can GET /api/convert with a single parameter containing an accepted number and unit and have it converted. (Hint: Split the input by looking for the index of the first character which will mark the start of the unit)",
|
||||||
|
"testString": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "I can convert 'gal' to 'L' and vice versa. (1 gal to 3.78541 L)",
|
||||||
|
"testString": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "I can convert 'lbs' to 'kg' and vice versa. (1 lbs to 0.453592 kg)",
|
||||||
|
"testString": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "I can convert 'mi' to 'km' and vice versa. (1 mi to 1.60934 km)",
|
||||||
|
"testString": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "If my unit of measurement is invalid, returned will be 'invalid unit'.",
|
||||||
|
"testString": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "If my number is invalid, returned with will 'invalid number'.",
|
||||||
|
"testString": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "If both are invalid, return will be 'invalid number and unit'.",
|
||||||
|
"testString": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "I can use fractions, decimals or both in my parameter(ie. 5, 1/2, 2.5/6), but if nothing is provided it will default to 1.",
|
||||||
|
"testString": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "My return will consist of the initNum, initUnit, returnNum, returnUnit, and string spelling out units in format '{initNum} {initial_Units} converts to {returnNum} {return_Units}' with the result rounded to 5 decimals in the string.",
|
||||||
|
"testString": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "All 16 unit tests are complete and passing.",
|
||||||
|
"testString": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "All 5 functional tests are complete and passing.",
|
||||||
|
"testString": ""
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "basejump",
|
||||||
|
"isRequired": true,
|
||||||
|
"releasedOn": "January 15, 2017",
|
||||||
|
"challengeType": 4,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"es": {
|
||||||
|
"description": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d8249367417b2b2512c42",
|
||||||
|
"title": "Issue Tracker",
|
||||||
|
"description": [
|
||||||
|
"Build a full stack JavaScript app that is functionally similar to this: <a href='https://protective-garage.gomix.me/' target='_blank'>https://protective-garage.gomix.me/</a> on GoMix or on your own publicly accessible domain.",
|
||||||
|
"Start by remixing this boilerplate GoMix project: <a href='https://gomix.com/#!/project/fcc-issue'>https://gomix.com/#!/project/fcc-issue</a>. Then get all the tests for the below user stories to pass."
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text": "Prevent cross site scripting (XSS) attacks.",
|
||||||
|
"testString": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "I can POST /api/issues/{projectname} with form data containing required issue_title, issue_text, created_by, and optional assigned_to and status_text.",
|
||||||
|
"testString": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "The object saved (and returned) will include all of those fields (blank for optional no input) and also include created_on(date/time), updated_on(date/time), open(boolean, true for open, false for closed), and _id.",
|
||||||
|
"testString": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "I can PUT /api/issues/{projectname} with a id and any fields in the object with a value to object said object. Returned will be 'successfully updated' or 'could not update '+id. This should always update updated_on. If no fields are sent return 'no updated field sent'.",
|
||||||
|
"testString": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "I can DELETE /api/issues/{projectname} with a id to completely delete an issue. If no _id is sent return 'id error', success: 'deleted '+id, failed: 'could not delete '+id.",
|
||||||
|
"testString": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "I can GET /api/issues/{projectname} for an array of all issues on that specific project with all the information for each issue as was returned when posted.",
|
||||||
|
"testString": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "I can filter my get request by also passing along any field and value in the query(ie. /api/issues/{project}?open=false). I can pass along as many fields/values as I want.",
|
||||||
|
"testString": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "All 11 functional tests are complete and passing.",
|
||||||
|
"testString": ""
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "basejump",
|
||||||
|
"isRequired": true,
|
||||||
|
"releasedOn": "January 15, 2017",
|
||||||
|
"challengeType": 4,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"es": {
|
||||||
|
"description": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d824a367417b2b2512c43",
|
||||||
|
"title": "Personal Library",
|
||||||
|
"description": [
|
||||||
|
"Build a full stack JavaScript app that is functionally similar to this: <a href='https://spark-cathedral.gomix.me/' target='_blank'>https://spark-cathedral.gomix.me/</a> on GoMix or on your own publicly accessible domain.",
|
||||||
|
"Start by remixing this boilerplate GoMix project: <a href='https://gomix.com/#!/project/fcc-library'></a>. Then get all the tests for the below user stories to pass."
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text": "Nothing from my website will be cached in my client.",
|
||||||
|
"testString": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "The headers will say that the site is powered by 'PHP 4.2.0' even though it isn't (as a security measure).",
|
||||||
|
"testString": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "I can post a title to /api/books to add a book and returned will be the object with the title and a unique _id.",
|
||||||
|
"testString": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "I can get /api/books to retrieve an array of all books containing title, _id, and commentcount.",
|
||||||
|
"testString": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "I can get /api/books/{id} to retrieve a single object of a book containing _title, _id, & an array of comments (empty array if no comments present).",
|
||||||
|
"testString": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "I can post a comment to /api/books/{id} to add a comment to a book and returned will be the books object similar to get /api/books/{id} including the new comment.",
|
||||||
|
"testString": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "I can delete /api/books/{_id} to delete a book from the collection. Returned will be 'delete successful' if successful.",
|
||||||
|
"testString": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "If I try to request a book that doesn't exist I will be returned 'no book exists'.",
|
||||||
|
"testString": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "I can send a delete request to /api/books to delete all books in the database. Returned will be 'complete delete successful' if successful.",
|
||||||
|
"testString": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "All 6 functional tests required are complete and passing.",
|
||||||
|
"testString": ""
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "basejump",
|
||||||
|
"isRequired": true,
|
||||||
|
"releasedOn": "January 15, 2017",
|
||||||
|
"challengeType": 4,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"es": {
|
||||||
|
"description": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d824a367417b2b2512c44",
|
||||||
|
"title": "Stock Price Checker",
|
||||||
|
"description": [
|
||||||
|
"Build a full stack JavaScript app that is functionally similar to this: <a href='https://giant-chronometer.gomix.me/' target='_blank'>https://giant-chronometer.gomix.me/</a> on GoMix or on your own publicly accessible domain.",
|
||||||
|
"Start by remixing this boilerplate GoMix project: <a href='https://gomix.com/#!/project/fcc-stock'>https://gomix.com/#!/project/fcc-stock</a>. Then get all the tests for the below user stories to pass."
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text": "Set the content security policies to only allow loading of scripts and css from your server.",
|
||||||
|
"testString": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "I can GET /api/stock-prices with form data containing a Nasdaq stock ticker and recieve back an object stockData.",
|
||||||
|
"testString": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "In stockData, I can see the stock(string, the ticker), price(decimal in string format), and likes(int).",
|
||||||
|
"testString": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "I can also pass along field like as true(boolean) to have my like added to the stock(s). Only 1 like per ip should be accepted.",
|
||||||
|
"testString": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "If I pass along 2 stocks, the return object will be an array with both stock's info. Instead of likes, it will display rel_likes(the difference between the likes on both stocks) on both.",
|
||||||
|
"testString": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "A good way to receive current price is the following external API(replacing 'GOOG' with your stock): https://finance.google.com/finance/info?q=NASDAQ%3aGOOG",
|
||||||
|
"testString": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "All 5 functional tests are complete and passing.",
|
||||||
|
"testString": ""
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "basejump",
|
||||||
|
"isRequired": true,
|
||||||
|
"releasedOn": "January 15, 2017",
|
||||||
|
"challengeType": 4,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"es": {
|
||||||
|
"description": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "587d824a367417b2b2512c45",
|
||||||
|
"title": "Anonymous Message Board",
|
||||||
|
"description": [
|
||||||
|
"Build a full stack JavaScript app that is functionally similar to this: <a href='https://horn-celery.gomix.me/' target='_blank'>https://horn-celery.gomix.me/</a> on GoMix or on your own publicly accessible domain.",
|
||||||
|
"Start by remixing this boilerplate GoMix project: <a href='https://gomix.com/#!/project/fcc-message'>https://gomix.com/#!/project/fcc-message</a>. Then get all the tests for the below user stories to pass."
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [
|
||||||
|
{
|
||||||
|
"text": "Only allow your site to be loading in an iFrame on your own pages.",
|
||||||
|
"testString": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "Do not allow DNS prefetching.",
|
||||||
|
"testString": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "Only allow your site to send the referrer for your own pages.",
|
||||||
|
"testString": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "I can POST a thread to a specific message board by passing form data text and deletepassword_ to /api/threads/{board}.(Recommend res.redirect to board page /b/{board}) Saved will be at least _id, text, createdon_(date&time), bumpedon_(date&time, starts same as created_on), reported(boolean), deletepassword_, & replies(array).",
|
||||||
|
"testString": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "I can POST a reply to a thread on a specific board by passing form data text, deletepassword_, & threadid_ to /api/replies/{board} and it will also update the bumped_on date to the comments date.(Recommend res.redirect to thread page /b/{board}/{thread_id}) In the thread's replies array will be saved _id, text, createdon_, deletepassword_, & reported.",
|
||||||
|
"testString": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "I can GET an array of the most recent 10 bumped threads on the board with only the most recent 3 replies each from /api/threads/{board}. The reported and deletepasswords_ fields will not be sent to the client.",
|
||||||
|
"testString": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "I can GET an entire thread with all it's replies from /api/replies/{board}?thread_id={thread_id}. Also hiding the same fields the client should be see.",
|
||||||
|
"testString": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "I can delete a thread completely if I send a DELETE request to /api/threads/{board} and pass along the threadid_ & deletepassword_. (Text response will be 'incorrect password' or 'success')",
|
||||||
|
"testString": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "I can delete a post(just changing the text to '[deleted]' instead of removing completely like a thread) if I send a DELETE request to /api/replies/{board} and pass along the threadid_, replyid_, & deletepassword_. (Text response will be 'incorrect password' or 'success')",
|
||||||
|
"testString": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "I can report a thread and change it's reported value to true by sending a PUT request to /api/threads/{board} and pass along the threadid_. (Text response will be 'success')",
|
||||||
|
"testString": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "I can report a reply and change it's reported value to true by sending a PUT request to /api/replies/{board} and pass along the threadid_ & replyid_. (Text response will be 'success')",
|
||||||
|
"testString": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "Complete functional tests that wholly test routes and pass.",
|
||||||
|
"testString": ""
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"solutions": [],
|
||||||
|
"hints": [],
|
||||||
|
"type": "basejump",
|
||||||
|
"isRequired": true,
|
||||||
|
"releasedOn": "January 15, 2017",
|
||||||
|
"challengeType": 4,
|
||||||
|
"translations": {
|
||||||
|
"de": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"pt-br": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"description": [],
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
"es": {
|
||||||
|
"description": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,28 @@
|
|||||||
|
{
|
||||||
|
"name": "Open Source Contributions",
|
||||||
|
"order": 22,
|
||||||
|
"time": "800 Hours",
|
||||||
|
"isLocked": true,
|
||||||
|
"message": "Before you can get credit toward your final Full Stack Development Certificate by contributing to open source, we recommend you complete all six of your certifications.",
|
||||||
|
"challenges": [
|
||||||
|
{
|
||||||
|
"title": "Contribute Pull Requests to Open Source projects",
|
||||||
|
"isRequired": true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "QA Other Developers' Pull Requests",
|
||||||
|
"isRequired": true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Greenfield Code Grant Project for a Nonprofit",
|
||||||
|
"isRequired": true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Legacy Code Grant Project for a Nonprofit",
|
||||||
|
"isRequired": true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Claim your Full Stack Development Certificate"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -3,7 +3,7 @@
|
|||||||
"order": 23,
|
"order": 23,
|
||||||
"time": "70 Hours",
|
"time": "70 Hours",
|
||||||
"isLocked": true,
|
"isLocked": true,
|
||||||
"message": "To qualify for the coding interview preparation, you must first earn all three foundational certifications: Front End, Data Visualization, and Back End",
|
"message": "To qualify for the coding interview preparation, you must first earn your Full Stack Developer Certificate by contributing to open source.",
|
||||||
"challenges": [
|
"challenges": [
|
||||||
{
|
{
|
||||||
"title": "Soft Skill Training"
|
"title": "Soft Skill Training"
|
||||||
@ -3,7 +3,7 @@
|
|||||||
"order": 24,
|
"order": 24,
|
||||||
"time": "10 Hours",
|
"time": "10 Hours",
|
||||||
"isLocked": true,
|
"isLocked": true,
|
||||||
"message": "To qualify for the coding interview preparation, you must first earn all three foundational certifications: Front End, Data Visualization, and Back End",
|
"message": "To qualify for Mock Interviews, you must first earn your Full Stack Developer Certificate by contributing to open source, then complete our Coding Interview Training.",
|
||||||
"challenges": [
|
"challenges": [
|
||||||
{
|
{
|
||||||
"title": "Mock Interview #1"
|
"title": "Mock Interview #1"
|
||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "Advanced Algorithm Scripting",
|
"name": "Advanced Algorithm Scripting",
|
||||||
"order": 12,
|
"order": 10,
|
||||||
"time": "50 hours",
|
"time": "50 hours",
|
||||||
"helpRoom": "HelpJavaScript",
|
"helpRoom": "HelpJavaScript",
|
||||||
"challenges": [
|
"challenges": [
|
||||||
@ -378,152 +378,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"id": "a2f1d72d9b908d0bd72bb9f6",
|
|
||||||
"title": "Make a Person",
|
|
||||||
"description": [
|
|
||||||
"Fill in the object constructor with the following methods below:",
|
|
||||||
"<blockquote>getFirstName()\ngetLastName()\ngetFullName()\nsetFirstName(first)\nsetLastName(last)\nsetFullName(firstAndLast)</blockquote>",
|
|
||||||
"Run the tests to see the expected output for each method.",
|
|
||||||
"The methods that take an argument must accept only one argument and it has to be a string.",
|
|
||||||
"These methods must be the only available means of interacting with the object.",
|
|
||||||
"Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck. Try to pair program. Write your own code."
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"var Person = function(firstAndLast) {",
|
|
||||||
" return firstAndLast;",
|
|
||||||
"};",
|
|
||||||
"",
|
|
||||||
"var bob = new Person('Bob Ross');",
|
|
||||||
"bob.getFullName();"
|
|
||||||
],
|
|
||||||
"solutions": [
|
|
||||||
"var Person = function(firstAndLast) {\n\n var firstName, lastName;\n\n function updateName(str) { \n firstName = str.split(\" \")[0];\n lastName = str.split(\" \")[1]; \n }\n\n updateName(firstAndLast);\n\n this.getFirstName = function(){\n return firstName;\n };\n \n this.getLastName = function(){\n return lastName;\n };\n \n this.getFullName = function(){\n return firstName + \" \" + lastName;\n };\n \n this.setFirstName = function(str){\n firstName = str;\n };\n \n\n this.setLastName = function(str){\n lastName = str;\n };\n \n this.setFullName = function(str){\n updateName(str);\n };\n};\n\nvar bob = new Person('Bob Ross');\nbob.getFullName();"
|
|
||||||
],
|
|
||||||
"tests": [
|
|
||||||
"assert.deepEqual(Object.keys(bob).length, 6, 'message: <code>Object.keys(bob).length</code> should return 6.');",
|
|
||||||
"assert.deepEqual(bob instanceof Person, true, 'message: <code>bob instanceof Person</code> should return true.');",
|
|
||||||
"assert.deepEqual(bob.firstName, undefined, 'message: <code>bob.firstName</code> should return undefined.');",
|
|
||||||
"assert.deepEqual(bob.lastName, undefined, 'message: <code>bob.lastName</code> should return undefined.');",
|
|
||||||
"assert.deepEqual(bob.getFirstName(), 'Bob', 'message: <code>bob.getFirstName()</code> should return \"Bob\".');",
|
|
||||||
"assert.deepEqual(bob.getLastName(), 'Ross', 'message: <code>bob.getLastName()</code> should return \"Ross\".');",
|
|
||||||
"assert.deepEqual(bob.getFullName(), 'Bob Ross', 'message: <code>bob.getFullName()</code> should return \"Bob Ross\".');",
|
|
||||||
"assert.strictEqual((function () { bob.setFirstName(\"Haskell\"); return bob.getFullName(); })(), 'Haskell Ross', 'message: <code>bob.getFullName()</code> should return \"Haskell Ross\" after <code>bob.setFirstName(\"Haskell\")</code>.');",
|
|
||||||
"assert.strictEqual((function () { var _bob=new Person('Haskell Ross'); _bob.setLastName(\"Curry\"); return _bob.getFullName(); })(), 'Haskell Curry', 'message: <code>bob.getFullName()</code> should return \"Haskell Curry\" after <code>bob.setLastName(\"Curry\")</code>.');",
|
|
||||||
"assert.strictEqual((function () { bob.setFullName(\"Haskell Curry\"); return bob.getFullName(); })(), 'Haskell Curry', 'message: <code>bob.getFullName()</code> should return \"Haskell Curry\" after <code>bob.setFullName(\"Haskell Curry\")</code>.');",
|
|
||||||
"assert.strictEqual((function () { bob.setFullName(\"Haskell Curry\"); return bob.getFirstName(); })(), 'Haskell', 'message: <code>bob.getFirstName()</code> should return \"Haskell\" after <code>bob.setFullName(\"Haskell Curry\")</code>.');",
|
|
||||||
"assert.strictEqual((function () { bob.setFullName(\"Haskell Curry\"); return bob.getLastName(); })(), 'Curry', 'message: <code>bob.getLastName()</code> should return \"Curry\" after <code>bob.setFullName(\"Haskell Curry\")</code>.');"
|
|
||||||
],
|
|
||||||
"type": "bonfire",
|
|
||||||
"MDNlinks": [
|
|
||||||
"Closures",
|
|
||||||
"Details of the Object Model"
|
|
||||||
],
|
|
||||||
"challengeType": 5,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Crea una Persona",
|
|
||||||
"description": [
|
|
||||||
"Completa el constructor de objetos con los métodos especificados a continuación:",
|
|
||||||
"<blockquote>getFirstName()\ngetLastName()\ngetFullName()\nsetFirstName(first)\nsetLastName(last)\nsetFullName(firstAndLast)</blockquote>",
|
|
||||||
"Ejecuta las pruebas para ver el resultado esperado de cada método.",
|
|
||||||
"Las funciones que aceptan argumentos deben aceptar sólo uno, y este tiene que ser una cadena.",
|
|
||||||
"Estos métodos deben ser el único medio para interactuar con el objeto.",
|
|
||||||
"Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"it": {
|
|
||||||
"title": "Crea una Persona",
|
|
||||||
"description": [
|
|
||||||
"Completa il costruttore dell'oggetto con i metodi specificati qui sotto:",
|
|
||||||
"<blockquote>getFirstName()\ngetLastName()\ngetFullName()\nsetFirstName(first)\nsetLastName(last)\nsetFullName(firstAndLast)</blockquote>",
|
|
||||||
"Esegui i test per vedere il risultato atteso per ogni metodo.",
|
|
||||||
"I metodi che richiedono un argomento devono accettarne solo uno e questo deve essere una stringa.",
|
|
||||||
"Questi metodi devono essere l'unica maniera possibile di interagire con l'oggetto.",
|
|
||||||
"Ricorda di usare <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leggi-Cerca-Chiedi</a> se rimani bloccato. Prova a programmare in coppia. Scrivi il codice da te."
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"pt-br": {
|
|
||||||
"title": "Faça uma Pessoa",
|
|
||||||
"description": [
|
|
||||||
"Preencha o contrutor do objeto com seguintes métodos:",
|
|
||||||
"<blockquote>getFirstName()\ngetLastName()\ngetFullName()\nsetFirstName(first)\nsetLastName(last)\nsetFullName(firstAndLast)</blockquote>",
|
|
||||||
"Rode os testes para ver o resultado esperado de cada método.",
|
|
||||||
"Os métodos que recebem um argumento deve aceitar somente um argumento e deve ser uma string.",
|
|
||||||
"Esses métodos devem ser o único meio de interação com o objeto.",
|
|
||||||
"Lembre-se de usar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Ler-Procurar-Perguntar</a> se você ficar preso. Tente programar em par. Escreva seu próprio código."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "af4afb223120f7348cdfc9fd",
|
|
||||||
"title": "Map the Debris",
|
|
||||||
"description": [
|
|
||||||
"Return a new array that transforms the element's average altitude into their orbital periods.",
|
|
||||||
"The array will contain objects in the format <code>{name: 'name', avgAlt: avgAlt}</code>.",
|
|
||||||
"You can read about orbital periods <a href=\"http://en.wikipedia.org/wiki/Orbital_period\" target='_blank'>on wikipedia</a>.",
|
|
||||||
"The values should be rounded to the nearest whole number. The body being orbited is Earth.",
|
|
||||||
"The radius of the earth is 6367.4447 kilometers, and the GM value of earth is 398600.4418 km<sup>3</sup>s<sup>-2</sup>.",
|
|
||||||
"Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck. Try to pair program. Write your own code."
|
|
||||||
],
|
|
||||||
"challengeSeed": [
|
|
||||||
"function orbitalPeriod(arr) {",
|
|
||||||
" var GM = 398600.4418;",
|
|
||||||
" var earthRadius = 6367.4447;",
|
|
||||||
" return arr;",
|
|
||||||
"}",
|
|
||||||
"",
|
|
||||||
"orbitalPeriod([{name : \"sputnik\", avgAlt : 35873.5553}]);"
|
|
||||||
],
|
|
||||||
"solutions": [
|
|
||||||
"function orbitalPeriod(arr) {\n var GM = 398600.4418;\n var earthRadius = 6367.4447;\n var TAU = 2 * Math.PI; \n return arr.map(function(obj) {\n return {\n name: obj.name,\n orbitalPeriod: Math.round(TAU * Math.sqrt(Math.pow(obj.avgAlt+earthRadius, 3)/GM))\n };\n });\n}\n\norbitalPeriod([{name : \"sputkin\", avgAlt : 35873.5553}]);\n"
|
|
||||||
],
|
|
||||||
"tests": [
|
|
||||||
"assert.deepEqual(orbitalPeriod([{name : \"sputnik\", avgAlt : 35873.5553}]), [{name: \"sputnik\", orbitalPeriod: 86400}], 'message: <code>orbitalPeriod([{name : \"sputnik\", avgAlt : 35873.5553}])</code> should return <code>[{name: \"sputnik\", orbitalPeriod: 86400}]</code>.');",
|
|
||||||
"assert.deepEqual(orbitalPeriod([{name: \"iss\", avgAlt: 413.6}, {name: \"hubble\", avgAlt: 556.7}, {name: \"moon\", avgAlt: 378632.553}]), [{name : \"iss\", orbitalPeriod: 5557}, {name: \"hubble\", orbitalPeriod: 5734}, {name: \"moon\", orbitalPeriod: 2377399}], 'message: <code>orbitalPeriod([{name: \"iss\", avgAlt: 413.6}, {name: \"hubble\", avgAlt: 556.7}, {name: \"moon\", avgAlt: 378632.553}])</code> should return <code>[{name : \"iss\", orbitalPeriod: 5557}, {name: \"hubble\", orbitalPeriod: 5734}, {name: \"moon\", orbitalPeriod: 2377399}]</code>.');"
|
|
||||||
],
|
|
||||||
"type": "bonfire",
|
|
||||||
"MDNlinks": [
|
|
||||||
"Math.pow()"
|
|
||||||
],
|
|
||||||
"challengeType": 5,
|
|
||||||
"translations": {
|
|
||||||
"es": {
|
|
||||||
"title": "Ubica los Escombros",
|
|
||||||
"description": [
|
|
||||||
"Crea una función que devuelva un nuevo arreglo que transforme la altitud promedio del elemento en su período orbital.",
|
|
||||||
"El arreglo debe contener objetos en el formato <code>{name: 'name', avgAlt: avgAlt}</code>.",
|
|
||||||
"Puedes leer acerca de períodos orbitales <a href=\"http://en.wikipedia.org/wiki/Orbital_period\" target='_blank'>en wikipedia</a>.",
|
|
||||||
"Los valores deben estar redondeados al número entero más próximo. El cuerpo orbitado es la Tierra",
|
|
||||||
"El radio de la Tierra es 6367.4447 kilómetros, y el valor GM del planeta es de 398600.4418 km<sup>3</sup>s<sup>-2</sup>.",
|
|
||||||
"Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"it": {
|
|
||||||
"title": "Mappa i Detriti",
|
|
||||||
"description": [
|
|
||||||
"Ritorna un nuovo array che trasformi l'altitudine media degli elementi nel loro periodo orbitale.",
|
|
||||||
"L'array conterrà oggetti in formato <code>{name: 'name', avgAlt: avgAlt}</code>.",
|
|
||||||
"Puoi leggere riguardo i periodi orbitali <a href=\"http://en.wikipedia.org/wiki/Orbital_period\" target='_blank'>su wikipedia</a>.",
|
|
||||||
"I valori devono essere arrotondati al numero intero più vicino. Il corpo attorno a cui orbitano gli elementi è la Terra.",
|
|
||||||
"Il raggio della Terra è di 6367.4447 kilometri, e il valore GM della Terra è di 398600.4418 km<sup>3</sup>s<sup>-2</sup>.",
|
|
||||||
"Ricorda di usare <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leggi-Cerca-Chiedi</a> se rimani bloccato. Prova a programmare in coppia. Scrivi il codice da te."
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"pt-br": {
|
|
||||||
"title": "Mapeie o Lixo espacial",
|
|
||||||
"description": [
|
|
||||||
"Retorne uma nova matriz que transforma a altitude média do elemento em seu período orbital.",
|
|
||||||
"A matriz vai conter objetos no formato <code>{name: 'name', avgAlt: avgAlt}</code>.",
|
|
||||||
"Você pode ler sobre período orbital <a href=\"https://pt.wikipedia.org/wiki/Per%C3%ADodo_orbital\" target='_blank'>na wikipedia</a>.",
|
|
||||||
"Os valores devem ser arredondados para número inteiro mais próximo. O corpe sendo orbitado é a Terra.",
|
|
||||||
"O raio da terra é 6367.4447 quilômetros, e o valor GM da terra é 398600.4418 km<sup>3</sup>s<sup>-2</sup>.",
|
|
||||||
"Lembre-se de usar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Ler-Procurar-Perguntar</a> se você ficar preso. Tente programar em par. Escreva seu próprio código."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"id": "a3f503de51cfab748ff001aa",
|
"id": "a3f503de51cfab748ff001aa",
|
||||||
"title": "Pairwise",
|
"title": "Pairwise",
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,488 @@
|
|||||||
|
{
|
||||||
|
"name": "Extra Practice Projects",
|
||||||
|
"order": 1,
|
||||||
|
"time": "500 hours",
|
||||||
|
"helpRoom": "HelpFrontEnd",
|
||||||
|
"challenges": [
|
||||||
|
{
|
||||||
|
"id": "bd7158d8c442eddfaeb5bd10",
|
||||||
|
"title": "Show the Local Weather",
|
||||||
|
"description": [
|
||||||
|
"<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='http://codepen.io/FreeCodeCamp/full/bELRjV' target='_blank'>http://codepen.io/FreeCodeCamp/full/bELRjV</a>.",
|
||||||
|
"Fulfill the below <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
|
||||||
|
"<strong>User Story:</strong> I can see the weather in my current location.",
|
||||||
|
"<strong>User Story:</strong> I can see a different icon or background image (e.g. snowy mountain, hot desert) depending on the weather.",
|
||||||
|
"<strong>User Story:</strong> I can push a button to toggle between Fahrenheit and Celsius.",
|
||||||
|
"We recommend using the <a href='https://openweathermap.org/current#geo' target='_blank'>Open Weather API</a>. This will require creating a free API key. Normally you want to avoid exposing API keys on CodePen, but we haven't been able to find a keyless API for weather.",
|
||||||
|
"Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> 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": [
|
||||||
|
"GCLiJU-vvVc"
|
||||||
|
],
|
||||||
|
"tests": [],
|
||||||
|
"type": "zipline",
|
||||||
|
"challengeType": 3,
|
||||||
|
"isRequired": false,
|
||||||
|
"translations": {
|
||||||
|
"es": {
|
||||||
|
"title": "Muestra el clima local",
|
||||||
|
"description": [
|
||||||
|
"<span class='text-info'>Objetivo:</span> Crea una aplicación con <a href='https://codepen.io' target='_blank'>CodePen.io</a> cuya funcionalidad sea similar a la de esta: <a href='http://codepen.io/FreeCodeCamp/full/bELRjV' target='_blank'>http://codepen.io/FreeCodeCamp/full/bELRjV</a>.",
|
||||||
|
"Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o APIs que necesites.",
|
||||||
|
"<span class='text-info'>Historia de usuario:</span> Pedo obtener información acerca del clima en mi localización actual.",
|
||||||
|
"<span class='text-info'>Historia de usuario:</span> Puedo ver un icono diferente o una imagen de fondo diferente (e.g. montaña con nieve, desierto caliente) dependiendo del clima.",
|
||||||
|
"<span class='text-info'>Historia de usuario:</span> Puedo pulsar un botón para cambiar la unidad de temperatura de grados Fahrenheit a Celsius y viceversa.",
|
||||||
|
"Recomendamos utilizar <a href='https://openweathermap.org/current#geo' target='_blank'>Open Weather API</a>. Al utilizarlo tendrás que crear una llave API gratuita. Normalmente debes evitar exponer llaves de API en CodePen, pero por el momento no hemos encontrado un API de clima que no requiera llave.",
|
||||||
|
"Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> 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, compartiendolo en nuestra <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"title": "Покажите местную погоду",
|
||||||
|
"description": [
|
||||||
|
"<span class='text-info'>Задание:</span> Создайте <a href='https://codepen.io' target='_blank'>CodePen.io</a> который успешно копирует вот этот: <a href='http://codepen.io/FreeCodeCamp/full/bELRjV' target='_blank'>http://codepen.io/FreeCodeCamp/full/bELRjV</a>.",
|
||||||
|
"<span class='text-info'>Правило #1:</span> Не подсматривайте код приведенного на CodePen примера. Напишите его самостоятельно.",
|
||||||
|
"<span class='text-info'>Правило #2:</span> Можете использовать любые библиотеки или API, которые потребуются.",
|
||||||
|
"<span class='text-info'>Правило #3:</span> Воссоздайте функционал приведенного примера и не стесняйтесь добавить что-нибудь от себя.",
|
||||||
|
"Реализуйте следующие <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>пользовательские истории</a>, сделайте также бонусные по желанию:",
|
||||||
|
"<span class='text-info'>Пользовательская история:</span> В качестве пользователя, я могу узнать погоду с учетом моего текущего местоположения.",
|
||||||
|
"<span class='text-info'>Бонусная пользовательская история:</span> В качестве пользователя, я могу в зависимости от погоды видеть различные температурные значки.",
|
||||||
|
"<span class='text-info'>Бонусная пользовательская история:</span> В качестве пользователя, я могу в зависимости от погоды видеть различные фоновые изображения (снежные горы, знойная пустыня).",
|
||||||
|
"<span class='text-info'>Бонусная пользовательская история:</span> В качестве пользователя, я могу нажать на кнопку чтобы переключится между градусами по Цельсию или по Фаренгейту.",
|
||||||
|
"Если что-то не получается, воспользуйтесь <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a>.",
|
||||||
|
"Когда выполните задание кликните кнопку \"I've completed this challenge\" и добавьте ссылку на ваш CodePen. Если вы программировали с кем-то в паре, также добавьте имя вашего напарника.",
|
||||||
|
"Если вы хотите получить немедленную оценку вашего проекта, нажмите эту кнопку и добавьте ссылку на ваш CodePen. В противном случае мы проверим его перед тем как вы приступите к проектам для некоммерческих организаций.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "bd7158d8c442eddfaeb5bd19",
|
||||||
|
"title": "Build a Wikipedia Viewer",
|
||||||
|
"description": [
|
||||||
|
"<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/FreeCodeCamp/full/wGqEga/' target='_blank'>https://codepen.io/FreeCodeCamp/full/wGqEga/</a>.",
|
||||||
|
"Fulfill the below <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
|
||||||
|
"<strong>User Story:</strong> I can search Wikipedia entries in a search box and see the resulting Wikipedia entries.",
|
||||||
|
"<strong>User Story:</strong> I can click a button to see a random Wikipedia entry.",
|
||||||
|
"<span class='text-info'>Hint #1:</span> Here's a URL you can use to get a random Wikipedia article: <code>https://en.wikipedia.org/wiki/Special:Random</code>.",
|
||||||
|
"<span class='text-info'>Hint #2:</span> Here's an entry on using Wikipedia's API: <code>https://www.mediawiki.org/wiki/API:Main_page</code>.",
|
||||||
|
"<span class='text-info'>Hint #3:</span> Use this <a href='https://en.wikipedia.org/wiki/Special:ApiSandbox#action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=jsonfm' target='_blank'>link</a> to experiment with Wikipedia's API.",
|
||||||
|
"Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> 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": [
|
||||||
|
"wJhcPwVYA1g"
|
||||||
|
],
|
||||||
|
"tests": [],
|
||||||
|
"type": "zipline",
|
||||||
|
"challengeType": 3,
|
||||||
|
"isRequired": false,
|
||||||
|
"translations": {
|
||||||
|
"es": {
|
||||||
|
"title": "Crea un buscador de Wikipedia",
|
||||||
|
"description": [
|
||||||
|
"<span class='text-info'>Objetivo:</span> Crea una aplicación con <a href='https://codepen.io' target='_blank'>CodePen.io</a> cuya funcionalidad sea similar a la de esta: <a href='https://codepen.io/FreeCodeCamp/full/wGqEga/' target='_blank'>https://codepen.io/FreeCodeCamp/full/wGqEga/</a>.",
|
||||||
|
"Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o APIs que necesites. Dale tu estilo personal.",
|
||||||
|
"<span class='text-info'>Historia de usuario:</span> Pedo obtener información acerca del clima en mi localización actual.",
|
||||||
|
"<span class='text-info'>Historia de usuario:</span> Puedo ver un icono diferente o una imagen de fondo diferente (e.g. montaña con nieve, desierto caliente) dependiendo del clima.",
|
||||||
|
"<span class='text-info'>Historia de usuario:</span> Puedo pulsar un botón para cambiar la unidad de temperatura de grados Fahrenheit a Celsius y viceversa.",
|
||||||
|
"<span class='text-info'>Historia de usuario:</span> Puedo buscar entradas en Wikipedia en un cuadro de búsqueda y ver las entradas de Wikipedia resultantes.",
|
||||||
|
"<span class='text-info'>Historia de usuario:</span>Puedo pulsar un botón para ver un artículo aleatorio de Wikipedia.",
|
||||||
|
"<span class='text-info'>Pista 1:</span> Aquí está una URL donde puedes ver una entrada aleatoria de Wikipedia: <code>https://en.wikipedia.org/wiki/Special:Random<</code>.",
|
||||||
|
"<span class='text-info'>Pista 2:</span> Este es un artículo muy útil relativo al uso del API de Wikipedia: <code>https://www.mediawiki.org/wiki/API:Main_page</code>.",
|
||||||
|
"<span class='text-info'>Pista 3:</span> Usa este <a href='https://en.wikipedia.org/wiki/Special:ApiSandbox#action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=jsonfm' target='_blank'>enlace</a> para experimentar con el API de Wikipedia.",
|
||||||
|
"Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> 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, compartiendolo en nuestra <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "bd7158d8c442eddfaeb5bd1f",
|
||||||
|
"title": "Use the Twitch.tv JSON API",
|
||||||
|
"description": [
|
||||||
|
"<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/FreeCodeCamp/full/Myvqmo/' target='_blank'>https://codepen.io/FreeCodeCamp/full/Myvqmo/</a>.",
|
||||||
|
"Fulfill the below <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
|
||||||
|
"<strong>User Story:</strong> I can see whether Free Code Camp is currently streaming on Twitch.tv.",
|
||||||
|
"<strong>User Story:</strong> I can click the status output and be sent directly to the Free Code Camp's Twitch.tv channel.",
|
||||||
|
"<strong>User Story:</strong> if a Twitch user is currently streaming, I can see additional details about what they are streaming.",
|
||||||
|
"<strong>User Story:</strong> I will see a placeholder notification if a streamer has closed their Twitch account (or the account never existed). You can verify this works by adding brunofin and comster404 to your array of Twitch streamers.",
|
||||||
|
"<strong>Hint:</strong> See an example call to Twitch.tv's JSONP API at <a href='http://forum.freecodecamp.com/t/use-the-twitchtv-json-api/19541' target='_blank'>http://forum.freecodecamp.com/t/use-the-twitchtv-json-api/19541</a>.",
|
||||||
|
"<strong>Hint:</strong> The relevant documentation about this API call is here: <a href='https://github.com/justintv/Twitch-API/blob/master/v3_resources/streams.md#get-streamschannel' target='_blank'>https://github.com/justintv/Twitch-API/blob/master/v3_resources/streams.md#get-streamschannel</a>.",
|
||||||
|
"<strong>Hint:</strong> Here's an array of the Twitch.tv usernames of people who regularly stream: <code>[\"ESL_SC2\", \"OgamingSC2\", \"cretetion\", \"freecodecamp\", \"storbeck\", \"habathcx\", \"RobotCaleb\", \"noobs2ninjas\"]</code>",
|
||||||
|
"Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> 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": [
|
||||||
|
"6WrbY1d-IHI"
|
||||||
|
],
|
||||||
|
"tests": [],
|
||||||
|
"type": "zipline",
|
||||||
|
"challengeType": 3,
|
||||||
|
"isRequired": false,
|
||||||
|
"translations": {
|
||||||
|
"es": {
|
||||||
|
"title": "Usa el API JSON de Twitch.tv",
|
||||||
|
"description": [
|
||||||
|
"<span class='text-info'>Objetivo:</span> Crea una aplicación con <a href='https://codepen.io' target='_blank'>CodePen.io</a> cuya funcionalidad sea similar a la de esta: <a href='https://codepen.io/FreeCodeCamp/full/Myvqmo/' target='_blank'>https://codepen.io/FreeCodeCamp/full/Myvqmo/</a>.",
|
||||||
|
"Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o APIs que necesites. Dale tu estilo personal.",
|
||||||
|
"<span class='text-info'>Historia de usuario:</span> Puedo verificar si Free Code Camp está transmitiendo actualmente en Twitch.tv",
|
||||||
|
"<span class='text-info'>Historia de usuario:</span> Puedo pulsar el estatus y ser enviado directamente al canal de Free Code Camp en Twitch.tv.",
|
||||||
|
"<span class='text-info'>Historia de usuario:</span> Si un usuario Twitch está transmitiendo actualmente, puedo ver detalles adicionales acerca del contenido que están transmitiendo.",
|
||||||
|
"<span class='text-info'>Historia de usuario:</span> Puedo ver una notificación si el usuario ha cerrado su cuenta de Twitch (o si la cuenta nunca ha existido). Puedes verificar si esto funciona agregando brunofin y comster404 a tu vector de usuarios de Twitch.",
|
||||||
|
"<span class='text-info'>Pista:</span> Obseva una llamada de ejemplo al API JSONP de Twitch.tv en <code>http://forum.freecodecamp.com/t/use-the-twitchtv-json-api/19541</code>.",
|
||||||
|
"<span class='text-info'>Pista:</span> La documentación relevante sobre esta llamada al API está aquí: <a href='https://github.com/justintv/Twitch-API/blob/master/v3_resources/streams.md#get-streamschannel' target='_blank'>https://github.com/justintv/Twitch-API/blob/master/v3_resources/streams.md#get-streamschannel</a>.",
|
||||||
|
"<span class='text-info'>Pista:</span> Aquí está un vector de usuarios en Twitch.tv que regularmente transmiten sobre programación: <code>[\"ESL_SC2\", \"OgamingSC2\", \"cretetion\", \"freecodecamp\", \"storbeck\", \"habathcx\", \"RobotCaleb\", \"noobs2ninjas\"]</code>",
|
||||||
|
"Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> 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, compartiendolo en nuestra <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"title": "Используйте Twitch.tv JSON API",
|
||||||
|
"description": [
|
||||||
|
"<span class='text-info'>Задание:</span> Создайте <a href='https://codepen.io' target='_blank'>CodePen.io</a> который успешно копирует вот этот: <a href='https://codepen.io/FreeCodeCamp/full/Myvqmo/' target='_blank'>https://codepen.io/FreeCodeCamp/full/Myvqmo/</a>.",
|
||||||
|
"<span class='text-info'>Правило #1:</span> Не подсматривайте код приведенного на CodePen примера. Напишите его самостоятельно.",
|
||||||
|
"<span class='text-info'>Правило #2:</span> Можете использовать любые библиотеки или API, которые потребуются.",
|
||||||
|
"<span class='text-info'>Правило #3:</span> Воссоздайте функционал приведенного примера и не стесняйтесь добавить что-нибудь от себя.",
|
||||||
|
"Реализуйте следующие <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>пользовательские истории</a>, сделайте также бонусные по желанию:",
|
||||||
|
"<span class='text-info'>Пользовательская история:</span> В качестве пользователя, я могу увидеть идет ли в данный момент на Twitch.tv трансляция Free Code Camp.",
|
||||||
|
"<span class='text-info'>Пользовательская история:</span> В качестве пользователя, я могу, кликнув на описание трансляции, перейти на канал Free Code Camp.",
|
||||||
|
"<span class='text-info'>Пользовательская история:</span> В качестве пользователя, я могу видеть дополнительную информацию о текущей трансляции Free Code Camp.",
|
||||||
|
"<span class='text-info'>Бонусная пользовательская история:</span> В качестве пользователя, я могу произвести поиск среди перечисленных каналов.",
|
||||||
|
"<span class='text-info'>Бонусная пользовательская история:</span> В качестве пользователя, я могу видеть уведомление, если создатель канала закрыл свой аккаунт на Twitch.tv. Добавьте в массив имена пользователей brunofin и comster404, чтобы убедиться, что эта функция реализована правильно.",
|
||||||
|
"<span class='text-info'>Подсказка:</span> Пример запроса к Twitch.tv JSON API: <code>https://api.twitch.tv/kraken/streams/freecodecamp</code>.",
|
||||||
|
"<span class='text-info'>Подсказка:</span> Документацию об этом запросе можно найти по ссылке: <a href='https://github.com/justintv/Twitch-API/blob/master/v3_resources/streams.md#get-streamschannel' target='_blank'>https://github.com/justintv/Twitch-API/blob/master/v3_resources/streams.md#get-streamschannel</a>.",
|
||||||
|
"<span class='text-info'>Подсказка:</span> В этом массиве приведены имена пользователей, которые регулярно пишут код онлайн: <code>[\"ESL_SC2\", \"OgamingSC2\", \"cretetion\", \"freecodecamp\", \"storbeck\", \"habathcx\", \"RobotCaleb\", \"noobs2ninjas\"]</code>",
|
||||||
|
"Если что-то не получается, воспользуйтесь <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a>.",
|
||||||
|
"Когда выполните задание кликните кнопку \"I've completed this challenge\" и добавьте ссылку на ваш CodePen. Если вы программировали с кем-то в паре, также добавьте имя вашего напарника.",
|
||||||
|
"Если вы хотите получить немедленную оценку вашего проекта, нажмите эту кнопку и добавьте ссылку на ваш CodePen. В противном случае мы проверим его перед тем как вы приступите к проектам для некоммерческих организаций.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "bd7158d8c442eedfaeb5bd1c",
|
||||||
|
"title": "Build a Tic Tac Toe Game",
|
||||||
|
"description": [
|
||||||
|
"<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/FreeCodeCamp/full/KzXQgy/' target='_blank'>https://codepen.io/FreeCodeCamp/full/KzXQgy/</a>.",
|
||||||
|
"Fulfill the below <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
|
||||||
|
"<strong>User Story:</strong> I can play a game of Tic Tac Toe with the computer.",
|
||||||
|
"<strong>User Story:</strong> My game will reset as soon as it's over so I can play again.",
|
||||||
|
"<strong>User Story:</strong> I can choose whether I want to play as X or O.",
|
||||||
|
"Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> 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": false,
|
||||||
|
"translations": {
|
||||||
|
"es": {
|
||||||
|
"title": "Crea un juego de Tic Tac Toe",
|
||||||
|
"description": [
|
||||||
|
"<span class='text-info'>Objetivo:</span> Construye una aplicación en <a href='https://codepen.io' target='_blank'>CodePen.io</a> cuya funcionalidad sea similar a la de esta: <a href='https://codepen.io/FreeCodeCamp/full/KzXQgy/' target='_blank'>https://codepen.io/FreeCodeCamp/full/KzXQgy/</a>.",
|
||||||
|
"Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o APIs que necesites. Dale tu estilo personal.",
|
||||||
|
"<span class='text-info'>Historia de usuario:</span> Puedo jugar un juego de Tic Tac Toe contra el computador.",
|
||||||
|
"<span class='text-info'>Historia de usuario:</span> Mi juego se reiniciará tan pronto como termine para poder jugar de nuevo.",
|
||||||
|
"<span class='text-info'>Historia de usuario:</span> Puedo elegir si quiero jugar como X o como O.",
|
||||||
|
"Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> 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 <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "bd7158d8c442eddfaeb5bd1c",
|
||||||
|
"title": "Build a Simon Game",
|
||||||
|
"description": [
|
||||||
|
"<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/Em-Ant/full/QbRyqq/' target='_blank'>https://codepen.io/FreeCodeCamp/full/obYBjE</a>.",
|
||||||
|
"Fulfill the below <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
|
||||||
|
"<strong>User Story:</strong> I am presented with a random series of button presses.",
|
||||||
|
"<strong>User Story:</strong> Each time I input a series of button presses correctly, I see the same series of button presses but with an additional step.",
|
||||||
|
"<strong>User Story:</strong> I hear a sound that corresponds to each button both when the series of button presses plays, and when I personally press a button.",
|
||||||
|
"<strong>User Story:</strong> 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.",
|
||||||
|
"<strong>User Story:</strong> I can see how many steps are in the current series of button presses.",
|
||||||
|
"<strong>User Story:</strong> If I want to restart, I can hit a button to do so, and the game will return to a single step.",
|
||||||
|
"<strong>User Story:</strong> 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.",
|
||||||
|
"<strong>User Story:</strong> I can win the game by getting a series of 20 steps correct. I am notified of my victory, then the game starts over.",
|
||||||
|
"<strong>Hint:</strong> Here are mp3s you can use for each button: <code>https://s3.amazonaws.com/freecodecamp/simonSound1.mp3</code>, <code>https://s3.amazonaws.com/freecodecamp/simonSound2.mp3</code>, <code>https://s3.amazonaws.com/freecodecamp/simonSound3.mp3</code>, <code>https://s3.amazonaws.com/freecodecamp/simonSound4.mp3</code>.",
|
||||||
|
"Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> 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": false,
|
||||||
|
"translations": {
|
||||||
|
"es": {
|
||||||
|
"title": "Construye un juego de Simon",
|
||||||
|
"description": [
|
||||||
|
"<span class='text-info'>Objetivo:</span> Construye una aplicación en <a href='https://codepen.io' target='_blank'>CodePen.io</a> cuya funcionalidad sea similar a la de esta: <a href='https://codepen.io/Em-Ant/full/QbRyqq/' target='_blank'>https://codepen.io/Em-Ant/full/QbRyqq/</a>.",
|
||||||
|
"Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o APIs que necesites. Dale tu estilo personal.",
|
||||||
|
"<span class='text-info'>Historia de usuario:</span> Se me presenta una serie aleatoria de pulsaciones a botones.",
|
||||||
|
"<span class='text-info'>Historia de usuario:</span> Cada vez que presiono una secuencia de pulsaciones correctamente, veo que vuelve a ejecutarse la misma serie de pulsaciones con un paso adicional.",
|
||||||
|
"<span class='text-info'>Historia de usuario:</span> Escucho un sonido que corresponde a cada botón cuando se ejecuta una secuencia de pulsaciones, así como cuando yo presiono un botón.",
|
||||||
|
"<span class='text-info'>Historia de usuario:</span> 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.",
|
||||||
|
"<span class='text-info'>Historia de usuario:</span> Puedo ver cuántos pasos hay en la serie de pulsaciones actual.",
|
||||||
|
"<span class='text-info'>Historia de usuario:</span> Si deseo reiniciar, puedo pulsar un botón para hacerlo, y el juego comenzará desde una secuencia con un solo paso.",
|
||||||
|
"<span class='text-info'>Historia de usuario:</span> 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.",
|
||||||
|
"<span class='text-info'>Historia de usuario:</span> Puedo ganar el juego si completo 20 pasos correctos. Se me notifica sobre mi victoria, tras lo cual el juego se reinicia.",
|
||||||
|
"<span class='text-info'>Pista:</span> Aquí hay algunos mp3s que puedes utilizar para tus botones: <code>https://s3.amazonaws.com/freecodecamp/simonSound1.mp3</code>, <code>https://s3.amazonaws.com/freecodecamp/simonSound2.mp3</code>, <code>https://s3.amazonaws.com/freecodecamp/simonSound3.mp3</code>, <code>https://s3.amazonaws.com/freecodecamp/simonSound4.mp3</code>.",
|
||||||
|
"Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> 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 <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "bd7156d8c242eddfaeb5bd13",
|
||||||
|
"title": "Build a Camper Leaderboard",
|
||||||
|
"description": [
|
||||||
|
"<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/FreeCodeCamp/full/eZGMjp/' target='_blank'>https://codepen.io/FreeCodeCamp/full/eZGMjp/</a>.",
|
||||||
|
"Fulfill the below <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
|
||||||
|
"<strong>User Story:</strong> I can see a table of the Free Code Camp campers who've earned the most brownie points in the past 30 days.",
|
||||||
|
"<strong>User Story:</strong> I can see how many brownie points they've earned in the past 30 days, and how many they've earned total.",
|
||||||
|
"<strong>User Story:</strong> I can toggle between sorting the list by how many brownie points they've earned in the past 30 days and by how many brownie points they've earned total.",
|
||||||
|
"<strong>Hint:</strong> To get the top 100 campers for the last 30 days: <a href='https://fcctop100.herokuapp.com/api/fccusers/top/recent' target='_blank'>https://fcctop100.herokuapp.com/api/fccusers/top/recent</a>.",
|
||||||
|
"<strong>Hint:</strong> To get the top 100 campers of all time: <a href='https://fcctop100.herokuapp.com/api/fccusers/top/alltime' target='_blank'>https://fcctop100.herokuapp.com/api/fccusers/top/alltime</a>.",
|
||||||
|
"Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> 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."
|
||||||
|
],
|
||||||
|
"releasedOn": "January 1, 2016",
|
||||||
|
"challengeSeed": [
|
||||||
|
"LJQcFNo_-QY"
|
||||||
|
],
|
||||||
|
"tests": [],
|
||||||
|
"type": "zipline",
|
||||||
|
"isRequired": false,
|
||||||
|
"challengeType": 3,
|
||||||
|
"translations": {
|
||||||
|
"es": {
|
||||||
|
"title": "Crea un marcador para los campistas",
|
||||||
|
"description": [
|
||||||
|
"<strong>Objetivo:</strong> Construye una aplicación en <a href='https://codepen.io' target='_blank'>CodePen.io</a> que funcione de forma similar al siguiente ejemplo: <a href='https://codepen.io/FreeCodeCamp/full/eZGMjp/' target='_blank'>https://codepen.io/FreeCodeCamp/full/eZGMjp/</a>.",
|
||||||
|
"Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o API que sea necesaria. ¡Ponle un toque personal!.",
|
||||||
|
"<strong>Historia de usuario:</strong> Puedo ver un tablero con los campistas de Free Code Camp que han ganado más puntos de brownie en los últimos 30 días.",
|
||||||
|
"<strong>Historia de usuario:</strong> Puedo ver cuántos puntos de brownie han ganado en los últimos 30 días, y cuántos han ganado en total.",
|
||||||
|
"<strong>Historia de usuario:</strong> Puedo elegir entre dos formas de organizar la lista: 1) En base a cuántos puntos de brownie se han ganado en los últimos 30 días. 2) En base al número de puntos de brownie que han ganado en total.",
|
||||||
|
"<strong>Pista:</strong> Para obtener los 100 mejores campistas para los últimos 30 días: <a href='https://fcctop100.herokuapp.com/api/fccusers/top/recent' target='_blank'>https://fcctop100.herokuapp.com/api/fccusers/top/recent</a>.",
|
||||||
|
"<strong>Pista:</strong> Para obtener los 100 mejores campistas de toda la historia: <a href='http://fcctop100.herokuapp.com/api/fccusers/top/alltime' target='_blank'>http://fcctop100.herokuapp.com/api/fccusers/top/alltime</a>.",
|
||||||
|
"Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> si te sientes atascado.",
|
||||||
|
"Cuando termines, haz clic en el botón de \"I've completed this challenge\" e incluye el vínculo de tu proyecto en CodePen. ",
|
||||||
|
"Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Cuarto de revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"title": "Создайте таблицу Кемперов-Лидеров",
|
||||||
|
"description": [
|
||||||
|
"<strong>Задание:</strong> Создайте приложение <a href='https://codepen.io' target='_blank'>CodePen.io</a>, функционал которого схож с этим: <a href='https://codepen.io/FreeCodeCamp/full/eZGMjp/' target='_blank'>https://codepen.io/FreeCodeCamp/full/eZGMjp/</a>.",
|
||||||
|
"Приложение должно удовлетворять нижеприведённым <a href='https://ru.wikipedia.org/wiki/Пользовательские_истории' target='_blank'>пользовательским историям</a>. Используйте любые библиотеки или API, которые потребуются. Придайте ему свой личный стиль.",
|
||||||
|
"<strong>Пользовательская история:</strong> Я могу видеть таблицу кемперов Free Code Camp, которые получили наибольшее количество очков за последние 30 дней.",
|
||||||
|
"<strong>Пользовательская история:</strong> Я могу видеть сколько очков они получили за последние 30 дней, и сколько они получили их всего.",
|
||||||
|
"<strong>Пользовательская история:</strong> Я могу отсортировать список по количеству очков, которые они получили за последние 30 дней, и по общему количеству полученных очков.",
|
||||||
|
"<strong>Подсказка:</strong> Ссылка на топ 100 кемперов за последние 30 дней в формате JSON: <a href='https://fcctop100.herokuapp.com/api/fccusers/top/recent' target='_blank'>https://fcctop100.herokuapp.com/api/fccusers/top/recent</a>.",
|
||||||
|
"<strong>Подсказка:</strong> Ссылка на топ 100 кемперов за все время в формате JSON: <a href='http://fcctop100.herokuapp.com/api/fccusers/top/alltime' target='_blank'>http://fcctop100.herokuapp.com/api/fccusers/top/alltime</a>.",
|
||||||
|
"Если что-то не получается, не забывайте пользоваться методом <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Читай-Ищи-Спрашивай</a>.",
|
||||||
|
"Когда закончите, нажмите кнопку \"I've completed this challenge\" и укажите ссылку на вашу работу на CodePen.",
|
||||||
|
"Вы можете получить отзыв о вашем проекте от коллег, поделившись ссылкой на него в нашем <a href='//gitter.im/freecodecamp/codereview' target='_blank'>чате для рассмотрения кода</a>. Также вы можете поделиться ею через Twitter и на странице Free Code Camp вашего города на Facebook."
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "bd7153d8c242eddfaeb5bd13",
|
||||||
|
"title": "Build a Roguelike Dungeon Crawler Game",
|
||||||
|
"description": [
|
||||||
|
"<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/FreeCodeCamp/full/PNJRyd/' target='_blank'>https://codepen.io/FreeCodeCamp/full/PNJRyd/</a>.",
|
||||||
|
"Fulfill the below <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
|
||||||
|
"<strong>User Story:</strong> I have health, a level, and a weapon. I can pick up a better weapon. I can pick up health items.",
|
||||||
|
"<strong>User Story:</strong> All the items and enemies on the map are arranged at random.",
|
||||||
|
"<strong>User Story:</strong> I can move throughout a map, discovering items.",
|
||||||
|
"<strong>User Story:</strong> I can move anywhere within the map's boundaries, but I can't move through an enemy until I've beaten it.",
|
||||||
|
"<strong>User Story:</strong> Much of the map is hidden. When I take a step, all spaces that are within a certain number of spaces from me are revealed.",
|
||||||
|
"<strong>User Story:</strong> When I beat an enemy, the enemy goes away and I get XP, which eventually increases my level.",
|
||||||
|
"<strong>User Story:</strong> When I fight an enemy, we take turns damaging each other until one of us loses. I do damage based off of my level and my weapon. The enemy does damage based off of its level. Damage is somewhat random within a range.",
|
||||||
|
"<strong>User Story:</strong> When I find and beat the boss, I win.",
|
||||||
|
"<strong>User Story:</strong> The game should be challenging, but theoretically winnable.",
|
||||||
|
"Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> 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."
|
||||||
|
],
|
||||||
|
"releasedOn": "January 1, 2016",
|
||||||
|
"challengeSeed": [
|
||||||
|
"BwyKI9iePUQ"
|
||||||
|
],
|
||||||
|
"tests": [],
|
||||||
|
"type": "zipline",
|
||||||
|
"isRequired": false,
|
||||||
|
"challengeType": 3,
|
||||||
|
"translations": {
|
||||||
|
"es": {
|
||||||
|
"title": "Crea un juego de dragones al estilo Rogue",
|
||||||
|
"description": [
|
||||||
|
"<strong>Objetivo:</strong> Construye una aplicación en <a href='https://codepen.io' target='_blank'>CodePen.io</a> que funcione de forma similar al siguiente ejemplo: <a href='https://codepen.io/FreeCodeCamp/full/PNJRyd/' target='_blank'>https://codepen.io/FreeCodeCamp/full/PNJRyd/</a>.",
|
||||||
|
"Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o API que sea necesaria. ¡Ponle un toque personal!.",
|
||||||
|
"<strong>Historia de usuario:</strong> Tengo energía, nivel de habilidad y un arma. Puedo recoger un arma mejor. Puedo recoger ítems que recuperan mi energía.",
|
||||||
|
"<strong>Historia de usuario:</strong> Todos los ítems y los enemigos en el mapa están colocados aleatoriamente.",
|
||||||
|
"<strong>Historia de usuario:</strong> Puedo moverme a lo largo de un mapa y descubrir ítems.",
|
||||||
|
"<strong>Historia de usuario:</strong> Puedo moverme hacia cualquier parte dentro de los límites del mapa, pero no puedo moverme sobre un enemigo hasta que lo haya vencido.",
|
||||||
|
"<strong>Historia de usuario:</strong> Gran parte del mapa está escondido. Cuando doy un paso, todos los espacios que están a cierto número de espacios de distancia de mi son revelados.",
|
||||||
|
"<strong>Historia de usuario:</strong> Cuando venzo un enemigo, este desaparece y yo gano puntos de experiencia (XP), lo que eventualmente me permite aumentar de nivel.",
|
||||||
|
"<strong>Historia de usuario:</strong> Cuando peleo con un enemigo, tomamos turnos haciéndonos daño hasta que uno de los dos pierde. El daño que hago está basado en mi nivel de experiencia y en el arma que estoy utilizando. El enemigo hace daño basado en su nivel. El daño es aleatorio dentro de cierto márgen.",
|
||||||
|
"<strong>Historia de usuario:</strong> Gano el juego cuando encuentre y venza al jefe.",
|
||||||
|
"<strong>Historia de usuario:</strong> El juego debe representar un reto, pero ganar debe ser teóricamente posible.",
|
||||||
|
"Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> si te sientes atascado.",
|
||||||
|
"Cuando termines, haz clic en el botón de \"I've completed this challenge\" e incluye el vínculo de tu proyecto en CodePen. ",
|
||||||
|
"Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Cuarto de revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"ru": {
|
||||||
|
"title": "Создайте Roguelike-подобную игру Подземелье",
|
||||||
|
"description": [
|
||||||
|
"<strong>Задание:</strong> Создайте приложение <a href='https://codepen.io' target='_blank'>CodePen.io</a>, функционал которого схож с этим: <a href='https://codepen.io/FreeCodeCamp/full/PNJRyd/' target='_blank'>https://codepen.io/FreeCodeCamp/full/PNJRyd/</a>.",
|
||||||
|
"Приложение должно удовлетворять нижеприведённым <a href='https://ru.wikipedia.org/wiki/Пользовательские_истории' target='_blank'>пользовательским историям</a>. Используйте любые библиотеки или API, которые потребуются. Придайте ему свой личный стиль.",
|
||||||
|
"<strong>Пользовательская история:</strong> У меня есть жизни, уровень и оружие. Я могу подобрать оружие получше. Я могу подобрать очки здоровья.",
|
||||||
|
"<strong>Пользовательская история:</strong> Все предметы и враги располагаются на карте случайным образом.",
|
||||||
|
"<strong>Пользовательская история:</strong> Я могу передвигаться по карте, обнаруживая новые предметы.",
|
||||||
|
"<strong>Пользовательская история:</strong> Я могу двигаться куда угодно в рамках карты, но не могу продвинуться дальше врага, пока он не будет побежден.",
|
||||||
|
"<strong>Пользовательская история:</strong> Большая часть карты скрыта. Когда я делаю шаг, все клетки в определенном количестве клеток от меня становятся видимы.",
|
||||||
|
"<strong>Пользовательская история:</strong> Когда я побеждаю врага, враг исчезает, а я получаю очки опыта (XP), что увеличивает мой уровень.",
|
||||||
|
"<strong>Пользовательская история:</strong> Когда я веду бой с врагом, мы поочередно наносим друг-другу повреждения, до тех пор пока кто-нибудь не победит. Я наношу повреждения, которые зависят от моего уровня и моего оружия. Враг наносит повреждения, которые зависят от его уровня. Значение повреждений распределено случайным образом в некотором диапазоне.",
|
||||||
|
"<strong>Пользовательская история:</strong> Когад я нахожу и побеждаю босса, я выигрываю игру.",
|
||||||
|
"<strong>Пользовательская история:</strong> Игра должна быть интересной и достаточно сложной, но теоретически проходимой.",
|
||||||
|
"Если что-то не получается, не забывайте пользоваться методом <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Читай-Ищи-Спрашивай</a>.",
|
||||||
|
"Когда закончите, нажмите кнопку \"I've completed this challenge\" и укажите ссылку на вашу работу на CodePen.",
|
||||||
|
"Вы можете получить отзыв о вашем проекте от коллег, поделившись ссылкой на него в нашем <a href='//gitter.im/freecodecamp/codereview' target='_blank'>чате для рассмотрения кода</a>. Также вы можете поделиться ею через Twitter и на странице Free Code Camp вашего города на Facebook."
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "bd7150d8c442eddfafb5bd1c",
|
||||||
|
"title": "P2P Video Chat Application",
|
||||||
|
"description": [
|
||||||
|
"<strong>Objective:</strong> Build a <a href='https://hyperdev.com' target='_blank'>Hyperdev</a> app that is functionally similar to this: <a href='https://unequaled-cement.hyperdev.space' target='_blank'>https://unequaled-cement.hyperdev.space</a>.",
|
||||||
|
"Fulfill the below <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
|
||||||
|
"<strong>User Story:</strong> Upon arriving, the browser will prompt me to access my camera and microphone. ",
|
||||||
|
"<strong>User Story:</strong> After I give it permission, I am prompted to type in a room name.",
|
||||||
|
"<strong>User Story:</strong> Once I type in the room name, a room will be created if no room of that name existed before. ",
|
||||||
|
"<strong>User Story:</strong> A friend of mine can subsequently go to the same website, type in the same room I entered, and join the same room, then enter into a video chat with me. ",
|
||||||
|
"<strong>User Story:</strong> If I type in a room name, and there are already two people in that room, I get a notification that the room is full. ",
|
||||||
|
"<strong>User Story:</strong> Anyone can create or join any room. And there can be any number of rooms, but all of them must have unique names. ",
|
||||||
|
"<strong>User Story:</strong> I can choose to not permit the site to access my microphone and webcam. If I choose not to do this, if some other driver problem occurs, I see an error message saying these are required. ",
|
||||||
|
"<strong>User Story:</strong> When I choose to cancel the room name input step, or if I type in no name, or just spaces, it should again ask me again to type in a valid room name. ",
|
||||||
|
"<strong>User Story:</strong> If one of the two people in the room get disconnected, they can reconnect to the same room and continue chatting.",
|
||||||
|
"Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck.",
|
||||||
|
"When you are finished, click the \"I've completed this challenge\" button and include a link to your Hyperdev App.",
|
||||||
|
"You can get feedback on your project by sharing it with your friends on Facebook."
|
||||||
|
],
|
||||||
|
"challengeSeed": [],
|
||||||
|
"tests": [],
|
||||||
|
"type": "zipline",
|
||||||
|
"challengeType": 3,
|
||||||
|
"isRequired": false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "bd7198d8c242eddfaeb5bd13",
|
||||||
|
"title": "Show National Contiguity with a Force Directed Graph",
|
||||||
|
"description": [
|
||||||
|
"<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/FreeCodeCamp/full/xVopBo' target='_blank'>https://codepen.io/FreeCodeCamp/full/xVopBo</a>.",
|
||||||
|
"Fulfill the following <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
|
||||||
|
"<strong>User Story:</strong> I can see a Force-directed Graph that shows which countries share borders.",
|
||||||
|
"<strong>User Story:</strong> I can see each country's flag on its node.",
|
||||||
|
"<strong>Hint:</strong> Here's a dataset you can use to build this: <a href='https://raw.githubusercontent.com/DealPete/forceDirected/master/countries.json' target='_blank'>https://raw.githubusercontent.com/DealPete/forceDirected/master/countries.json</a>",
|
||||||
|
"<strong>Hint:</strong> You can create a spritesheet of national flags at <a href='https://www.flag-sprites.com' target='_blank'>https://www.flag-sprites.com</a>.",
|
||||||
|
"Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> 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": [
|
||||||
|
"etBaP3IdlIE"
|
||||||
|
],
|
||||||
|
"tests": [],
|
||||||
|
"isRequired": true,
|
||||||
|
"releasedOn": "January 1, 2016",
|
||||||
|
"type": "zipline",
|
||||||
|
"challengeType": 3,
|
||||||
|
"translations": {
|
||||||
|
"es": {
|
||||||
|
"title": "Muestra asociaciones utilizando un gráfico de fuerzas dirigidas",
|
||||||
|
"description": [
|
||||||
|
"<strong>Objetivo:</strong> Construye una aplicación en <a href='https://codepen.io' target='_blank'>CodePen.io</a> que funcione de forma similar al siguiente ejemplo: <a href='https://codepen.io/FreeCodeCamp/full/KVNNXY' target='_blank'>https://codepen.io/FreeCodeCamp/full/KVNNXY</a>.",
|
||||||
|
"<strong>Regla #1:</strong> No veas el código del proyecto de ejemplo. Encuentra la forma de hacerlo por tu cuenta.",
|
||||||
|
"<strong>Regla #2:</strong> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o API que sea necesaria. ¡Ponle un toque personal!.",
|
||||||
|
"<strong>Regla #3:</strong> Debes utilizar D3.js para construir este proyecto.",
|
||||||
|
"<strong>Historia de usuario:</strong> Puedo ver un gráfico de fuerza dirigida que muestra qué campistas están publicando enlaces en Camper News hacia qué dominios.",
|
||||||
|
"<strong>Historia de usuario:</strong> Puedo ver el icono de cada campista en su nodo respectivo.",
|
||||||
|
"<strong>Historia de usuario:</strong> Puedo ver la relación entre los campistas y los dominios que publican.",
|
||||||
|
"<strong>Historia de usuario:</strong> Puedo conocer aproximadamente cuántas veces los campistas han enlazado un dominio en particular a partir del tamaño del nodo respectivo.",
|
||||||
|
"<strong>Historia de usuario:</strong> Puedo conocer aproximadamente cuántas veces un campista específico ha publicado un enlace a partir del tamaño de su nodo.",
|
||||||
|
"<strong>Pista:</strong> La siguiente es la ruta del API de noticias de Camper News: <code>http://www.freecodecamp.com/news/hot</code>.",
|
||||||
|
"Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> si te sientes atascado.",
|
||||||
|
"Cuando termines, haz clic en el botón de \"I've completed this challenge\" e incluye el vínculo de tu proyecto en CodePen. ",
|
||||||
|
"Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Cuarto de revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "bd7108d8c242eddfaeb5bd13",
|
||||||
|
"title": "Map Data Across the Globe",
|
||||||
|
"description": [
|
||||||
|
"<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/FreeCodeCamp/full/mVEJag' target='_blank'>https://codepen.io/FreeCodeCamp/full/mVEJag</a>.",
|
||||||
|
"Fulfill the following <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
|
||||||
|
"<strong>User Story:</strong> I can see where all Meteorites landed on a world map.",
|
||||||
|
"<strong>User Story:</strong> I can tell the relative size of the meteorite, just by looking at the way it's represented on the map.",
|
||||||
|
"<strong>User Story:</strong> I can mouse over the meteorite's data point for additional data.",
|
||||||
|
"<strong>Hint:</strong> Here's a dataset you can use to build this: <a href='https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/meteorite-strike-data.json' target='_blank'>https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/meteorite-strike-data.json</a>",
|
||||||
|
"Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> 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": [
|
||||||
|
"kSAqct10gA0"
|
||||||
|
],
|
||||||
|
"tests": [],
|
||||||
|
"isRequired": true,
|
||||||
|
"releasedOn": "January 1, 2016",
|
||||||
|
"type": "zipline",
|
||||||
|
"challengeType": 3,
|
||||||
|
"translations": {
|
||||||
|
"es": {
|
||||||
|
"title": "Mapea datos a lo largo del Globo",
|
||||||
|
"description": [
|
||||||
|
"<strong>Objetivo:</strong> Construye una aplicación en <a href='https://codepen.io' target='_blank'>CodePen.io</a> que funcione de forma similar al siguiente ejemplo: <a href='https://codepen.io/FreeCodeCamp/full/mVEJag' target='_blank'>https://codepen.io/FreeCodeCamp/full/mVEJag</a>.",
|
||||||
|
"<strong>Regla #1:</strong> No veas el código del proyecto de ejemplo. Encuentra la forma de hacerlo por tu cuenta.",
|
||||||
|
"<strong>Regla #2:</strong> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o API que sea necesaria. ¡Ponle un toque personal!.",
|
||||||
|
"<strong>Regla #3:</strong> Debes utilizar D3.js para construir este proyecto.",
|
||||||
|
"<strong>Historia de usuario:</strong> Puedo ver a dónde cayeron todos los meteoritos en un mapa mundi.",
|
||||||
|
"<strong>Historia de usuario:</strong> Puedo distinguir el tamaño relativo de cada meteorito simplemente viendo la forma en que está representado en el mapa.",
|
||||||
|
"<strong>Historia de usuario:</strong> Puedo mover el ratón sobre el dato de cada meteorito para obtener información adicional.",
|
||||||
|
"<strong>Pista:</strong> Puedes utilizar el siguiente conjunto de datos para construir tu proyecto: <a href='https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/meteorite-strike-data.json' target='_blank'>https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/meteorite-strike-data.json</a>",
|
||||||
|
"Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> si te sientes atascado.",
|
||||||
|
"Cuando termines, haz clic en el botón de \"I've completed this challenge\" e incluye el vínculo de tu proyecto en CodePen. ",
|
||||||
|
"Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Cuarto de revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user