added missing translations (#31233)
This commit is contained in:
Lucas Cazeto
committed by
Randell Dawson
Randell Dawson
parent
a4198a6232
commit
dd74305cde
@ -8,7 +8,7 @@ localeTitle: Criar uma página da Web de portfólio pessoal
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/zNBOYG" target="_blank">https://codepen.io/freeCodeCamp/full/zNBOYG</a> . Cumpra as <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">histórias de usuário</a> abaixo e faça todos os testes para passar. Dê seu estilo pessoal. Você pode usar HTML, JavaScript e CSS para concluir este projeto. CSS simples é recomendado porque é isso que as lições cobriram até agora e você deve praticar com o CSS simples. Você pode usar o Bootstrap ou o SASS, se desejar. Tecnologias adicionais (por exemplo, jQuery, React, Angular ou Vue) não são recomendadas para este projeto, e usá-las é por sua conta e risco. Outros projetos lhe darão a chance de trabalhar com diferentes pilhas de tecnologia, como o React. Aceitaremos e tentaremos corrigir todos os relatórios de problemas que usam a pilha de tecnologia sugerida para este projeto. Bom divertimento! <strong>História do Usuário # 1:</strong> Meu portfólio deve ter uma seção de <code>welcome-section</code> com um id de <code>welcome-section</code> de <code>welcome-section</code> . <strong>História do Usuário # 2:</strong> A seção de boas-vindas deve ter um elemento <code>h1</code> que contenha texto. <strong>História do Usuário # 3:</strong> Meu portfólio deve ter uma seção de projetos com um id de <code>projects</code> . <strong>História do Usuário # 4:</strong> A seção de projetos deve conter pelo menos um elemento com uma classe de <code>project-tile</code> de <code>project-tile</code> para manter um projeto. <strong>História do Usuário # 5:</strong> A seção de projetos deve conter pelo menos um link para um projeto. <strong>História do Usuário # 6:</strong> Meu portfólio deve ter uma barra de navegação com um id de <code>navbar</code> . <strong>História do Usuário # 7:</strong> A barra de navegação deve conter pelo menos um link no qual eu possa clicar para navegar em diferentes seções da página. <strong>História do Usuário # 8:</strong> Meu portfólio deve ter um link com um id de <code>profile-link</code> , que abre meu perfil do GitHub ou FCC em uma nova guia. <strong>História do Usuário # 9:</strong> Meu portfólio deve ter pelo menos uma consulta de mídia. <strong>História do Usuário # 10:</strong> A altura da seção de boas vindas deve ser igual à altura da viewport. <strong>História do Usuário # 11:</strong> A barra de navegação deve estar sempre no topo da viewport. Você pode criar seu projeto, bifurcando <a href="http://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">essa caneta CodePen</a> . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método <a href="https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. </section>
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/zNBOYG" target="_blank">https://codepen.io/freeCodeCamp/full/zNBOYG</a> . Cumpra as <a href="https://pt.wikipedia.org/wiki/História_de_usuário" target="_blank">histórias de usuário</a> abaixo e faça todos os testes para passar. Dê seu estilo pessoal. Você pode usar HTML, JavaScript e CSS para concluir este projeto. CSS simples é recomendado porque é isso que as lições cobriram até agora e você deve praticar com o CSS simples. Você pode usar o Bootstrap ou o SASS, se desejar. Tecnologias adicionais (por exemplo, jQuery, React, Angular ou Vue) não são recomendadas para este projeto, e usá-las é por sua conta e risco. Outros projetos lhe darão a chance de trabalhar com diferentes pilhas de tecnologia, como o React. Aceitaremos e tentaremos corrigir todos os relatórios de problemas que usam a pilha de tecnologia sugerida para este projeto. Bom divertimento! <strong>História do Usuário # 1:</strong> Meu portfólio deve ter uma seção de <code>welcome-section</code> com um id de <code>welcome-section</code> de <code>welcome-section</code> . <strong>História de usuário # 2:</strong> A seção de boas-vindas deve ter um elemento <code>h1</code> que contenha texto. <strong>História de usuário # 3:</strong> Meu portfólio deve ter uma seção de projetos com um id de <code>projects</code> . <strong>História de usuário # 4:</strong> A seção de projetos deve conter pelo menos um elemento com uma classe de <code>project-tile</code> de <code>project-tile</code> para manter um projeto. <strong>História de usuário # 5:</strong> A seção de projetos deve conter pelo menos um link para um projeto. <strong>História de usuário # 6:</strong> Meu portfólio deve ter uma barra de navegação com um id de <code>navbar</code> . <strong>História de usuário # 7:</strong> A barra de navegação deve conter pelo menos um link no qual eu possa clicar para navegar em diferentes seções da página. <strong>História de usuário # 8:</strong> Meu portfólio deve ter um link com um id de <code>profile-link</code> , que abre meu perfil do GitHub ou FCC em uma nova guia. <strong>História de usuário # 9:</strong> Meu portfólio deve ter pelo menos uma consulta de mídia. <strong>História de usuário # 10:</strong> A altura da seção de boas vindas deve ser igual à altura da viewport. <strong>História de usuário # 11:</strong> A barra de navegação deve estar sempre no topo da viewport. Você pode criar seu projeto, bifurcando <a href="http://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">essa caneta CodePen</a> . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método <a href="https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">
|
||||
|
||||
@ -8,7 +8,7 @@ localeTitle: Construa uma página de destino do produto
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/RKRbwL" target="_blank">https://codepen.io/freeCodeCamp/full/RKRbwL</a> . Cumpra as <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">histórias de usuário</a> abaixo e faça todos os testes para passar. Dê seu estilo pessoal. Você pode usar HTML, JavaScript e CSS para concluir este projeto. CSS simples é recomendado porque é isso que as lições cobriram até agora e você deve praticar com o CSS simples. Você pode usar o Bootstrap ou o SASS, se desejar. Tecnologias adicionais (por exemplo, jQuery, React, Angular ou Vue) não são recomendadas para este projeto, e usá-las é por sua conta e risco. Outros projetos lhe darão a chance de trabalhar com diferentes pilhas de tecnologia, como o React. Aceitaremos e tentaremos corrigir todos os relatórios de problemas que usam a pilha de tecnologia sugerida para este projeto. Bom divertimento! <strong>História do usuário nº 1: a</strong> página de destino do meu produto deve ter um elemento de <code>header</code> com um <code>id="header"</code> . <strong>User Story # 2:</strong> Eu posso ver uma imagem dentro do elemento <code>header</code> com um <code>id="header-img"</code> . Um logotipo da empresa faria uma boa imagem aqui. <strong>User Story # 3:</strong> Dentro do elemento <code>#header</code> eu posso ver um elemento <code>nav</code> com uma <code>id="nav-bar"</code> . <strong>História do usuário nº 4:</strong> posso ver pelo menos três elementos clicáveis dentro do elemento <code>nav</code> , cada um com o <code>nav-link</code> class. <strong>User Story # 5:</strong> Quando eu clico em um botão <code>.nav-link</code> no elemento <code>nav</code> , sou levado para a seção correspondente da página de destino. <strong>História do usuário nº 6:</strong> posso assistir a um vídeo do produto incorporado com <code>id="video"</code> . <strong>User Story # 7:</strong> Minha landing page tem um elemento <code>form</code> com um <code>id="form"</code> . <strong>User Story # 8:</strong> Dentro do formulário, há um campo de <code>input</code> com <code>id="email"</code> onde posso inserir um endereço de email. <strong>User Story # 9:</strong> O campo de entrada <code>#email</code> deve ter um texto de espaço reservado para que o usuário saiba para que serve o campo. <strong>User Story # 10:</strong> O campo de entrada <code>#email</code> usa a validação HTML5 para confirmar que o texto digitado é um endereço de e-mail. <strong>User Story # 11:</strong> Dentro do formulário, há uma <code>input</code> envio com um <code>id="submit"</code> . <strong>User Story # 12:</strong> Quando clico no elemento <code>#submit</code> , o email é enviado para uma página estática (use este URL de simulação: <a href="https://www.freecodecamp.com/email-submit" target="_blank">https://www.freecodecamp.com/email-submit</a> ) que confirma que o endereço de email foi digitado e que postou com sucesso. <strong>User Story # 13:</strong> A barra de navegação deve estar sempre no topo da viewport. <strong>História do usuário nº 14: a</strong> página de destino do meu produto deve ter pelo menos uma consulta de mídia. <strong>User Story # 15:</strong> A página de destino do meu produto deve utilizar o flexbox CSS pelo menos uma vez. Você pode criar seu projeto, bifurcando <a href="http://codepen.io/freeCodeCamp/full/MJjpwO" target="_blank">essa caneta CodePen</a> . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método <a href="https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. </section>
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/RKRbwL" target="_blank">https://codepen.io/freeCodeCamp/full/RKRbwL</a> . Cumpra as <a href="https://pt.wikipedia.org/wiki/História_de_usuário" target="_blank">histórias de usuário</a> abaixo e faça todos os testes para passar. Dê seu estilo pessoal. Você pode usar HTML, JavaScript e CSS para concluir este projeto. CSS simples é recomendado porque é isso que as lições cobriram até agora e você deve praticar com o CSS simples. Você pode usar o Bootstrap ou o SASS, se desejar. Tecnologias adicionais (por exemplo, jQuery, React, Angular ou Vue) não são recomendadas para este projeto, e usá-las é por sua conta e risco. Outros projetos lhe darão a chance de trabalhar com diferentes pilhas de tecnologia, como o React. Aceitaremos e tentaremos corrigir todos os relatórios de problemas que usam a pilha de tecnologia sugerida para este projeto. Bom divertimento! <strong>História do usuário nº 1: a</strong> página de destino do meu produto deve ter um elemento de <code>header</code> com um <code>id="header"</code> . <strong>História de usuário # 2:</strong> Eu posso ver uma imagem dentro do elemento <code>header</code> com um <code>id="header-img"</code> . Um logotipo da empresa faria uma boa imagem aqui. <strong>História de usuário # 3:</strong> Dentro do elemento <code>#header</code> eu posso ver um elemento <code>nav</code> com uma <code>id="nav-bar"</code> . <strong>História do usuário nº 4:</strong> posso ver pelo menos três elementos clicáveis dentro do elemento <code>nav</code> , cada um com o <code>nav-link</code> class. <strong>História de usuário # 5:</strong> Quando eu clico em um botão <code>.nav-link</code> no elemento <code>nav</code> , sou levado para a seção correspondente da página de destino. <strong>História do usuário nº 6:</strong> posso assistir a um vídeo do produto incorporado com <code>id="video"</code> . <strong>História de usuário # 7:</strong> Minha landing page tem um elemento <code>form</code> com um <code>id="form"</code> . <strong>História de usuário # 8:</strong> Dentro do formulário, há um campo de <code>input</code> com <code>id="email"</code> onde posso inserir um endereço de email. <strong>História de usuário # 9:</strong> O campo de entrada <code>#email</code> deve ter um texto de espaço reservado para que o usuário saiba para que serve o campo. <strong>História de usuário # 10:</strong> O campo de entrada <code>#email</code> usa a validação HTML5 para confirmar que o texto digitado é um endereço de e-mail. <strong>História de usuário # 11:</strong> Dentro do formulário, há uma <code>input</code> envio com um <code>id="submit"</code> . <strong>História de usuário # 12:</strong> Quando clico no elemento <code>#submit</code> , o email é enviado para uma página estática (use este URL de simulação: <a href="https://www.freecodecamp.com/email-submit" target="_blank">https://www.freecodecamp.com/email-submit</a> ) que confirma que o endereço de email foi digitado e que postou com sucesso. <strong>História de usuário # 13:</strong> A barra de navegação deve estar sempre no topo da viewport. <strong>História do usuário nº 14: a</strong> página de destino do meu produto deve ter pelo menos uma consulta de mídia. <strong>História de usuário # 15:</strong> A página de destino do meu produto deve utilizar o flexbox CSS pelo menos uma vez. Você pode criar seu projeto, bifurcando <a href="http://codepen.io/freeCodeCamp/full/MJjpwO" target="_blank">essa caneta CodePen</a> . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método <a href="https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">
|
||||
|
||||
@ -8,7 +8,7 @@ localeTitle: Criar um formulário de pesquisa
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/VPaoNP" target="_blank">https://codepen.io/freeCodeCamp/full/VPaoNP</a> . Cumpra as <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">histórias de usuário</a> abaixo e faça todos os testes para passar. Dê seu estilo pessoal. Você pode usar HTML, JavaScript e CSS para concluir este projeto. CSS simples é recomendado porque é isso que as lições cobriram até agora e você deve praticar com o CSS simples. Você pode usar o Bootstrap ou o SASS, se desejar. Tecnologias adicionais (por exemplo, jQuery, React, Angular ou Vue) não são recomendadas para este projeto, e usá-las é por sua conta e risco. Outros projetos lhe darão a chance de trabalhar com diferentes pilhas de tecnologia, como o React. Aceitaremos e tentaremos corrigir todos os relatórios de problemas que usam a pilha de tecnologia sugerida para este projeto. Bom divertimento! <strong>História do usuário 1:</strong> posso ver um título com <code>id="title"</code> em tamanho de texto H1. <strong>User Story # 2:</strong> Eu posso ver uma breve explicação com <code>id="description"</code> em P tamanho do texto. <strong>User Story # 3:</strong> posso ver um <code>form</code> com <code>id="survey-form"</code> . <strong>User Story # 4:</strong> Dentro do elemento form, eu tenho que inserir meu nome em um campo com <code>id="name"</code> . <strong>User Story # 5:</strong> Dentro do elemento form, eu tenho que inserir um email em um campo com <code>id="email"</code> . <strong>História do usuário nº 6:</strong> se eu inserir um e-mail que não esteja formatado corretamente, verei um erro de validação do HTML5. <strong>User Story # 7:</strong> Dentro do formulário, posso inserir um número em um campo com <code>id="number"</code> . <strong>História do usuário nº 8:</strong> se eu inserir números diferentes na entrada do número, verei um erro de validação do HTML5. <strong>User Story # 9:</strong> Se eu inserir números fora do intervalo da entrada do número, que são definidos pelos atributos <code>min</code> e <code>max</code> , verei um erro de validação HTML5. <strong>User Story # 10:</strong> Para os campos de entrada de nome, email e número dentro do formulário, posso ver rótulos correspondentes que descrevem o objetivo de cada campo com os seguintes IDs: <code>id="name-label"</code> , <code>id="email-label"</code> e <code>id="number-label"</code> . <strong>História do usuário nº 11:</strong> para os campos de entrada de nome, e-mail e número, posso ver o texto do marcador de posição que fornece uma descrição ou instruções para cada campo. <strong>User Story # 12:</strong> Dentro do elemento form, posso selecionar uma opção em um menu suspenso que tenha um <code>id="dropdown"</code> . <strong>User Story # 13:</strong> Dentro do elemento form, posso selecionar um campo de um ou mais grupos de botões de opção. Cada grupo deve ser agrupado usando o atributo <code>name</code> . <strong>User Story # 14:</strong> Dentro do elemento form, posso selecionar vários campos de uma série de checkboxes, cada um dos quais deve ter um atributo <code>value</code> . <strong>User Story # 15:</strong> Dentro do elemento form, é apresentada uma <code>textarea</code> no final para comentários adicionais. <strong>User Story # 16:</strong> Dentro do elemento form, eu recebi um botão com <code>id="submit"</code> para enviar todas as minhas entradas. Você pode criar seu projeto, bifurcando <a href="http://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">essa caneta CodePen</a> . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método <a href="https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. </section>
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/VPaoNP" target="_blank">https://codepen.io/freeCodeCamp/full/VPaoNP</a> . Cumpra as <a href="https://pt.wikipedia.org/wiki/História_de_usuário" target="_blank">histórias de usuário</a> abaixo e faça todos os testes para passar. Dê seu estilo pessoal. Você pode usar HTML, JavaScript e CSS para concluir este projeto. CSS simples é recomendado porque é isso que as lições cobriram até agora e você deve praticar com o CSS simples. Você pode usar o Bootstrap ou o SASS, se desejar. Tecnologias adicionais (por exemplo, jQuery, React, Angular ou Vue) não são recomendadas para este projeto, e usá-las é por sua conta e risco. Outros projetos lhe darão a chance de trabalhar com diferentes pilhas de tecnologia, como o React. Aceitaremos e tentaremos corrigir todos os relatórios de problemas que usam a pilha de tecnologia sugerida para este projeto. Bom divertimento! <strong>História do usuário 1:</strong> posso ver um título com <code>id="title"</code> em tamanho de texto H1. <strong>História de usuário # 2:</strong> Eu posso ver uma breve explicação com <code>id="description"</code> em P tamanho do texto. <strong>História de usuário # 3:</strong> posso ver um <code>form</code> com <code>id="survey-form"</code> . <strong>História de usuário # 4:</strong> Dentro do elemento form, eu tenho que inserir meu nome em um campo com <code>id="name"</code> . <strong>História de usuário # 5:</strong> Dentro do elemento form, eu tenho que inserir um email em um campo com <code>id="email"</code> . <strong>História do usuário nº 6:</strong> se eu inserir um e-mail que não esteja formatado corretamente, verei um erro de validação do HTML5. <strong>História de usuário # 7:</strong> Dentro do formulário, posso inserir um número em um campo com <code>id="number"</code> . <strong>História do usuário nº 8:</strong> se eu inserir números diferentes na entrada do número, verei um erro de validação do HTML5. <strong>História de usuário # 9:</strong> Se eu inserir números fora do intervalo da entrada do número, que são definidos pelos atributos <code>min</code> e <code>max</code> , verei um erro de validação HTML5. <strong>História de usuário # 10:</strong> Para os campos de entrada de nome, email e número dentro do formulário, posso ver rótulos correspondentes que descrevem o objetivo de cada campo com os seguintes IDs: <code>id="name-label"</code> , <code>id="email-label"</code> e <code>id="number-label"</code> . <strong>História do usuário nº 11:</strong> para os campos de entrada de nome, e-mail e número, posso ver o texto do marcador de posição que fornece uma descrição ou instruções para cada campo. <strong>História de usuário # 12:</strong> Dentro do elemento form, posso selecionar uma opção em um menu suspenso que tenha um <code>id="dropdown"</code> . <strong>História de usuário # 13:</strong> Dentro do elemento form, posso selecionar um campo de um ou mais grupos de botões de opção. Cada grupo deve ser agrupado usando o atributo <code>name</code> . <strong>História de usuário # 14:</strong> Dentro do elemento form, posso selecionar vários campos de uma série de checkboxes, cada um dos quais deve ter um atributo <code>value</code> . <strong>História de usuário # 15:</strong> Dentro do elemento form, é apresentada uma <code>textarea</code> no final para comentários adicionais. <strong>História de usuário # 16:</strong> Dentro do elemento form, eu recebi um botão com <code>id="submit"</code> para enviar todas as minhas entradas. Você pode criar seu projeto, bifurcando <a href="http://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">essa caneta CodePen</a> . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método <a href="https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -8,7 +8,7 @@ localeTitle: Construa uma página de homenagem
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/zNqgVx" target="_blank">https://codepen.io/freeCodeCamp/full/zNqgVx</a> . Cumpra as <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">histórias de usuário</a> abaixo e faça todos os testes para passar. Dê seu estilo pessoal. Você pode usar HTML, JavaScript e CSS para concluir este projeto. CSS simples é recomendado porque é isso que as lições cobriram até agora e você deve praticar com o CSS simples. Você pode usar o Bootstrap ou o SASS, se desejar. Tecnologias adicionais (por exemplo, jQuery, React, Angular ou Vue) não são recomendadas para este projeto, e usá-las é por sua conta e risco. Outros projetos lhe darão a chance de trabalhar com diferentes pilhas de tecnologia, como o React. Aceitaremos e tentaremos corrigir todos os relatórios de problemas que usam a pilha de tecnologia sugerida para este projeto. Bom divertimento! <strong>User Story # 1:</strong> Minha página de tributo deve ter um elemento com um <code>id="main"</code> , que contém todos os outros elementos. <strong>User Story # 2:</strong> Eu deveria ver um elemento com um <code>id="title"</code> , que contém uma string (ou seja, texto) que descreve o assunto da página do tributo (por exemplo, "Dr. Norman Borlaug"). <strong>User Story # 3:</strong> Eu deveria ver um elemento <code>div</code> com um <code>id="img-div"</code> . <strong>User Story # 4:</strong> Dentro do elemento <code>img-div</code> , eu deveria ver um elemento <code>img</code> com uma <code>id="image"</code> . <strong>User Story # 5:</strong> Dentro do elemento <code>img-div</code> , eu deveria ver um elemento com um <code>id="img-caption"</code> que contém conteúdo textual descrevendo a imagem mostrada em <code>img-div</code> . <strong>User Story # 6:</strong> Eu deveria ver um elemento com um correspondente <code>id="tribute-info"</code> , que contém conteúdo textual descrevendo o assunto da página de tributo. <strong>User Story # 7:</strong> Eu deveria ver <code>a</code> elemento com um <code>id="tribute-link"</code> , que direciona para um site externo que contém informações adicionais sobre o assunto da página do tributo. DICA: Você deve dar ao seu elemento um atributo de <code>target</code> e configurá-lo para <code>_blank</code> para que seu link seja aberto em uma nova guia (ou seja, <code>target="_blank"</code> ). <strong>User Story # 8:</strong> O elemento <code>img</code> deve redimensionar responsavelmente, em relação à largura de seu elemento pai, sem exceder seu tamanho original. <strong>User Story # 9:</strong> O elemento <code>img</code> deve estar centrado dentro de seu elemento pai. Você pode criar seu projeto, bifurcando <a href="http://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">essa caneta CodePen</a> . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> . Quando terminar, envie o URL para o seu projeto de trabalho com todos os testes sendo aprovados. Lembre-se de usar o método <a href="https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. </section>
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/zNqgVx" target="_blank">https://codepen.io/freeCodeCamp/full/zNqgVx</a> . Cumpra as <a href="https://pt.wikipedia.org/wiki/História_de_usuário" target="_blank">histórias de usuário</a> abaixo e faça todos os testes para passar. Dê seu estilo pessoal. Você pode usar HTML, JavaScript e CSS para concluir este projeto. CSS simples é recomendado porque é isso que as lições cobriram até agora e você deve praticar com o CSS simples. Você pode usar o Bootstrap ou o SASS, se desejar. Tecnologias adicionais (por exemplo, jQuery, React, Angular ou Vue) não são recomendadas para este projeto, e usá-las é por sua conta e risco. Outros projetos lhe darão a chance de trabalhar com diferentes pilhas de tecnologia, como o React. Aceitaremos e tentaremos corrigir todos os relatórios de problemas que usam a pilha de tecnologia sugerida para este projeto. Bom divertimento! <strong>História de usuário # 1:</strong> Minha página de tributo deve ter um elemento com um <code>id="main"</code> , que contém todos os outros elementos. <strong>História de usuário # 2:</strong> Eu deveria ver um elemento com um <code>id="title"</code> , que contém uma string (ou seja, texto) que descreve o assunto da página do tributo (por exemplo, "Dr. Norman Borlaug"). <strong>História de usuário # 3:</strong> Eu deveria ver um elemento <code>div</code> com um <code>id="img-div"</code> . <strong>História de usuário # 4:</strong> Dentro do elemento <code>img-div</code> , eu deveria ver um elemento <code>img</code> com uma <code>id="image"</code> . <strong>História de usuário # 5:</strong> Dentro do elemento <code>img-div</code> , eu deveria ver um elemento com um <code>id="img-caption"</code> que contém conteúdo textual descrevendo a imagem mostrada em <code>img-div</code> . <strong>História de usuário # 6:</strong> Eu deveria ver um elemento com um correspondente <code>id="tribute-info"</code> , que contém conteúdo textual descrevendo o assunto da página de tributo. <strong>História de usuário # 7:</strong> Eu deveria ver <code>a</code> elemento com um <code>id="tribute-link"</code> , que direciona para um site externo que contém informações adicionais sobre o assunto da página do tributo. DICA: Você deve dar ao seu elemento um atributo de <code>target</code> e configurá-lo para <code>_blank</code> para que seu link seja aberto em uma nova guia (ou seja, <code>target="_blank"</code> ). <strong>História de usuário # 8:</strong> O elemento <code>img</code> deve redimensionar responsavelmente, em relação à largura de seu elemento pai, sem exceder seu tamanho original. <strong>História de usuário # 9:</strong> O elemento <code>img</code> deve estar centrado dentro de seu elemento pai. Você pode criar seu projeto, bifurcando <a href="http://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">essa caneta CodePen</a> . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> . Quando terminar, envie o URL para o seu projeto de trabalho com todos os testes sendo aprovados. Lembre-se de usar o método <a href="https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">
|
||||
|
||||
@ -8,7 +8,7 @@ localeTitle: Construa uma máquina de ritmos
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/MJyNMd" target="_blank">https://codepen.io/freeCodeCamp/full/MJyNMd</a> . Cumpra as <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">histórias de usuário</a> abaixo e faça todos os testes para passar. Dê seu estilo pessoal. Você pode usar qualquer combinação de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e jQuery para concluir este projeto. Você deve usar um framework frontend (como o React, por exemplo), porque esta seção é sobre o aprendizado de frameworks frontend. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos procurando dar suporte a outros frameworks frontend como Angular e Vue, mas eles não são suportados atualmente. Aceitaremos e tentaremos corrigir todos os relatórios de problemas que usam a pilha de tecnologia sugerida para este projeto. Bom divertimento! <strong>User Story # 1:</strong> Eu deveria ser capaz de ver um container externo com um <code>id="drum-machine"</code> que contém todos os outros elementos. <strong>User Story # 2:</strong> Dentro de <code>#drum-machine</code> eu posso ver um elemento com um <code>id="display"</code> . <strong>User Story # 3:</strong> Dentro de <code>#drum-machine</code> eu posso ver 9 elementos de drum pad clicáveis, cada um com um nome de classe de <code>drum-pad</code> , um id único que descreve o clipe de áudio que o drum pad será configurado para acionar e um inner texto que corresponde a uma das seguintes teclas no teclado: Q, W, E, A, S, D, Z, X, C. Os pads de bateria DEVEM estar nesta ordem. <strong>User Story # 4:</strong> Dentro de cada <code>.drum-pad</code> , deve haver um elemento de <code>audio</code> HTML5 que tenha um atributo <code>src</code> apontando para um clipe de áudio, um nome de classe de <code>clip</code> e um id correspondente ao texto interno de seu pai <code>.drum-pad</code> (por exemplo, <code>id="Q"</code> , <code>id="W"</code> , <code>id="E"</code> etc.). <strong>User Story # 5:</strong> Quando clico em um elemento <code>.drum-pad</code> , o clipe de áudio contido em seu elemento de <code>audio</code> filho deve ser acionado. <strong>User Story # 6:</strong> Quando eu pressiono a tecla trigger associada a cada <code>.drum-pad</code> , o clipe de áudio contido em seu elemento filho de <code>audio</code> deve ser acionado (por exemplo, pressionar a tecla Q deve acionar o bloco de percussão que contém a string "Q" pressionar a tecla W deve acionar o bloco de percussão que contém a string "W", etc.). <strong>User Story # 7:</strong> Quando um <code>.drum-pad</code> é acionado, uma string descrevendo o clipe de áudio associado é exibida como o texto interno do elemento <code>#display</code> (cada string deve ser única). Você pode criar seu projeto, bifurcando <a href="http://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">essa caneta CodePen</a> . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método <a href="https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. </section>
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/MJyNMd" target="_blank">https://codepen.io/freeCodeCamp/full/MJyNMd</a> . Cumpra as <a href="https://pt.wikipedia.org/wiki/História_de_usuário" target="_blank">histórias de usuário</a> abaixo e faça todos os testes para passar. Dê seu estilo pessoal. Você pode usar qualquer combinação de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e jQuery para concluir este projeto. Você deve usar um framework frontend (como o React, por exemplo), porque esta seção é sobre o aprendizado de frameworks frontend. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos procurando dar suporte a outros frameworks frontend como Angular e Vue, mas eles não são suportados atualmente. Aceitaremos e tentaremos corrigir todos os relatórios de problemas que usam a pilha de tecnologia sugerida para este projeto. Bom divertimento! <strong>História de usuário # 1:</strong> Eu deveria ser capaz de ver um container externo com um <code>id="drum-machine"</code> que contém todos os outros elementos. <strong>História de usuário # 2:</strong> Dentro de <code>#drum-machine</code> eu posso ver um elemento com um <code>id="display"</code> . <strong>História de usuário # 3:</strong> Dentro de <code>#drum-machine</code> eu posso ver 9 elementos de drum pad clicáveis, cada um com um nome de classe de <code>drum-pad</code> , um id único que descreve o clipe de áudio que o drum pad será configurado para acionar e um inner texto que corresponde a uma das seguintes teclas no teclado: Q, W, E, A, S, D, Z, X, C. Os pads de bateria DEVEM estar nesta ordem. <strong>História de usuário # 4:</strong> Dentro de cada <code>.drum-pad</code> , deve haver um elemento de <code>audio</code> HTML5 que tenha um atributo <code>src</code> apontando para um clipe de áudio, um nome de classe de <code>clip</code> e um id correspondente ao texto interno de seu pai <code>.drum-pad</code> (por exemplo, <code>id="Q"</code> , <code>id="W"</code> , <code>id="E"</code> etc.). <strong>História de usuário # 5:</strong> Quando clico em um elemento <code>.drum-pad</code> , o clipe de áudio contido em seu elemento de <code>audio</code> filho deve ser acionado. <strong>História de usuário # 6:</strong> Quando eu pressiono a tecla trigger associada a cada <code>.drum-pad</code> , o clipe de áudio contido em seu elemento filho de <code>audio</code> deve ser acionado (por exemplo, pressionar a tecla Q deve acionar o bloco de percussão que contém a string "Q" pressionar a tecla W deve acionar o bloco de percussão que contém a string "W", etc.). <strong>História de usuário # 7:</strong> Quando um <code>.drum-pad</code> é acionado, uma string descrevendo o clipe de áudio associado é exibida como o texto interno do elemento <code>#display</code> (cada string deve ser única). Você pode criar seu projeto, bifurcando <a href="http://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">essa caneta CodePen</a> . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método <a href="https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -8,7 +8,7 @@ localeTitle: Criar um visualizador de markdown
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/GrZVVO" target="_blank">https://codepen.io/freeCodeCamp/full/GrZVVO</a> . Cumpra as <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">histórias de usuário</a> abaixo e faça todos os testes para passar. Dê seu estilo pessoal. Você pode usar qualquer combinação de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e jQuery para concluir este projeto. Você deve usar um framework frontend (como o React, por exemplo), porque esta seção é sobre o aprendizado de frameworks frontend. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos procurando dar suporte a outros frameworks frontend como Angular e Vue, mas eles não são suportados atualmente. Aceitaremos e tentaremos corrigir todos os relatórios de problemas que usam a pilha de tecnologia sugerida para este projeto. Bom divertimento! <strong>User Story # 1:</strong> Eu posso ver um elemento <code>textarea</code> com um <code>id="editor"</code> . <strong>User Story # 2:</strong> Eu posso ver um elemento com um <code>id="preview"</code> . <strong>História do usuário nº 3:</strong> quando eu <code>#editor</code> texto no elemento <code>#editor</code> , o elemento <code>#preview</code> é atualizado enquanto digito para exibir o conteúdo da área de texto. <strong>User Story # 4:</strong> Quando eu <code>#editor</code> o markdown com sabor do GitHub no elemento <code>#editor</code> , o texto é renderizado como HTML no elemento <code>#preview</code> enquanto digito (DICA: você não precisa analisar o Markdown por conta própria - você pode importar a biblioteca Marked para isso: <a href="https://cdnjs.com/libraries/marked" target="_blank">https://cdnjs.com/libraries/marked</a> ). <strong>User Story # 5:</strong> Quando meu visualizador de markdown é carregado pela primeira vez, o texto padrão no campo <code>#editor</code> deve conter um markdown válido que represente pelo menos um de cada um dos seguintes elementos: um cabeçalho (tamanho H1), um sub cabeçalho (tamanho H2) , um link, um código embutido, um bloco de código, um item de lista, um blockquote, uma imagem e um texto em negrito. <strong>User Story # 6:</strong> quando meu visualizador de markdown é carregado pela primeira vez, o markdown padrão no campo <code>#editor</code> deve ser renderizado como HTML no elemento <code>#preview</code> . <strong>Bônus opcional (você não precisa fazer esse teste passar):</strong> Meu visualizador de marcação interpreta os retornos de carro e os renderiza como elementos <code>br</code> (quebra de linha). Você pode criar seu projeto, bifurcando <a href="http://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">essa caneta CodePen</a> . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método <a href="https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. </section>
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/GrZVVO" target="_blank">https://codepen.io/freeCodeCamp/full/GrZVVO</a> . Cumpra as <a href="https://pt.wikipedia.org/wiki/História_de_usuário" target="_blank">histórias de usuário</a> abaixo e faça todos os testes para passar. Dê seu estilo pessoal. Você pode usar qualquer combinação de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e jQuery para concluir este projeto. Você deve usar um framework frontend (como o React, por exemplo), porque esta seção é sobre o aprendizado de frameworks frontend. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos procurando dar suporte a outros frameworks frontend como Angular e Vue, mas eles não são suportados atualmente. Aceitaremos e tentaremos corrigir todos os relatórios de problemas que usam a pilha de tecnologia sugerida para este projeto. Bom divertimento! <strong>História de usuário # 1:</strong> Eu posso ver um elemento <code>textarea</code> com um <code>id="editor"</code> . <strong>História de usuário # 2:</strong> Eu posso ver um elemento com um <code>id="preview"</code> . <strong>História do usuário nº 3:</strong> quando eu <code>#editor</code> texto no elemento <code>#editor</code> , o elemento <code>#preview</code> é atualizado enquanto digito para exibir o conteúdo da área de texto. <strong>História de usuário # 4:</strong> Quando eu <code>#editor</code> o markdown com sabor do GitHub no elemento <code>#editor</code> , o texto é renderizado como HTML no elemento <code>#preview</code> enquanto digito (DICA: você não precisa analisar o Markdown por conta própria - você pode importar a biblioteca Marked para isso: <a href="https://cdnjs.com/libraries/marked" target="_blank">https://cdnjs.com/libraries/marked</a> ). <strong>História de usuário # 5:</strong> Quando meu visualizador de markdown é carregado pela primeira vez, o texto padrão no campo <code>#editor</code> deve conter um markdown válido que represente pelo menos um de cada um dos seguintes elementos: um cabeçalho (tamanho H1), um sub cabeçalho (tamanho H2) , um link, um código embutido, um bloco de código, um item de lista, um blockquote, uma imagem e um texto em negrito. <strong>História de usuário # 6:</strong> quando meu visualizador de markdown é carregado pela primeira vez, o markdown padrão no campo <code>#editor</code> deve ser renderizado como HTML no elemento <code>#preview</code> . <strong>Bônus opcional (você não precisa fazer esse teste passar):</strong> Meu visualizador de marcação interpreta os retornos de carro e os renderiza como elementos <code>br</code> (quebra de linha). Você pode criar seu projeto, bifurcando <a href="http://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">essa caneta CodePen</a> . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método <a href="https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -8,7 +8,7 @@ localeTitle: Construa uma máquina de cotação aleatória
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/qRZeGZ" target="_blank">https://codepen.io/freeCodeCamp/full/qRZeGZ</a> . Cumpra as <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">histórias de usuário</a> abaixo e faça todos os testes para passar. Dê seu estilo pessoal. Você pode usar qualquer combinação de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e jQuery para concluir este projeto. Você deve usar um framework frontend (como o React, por exemplo), porque esta seção é sobre o aprendizado de frameworks frontend. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos procurando dar suporte a outros frameworks frontend como Angular e Vue, mas eles não são suportados atualmente. Aceitaremos e tentaremos corrigir todos os relatórios de problemas que usam a pilha de tecnologia sugerida para este projeto. Bom divertimento! <strong>User Story # 1:</strong> Eu posso ver um elemento wrapper com um <code>id="quote-box"</code> . <strong>User Story # 2:</strong> Dentro de <code>#quote-box</code> , posso ver um elemento com um <code>id="text"</code> . <strong>User Story # 3:</strong> dentro de <code>#quote-box</code> , posso ver um elemento com um <code>id="author"</code> . <strong>User Story # 4:</strong> dentro de <code>#quote-box</code> , posso ver um elemento clicável com um <code>id="new-quote"</code> . <strong>User Story # 5:</strong> dentro de <code>#quote-box</code> , posso ver um clicável <codea< code=""> elemento com um correspondente <code>id="tweet-quote"</code> . <strong>User Story # 6:</strong> No primeiro carregamento, minha máquina de cotação exibe uma cotação aleatória no elemento com <code>id="text"</code> . <strong>User Story # 7:</strong> No primeiro carregamento, minha máquina de cotação exibe o autor da citação aleatória no elemento com <code>id="author"</code> . <strong>User Story # 8:</strong> Quando o botão <code>#new-quote</code> é clicado, minha máquina de cotação deve buscar uma nova cotação e exibi-la no elemento <code>#text</code> . <strong>User Story # 9:</strong> Minha máquina de cotação deve buscar o autor da nova cotação quando o botão <code>#new-quote</code> for clicado e exibi-lo no elemento <code>#author</code> . <strong>User Story # 10:</strong> Eu posso twittar a citação atual clicando no elemento <code>#tweet-quote</code> <code>a</code> . Este <code>a</code> elemento deve incluir o <code>"twitter.com/intent/tweet"</code> caminho em que é <code>href</code> atributo para twittar a cotação atual. <strong>User Story # 11:</strong> O elemento wrapper <code>#quote-box</code> deve ser centrado horizontalmente. Por favor, execute testes com o nível de zoom do navegador em 100% e a página maximizada. Você pode criar seu projeto, bifurcando <a href="http://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">essa caneta CodePen</a> . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método <a href="https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. </codea<></section>
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/qRZeGZ" target="_blank">https://codepen.io/freeCodeCamp/full/qRZeGZ</a> . Cumpra as <a href="https://pt.wikipedia.org/wiki/História_de_usuário" target="_blank">histórias de usuário</a> abaixo e faça todos os testes para passar. Dê seu estilo pessoal. Você pode usar qualquer combinação de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e jQuery para concluir este projeto. Você deve usar um framework frontend (como o React, por exemplo), porque esta seção é sobre o aprendizado de frameworks frontend. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos procurando dar suporte a outros frameworks frontend como Angular e Vue, mas eles não são suportados atualmente. Aceitaremos e tentaremos corrigir todos os relatórios de problemas que usam a pilha de tecnologia sugerida para este projeto. Bom divertimento! <strong>História de usuário # 1:</strong> Eu posso ver um elemento wrapper com um <code>id="quote-box"</code> . <strong>História de usuário # 2:</strong> Dentro de <code>#quote-box</code> , posso ver um elemento com um <code>id="text"</code> . <strong>História de usuário # 3:</strong> dentro de <code>#quote-box</code> , posso ver um elemento com um <code>id="author"</code> . <strong>História de usuário # 4:</strong> dentro de <code>#quote-box</code> , posso ver um elemento clicável com um <code>id="new-quote"</code> . <strong>História de usuário # 5:</strong> dentro de <code>#quote-box</code> , posso ver um clicável <codea< code=""> elemento com um correspondente <code>id="tweet-quote"</code> . <strong>História de usuário # 6:</strong> No primeiro carregamento, minha máquina de cotação exibe uma cotação aleatória no elemento com <code>id="text"</code> . <strong>História de usuário # 7:</strong> No primeiro carregamento, minha máquina de cotação exibe o autor da citação aleatória no elemento com <code>id="author"</code> . <strong>História de usuário # 8:</strong> Quando o botão <code>#new-quote</code> é clicado, minha máquina de cotação deve buscar uma nova cotação e exibi-la no elemento <code>#text</code> . <strong>História de usuário # 9:</strong> Minha máquina de cotação deve buscar o autor da nova cotação quando o botão <code>#new-quote</code> for clicado e exibi-lo no elemento <code>#author</code> . <strong>História de usuário # 10:</strong> Eu posso twittar a citação atual clicando no elemento <code>#tweet-quote</code> <code>a</code> . Este <code>a</code> elemento deve incluir o <code>"twitter.com/intent/tweet"</code> caminho em que é <code>href</code> atributo para twittar a cotação atual. <strong>História de usuário # 11:</strong> O elemento wrapper <code>#quote-box</code> deve ser centrado horizontalmente. Por favor, execute testes com o nível de zoom do navegador em 100% e a página maximizada. Você pode criar seu projeto, bifurcando <a href="http://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">essa caneta CodePen</a> . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método <a href="https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. </codea<></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">
|
||||
|
||||
@ -8,7 +8,7 @@ localeTitle: Visualize dados com um gráfico de barras
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/GrZVaM" target="_blank">https://codepen.io/freeCodeCamp/full/GrZVaM</a> . Cumpra as <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">histórias de usuário</a> abaixo e faça todos os testes para passar. Dê seu estilo pessoal. Você pode usar HTML, JavaScript, CSS e a biblioteca de visualização baseada em svg D3. Os testes exigem que os eixos sejam gerados usando a propriedade do eixo D3, que gera automaticamente marcações ao longo do eixo. Esses tiques são necessários para passar nos testes D3, porque suas posições são usadas para determinar o alinhamento dos elementos gráficos. Você encontrará informações sobre como gerar eixos em <a href="https://github.com/d3/d3/blob/master/API.md#axes-d3-axis" target="_blank">https://github.com/d3/d3/blob/master/API.md#axes-d3-axis</a> . Elementos DOM (não virtuais) requeridos são consultados no momento de cada teste. Se você usar uma estrutura frontend (como o Vue, por exemplo), os resultados do teste podem ser imprecisos para o conteúdo dinâmico. Esperamos acomodá-los eventualmente, mas esses frameworks não são suportados atualmente para projetos D3. <strong>História do usuário 1:</strong> meu gráfico deve ter um título com um <code>id="title"</code> . <strong>História do usuário # 2:</strong> Meu gráfico deve ter um eixo x do elemento <code>g</code> com um <code>id="x-axis"</code> . <strong>User Story # 3:</strong> Meu gráfico deve ter um eixo y do elemento <code>g</code> com um <code>id="y-axis"</code> . <strong>User Story # 4: Os</strong> dois eixos devem conter vários rótulos de ticks, cada um com a <code>class="tick"</code> correspondente <code>class="tick"</code> . <strong>User Story # 5:</strong> Meu gráfico deve ter um elemento <code>rect</code> para cada ponto de dados com uma <code>class="bar"</code> exibindo os dados. <strong>User Story # 6:</strong> Cada barra deve ter as propriedades <code>data-date</code> e <code>data-gdp</code> contendo data e valores do PIB. <strong>User Story # 7:</strong> As propriedades <code>data-date</code> dos elementos da barra devem corresponder à ordem dos dados fornecidos. <strong>User Story # 8:</strong> As propriedades do <code>data-gdp</code> dos elementos da barra devem corresponder à ordem dos dados fornecidos. <strong>História do usuário nº 9:</strong> a altura de cada elemento da barra deve representar com precisão o PIB correspondente dos dados. <strong>User Story # 10:</strong> O atributo <code>data-date</code> e seu elemento de barra correspondente devem estar alinhados com o valor correspondente no eixo x. <strong>User Story # 11:</strong> O atributo <code>data-gdp</code> e seu elemento de barra correspondente devem estar alinhados com o valor correspondente no eixo y. <strong>User Story # 12:</strong> Eu posso passar o mouse sobre uma área e ver uma dica com uma <code>id="tooltip"</code> que exibe mais informações sobre a área. <strong>User Story # 13:</strong> Minha dica de ferramenta deve ter uma propriedade <code>data-date</code> que corresponda à <code>data-date</code> da área ativa. Aqui está o conjunto de dados necessário para concluir este projeto: <code>https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json</code> Você pode criar seu projeto, bifurcando <a href="https://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">essa caneta CodePen</a> . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> . Quando terminar, envie o URL para o seu projeto de trabalho com todos os testes sendo aprovados. Lembre-se de usar o método <a href="https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. </section>
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/GrZVaM" target="_blank">https://codepen.io/freeCodeCamp/full/GrZVaM</a> . Cumpra as <a href="https://pt.wikipedia.org/wiki/História_de_usuário" target="_blank">histórias de usuário</a> abaixo e faça todos os testes para passar. Dê seu estilo pessoal. Você pode usar HTML, JavaScript, CSS e a biblioteca de visualização baseada em svg D3. Os testes exigem que os eixos sejam gerados usando a propriedade do eixo D3, que gera automaticamente marcações ao longo do eixo. Esses tiques são necessários para passar nos testes D3, porque suas posições são usadas para determinar o alinhamento dos elementos gráficos. Você encontrará informações sobre como gerar eixos em <a href="https://github.com/d3/d3/blob/master/API.md#axes-d3-axis" target="_blank">https://github.com/d3/d3/blob/master/API.md#axes-d3-axis</a> . Elementos DOM (não virtuais) requeridos são consultados no momento de cada teste. Se você usar uma estrutura frontend (como o Vue, por exemplo), os resultados do teste podem ser imprecisos para o conteúdo dinâmico. Esperamos acomodá-los eventualmente, mas esses frameworks não são suportados atualmente para projetos D3. <strong>História do usuário 1:</strong> meu gráfico deve ter um título com um <code>id="title"</code> . <strong>História do usuário # 2:</strong> Meu gráfico deve ter um eixo x do elemento <code>g</code> com um <code>id="x-axis"</code> . <strong>História de usuário # 3:</strong> Meu gráfico deve ter um eixo y do elemento <code>g</code> com um <code>id="y-axis"</code> . <strong>História de usuário # 4: Os</strong> dois eixos devem conter vários rótulos de ticks, cada um com a <code>class="tick"</code> correspondente <code>class="tick"</code> . <strong>História de usuário # 5:</strong> Meu gráfico deve ter um elemento <code>rect</code> para cada ponto de dados com uma <code>class="bar"</code> exibindo os dados. <strong>História de usuário # 6:</strong> Cada barra deve ter as propriedades <code>data-date</code> e <code>data-gdp</code> contendo data e valores do PIB. <strong>História de usuário # 7:</strong> As propriedades <code>data-date</code> dos elementos da barra devem corresponder à ordem dos dados fornecidos. <strong>História de usuário # 8:</strong> As propriedades do <code>data-gdp</code> dos elementos da barra devem corresponder à ordem dos dados fornecidos. <strong>História do usuário nº 9:</strong> a altura de cada elemento da barra deve representar com precisão o PIB correspondente dos dados. <strong>História de usuário # 10:</strong> O atributo <code>data-date</code> e seu elemento de barra correspondente devem estar alinhados com o valor correspondente no eixo x. <strong>História de usuário # 11:</strong> O atributo <code>data-gdp</code> e seu elemento de barra correspondente devem estar alinhados com o valor correspondente no eixo y. <strong>História de usuário # 12:</strong> Eu posso passar o mouse sobre uma área e ver uma dica com uma <code>id="tooltip"</code> que exibe mais informações sobre a área. <strong>História de usuário # 13:</strong> Minha dica de ferramenta deve ter uma propriedade <code>data-date</code> que corresponda à <code>data-date</code> da área ativa. Aqui está o conjunto de dados necessário para concluir este projeto: <code>https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json</code> Você pode criar seu projeto, bifurcando <a href="https://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">essa caneta CodePen</a> . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> . Quando terminar, envie o URL para o seu projeto de trabalho com todos os testes sendo aprovados. Lembre-se de usar o método <a href="https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">
|
||||
|
||||
@ -8,7 +8,7 @@ localeTitle: Visualize dados com um mapa coroplético
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/EZKqza" target="_blank">https://codepen.io/freeCodeCamp/full/EZKqza</a> . Cumpra as <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">histórias de usuário</a> abaixo e faça todos os testes para passar. Dê seu estilo pessoal. Você pode usar HTML, JavaScript, CSS e a biblioteca de visualização baseada em svg D3. Elementos DOM (não virtuais) requeridos são consultados no momento de cada teste. Se você usar uma estrutura frontend (como o Vue, por exemplo), os resultados do teste podem ser imprecisos para o conteúdo dinâmico. Esperamos acomodá-los eventualmente, mas esses frameworks não são suportados atualmente para projetos D3. <strong>História do usuário nº 1:</strong> Meu choropleth deve ter um título com um <code>id="title"</code> . <strong>História do usuário nº 2:</strong> Meu choropleth deve ter um elemento de descrição com um <code>id="description"</code> . <strong>História do usuário nº 3:</strong> Meu choropleth deve ter condados com uma <code>class="county"</code> correspondente <code>class="county"</code> que represente os dados. <strong>História do usuário nº 4:</strong> deve haver pelo menos quatro cores de preenchimento diferentes usadas para os municípios. <strong>História do usuário # 5:</strong> Meus municípios devem ter propriedades de <code>data-fips</code> e <code>data-education</code> contendo seus valores de educação e fips correspondentes. <strong>História do Usuário # 6:</strong> Meu coroplópio deve ter um condado para cada ponto de dados fornecido. <strong>História do usuário nº 7:</strong> os municípios devem ter dados-fips e valores de dados-educação que correspondam aos dados da amostra. <strong>História do usuário nº 8:</strong> Meu choropleth deve ter uma legenda com um <code>id="legend"</code> . <strong>História do usuário nº 9:</strong> Deve haver pelo menos 4 cores de preenchimento diferentes usadas para a legenda. <strong>História do usuário nº 10:</strong> Eu posso passar o mouse sobre uma área e ver uma dica de ferramenta com um <code>id="tooltip"</code> que exibe mais informações sobre a área. <strong>História do usuário nº 11:</strong> Minha dica de ferramenta deve ter uma propriedade de <code>data-education</code> que corresponda à <code>data-education</code> da área ativa. Aqui estão os conjuntos de dados necessários para concluir este projeto: <br><ul><li> <strong>Dados educacionais dos EUA:</strong> <code>https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/for_user_education.json</code> </li><li> <strong>Dados do Condado dos EUA:</strong> <code>https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/counties.json</code> </li></ul> Você pode criar seu projeto, bifurcando <a href="https://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">essa caneta CodePen</a> . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método <a href="https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. </section>
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/EZKqza" target="_blank">https://codepen.io/freeCodeCamp/full/EZKqza</a> . Cumpra as <a href="https://pt.wikipedia.org/wiki/História_de_usuário" target="_blank">histórias de usuário</a> abaixo e faça todos os testes para passar. Dê seu estilo pessoal. Você pode usar HTML, JavaScript, CSS e a biblioteca de visualização baseada em svg D3. Elementos DOM (não virtuais) requeridos são consultados no momento de cada teste. Se você usar uma estrutura frontend (como o Vue, por exemplo), os resultados do teste podem ser imprecisos para o conteúdo dinâmico. Esperamos acomodá-los eventualmente, mas esses frameworks não são suportados atualmente para projetos D3. <strong>História do usuário nº 1:</strong> Meu choropleth deve ter um título com um <code>id="title"</code> . <strong>História do usuário nº 2:</strong> Meu choropleth deve ter um elemento de descrição com um <code>id="description"</code> . <strong>História do usuário nº 3:</strong> Meu choropleth deve ter condados com uma <code>class="county"</code> correspondente <code>class="county"</code> que represente os dados. <strong>História do usuário nº 4:</strong> deve haver pelo menos quatro cores de preenchimento diferentes usadas para os municípios. <strong>História do usuário # 5:</strong> Meus municípios devem ter propriedades de <code>data-fips</code> e <code>data-education</code> contendo seus valores de educação e fips correspondentes. <strong>História do Usuário # 6:</strong> Meu coroplópio deve ter um condado para cada ponto de dados fornecido. <strong>História do usuário nº 7:</strong> os municípios devem ter dados-fips e valores de dados-educação que correspondam aos dados da amostra. <strong>História do usuário nº 8:</strong> Meu choropleth deve ter uma legenda com um <code>id="legend"</code> . <strong>História do usuário nº 9:</strong> Deve haver pelo menos 4 cores de preenchimento diferentes usadas para a legenda. <strong>História do usuário nº 10:</strong> Eu posso passar o mouse sobre uma área e ver uma dica de ferramenta com um <code>id="tooltip"</code> que exibe mais informações sobre a área. <strong>História do usuário nº 11:</strong> Minha dica de ferramenta deve ter uma propriedade de <code>data-education</code> que corresponda à <code>data-education</code> da área ativa. Aqui estão os conjuntos de dados necessários para concluir este projeto: <br><ul><li> <strong>Dados educacionais dos EUA:</strong> <code>https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/for_user_education.json</code> </li><li> <strong>Dados do Condado dos EUA:</strong> <code>https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/counties.json</code> </li></ul> Você pode criar seu projeto, bifurcando <a href="https://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">essa caneta CodePen</a> . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método <a href="https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">
|
||||
|
||||
@ -8,7 +8,7 @@ localeTitle: Visualize dados com um mapa de calor
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/JEXgeY" target="_blank">https://codepen.io/freeCodeCamp/full/JEXgeY</a> . Cumpra as <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">histórias de usuário</a> abaixo e faça todos os testes para passar. Dê seu estilo pessoal. Você pode usar HTML, JavaScript, CSS e a biblioteca de visualização baseada em svg D3. Elementos DOM (não virtuais) requeridos são consultados no momento de cada teste. Se você usar uma estrutura frontend (como o Vue, por exemplo), os resultados do teste podem ser imprecisos para o conteúdo dinâmico. Esperamos acomodá-los eventualmente, mas esses frameworks não são suportados atualmente para projetos D3. <strong>História do usuário nº 1:</strong> Meu heat map deve ter um título com um <code>id="title"</code> . <strong>História do usuário nº 2:</strong> Meu heat map deve ter uma descrição com um <code>id="description"</code> . <strong>História do usuário nº 3:</strong> Meu mapa de calor deve ter um eixo x com um <code>id="x-axis"</code> . <strong>História do Usuário # 4:</strong> Meu mapa de calor deve ter um eixo y com um <code>id="y-axis"</code> . <strong>História do usuário nº 5:</strong> Meu heat map deve ter elementos <code>rect</code> com uma <code>class="cell"</code> que representa os dados. <strong>História do usuário nº 6:</strong> Deve haver pelo menos 4 cores de preenchimento diferentes usadas para as células. <strong>História do usuário nº 7:</strong> Cada célula terá as propriedades <code>data-month</code> , <code>data-year</code> , <code>data-temp</code> contendo seus valores correspondentes de mês, ano e temperatura. <strong>História do usuário nº 8:</strong> O <code>data-month</code> , <code>data-year</code> de cada célula deve estar dentro do intervalo dos dados. <strong>História do usuário nº 9:</strong> Meu mapa de calor deve ter células alinhadas com o mês correspondente no eixo y. <strong>História do usuário nº 10:</strong> Meu mapa de calor deve ter células alinhadas com o ano correspondente no eixo x. <strong>História do usuário nº 11:</strong> Meu mapa de calor deve ter vários marcadores de escala no eixo y com o nome completo do mês. <strong>História do usuário nº 12:</strong> Meu heat map deve ter vários rótulos de ticks no eixo x com os anos entre 1754 e 2015. <strong>História do usuário nº 13:</strong> Meu heat map deve ter uma legenda com um <code>id="legend"</code> . <strong>História do usuário nº 14:</strong> Minha legenda deve conter elementos <code>rect</code> . <strong>História do usuário nº 15:</strong> Os elementos <code>rect</code> na legenda devem usar pelo menos 4 cores de preenchimento diferentes. <strong>História do usuário nº 16:</strong> Eu posso passar o mouse sobre uma área e ver uma dica de ferramenta com uma <code>id="tooltip"</code> que exibe mais informações sobre a área. <strong>História do usuário nº 16:</strong> Minha dica de ferramenta deve ter uma propriedade <code>data-year</code> que corresponda ao <code>data-year</code> da área ativa. Aqui está o conjunto de dados necessário para concluir este projeto: <code>https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json</code> Você pode criar seu projeto, bifurcando <a href="https://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">essa caneta CodePen</a> . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método <a href="https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. </section>
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/JEXgeY" target="_blank">https://codepen.io/freeCodeCamp/full/JEXgeY</a> . Cumpra as <a href="https://pt.wikipedia.org/wiki/História_de_usuário" target="_blank">histórias de usuário</a> abaixo e faça todos os testes para passar. Dê seu estilo pessoal. Você pode usar HTML, JavaScript, CSS e a biblioteca de visualização baseada em svg D3. Elementos DOM (não virtuais) requeridos são consultados no momento de cada teste. Se você usar uma estrutura frontend (como o Vue, por exemplo), os resultados do teste podem ser imprecisos para o conteúdo dinâmico. Esperamos acomodá-los eventualmente, mas esses frameworks não são suportados atualmente para projetos D3. <strong>História do usuário nº 1:</strong> Meu heat map deve ter um título com um <code>id="title"</code> . <strong>História do usuário nº 2:</strong> Meu heat map deve ter uma descrição com um <code>id="description"</code> . <strong>História do usuário nº 3:</strong> Meu mapa de calor deve ter um eixo x com um <code>id="x-axis"</code> . <strong>História do Usuário # 4:</strong> Meu mapa de calor deve ter um eixo y com um <code>id="y-axis"</code> . <strong>História do usuário nº 5:</strong> Meu heat map deve ter elementos <code>rect</code> com uma <code>class="cell"</code> que representa os dados. <strong>História do usuário nº 6:</strong> Deve haver pelo menos 4 cores de preenchimento diferentes usadas para as células. <strong>História do usuário nº 7:</strong> Cada célula terá as propriedades <code>data-month</code> , <code>data-year</code> , <code>data-temp</code> contendo seus valores correspondentes de mês, ano e temperatura. <strong>História do usuário nº 8:</strong> O <code>data-month</code> , <code>data-year</code> de cada célula deve estar dentro do intervalo dos dados. <strong>História do usuário nº 9:</strong> Meu mapa de calor deve ter células alinhadas com o mês correspondente no eixo y. <strong>História do usuário nº 10:</strong> Meu mapa de calor deve ter células alinhadas com o ano correspondente no eixo x. <strong>História do usuário nº 11:</strong> Meu mapa de calor deve ter vários marcadores de escala no eixo y com o nome completo do mês. <strong>História do usuário nº 12:</strong> Meu heat map deve ter vários rótulos de ticks no eixo x com os anos entre 1754 e 2015. <strong>História do usuário nº 13:</strong> Meu heat map deve ter uma legenda com um <code>id="legend"</code> . <strong>História do usuário nº 14:</strong> Minha legenda deve conter elementos <code>rect</code> . <strong>História do usuário nº 15:</strong> Os elementos <code>rect</code> na legenda devem usar pelo menos 4 cores de preenchimento diferentes. <strong>História do usuário nº 16:</strong> Eu posso passar o mouse sobre uma área e ver uma dica de ferramenta com uma <code>id="tooltip"</code> que exibe mais informações sobre a área. <strong>História do usuário nº 16:</strong> Minha dica de ferramenta deve ter uma propriedade <code>data-year</code> que corresponda ao <code>data-year</code> da área ativa. Aqui está o conjunto de dados necessário para concluir este projeto: <code>https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json</code> Você pode criar seu projeto, bifurcando <a href="https://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">essa caneta CodePen</a> . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método <a href="https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">
|
||||
|
||||
@ -8,7 +8,7 @@ localeTitle: Visualize dados com um gráfico de gráfico de dispersão
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/bgpXyK" target="_blank">https://codepen.io/freeCodeCamp/full/bgpXyK</a> . Cumpra as <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">histórias de usuário</a> abaixo e faça todos os testes para passar. Dê seu estilo pessoal. Você pode usar HTML, JavaScript, CSS e a biblioteca de visualização baseada em svg D3. Os testes exigem que os eixos sejam gerados usando a propriedade do eixo D3, que gera automaticamente marcações ao longo do eixo. Esses tiques são necessários para passar nos testes D3, porque suas posições são usadas para determinar o alinhamento dos elementos gráficos. Você encontrará informações sobre como gerar eixos em <a href="https://github.com/d3/d3/blob/master/API.md#axes-d3-axis" target="_blank">https://github.com/d3/d3/blob/master/API.md#axes-d3-axis</a> . Elementos DOM (não virtuais) requeridos são consultados no momento de cada teste. Se você usar uma estrutura frontend (como o Vue, por exemplo), os resultados do teste podem ser imprecisos para o conteúdo dinâmico. Esperamos acomodá-los eventualmente, mas esses frameworks não são suportados atualmente para projetos D3. <strong>História do usuário nº 1:</strong> Eu posso ver um elemento título que tem um <code>id="title"</code> . <strong>História do usuário nº 2:</strong> Eu posso ver um eixo x que tem um <code>id="x-axis"</code> . <strong>História do usuário nº 3:</strong> Eu posso ver um eixo y que tem um <code>id="y-axis"</code> . <strong>História do usuário nº 4:</strong> Eu posso ver pontos, cada um com uma classe de <code>dot</code> , que representa os dados sendo plotados. <strong>História do Usuário # 5:</strong> Cada ponto deve ter as propriedades <code>data-xvalue</code> e <code>data-yvalue</code> contendo seus valores x e y correspondentes. <strong>História do usuário nº 6:</strong> O valor <code>data-xvalue</code> <code>data-yvalue</code> e o <code>data-xvalue</code> y de <code>data-yvalue</code> de cada ponto devem estar dentro do intervalo dos dados reais e no formato de dados correto. Para <code>data-xvalue</code> , inteiros (anos completos) ou objetos Date são aceitáveis para avaliação de teste. Para <code>data-yvalue</code> (minutos), use objetos Date. <strong>História do Usuário # 7:</strong> O <code>data-xvalue</code> e seu ponto correspondente devem estar alinhados com o ponto / valor correspondente no eixo x. <strong>História do usuário # 8:</strong> O valor de y dos <code>data-yvalue</code> e seu ponto correspondente devem estar alinhados com o ponto / valor correspondente no eixo y. <strong>História do usuário nº 9:</strong> posso ver vários rótulos de escala no eixo y com o formato de hora <code>%M:%S</code> <strong>História do usuário nº 10:</strong> posso ver vários rótulos de escala no eixo x que mostram o ano. <strong>História do usuário nº 11:</strong> Eu posso ver que o intervalo dos rótulos do eixo x estão dentro do intervalo dos dados reais do eixo x. <strong>História do usuário nº 12:</strong> Eu posso ver que o intervalo dos rótulos do eixo y estão dentro do intervalo dos dados reais do eixo y. <strong>História do usuário nº 13:</strong> Eu posso ver uma legenda contendo um texto descritivo que possui <code>id="legend"</code> . <strong>História do usuário nº 14:</strong> Eu posso passar o mouse sobre uma área e ver uma dica com uma <code>id="tooltip"</code> que exibe mais informações sobre a área. <strong>História do usuário nº 15:</strong> Minha dica de ferramenta deve ter uma propriedade <code>data-year</code> que corresponda ao valor <code>data-xvalue</code> da área ativa. Aqui está o conjunto de dados necessário para concluir este projeto: <code>https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json</code> Você pode criar seu projeto, bifurcando <a href="https://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">essa caneta CodePen</a> . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método <a href="https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. </section>
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/bgpXyK" target="_blank">https://codepen.io/freeCodeCamp/full/bgpXyK</a> . Cumpra as <a href="https://pt.wikipedia.org/wiki/História_de_usuário" target="_blank">histórias de usuário</a> abaixo e faça todos os testes para passar. Dê seu estilo pessoal. Você pode usar HTML, JavaScript, CSS e a biblioteca de visualização baseada em svg D3. Os testes exigem que os eixos sejam gerados usando a propriedade do eixo D3, que gera automaticamente marcações ao longo do eixo. Esses tiques são necessários para passar nos testes D3, porque suas posições são usadas para determinar o alinhamento dos elementos gráficos. Você encontrará informações sobre como gerar eixos em <a href="https://github.com/d3/d3/blob/master/API.md#axes-d3-axis" target="_blank">https://github.com/d3/d3/blob/master/API.md#axes-d3-axis</a> . Elementos DOM (não virtuais) requeridos são consultados no momento de cada teste. Se você usar uma estrutura frontend (como o Vue, por exemplo), os resultados do teste podem ser imprecisos para o conteúdo dinâmico. Esperamos acomodá-los eventualmente, mas esses frameworks não são suportados atualmente para projetos D3. <strong>História do usuário nº 1:</strong> Eu posso ver um elemento título que tem um <code>id="title"</code> . <strong>História do usuário nº 2:</strong> Eu posso ver um eixo x que tem um <code>id="x-axis"</code> . <strong>História do usuário nº 3:</strong> Eu posso ver um eixo y que tem um <code>id="y-axis"</code> . <strong>História do usuário nº 4:</strong> Eu posso ver pontos, cada um com uma classe de <code>dot</code> , que representa os dados sendo plotados. <strong>História do Usuário # 5:</strong> Cada ponto deve ter as propriedades <code>data-xvalue</code> e <code>data-yvalue</code> contendo seus valores x e y correspondentes. <strong>História do usuário nº 6:</strong> O valor <code>data-xvalue</code> <code>data-yvalue</code> e o <code>data-xvalue</code> y de <code>data-yvalue</code> de cada ponto devem estar dentro do intervalo dos dados reais e no formato de dados correto. Para <code>data-xvalue</code> , inteiros (anos completos) ou objetos Date são aceitáveis para avaliação de teste. Para <code>data-yvalue</code> (minutos), use objetos Date. <strong>História do Usuário # 7:</strong> O <code>data-xvalue</code> e seu ponto correspondente devem estar alinhados com o ponto / valor correspondente no eixo x. <strong>História do usuário # 8:</strong> O valor de y dos <code>data-yvalue</code> e seu ponto correspondente devem estar alinhados com o ponto / valor correspondente no eixo y. <strong>História do usuário nº 9:</strong> posso ver vários rótulos de escala no eixo y com o formato de hora <code>%M:%S</code> <strong>História do usuário nº 10:</strong> posso ver vários rótulos de escala no eixo x que mostram o ano. <strong>História do usuário nº 11:</strong> Eu posso ver que o intervalo dos rótulos do eixo x estão dentro do intervalo dos dados reais do eixo x. <strong>História do usuário nº 12:</strong> Eu posso ver que o intervalo dos rótulos do eixo y estão dentro do intervalo dos dados reais do eixo y. <strong>História do usuário nº 13:</strong> Eu posso ver uma legenda contendo um texto descritivo que possui <code>id="legend"</code> . <strong>História do usuário nº 14:</strong> Eu posso passar o mouse sobre uma área e ver uma dica com uma <code>id="tooltip"</code> que exibe mais informações sobre a área. <strong>História do usuário nº 15:</strong> Minha dica de ferramenta deve ter uma propriedade <code>data-year</code> que corresponda ao valor <code>data-xvalue</code> da área ativa. Aqui está o conjunto de dados necessário para concluir este projeto: <code>https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json</code> Você pode criar seu projeto, bifurcando <a href="https://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">essa caneta CodePen</a> . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método <a href="https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">
|
||||
|
||||
@ -8,7 +8,7 @@ localeTitle: Visualize dados com um diagrama de mapa de árvore
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/KaNGNR" target="_blank">https://codepen.io/freeCodeCamp/full/KaNGNR</a> . Cumpra as <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">histórias de usuário</a> abaixo e faça todos os testes para passar. Dê seu estilo pessoal. Você pode usar HTML, JavaScript, CSS e a biblioteca de visualização baseada em svg D3. Os testes exigem que os eixos sejam gerados usando a propriedade do eixo D3, que gera automaticamente marcações ao longo do eixo. Esses tiques são necessários para passar nos testes D3, porque suas posições são usadas para determinar o alinhamento dos elementos gráficos. Você encontrará informações sobre como gerar eixos em <a href="https://github.com/d3/d3/blob/master/API.md#axes-d3-axis" target="_blank">https://github.com/d3/d3/blob/master/API.md#axes-d3-axis</a> . Elementos DOM (não virtuais) requeridos são consultados no momento de cada teste. Se você usar uma estrutura frontend (como o Vue, por exemplo), os resultados do teste podem ser imprecisos para o conteúdo dinâmico. Esperamos acomodá-los eventualmente, mas esses frameworks não são suportados atualmente para projetos D3. <strong>User Story # 1:</strong> Meu mapa da árvore deve ter um título com um <code>id="title"</code> . <strong>User Story # 2:</strong> Meu mapa de árvore deve ter uma descrição com um <code>id="description"</code> . <strong>User Story # 3:</strong> Meu mapa de árvore deve ter elementos <code>rect</code> com uma <code>class="tile"</code> que representa os dados. <strong>História do usuário nº 4:</strong> deve haver pelo menos duas cores de preenchimento diferentes usadas para as peças. <strong>História do usuário nº 5:</strong> Cada bloco deve ter as propriedades <code>data-name</code> , <code>data-category</code> e <code>data-value</code> contendo seu nome, categoria e valor correspondentes. <strong>História do usuário nº 6:</strong> a área de cada bloco deve corresponder ao valor do valor dos dados: blocos com um valor de dados maior devem ter uma área maior. <strong>User Story # 7:</strong> Meu mapa da árvore deve ter uma legenda com <code>id="legend"</code> . <strong>User Story # 8:</strong> Minha legenda deve ter elementos <code>rect</code> com uma <code>class="legend-item"</code> . <strong>User Story # 9:</strong> Os elementos <code>rect</code> na legenda devem usar pelo menos 2 cores de preenchimento diferentes. <strong>User Story # 10:</strong> Eu posso passar o mouse sobre uma área e ver uma dica de ferramenta com um <code>id="tooltip"</code> que exibe mais informações sobre a área. <strong>User Story # 11:</strong> minha dica de ferramenta deve ter uma propriedade de <code>data-value</code> que corresponda ao <code>data-value</code> de <code>data-value</code> da área ativa. Para este projeto, você pode usar qualquer um dos seguintes conjuntos de dados: <br><ul><li> <strong>Promessas do Kickstarter:</strong> <code>https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/kickstarter-funding-data.json</code> </li><li> <strong>Vendas de filmes:</strong> <code>https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/movie-data.json</code> </li><li> <strong>Vendas de videogames:</strong> <code>https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/video-game-sales-data.json</code> </li></ul> Você pode criar seu projeto, bifurcando <a href="https://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">essa caneta CodePen</a> . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método <a href="https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. </section>
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/KaNGNR" target="_blank">https://codepen.io/freeCodeCamp/full/KaNGNR</a> . Cumpra as <a href="https://pt.wikipedia.org/wiki/História_de_usuário" target="_blank">histórias de usuário</a> abaixo e faça todos os testes para passar. Dê seu estilo pessoal. Você pode usar HTML, JavaScript, CSS e a biblioteca de visualização baseada em svg D3. Os testes exigem que os eixos sejam gerados usando a propriedade do eixo D3, que gera automaticamente marcações ao longo do eixo. Esses tiques são necessários para passar nos testes D3, porque suas posições são usadas para determinar o alinhamento dos elementos gráficos. Você encontrará informações sobre como gerar eixos em <a href="https://github.com/d3/d3/blob/master/API.md#axes-d3-axis" target="_blank">https://github.com/d3/d3/blob/master/API.md#axes-d3-axis</a> . Elementos DOM (não virtuais) requeridos são consultados no momento de cada teste. Se você usar uma estrutura frontend (como o Vue, por exemplo), os resultados do teste podem ser imprecisos para o conteúdo dinâmico. Esperamos acomodá-los eventualmente, mas esses frameworks não são suportados atualmente para projetos D3. <strong>História de usuário # 1:</strong> Meu mapa da árvore deve ter um título com um <code>id="title"</code> . <strong>História de usuário # 2:</strong> Meu mapa de árvore deve ter uma descrição com um <code>id="description"</code> . <strong>História de usuário # 3:</strong> Meu mapa de árvore deve ter elementos <code>rect</code> com uma <code>class="tile"</code> que representa os dados. <strong>História do usuário nº 4:</strong> deve haver pelo menos duas cores de preenchimento diferentes usadas para as peças. <strong>História do usuário nº 5:</strong> Cada bloco deve ter as propriedades <code>data-name</code> , <code>data-category</code> e <code>data-value</code> contendo seu nome, categoria e valor correspondentes. <strong>História do usuário nº 6:</strong> a área de cada bloco deve corresponder ao valor do valor dos dados: blocos com um valor de dados maior devem ter uma área maior. <strong>História de usuário # 7:</strong> Meu mapa da árvore deve ter uma legenda com <code>id="legend"</code> . <strong>História de usuário # 8:</strong> Minha legenda deve ter elementos <code>rect</code> com uma <code>class="legend-item"</code> . <strong>História de usuário # 9:</strong> Os elementos <code>rect</code> na legenda devem usar pelo menos 2 cores de preenchimento diferentes. <strong>História de usuário # 10:</strong> Eu posso passar o mouse sobre uma área e ver uma dica de ferramenta com um <code>id="tooltip"</code> que exibe mais informações sobre a área. <strong>História de usuário # 11:</strong> minha dica de ferramenta deve ter uma propriedade de <code>data-value</code> que corresponda ao <code>data-value</code> de <code>data-value</code> da área ativa. Para este projeto, você pode usar qualquer um dos seguintes conjuntos de dados: <br><ul><li> <strong>Promessas do Kickstarter:</strong> <code>https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/kickstarter-funding-data.json</code> </li><li> <strong>Vendas de filmes:</strong> <code>https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/movie-data.json</code> </li><li> <strong>Vendas de videogames:</strong> <code>https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/video-game-sales-data.json</code> </li></ul> Você pode criar seu projeto, bifurcando <a href="https://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">essa caneta CodePen</a> . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método <a href="https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">
|
||||
|
||||
@ -8,7 +8,7 @@ localeTitle: Construa um placar de campista
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/eZGMjp/" target="_blank">https://codepen.io/freeCodeCamp/full/eZGMjp/</a> . Cumpra as <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">histórias de usuários</a> abaixo. Use as bibliotecas ou APIs de que você precisa. Dê seu estilo pessoal. <strong>História do Usuário:</strong> Eu posso ver uma tabela dos campistas do freeCodeCamp que ganharam mais pontos de brownie nos últimos 30 dias. <strong>História do Usuário:</strong> posso ver quantos pontos de brownie eles ganharam nos últimos 30 dias e quantos ganharam no total. <strong>História do Usuário:</strong> Eu posso alternar entre ordenar a lista por quantos pontos de brownie eles ganharam nos últimos 30 dias e quantos pontos de brownie eles ganharam no total. <strong>Dica:</strong> para obter os 100 melhores campistas nos últimos 30 dias: <a href="https://fcctop100.herokuapp.com/api/fccusers/top/recent" target="_blank">https://fcctop100.herokuapp.com/api/fccusers/top/recent</a> . <strong>Dica:</strong> para obter os 100 melhores campistas de todos os tempos: <a href="https://fcctop100.herokuapp.com/api/fccusers/top/alltime" target="_blank">https://fcctop100.herokuapp.com/api/fccusers/top/alltime</a> . Lembre-se de usar <a href="http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. Quando terminar, clique no botão "Concluí este desafio" e inclua um link para o seu CodePen. Você pode obter feedback sobre o seu projeto, compartilhando-o com seus amigos no Facebook. </section>
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/eZGMjp/" target="_blank">https://codepen.io/freeCodeCamp/full/eZGMjp/</a> . Cumpra as <a href="https://pt.wikipedia.org/wiki/História_de_usuário" target="_blank">histórias de usuários</a> abaixo. Use as bibliotecas ou APIs de que você precisa. Dê seu estilo pessoal. <strong>História de usuário:</strong> Eu posso ver uma tabela dos campistas do freeCodeCamp que ganharam mais pontos de brownie nos últimos 30 dias. <strong>História do usuário:</strong> posso ver quantos pontos de brownie eles ganharam nos últimos 30 dias e quantos ganharam no total. <strong>História de usuário:</strong> Eu posso alternar entre ordenar a lista por quantos pontos de brownie eles ganharam nos últimos 30 dias e quantos pontos de brownie eles ganharam no total. <strong>Dica:</strong> para obter os 100 melhores campistas nos últimos 30 dias: <a href="https://fcctop100.herokuapp.com/api/fccusers/top/recent" target="_blank">https://fcctop100.herokuapp.com/api/fccusers/top/recent</a> . <strong>Dica:</strong> para obter os 100 melhores campistas de todos os tempos: <a href="https://fcctop100.herokuapp.com/api/fccusers/top/alltime" target="_blank">https://fcctop100.herokuapp.com/api/fccusers/top/alltime</a> . Lembre-se de usar <a href="http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. Quando terminar, clique no botão "Concluí este desafio" e inclua um link para o seu CodePen. Você pode obter feedback sobre o seu projeto, compartilhando-o com seus amigos no Facebook. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">
|
||||
|
||||
@ -8,7 +8,7 @@ localeTitle: Construa um aplicativo leve e brilhante
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/eyLYXE" target="_blank">https://codepen.io/freeCodeCamp/full/eyLYXE</a> . <strong>Regra nº 1:</strong> não olhe o código do projeto de exemplo. Descobrir por si mesmo. <strong>Regra nº 2:</strong> Cumpra as <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">histórias de usuários</a> abaixo. Use as bibliotecas ou APIs de que você precisa. Dê seu estilo pessoal. <strong>User Story:</strong> Eu posso clicar ou arrastar o cursor do mouse para colorir os círculos. <strong>User Story:</strong> posso clicar duas vezes em um círculo colorido para remover a cor. <strong>User Story:</strong> Eu posso clicar em um círculo colorido para mudar sua cor. <strong>User Story:</strong> Eu deveria ter um círculo de cores diferentes em cada clique. <strong>História do usuário:</strong> posso clicar no botão "Redefinir" para remover a cor recente. <strong>História do usuário:</strong> posso clicar no botão "Redefinir tudo" para remover todas as cores dos círculos. Lembre-se de usar <a href="http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. Quando terminar, clique no botão "Concluí este desafio" e inclua um link para o seu CodePen. Você pode obter feedback sobre o seu projeto, compartilhando-o com seus amigos no Facebook. </section>
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/eyLYXE" target="_blank">https://codepen.io/freeCodeCamp/full/eyLYXE</a> . <strong>Regra nº 1:</strong> não olhe o código do projeto de exemplo. Descobrir por si mesmo. <strong>Regra nº 2:</strong> Cumpra as <a href="https://pt.wikipedia.org/wiki/História_de_usuário" target="_blank">histórias de usuários</a> abaixo. Use as bibliotecas ou APIs de que você precisa. Dê seu estilo pessoal. <strong>História de usuário:</strong> Eu posso clicar ou arrastar o cursor do mouse para colorir os círculos. <strong>História de usuário:</strong> posso clicar duas vezes em um círculo colorido para remover a cor. <strong>História de usuário:</strong> Eu posso clicar em um círculo colorido para mudar sua cor. <strong>História de usuário:</strong> Eu deveria ter um círculo de cores diferentes em cada clique. <strong>História do usuário:</strong> posso clicar no botão "Redefinir" para remover a cor recente. <strong>História do usuário:</strong> posso clicar no botão "Redefinir tudo" para remover todas as cores dos círculos. Lembre-se de usar <a href="http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. Quando terminar, clique no botão "Concluí este desafio" e inclua um link para o seu CodePen. Você pode obter feedback sobre o seu projeto, compartilhando-o com seus amigos no Facebook. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">
|
||||
|
||||
@ -8,7 +8,7 @@ localeTitle: Construa um aplicativo de coordenação de vida noturna
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo JavaScript de pilha completa que seja funcionalmente semelhante a este: <a href="http://whatsgoinontonight.herokuapp.com/" target="_blank">http://whatsgoinontonight.herokuapp.com/</a> e implante-o no Heroku. Note que para cada projeto, você deve criar um novo repositório GitHub e um novo projeto Heroku. Se você não consegue lembrar como fazer isso, visite <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 são as histórias de usuário específicas que você deve implementar para este projeto: <strong>User Story:</strong> como usuário não autenticado, posso visualizar todas as barras na minha área. <strong>User Story:</strong> Como um usuário autenticado, posso me adicionar a uma barra para indicar que vou para lá hoje à noite. <strong>User Story:</strong> Como usuário autenticado, posso me remover de uma barra se não quiser mais ir para lá. <strong>User Story:</strong> Como usuário não autenticado, quando eu fizer login, não precisarei pesquisar novamente. <strong>Dica:</strong> tente usar a <a href="https://www.yelp.com/developers/documentation/v2/overview" target="_blank">API</a> do <a href="https://www.yelp.com/developers/documentation/v2/overview" target="_blank">Yelp</a> para encontrar locais nas cidades pesquisadas pelos usuários. Se você usa a API do Yelp, mencione isso no seu aplicativo. Quando terminar de implementar essas histórias de usuários, clique no botão "Concluí este desafio" e insira os URLs do repositório do GitHub e do aplicativo ao vivo em execução no Heroku. Você pode obter feedback sobre o seu projeto, compartilhando-o com seus amigos no Facebook. </section>
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo JavaScript de pilha completa que seja funcionalmente semelhante a este: <a href="http://whatsgoinontonight.herokuapp.com/" target="_blank">http://whatsgoinontonight.herokuapp.com/</a> e implante-o no Heroku. Note que para cada projeto, você deve criar um novo repositório GitHub e um novo projeto Heroku. Se você não consegue lembrar como fazer isso, visite <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 são as histórias de usuário específicas que você deve implementar para este projeto: <strong>História de usuário:</strong> como usuário não autenticado, posso visualizar todas as barras na minha área. <strong>História de usuário:</strong> Como um usuário autenticado, posso me adicionar a uma barra para indicar que vou para lá hoje à noite. <strong>História de usuário:</strong> Como usuário autenticado, posso me remover de uma barra se não quiser mais ir para lá. <strong>História de usuário:</strong> Como usuário não autenticado, quando eu fizer login, não precisarei pesquisar novamente. <strong>Dica:</strong> tente usar a <a href="https://www.yelp.com/developers/documentation/v2/overview" target="_blank">API</a> do <a href="https://www.yelp.com/developers/documentation/v2/overview" target="_blank">Yelp</a> para encontrar locais nas cidades pesquisadas pelos usuários. Se você usa a API do Yelp, mencione isso no seu aplicativo. Quando terminar de implementar essas histórias de usuários, clique no botão "Concluí este desafio" e insira os URLs do repositório do GitHub e do aplicativo ao vivo em execução no Heroku. Você pode obter feedback sobre o seu projeto, compartilhando-o com seus amigos no Facebook. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">
|
||||
|
||||
@ -7,7 +7,7 @@ localeTitle: Construa um clone do Pinterest
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://glitch.com" target="_blank">Glitch</a> que seja funcionalmente semelhante a este: <a href="https://wild-song.glitch.me/" target="_blank">https://wild-song.glitch.me</a> . Cumpra as <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">histórias de usuários</a> abaixo. Use as bibliotecas ou APIs de que você precisa. Dê seu estilo pessoal. <strong>História do usuário:</strong> Como usuário não autenticado, posso fazer login com o GitHub. <strong>História do usuário:</strong> como um usuário autenticado, posso vincular a imagens. <strong>História do usuário:</strong> como um usuário autenticado, posso excluir as imagens às quais me vinculei. <strong>História do usuário:</strong> como um usuário autenticado, posso ver uma parede no estilo Pinterest de todas as imagens às quais vinculei. <strong>História do usuário:</strong> como usuário não autenticado, posso procurar paredes de imagens de outros usuários. <strong>História do usuário:</strong> como um usuário autenticado, se eu fizer upload de uma imagem que esteja corrompida, ela será substituída por uma imagem de espaço reservado. (pode usar a detecção de imagem quebrada do jQuery) <strong>Dica: O</strong> <a href="http://masonry.desandro.com/" target="_blank">Masonry.js</a> é uma biblioteca que permite grades de imagens no estilo do Pinterest. Quando terminar de implementar essas histórias de usuários, clique no botão "Concluí este desafio" e insira os URLs do repositório do GitHub e do aplicativo ao vivo em execução no Heroku. Você pode obter feedback sobre o seu projeto, compartilhando-o com seus amigos no Facebook. </section>
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://glitch.com" target="_blank">Glitch</a> que seja funcionalmente semelhante a este: <a href="https://wild-song.glitch.me/" target="_blank">https://wild-song.glitch.me</a> . Cumpra as <a href="https://pt.wikipedia.org/wiki/História_de_usuário" target="_blank">histórias de usuários</a> abaixo. Use as bibliotecas ou APIs de que você precisa. Dê seu estilo pessoal. <strong>História do usuário:</strong> Como usuário não autenticado, posso fazer login com o GitHub. <strong>História do usuário:</strong> como um usuário autenticado, posso vincular a imagens. <strong>História do usuário:</strong> como um usuário autenticado, posso excluir as imagens às quais me vinculei. <strong>História do usuário:</strong> como um usuário autenticado, posso ver uma parede no estilo Pinterest de todas as imagens às quais vinculei. <strong>História do usuário:</strong> como usuário não autenticado, posso procurar paredes de imagens de outros usuários. <strong>História do usuário:</strong> como um usuário autenticado, se eu fizer upload de uma imagem que esteja corrompida, ela será substituída por uma imagem de espaço reservado. (pode usar a detecção de imagem quebrada do jQuery) <strong>Dica: O</strong> <a href="http://masonry.desandro.com/" target="_blank">Masonry.js</a> é uma biblioteca que permite grades de imagens no estilo do Pinterest. Quando terminar de implementar essas histórias de usuários, clique no botão "Concluí este desafio" e insira os URLs do repositório do GitHub e do aplicativo ao vivo em execução no Heroku. Você pode obter feedback sobre o seu projeto, compartilhando-o com seus amigos no Facebook. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">
|
||||
|
||||
@ -8,7 +8,7 @@ localeTitle: Construa um jogo de Pong
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/satyamdev/full/pdMmBp" target="_blank">https://codepen.io/satyamdev/full/pdMmBp</a> . <strong>Regra nº 1:</strong> não olhe o código do projeto de exemplo. Descobrir por si mesmo. <strong>Regra nº 2:</strong> Cumpra as <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">histórias de usuários</a> abaixo. Use as bibliotecas ou APIs de que você precisa. Dê seu estilo pessoal. <strong>História do usuário:</strong> posso controlar uma raquete. <strong>História do Usuário:</strong> O computador pode controlar o outro remo. <strong>História do usuário:</strong> a raquete do computador é imbatível. Nunca deve perder a bola. <strong>História do usuário:</strong> O jogo acompanha o jogador e a pontuação do computador. Lembre-se de usar <a href="http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. Quando terminar, clique no botão "Concluí este desafio" e inclua um link para o seu CodePen. Você pode obter feedback sobre o seu projeto, compartilhando-o com seus amigos no Facebook. </section>
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/satyamdev/full/pdMmBp" target="_blank">https://codepen.io/satyamdev/full/pdMmBp</a> . <strong>Regra nº 1:</strong> não olhe o código do projeto de exemplo. Descobrir por si mesmo. <strong>Regra nº 2:</strong> Cumpra as <a href="https://pt.wikipedia.org/wiki/História_de_usuário" target="_blank">histórias de usuários</a> abaixo. Use as bibliotecas ou APIs de que você precisa. Dê seu estilo pessoal. <strong>História do usuário:</strong> posso controlar uma raquete. <strong>História do Usuário:</strong> O computador pode controlar o outro remo. <strong>História do usuário:</strong> a raquete do computador é imbatível. Nunca deve perder a bola. <strong>História do usuário:</strong> O jogo acompanha o jogador e a pontuação do computador. Lembre-se de usar <a href="http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. Quando terminar, clique no botão "Concluí este desafio" e inclua um link para o seu CodePen. Você pode obter feedback sobre o seu projeto, compartilhando-o com seus amigos no Facebook. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">
|
||||
|
||||
@ -8,7 +8,7 @@ localeTitle: Construa uma caixa de receita
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/dNVazZ/" target="_blank">https://codepen.io/freeCodeCamp/full/dNVazZ/</a> . Cumpra as <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">histórias de usuários</a> abaixo. Use as bibliotecas ou APIs de que você precisa. Dê seu estilo pessoal. <strong>História do usuário:</strong> posso criar receitas com nomes e ingredientes. <strong>User Story:</strong> Eu posso ver uma visualização de índice em que os nomes de todas as receitas estão visíveis. <strong>História do usuário:</strong> posso clicar em qualquer uma dessas receitas para visualizá-la. <strong>História do usuário:</strong> posso editar essas receitas. <strong>História do usuário:</strong> posso excluir essas receitas. <strong>História do usuário:</strong> todas as novas receitas adicionadas são salvas no armazenamento local do meu navegador. Se eu atualizar a página, essas receitas ainda estarão lá. <strong>Dica:</strong> você deve prefixar suas chaves de armazenamento local no CodePen, ou seja, <code>_username_recipes</code> Lembre-se de usar <a href="//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help" target="_blank">Read-Search-Ask</a> se você ficar preso. Quando terminar, clique no botão "Concluí este desafio" e inclua um link para o seu CodePen. Você pode obter feedback sobre o seu projeto, compartilhando-o com seus amigos no Facebook. </section>
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/dNVazZ/" target="_blank">https://codepen.io/freeCodeCamp/full/dNVazZ/</a> . Cumpra as <a href="https://pt.wikipedia.org/wiki/História_de_usuário" target="_blank">histórias de usuários</a> abaixo. Use as bibliotecas ou APIs de que você precisa. Dê seu estilo pessoal. <strong>História do usuário:</strong> posso criar receitas com nomes e ingredientes. <strong>História de usuário:</strong> Eu posso ver uma visualização de índice em que os nomes de todas as receitas estão visíveis. <strong>História do usuário:</strong> posso clicar em qualquer uma dessas receitas para visualizá-la. <strong>História do usuário:</strong> posso editar essas receitas. <strong>História do usuário:</strong> posso excluir essas receitas. <strong>História do usuário:</strong> todas as novas receitas adicionadas são salvas no armazenamento local do meu navegador. Se eu atualizar a página, essas receitas ainda estarão lá. <strong>Dica:</strong> você deve prefixar suas chaves de armazenamento local no CodePen, ou seja, <code>_username_recipes</code> Lembre-se de usar <a href="//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help" target="_blank">Read-Search-Ask</a> se você ficar preso. Quando terminar, clique no botão "Concluí este desafio" e inclua um link para o seu CodePen. Você pode obter feedback sobre o seu projeto, compartilhando-o com seus amigos no Facebook. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">
|
||||
|
||||
@ -8,7 +8,7 @@ localeTitle: Construir um jogo Crawler Dungeon Roguelike
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/apLXEJ/" target="_blank">https://codepen.io/freeCodeCamp/full/apLXEJ/</a> . Cumpra as <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">histórias de usuários</a> abaixo. Use as bibliotecas ou APIs de que você precisa. Dê seu estilo pessoal. <strong>História do Usuário:</strong> Eu tenho saúde, nível e arma. Eu posso pegar uma arma melhor. Eu posso pegar itens de saúde. <strong>História do Usuário:</strong> Todos os itens e inimigos no mapa são organizados aleatoriamente. <strong>História do usuário:</strong> posso percorrer um mapa, descobrindo itens. <strong>História do Usuário:</strong> Eu posso me mover para qualquer lugar dentro dos limites do mapa, mas não posso me mover através de um inimigo até que eu o derrube. <strong>User Story:</strong> Grande parte do mapa está oculto. Quando eu dou um passo, todos os espaços que estão dentro de um certo número de espaços de mim são revelados. <strong>User Story:</strong> Quando eu venci um inimigo, o inimigo foi embora e eu recebi XP, o que eventualmente aumenta meu nível. <strong>História do Usuário:</strong> Quando eu luto contra um inimigo, nós nos revezamos danificando um ao outro até que um de nós perca. Eu danifico com base no meu nível e na minha arma. O inimigo causa dano baseado em seu nível. O dano é um pouco aleatório dentro de um intervalo. <strong>História do Usuário:</strong> Quando encontro e vence o chefe, eu ganho. <strong>História do Usuário:</strong> O jogo deve ser desafiador, mas teoricamente vitorioso. Lembre-se de usar <a href="http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. Quando terminar, clique no botão "Concluí este desafio" e inclua um link para o seu CodePen. Você pode obter feedback sobre o seu projeto, compartilhando-o com seus amigos no Facebook. </section>
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/apLXEJ/" target="_blank">https://codepen.io/freeCodeCamp/full/apLXEJ/</a> . Cumpra as <a href="https://pt.wikipedia.org/wiki/História_de_usuário" target="_blank">histórias de usuários</a> abaixo. Use as bibliotecas ou APIs de que você precisa. Dê seu estilo pessoal. <strong>História do Usuário:</strong> Eu tenho saúde, nível e arma. Eu posso pegar uma arma melhor. Eu posso pegar itens de saúde. <strong>História do Usuário:</strong> Todos os itens e inimigos no mapa são organizados aleatoriamente. <strong>História do usuário:</strong> posso percorrer um mapa, descobrindo itens. <strong>História do Usuário:</strong> Eu posso me mover para qualquer lugar dentro dos limites do mapa, mas não posso me mover através de um inimigo até que eu o derrube. <strong>História de usuário:</strong> Grande parte do mapa está oculto. Quando eu dou um passo, todos os espaços que estão dentro de um certo número de espaços de mim são revelados. <strong>História de usuário:</strong> Quando eu venci um inimigo, o inimigo foi embora e eu recebi XP, o que eventualmente aumenta meu nível. <strong>História do Usuário:</strong> Quando eu luto contra um inimigo, nós nos revezamos danificando um ao outro até que um de nós perca. Eu danifico com base no meu nível e na minha arma. O inimigo causa dano baseado em seu nível. O dano é um pouco aleatório dentro de um intervalo. <strong>História do Usuário:</strong> Quando encontro e vence o chefe, eu ganho. <strong>História do Usuário:</strong> O jogo deve ser desafiador, mas teoricamente vitorioso. Lembre-se de usar <a href="http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. Quando terminar, clique no botão "Concluí este desafio" e inclua um link para o seu CodePen. Você pode obter feedback sobre o seu projeto, compartilhando-o com seus amigos no Facebook. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">
|
||||
|
||||
@ -8,7 +8,7 @@ localeTitle: Construa um jogo de Simon
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/Em-Ant/full/QbRyqq/" target="_blank">https://codepen.io/freeCodeCamp/full/obYBjE</a> . Cumpra as <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">histórias de usuários</a> abaixo. Use as bibliotecas ou APIs de que você precisa. Dê seu estilo pessoal. <strong>User Story:</strong> Eu sou apresentado com uma série aleatória de pressionamentos de botão. <strong>História do Usuário:</strong> Toda vez que eu insiro uma série de pressionamentos de botão corretamente, vejo a mesma série de pressionamentos de botão, mas com uma etapa adicional. <strong>História do usuário:</strong> Eu ouço um som que corresponde a cada botão quando a série de pressionamentos de botões é executada e quando pressiono um botão. <strong>História do usuário:</strong> Se eu pressionar o botão errado, serei notificado de que o fiz, e essa série de pressionamentos de botões começa novamente para lembrar-me do padrão, para que eu possa tentar novamente. <strong>User Story:</strong> Eu posso ver quantos passos estão na série atual de pressionamentos de botão. <strong>User Story:</strong> Se eu quiser reiniciar, posso apertar um botão para fazer isso, e o jogo retornará a uma única etapa. <strong>História do Usuário:</strong> Eu posso jogar no modo estrito, onde se eu apertar um botão errado, ele me notifica que eu fiz isso, e o jogo é reiniciado em uma nova série aleatória de pressionamentos de botão. <strong>História do Usuário:</strong> Eu posso ganhar o jogo, obtendo uma série de 20 passos corretos. Eu sou notificado da minha vitória, então o jogo começa de novo. <strong>Dica:</strong> Aqui estão os 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 usar <a href="http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. Quando terminar, clique no botão "Concluí este desafio" e inclua um link para o seu CodePen. Você pode obter feedback sobre o seu projeto, compartilhando-o com seus amigos no Facebook. </section>
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/Em-Ant/full/QbRyqq/" target="_blank">https://codepen.io/freeCodeCamp/full/obYBjE</a> . Cumpra as <a href="https://pt.wikipedia.org/wiki/História_de_usuário" target="_blank">histórias de usuários</a> abaixo. Use as bibliotecas ou APIs de que você precisa. Dê seu estilo pessoal. <strong>História de usuário:</strong> Eu sou apresentado com uma série aleatória de pressionamentos de botão. <strong>História do Usuário:</strong> Toda vez que eu insiro uma série de pressionamentos de botão corretamente, vejo a mesma série de pressionamentos de botão, mas com uma etapa adicional. <strong>História do usuário:</strong> Eu ouço um som que corresponde a cada botão quando a série de pressionamentos de botões é executada e quando pressiono um botão. <strong>História do usuário:</strong> Se eu pressionar o botão errado, serei notificado de que o fiz, e essa série de pressionamentos de botões começa novamente para lembrar-me do padrão, para que eu possa tentar novamente. <strong>História de usuário:</strong> Eu posso ver quantos passos estão na série atual de pressionamentos de botão. <strong>História de usuário:</strong> Se eu quiser reiniciar, posso apertar um botão para fazer isso, e o jogo retornará a uma única etapa. <strong>História do Usuário:</strong> Eu posso jogar no modo estrito, onde se eu apertar um botão errado, ele me notifica que eu fiz isso, e o jogo é reiniciado em uma nova série aleatória de pressionamentos de botão. <strong>História do Usuário:</strong> Eu posso ganhar o jogo, obtendo uma série de 20 passos corretos. Eu sou notificado da minha vitória, então o jogo começa de novo. <strong>Dica:</strong> Aqui estão os 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 usar <a href="http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. Quando terminar, clique no botão "Concluí este desafio" e inclua um link para o seu CodePen. Você pode obter feedback sobre o seu projeto, compartilhando-o com seus amigos no Facebook. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">
|
||||
|
||||
@ -8,7 +8,7 @@ localeTitle: Construa um jogo Tic Tac Toe
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/KzXQgy/" target="_blank">https://codepen.io/freeCodeCamp/full/KzXQgy/</a> . Cumpra as <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">histórias de usuários</a> abaixo. Use as bibliotecas ou APIs de que você precisa. Dê seu estilo pessoal. <strong>User Story:</strong> Eu posso jogar um jogo de Tic Tac Toe com o computador. <strong>História do usuário:</strong> Meu jogo será redefinido assim que terminar, para que eu possa jogar novamente. <strong>User Story:</strong> Eu posso escolher se quero jogar como X ou O. Lembre-se de usar <a href="http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. Quando terminar, clique no botão "Concluí este desafio" e inclua um link para o seu CodePen. Você pode obter feedback sobre o seu projeto, compartilhando-o com seus amigos no Facebook. </section>
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/KzXQgy/" target="_blank">https://codepen.io/freeCodeCamp/full/KzXQgy/</a> . Cumpra as <a href="https://pt.wikipedia.org/wiki/História_de_usuário" target="_blank">histórias de usuários</a> abaixo. Use as bibliotecas ou APIs de que você precisa. Dê seu estilo pessoal. <strong>História de usuário:</strong> Eu posso jogar um jogo de Tic Tac Toe com o computador. <strong>História do usuário:</strong> Meu jogo será redefinido assim que terminar, para que eu possa jogar novamente. <strong>História de usuário:</strong> Eu posso escolher se quero jogar como X ou O. Lembre-se de usar <a href="http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. Quando terminar, clique no botão "Concluí este desafio" e inclua um link para o seu CodePen. Você pode obter feedback sobre o seu projeto, compartilhando-o com seus amigos no Facebook. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">
|
||||
|
||||
@ -8,7 +8,7 @@ localeTitle: Construa um aplicativo de votação
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo JavaScript de pilha completa que seja funcionalmente semelhante a este: <a href="https://fcc-voting-arthow4n.herokuapp.com/" target="_blank">https://fcc-voting-arthow4n.herokuapp.com/</a> e implante-o no Heroku. Note que para cada projeto, você deve criar um novo repositório GitHub e um novo projeto Heroku. Se você não consegue lembrar como fazer isso, visite <a href="/challenges/get-set-for-our-dynamic-web-application-projects">https://freecodecamp.com/challenges/get-set-for-our-dynamic-web-application-projects</a> . Aqui estão as histórias de usuário específicas que você deve implementar para este projeto: <strong>User Story:</strong> Como um usuário autenticado, posso manter minhas pesquisas e voltar mais tarde para acessá-las. <strong>User Story:</strong> Como usuário autenticado, posso compartilhar minhas pesquisas com meus amigos. <strong>História do usuário:</strong> como um usuário autenticado, posso ver os resultados agregados das minhas pesquisas. <strong>User Story:</strong> Como um usuário autenticado, posso excluir pesquisas que eu decido que não quero mais. <strong>História do usuário:</strong> como um usuário autenticado, posso criar uma pesquisa com qualquer número de itens possíveis. <strong>História do usuário:</strong> como usuário não autenticado ou autenticado, posso ver e votar nas pesquisas de todos. <strong>História do usuário:</strong> como um usuário não autenticado ou autenticado, posso ver os resultados das pesquisas em forma de gráfico. (Isso pode ser implementado usando o Chart.js ou o Google Charts.) <strong>User Story:</strong> Como um usuário autenticado, se eu não gostar das opções em uma pesquisa, posso criar uma nova opção. Quando terminar de implementar essas histórias de usuários, clique no botão "Concluí este desafio" e insira os URLs do repositório do GitHub e do aplicativo ao vivo em execução no Heroku. Você pode obter feedback sobre o seu projeto, compartilhando-o com seus amigos no Facebook. </section>
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo JavaScript de pilha completa que seja funcionalmente semelhante a este: <a href="https://fcc-voting-arthow4n.herokuapp.com/" target="_blank">https://fcc-voting-arthow4n.herokuapp.com/</a> e implante-o no Heroku. Note que para cada projeto, você deve criar um novo repositório GitHub e um novo projeto Heroku. Se você não consegue lembrar como fazer isso, visite <a href="/challenges/get-set-for-our-dynamic-web-application-projects">https://freecodecamp.com/challenges/get-set-for-our-dynamic-web-application-projects</a> . Aqui estão as histórias de usuário específicas que você deve implementar para este projeto: <strong>História de usuário:</strong> Como um usuário autenticado, posso manter minhas pesquisas e voltar mais tarde para acessá-las. <strong>História de usuário:</strong> Como usuário autenticado, posso compartilhar minhas pesquisas com meus amigos. <strong>História do usuário:</strong> como um usuário autenticado, posso ver os resultados agregados das minhas pesquisas. <strong>História de usuário:</strong> Como um usuário autenticado, posso excluir pesquisas que eu decido que não quero mais. <strong>História do usuário:</strong> como um usuário autenticado, posso criar uma pesquisa com qualquer número de itens possíveis. <strong>História do usuário:</strong> como usuário não autenticado ou autenticado, posso ver e votar nas pesquisas de todos. <strong>História do usuário:</strong> como um usuário não autenticado ou autenticado, posso ver os resultados das pesquisas em forma de gráfico. (Isso pode ser implementado usando o Chart.js ou o Google Charts.) <strong>História de usuário:</strong> Como um usuário autenticado, se eu não gostar das opções em uma pesquisa, posso criar uma nova opção. Quando terminar de implementar essas histórias de usuários, clique no botão "Concluí este desafio" e insira os URLs do repositório do GitHub e do aplicativo ao vivo em execução no Heroku. Você pode obter feedback sobre o seu projeto, compartilhando-o com seus amigos no Facebook. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">
|
||||
|
||||
@ -8,7 +8,7 @@ localeTitle: Construa um visualizador da Wikipedia
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/wGqEga/" target="_blank">https://codepen.io/freeCodeCamp/full/wGqEga/</a> . Cumpra as <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">histórias de usuários</a> abaixo. Use as bibliotecas ou APIs de que você precisa. Dê seu estilo pessoal. <strong>História do usuário:</strong> posso pesquisar as entradas da Wikipedia em uma caixa de pesquisa e ver as entradas da Wikipedia resultantes. <strong>User Story:</strong> Eu posso clicar em um botão para ver uma entrada aleatória da Wikipedia. <span class="text-info">Dica # 1:</span> Aqui está uma URL que você pode usar para obter um artigo aleatório da Wikipédia: <code>https://en.wikipedia.org/wiki/Special:Random</code> . <span class="text-info">Dica # 2:</span> Aqui está uma entrada sobre o uso da API da Wikipedia: <code>https://www.mediawiki.org/wiki/API:Main_page</code> . <span class="text-info">Dica # 3:</span> use este <a href="https://en.wikipedia.org/wiki/Special:ApiSandbox#action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=jsonfm" target="_blank">link</a> para experimentar a API da Wikipedia. Lembre-se de usar <a href="http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. Quando terminar, clique no botão "Concluí este desafio" e inclua um link para o seu CodePen. Você pode obter feedback sobre o seu projeto, compartilhando-o com seus amigos no Facebook. </section>
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/wGqEga/" target="_blank">https://codepen.io/freeCodeCamp/full/wGqEga/</a> . Cumpra as <a href="https://pt.wikipedia.org/wiki/História_de_usuário" target="_blank">histórias de usuários</a> abaixo. Use as bibliotecas ou APIs de que você precisa. Dê seu estilo pessoal. <strong>História do usuário:</strong> posso pesquisar as entradas da Wikipedia em uma caixa de pesquisa e ver as entradas da Wikipedia resultantes. <strong>História de usuário:</strong> Eu posso clicar em um botão para ver uma entrada aleatória da Wikipedia. <span class="text-info">Dica # 1:</span> Aqui está uma URL que você pode usar para obter um artigo aleatório da Wikipédia: <code>https://en.wikipedia.org/wiki/Special:Random</code> . <span class="text-info">Dica # 2:</span> Aqui está uma entrada sobre o uso da API da Wikipedia: <code>https://www.mediawiki.org/wiki/API:Main_page</code> . <span class="text-info">Dica # 3:</span> use este <a href="https://en.wikipedia.org/wiki/Special:ApiSandbox#action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=jsonfm" target="_blank">link</a> para experimentar a API da Wikipedia. Lembre-se de usar <a href="http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. Quando terminar, clique no botão "Concluí este desafio" e inclua um link para o seu CodePen. Você pode obter feedback sobre o seu projeto, compartilhando-o com seus amigos no Facebook. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">
|
||||
|
||||
@ -8,7 +8,7 @@ localeTitle: Construa o Jogo da Vida
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/BpwMZv/" target="_blank">https://codepen.io/freeCodeCamp/full/BpwMZv/</a> . Cumpra as <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">histórias de usuários</a> abaixo. Use as bibliotecas ou APIs de que você precisa. Dê seu estilo pessoal. <strong>História do usuário:</strong> Quando eu chego ao jogo, ele gera aleatoriamente uma placa e começa a jogar. <strong>User Story:</strong> Eu posso começar e parar o fórum. <strong>História do usuário:</strong> posso configurar o quadro. <strong>História do usuário:</strong> posso limpar o quadro. <strong>User Story:</strong> Quando eu pressiono start, o jogo vai se esgotar. <strong>História do Usuário:</strong> Cada vez que o quadro muda, posso ver quantas gerações passaram. <strong>Dica:</strong> Aqui está uma explicação do Jogo da Vida de Conway do próprio John Conway: <a href="https://www.youtube.com/watch?v=E8kUJL04ELA" target="_blank">https://www.youtube.com/watch?v=E8kUJL04ELA</a> <strong>Dica:</strong> Aqui está uma visão geral do Jogo da Vida de Conway com regras para sua referência: <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> Lembre-se de usar <a href="//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help" target="_blank">Read-Search-Ask</a> se você ficar preso. Quando terminar, clique no botão "Concluí este desafio" e inclua um link para o seu CodePen. Você pode obter feedback sobre o seu projeto, compartilhando-o com seus amigos no Facebook. </section>
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/BpwMZv/" target="_blank">https://codepen.io/freeCodeCamp/full/BpwMZv/</a> . Cumpra as <a href="https://pt.wikipedia.org/wiki/História_de_usuário" target="_blank">histórias de usuários</a> abaixo. Use as bibliotecas ou APIs de que você precisa. Dê seu estilo pessoal. <strong>História do usuário:</strong> Quando eu chego ao jogo, ele gera aleatoriamente uma placa e começa a jogar. <strong>História de usuário:</strong> Eu posso começar e parar o fórum. <strong>História do usuário:</strong> posso configurar o quadro. <strong>História do usuário:</strong> posso limpar o quadro. <strong>História de usuário:</strong> Quando eu pressiono start, o jogo vai se esgotar. <strong>História do Usuário:</strong> Cada vez que o quadro muda, posso ver quantas gerações passaram. <strong>Dica:</strong> Aqui está uma explicação do Jogo da Vida de Conway do próprio John Conway: <a href="https://www.youtube.com/watch?v=E8kUJL04ELA" target="_blank">https://www.youtube.com/watch?v=E8kUJL04ELA</a> <strong>Dica:</strong> Aqui está uma visão geral do Jogo da Vida de Conway com regras para sua referência: <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> Lembre-se de usar <a href="//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help" target="_blank">Read-Search-Ask</a> se você ficar preso. Quando terminar, clique no botão "Concluí este desafio" e inclua um link para o seu CodePen. Você pode obter feedback sobre o seu projeto, compartilhando-o com seus amigos no Facebook. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">
|
||||
|
||||
@ -8,7 +8,7 @@ localeTitle: Gráfico do mercado de ações
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo JavaScript de pilha completa que seja funcionalmente semelhante a este: <a href="http://watchstocks.herokuapp.com/" target="_blank">http://watchstocks.herokuapp.com/</a> e implante-o no Heroku. Note que para cada projeto, você deve criar um novo repositório GitHub e um novo projeto Heroku. Se você não consegue lembrar como fazer isso, visite <a href="/challenges/get-set-for-our-dynamic-web-application-projects">https://freecodecamp.com/challenges/get-set-for-our-dynamic-web-application-projects</a> . Aqui estão as histórias de usuário específicas que você deve implementar para este projeto: <strong>User Story:</strong> Eu posso visualizar um gráfico exibindo as linhas de tendência recentes para cada estoque adicionado. <strong>User Story:</strong> Eu posso adicionar novas ações pelo seu nome de símbolo. <strong>História do usuário:</strong> posso remover estoques. <strong>História do usuário:</strong> posso ver alterações em tempo real quando qualquer outro usuário adiciona ou remove um estoque. Para isso, você precisará usar Web Sockets. Quando terminar de implementar essas histórias de usuários, clique no botão "Concluí este desafio" e insira os URLs do repositório do GitHub e do aplicativo ao vivo em execução no Heroku. Você pode obter feedback sobre o seu projeto, compartilhando-o com seus amigos no Facebook. </section>
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo JavaScript de pilha completa que seja funcionalmente semelhante a este: <a href="http://watchstocks.herokuapp.com/" target="_blank">http://watchstocks.herokuapp.com/</a> e implante-o no Heroku. Note que para cada projeto, você deve criar um novo repositório GitHub e um novo projeto Heroku. Se você não consegue lembrar como fazer isso, visite <a href="/challenges/get-set-for-our-dynamic-web-application-projects">https://freecodecamp.com/challenges/get-set-for-our-dynamic-web-application-projects</a> . Aqui estão as histórias de usuário específicas que você deve implementar para este projeto: <strong>História de usuário:</strong> Eu posso visualizar um gráfico exibindo as linhas de tendência recentes para cada estoque adicionado. <strong>História de usuário:</strong> Eu posso adicionar novas ações pelo seu nome de símbolo. <strong>História do usuário:</strong> posso remover estoques. <strong>História do usuário:</strong> posso ver alterações em tempo real quando qualquer outro usuário adiciona ou remove um estoque. Para isso, você precisará usar Web Sockets. Quando terminar de implementar essas histórias de usuários, clique no botão "Concluí este desafio" e insira os URLs do repositório do GitHub e do aplicativo ao vivo em execução no Heroku. Você pode obter feedback sobre o seu projeto, compartilhando-o com seus amigos no Facebook. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">
|
||||
|
||||
@ -7,7 +7,7 @@ localeTitle: Gerenciar um Clube de Negociação de Livros
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://glitch.com" target="_blank">Glitch</a> que seja funcionalmente semelhante a este: <a href="https://chrome-delivery.glitch.me/ /" target="_blank">https://chrome-delivery.glitch.me</a> . Cumpra as <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">histórias de usuários</a> abaixo. Use as bibliotecas ou APIs de que você precisa. Dê seu estilo pessoal. <strong>História do usuário:</strong> posso ver todos os livros postados por todos os usuários. <strong>User Story:</strong> posso adicionar um novo livro. <strong>História do usuário:</strong> posso atualizar minhas configurações para armazenar meu nome completo, cidade e estado. <strong>User Story:</strong> Eu posso propor uma negociação e esperar que o outro usuário aceite a negociação. Quando terminar de implementar essas histórias de usuários, clique no botão "Concluí este desafio" e insira os URLs do repositório do GitHub e do aplicativo ao vivo em execução no Heroku. Você pode obter feedback sobre o seu projeto, compartilhando-o com seus amigos no Facebook. </section>
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://glitch.com" target="_blank">Glitch</a> que seja funcionalmente semelhante a este: <a href="https://chrome-delivery.glitch.me/ /" target="_blank">https://chrome-delivery.glitch.me</a> . Cumpra as <a href="https://pt.wikipedia.org/wiki/História_de_usuário" target="_blank">histórias de usuários</a> abaixo. Use as bibliotecas ou APIs de que você precisa. Dê seu estilo pessoal. <strong>História do usuário:</strong> posso ver todos os livros postados por todos os usuários. <strong>História de usuário:</strong> posso adicionar um novo livro. <strong>História do usuário:</strong> posso atualizar minhas configurações para armazenar meu nome completo, cidade e estado. <strong>História de usuário:</strong> Eu posso propor uma negociação e esperar que o outro usuário aceite a negociação. Quando terminar de implementar essas histórias de usuários, clique no botão "Concluí este desafio" e insira os URLs do repositório do GitHub e do aplicativo ao vivo em execução no Heroku. Você pode obter feedback sobre o seu projeto, compartilhando-o com seus amigos no Facebook. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">
|
||||
|
||||
@ -8,7 +8,7 @@ localeTitle: Dados de mapa em todo o mundo
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/mVEJag" target="_blank">https://codepen.io/freeCodeCamp/full/mVEJag</a> . Cumpra as seguintes <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">histórias de usuários</a> . Use as bibliotecas ou APIs de que você precisa. Dê seu estilo pessoal. <strong>User Story:</strong> Eu posso ver onde todos os meteoritos pousaram em um mapa do mundo. <strong>História do Usuário:</strong> Eu posso dizer o tamanho relativo do meteorito, apenas observando a maneira como ele é representado no mapa. <strong>User Story:</strong> Eu posso passar o mouse sobre o ponto de dados do meteorito para dados adicionais. <strong>Dica:</strong> Aqui está um conjunto de dados que você pode usar para construir isso: <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> Lembre-se de usar <a href="http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se ficar preso. Quando terminar, clique no botão "Concluí este desafio" e inclua um link para o seu CodePen. Você pode obter feedback sobre o seu projeto, compartilhando-o com seus amigos no Facebook. </section>
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/mVEJag" target="_blank">https://codepen.io/freeCodeCamp/full/mVEJag</a> . Cumpra as seguintes <a href="https://pt.wikipedia.org/wiki/História_de_usuário" target="_blank">histórias de usuários</a> . Use as bibliotecas ou APIs de que você precisa. Dê seu estilo pessoal. <strong>História de usuário:</strong> Eu posso ver onde todos os meteoritos pousaram em um mapa do mundo. <strong>História do Usuário:</strong> Eu posso dizer o tamanho relativo do meteorito, apenas observando a maneira como ele é representado no mapa. <strong>História de usuário:</strong> Eu posso passar o mouse sobre o ponto de dados do meteorito para dados adicionais. <strong>Dica:</strong> Aqui está um conjunto de dados que você pode usar para construir isso: <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> Lembre-se de usar <a href="http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se ficar preso. Quando terminar, clique no botão "Concluí este desafio" e inclua um link para o seu CodePen. Você pode obter feedback sobre o seu projeto, compartilhando-o com seus amigos no Facebook. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">
|
||||
|
||||
@ -8,7 +8,7 @@ localeTitle: P2P Video Chat Application
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://glitch.com" target="_blank">Glitch</a> que seja funcionalmente semelhante a este: <a href="https://grove-voice.glitch.me/" target="_blank">https://grove-voice.glitch.me</a> . Cumpra as <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">histórias de usuários</a> abaixo. Use as bibliotecas ou APIs de que você precisa. Dê seu estilo pessoal. <strong>História do usuário:</strong> Ao chegar, o navegador solicitará que eu acesse minha câmera e meu microfone. <strong>História do usuário:</strong> depois de dar permissão, sou solicitado a digitar um nome de sala. <strong>User Story:</strong> Uma vez que eu digite o nome do quarto, uma sala será criada se nenhuma sala desse nome existir antes. <strong>User Story:</strong> Um amigo meu pode, subseqüentemente, ir ao mesmo site, digitar na mesma sala que eu inseri e entrar na mesma sala, depois entrar em um bate-papo por vídeo comigo. <strong>História do usuário:</strong> se eu digitar um nome de sala e já houver duas pessoas nessa sala, receberei uma notificação de que a sala está cheia. <strong>User Story:</strong> Qualquer pessoa pode criar ou participar de qualquer sala. E pode haver vários quartos, mas todos eles devem ter nomes exclusivos. <strong>História do usuário:</strong> posso optar por não permitir que o site acesse meu microfone e minha webcam. Se eu optar por não fazer isso, se ocorrer algum outro problema de driver, vejo uma mensagem de erro dizendo que isso é necessário. <strong>User Story:</strong> Quando eu escolho cancelar a etapa de entrada do nome da sala, ou se eu digitar sem nome, ou apenas espaços, ela deve novamente perguntar novamente para digitar um nome de sala válido. <strong>História do usuário:</strong> se uma das duas pessoas na sala for desconectada, ela poderá se reconectar à mesma sala e continuar conversando. Lembre-se de usar <a href="http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. Quando terminar, clique no botão "Concluí este desafio" e inclua um link para seu aplicativo Glitch. Você pode obter feedback sobre o seu projeto, compartilhando-o com seus amigos no Facebook. </section>
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://glitch.com" target="_blank">Glitch</a> que seja funcionalmente semelhante a este: <a href="https://grove-voice.glitch.me/" target="_blank">https://grove-voice.glitch.me</a> . Cumpra as <a href="https://pt.wikipedia.org/wiki/História_de_usuário" target="_blank">histórias de usuários</a> abaixo. Use as bibliotecas ou APIs de que você precisa. Dê seu estilo pessoal. <strong>História do usuário:</strong> Ao chegar, o navegador solicitará que eu acesse minha câmera e meu microfone. <strong>História do usuário:</strong> depois de dar permissão, sou solicitado a digitar um nome de sala. <strong>História de usuário:</strong> Uma vez que eu digite o nome do quarto, uma sala será criada se nenhuma sala desse nome existir antes. <strong>História de usuário:</strong> Um amigo meu pode, subseqüentemente, ir ao mesmo site, digitar na mesma sala que eu inseri e entrar na mesma sala, depois entrar em um bate-papo por vídeo comigo. <strong>História do usuário:</strong> se eu digitar um nome de sala e já houver duas pessoas nessa sala, receberei uma notificação de que a sala está cheia. <strong>História de usuário:</strong> Qualquer pessoa pode criar ou participar de qualquer sala. E pode haver vários quartos, mas todos eles devem ter nomes exclusivos. <strong>História do usuário:</strong> posso optar por não permitir que o site acesse meu microfone e minha webcam. Se eu optar por não fazer isso, se ocorrer algum outro problema de driver, vejo uma mensagem de erro dizendo que isso é necessário. <strong>História de usuário:</strong> Quando eu escolho cancelar a etapa de entrada do nome da sala, ou se eu digitar sem nome, ou apenas espaços, ela deve novamente perguntar novamente para digitar um nome de sala válido. <strong>História do usuário:</strong> se uma das duas pessoas na sala for desconectada, ela poderá se reconectar à mesma sala e continuar conversando. Lembre-se de usar <a href="http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. Quando terminar, clique no botão "Concluí este desafio" e inclua um link para seu aplicativo Glitch. Você pode obter feedback sobre o seu projeto, compartilhando-o com seus amigos no Facebook. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">
|
||||
|
||||
@ -8,7 +8,7 @@ localeTitle: Mostrar Contigüidade Nacional com um Gráfico de Força Direcionad
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/xVopBo" target="_blank">https://codepen.io/freeCodeCamp/full/xVopBo</a> . Cumpra as seguintes <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">histórias de usuários</a> . Use as bibliotecas ou APIs de que você precisa. Dê seu estilo pessoal. <strong>História do usuário:</strong> vejo um gráfico direcionado pela força que mostra quais países compartilham bordas. <strong>User Story:</strong> Eu posso ver a bandeira de cada país em seu nó. <strong>Dica:</strong> Aqui está um conjunto de dados que você pode usar para construir isso: <a href="https://raw.githubusercontent.com/DealPete/forceDirected/master/countries.json" target="_blank">https://raw.githubusercontent.com/DealPete/forceDirected/master/countries.json</a> <strong>Dica:</strong> você pode criar uma spritesheet de bandeiras nacionais em <a href="https://www.flag-sprites.com" target="_blank">https: //www.flag- sprites.com</a> . Lembre-se de usar <a href="http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. Quando terminar, clique no botão "Concluí este desafio" e inclua um link para o seu CodePen. Você pode obter feedback sobre o seu projeto, compartilhando-o com seus amigos no Facebook. </section>
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/xVopBo" target="_blank">https://codepen.io/freeCodeCamp/full/xVopBo</a> . Cumpra as seguintes <a href="https://pt.wikipedia.org/wiki/História_de_usuário" target="_blank">histórias de usuários</a> . Use as bibliotecas ou APIs de que você precisa. Dê seu estilo pessoal. <strong>História do usuário:</strong> vejo um gráfico direcionado pela força que mostra quais países compartilham bordas. <strong>História de usuário:</strong> Eu posso ver a bandeira de cada país em seu nó. <strong>Dica:</strong> Aqui está um conjunto de dados que você pode usar para construir isso: <a href="https://raw.githubusercontent.com/DealPete/forceDirected/master/countries.json" target="_blank">https://raw.githubusercontent.com/DealPete/forceDirected/master/countries.json</a> <strong>Dica:</strong> você pode criar uma spritesheet de bandeiras nacionais em <a href="https://www.flag-sprites.com" target="_blank">https: //www.flag- sprites.com</a> . Lembre-se de usar <a href="http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. Quando terminar, clique no botão "Concluí este desafio" e inclua um link para o seu CodePen. Você pode obter feedback sobre o seu projeto, compartilhando-o com seus amigos no Facebook. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">
|
||||
|
||||
@ -8,7 +8,7 @@ localeTitle: Mostrar o clima local
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/bELRjV" target="_blank">https://codepen.io/freeCodeCamp/full/bELRjV</a> . <strong>Regra nº 1:</strong> não olhe o código do projeto de exemplo. Descobrir por si mesmo. <strong>Regra nº 2:</strong> Cumpra as <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">histórias de usuários</a> abaixo. Use as bibliotecas ou APIs de que você precisa. Dê seu estilo pessoal. <strong>User Story:</strong> Eu posso ver o tempo na minha localização atual. <strong>User Story:</strong> Eu posso ver um ícone diferente ou imagem de fundo (por exemplo, montanha nevada, deserto quente), dependendo do tempo. <strong>User Story:</strong> Eu posso apertar um botão para alternar entre Fahrenheit e Celsius. <strong>Nota:</strong> Muitos navegadores da Internet agora precisam de uma conexão HTTP Segura ( <code>https://</code> ) para obter a localidade de um usuário por meio da Geolocalização HTML5. Por esse motivo, recomendamos o uso do HTML5 Geolocation para obter a localização do usuário e, em seguida, usar a API do FreeCodeCamp Weather <a href="https://fcc-weather-api.glitch.me" target="_blank">https://fcc-weather-api.glitch.me,</a> que usa uma conexão HTTP segura para o clima. Além disso, certifique-se de conectar-se ao <a href="https://codepen.io" target="_blank">CodePen.io</a> via <code>https://</code> . Lembre-se de usar <a href="http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. Quando terminar, clique no botão "Concluí este desafio" e inclua um link para o seu CodePen. Você pode obter feedback sobre o seu projeto, compartilhando-o com seus amigos no Facebook. </section>
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/bELRjV" target="_blank">https://codepen.io/freeCodeCamp/full/bELRjV</a> . <strong>Regra nº 1:</strong> não olhe o código do projeto de exemplo. Descobrir por si mesmo. <strong>Regra nº 2:</strong> Cumpra as <a href="https://pt.wikipedia.org/wiki/História_de_usuário" target="_blank">histórias de usuários</a> abaixo. Use as bibliotecas ou APIs de que você precisa. Dê seu estilo pessoal. <strong>História de usuário:</strong> Eu posso ver o tempo na minha localização atual. <strong>História de usuário:</strong> Eu posso ver um ícone diferente ou imagem de fundo (por exemplo, montanha nevada, deserto quente), dependendo do tempo. <strong>História de usuário:</strong> Eu posso apertar um botão para alternar entre Fahrenheit e Celsius. <strong>Nota:</strong> Muitos navegadores da Internet agora precisam de uma conexão HTTP Segura ( <code>https://</code> ) para obter a localidade de um usuário por meio da Geolocalização HTML5. Por esse motivo, recomendamos o uso do HTML5 Geolocation para obter a localização do usuário e, em seguida, usar a API do FreeCodeCamp Weather <a href="https://fcc-weather-api.glitch.me" target="_blank">https://fcc-weather-api.glitch.me,</a> que usa uma conexão HTTP segura para o clima. Além disso, certifique-se de conectar-se ao <a href="https://codepen.io" target="_blank">CodePen.io</a> via <code>https://</code> . Lembre-se de usar <a href="http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. Quando terminar, clique no botão "Concluí este desafio" e inclua um link para o seu CodePen. Você pode obter feedback sobre o seu projeto, compartilhando-o com seus amigos no Facebook. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">
|
||||
|
||||
@ -8,7 +8,7 @@ localeTitle: Use a API JSON do Twitch
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/Myvqmo/" target="_blank">https://codepen.io/freeCodeCamp/full/Myvqmo/</a> . Cumpra as <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">histórias de usuários</a> abaixo. Use as bibliotecas ou APIs de que você precisa. Dê seu estilo pessoal. <strong>User Story:</strong> Eu posso ver se freeCodeCamp está atualmente transmitindo no Twitch.tv. <strong>User Story:</strong> Eu posso clicar na saída de status e ser enviado diretamente para o canal Twitch.tv do freeCodeCamp. <strong>História do usuário:</strong> se um usuário do Twitch estiver fazendo streaming no momento, posso ver detalhes adicionais sobre o que está sendo transmitido. <strong>Dica:</strong> Veja um exemplo de chamada para a API JSONP do Twitch.tv em <a href="http://forum.freecodecamp.org/t/use-the-twitchtv-json-api/19541" target="_blank">http://forum.freecodecamp.org/t/use-the-twitchtv-json-api/19541</a> . <strong>Dica:</strong> A documentação relevante sobre esta chamada da API está aqui: <a href="https://dev.twitch.tv/docs/v5/reference/streams/#get-stream-by-user" target="_blank">https://dev.twitch.tv/docs/v5/reference/streams/#get-stream-by-user</a> . <strong>Dica:</strong> Aqui está uma matriz dos nomes de usuários do Twitch.tv de pessoas que <code>["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"]</code> stream regularmente: <code>["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"]</code> <strong>ATUALIZAÇÃO:</strong> Devido a uma alteração nas condições de uso da API, explicado <a href="https://blog.twitch.tv/client-id-required-for-kraken-api-calls-afbb8e95f843#.f8hipkht1" target="_blank">aqui, o</a> Twitch.tv agora requer uma chave de API, mas criamos uma solução alternativa. Use <a href="https://wind-bow.glitch.me" target="_blank">https://wind-bow.glitch.me/twitch-api em</a> vez do URL base da API do twitch (ou seja, https://api.twitch.tv/kraken) e você ainda poderá obter informações da conta, sem precisar para se inscrever em uma chave de API. Lembre-se de usar <a href="http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. Quando terminar, clique no botão "Concluí este desafio" e inclua um link para o seu CodePen. Você pode obter feedback sobre o seu projeto, compartilhando-o com seus amigos no Facebook. </section>
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/Myvqmo/" target="_blank">https://codepen.io/freeCodeCamp/full/Myvqmo/</a> . Cumpra as <a href="https://pt.wikipedia.org/wiki/História_de_usuário" target="_blank">histórias de usuários</a> abaixo. Use as bibliotecas ou APIs de que você precisa. Dê seu estilo pessoal. <strong>História de usuário:</strong> Eu posso ver se freeCodeCamp está atualmente transmitindo no Twitch.tv. <strong>História de usuário:</strong> Eu posso clicar na saída de status e ser enviado diretamente para o canal Twitch.tv do freeCodeCamp. <strong>História do usuário:</strong> se um usuário do Twitch estiver fazendo streaming no momento, posso ver detalhes adicionais sobre o que está sendo transmitido. <strong>Dica:</strong> Veja um exemplo de chamada para a API JSONP do Twitch.tv em <a href="http://forum.freecodecamp.org/t/use-the-twitchtv-json-api/19541" target="_blank">http://forum.freecodecamp.org/t/use-the-twitchtv-json-api/19541</a> . <strong>Dica:</strong> A documentação relevante sobre esta chamada da API está aqui: <a href="https://dev.twitch.tv/docs/v5/reference/streams/#get-stream-by-user" target="_blank">https://dev.twitch.tv/docs/v5/reference/streams/#get-stream-by-user</a> . <strong>Dica:</strong> Aqui está uma matriz dos nomes de usuários do Twitch.tv de pessoas que <code>["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"]</code> stream regularmente: <code>["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"]</code> <strong>ATUALIZAÇÃO:</strong> Devido a uma alteração nas condições de uso da API, explicado <a href="https://blog.twitch.tv/client-id-required-for-kraken-api-calls-afbb8e95f843#.f8hipkht1" target="_blank">aqui, o</a> Twitch.tv agora requer uma chave de API, mas criamos uma solução alternativa. Use <a href="https://wind-bow.glitch.me" target="_blank">https://wind-bow.glitch.me/twitch-api em</a> vez do URL base da API do twitch (ou seja, https://api.twitch.tv/kraken) e você ainda poderá obter informações da conta, sem precisar para se inscrever em uma chave de API. Lembre-se de usar <a href="http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. Quando terminar, clique no botão "Concluí este desafio" e inclua um link para o seu CodePen. Você pode obter feedback sobre o seu projeto, compartilhando-o com seus amigos no Facebook. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">
|
||||
|
||||
Reference in New Issue
Block a user