chore(i18n,curriculum): update translations (#44553)
This commit is contained in:
camperbot
GitHub
@ -10,31 +10,31 @@ dashedName: build-a-personal-portfolio-webpage
|
||||
|
||||
**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: <https://codepen.io/freeCodeCamp/full/zNBOYG>.
|
||||
|
||||
Atenda às [especificações de usuário](https://en.wikipedia.org/wiki/User_story) abaixo para passar em todos os testes. Dê à página o seu próprio estilo pessoal.
|
||||
Atenda às [histórias de usuário](https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio) abaixo e obtenha aprovação em todos os testes. Dê à página o seu próprio estilo pessoal.
|
||||
|
||||
Você pode usar HTML, JavaScript e CSS para completar este projeto. É recomendado utilizar CSS puro, pois é disso que trataram as lições até agora. É bom você adquirir alguma prática com CSS. Você pode usar Bootstrap ou SASS se quiser. Outras tecnologias (como, por exemplo, jQuery, React, Angular ou Vue) não são recomendadas para este projeto. Use-as por sua conta e risco. Outros projetos te darão uma chance de trabalhar com diferentes bibliotecas, como o React. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem a stack de tecnologias sugerida para esse projeto. Boa programação!
|
||||
|
||||
**Especificação de usuário nº 1:** o portfólio deve ter uma seção de boas-vindas com um id de `welcome-section`.
|
||||
**História de usuário nº 1:** o portfólio deve ter uma seção de boas-vindas com um id de `welcome-section`.
|
||||
|
||||
**Especificação de usuário nº 2:** a seção de boas-vindas deve ter um elemento `h1` que contenha algum texto.
|
||||
**História de usuário nº 2:** a seção de boas-vindas deve ter um elemento `h1` que contenha algum texto.
|
||||
|
||||
**Especificação de usuário nº 3:** o portfólio deve ter uma seção de projetos com um id de `projects`.
|
||||
**História de usuário nº 3:** o portfólio deve ter uma seção de projetos com um id de `projects`.
|
||||
|
||||
**Especificação de usuário nº 4:** a seção de projetos deve conter pelo menos um elemento com uma classe de `project-tile` para armazenar um projeto.
|
||||
**História de usuário nº 4:** a seção de projetos deve conter pelo menos um elemento com uma classe de `project-tile` para armazenar um projeto.
|
||||
|
||||
**Especificação de usuário nº 5:** a seção de projetos deve conter pelo menos um link para um projeto.
|
||||
**História de usuário nº 5:** a seção de projetos deve conter pelo menos um link para um projeto.
|
||||
|
||||
**Especificação de usuário nº 6:** o portfólio deve ter uma seção de projetos com um id de `navbar`.
|
||||
**História de usuário nº 6:** o portfólio deve ter uma seção de projetos com um id de `navbar`.
|
||||
|
||||
**Especificação de usuário nº 7:** a barra de navegação deve conter pelo menos um link clicável para navegar por diferentes seções na página.
|
||||
**História de usuário nº 7:** a barra de navegação deve conter pelo menos um link clicável para navegar por diferentes seções na página.
|
||||
|
||||
**Especificação de usuário nº 8:** o portfólio deve ter um link com id `profile-link`, que abre um perfil do GitHub ou do FCC em uma nova aba.
|
||||
**História de usuário nº 8:** o portfólio deve ter um link com id `profile-link`, que abre um perfil do GitHub ou do FCC em uma nova aba.
|
||||
|
||||
**Especificação de usuário nº 9:** o portfólio deve ter pelo menos uma media query.
|
||||
**História de usuário nº 9:** o portfólio deve ter pelo menos uma media query.
|
||||
|
||||
**Especificação de usuário nº 10:** a altura da seção de boas-vindas deve ser igual à altura da viewport.
|
||||
**História de usuário nº 10:** a altura da seção de boas-vindas deve ser igual à altura da viewport.
|
||||
|
||||
**Especificação de usuário nº 11:** a barra de navegação deve estar sempre na parte superior da viewport.
|
||||
**História de usuário nº 11:** a barra de navegação deve estar sempre na parte superior da viewport.
|
||||
|
||||
Você pode fazer o seu projeto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este modelo da CodePen</a> e, logo após, clicar em `Save` para criar seu próprio projeto. Como alternativa, use este link da nossa CDN para executar os testes em qualquer ambiente que você preferir: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
|
||||
@ -10,39 +10,39 @@ dashedName: build-a-product-landing-page
|
||||
|
||||
**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: <https://codepen.io/freeCodeCamp/full/RKRbwL>.
|
||||
|
||||
Atenda às [especificações de usuário](https://en.wikipedia.org/wiki/User_story) abaixo para passar em todos os testes. Dê à página o seu próprio estilo pessoal.
|
||||
Atenda às [histórias de usuário](https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio) abaixo e obtenha aprovação em todos os testes. Dê à página o seu próprio estilo pessoal.
|
||||
|
||||
Você pode usar HTML, JavaScript e CSS para completar este projeto. É recomendado utilizar CSS puro, pois é disso que trataram as lições até agora. É bom você adquirir alguma prática com CSS. Você pode usar Bootstrap ou SASS se quiser. Outras tecnologias (como, por exemplo, jQuery, React, Angular ou Vue) não são recomendadas para este projeto. Use-as por sua conta e risco. Outros projetos te darão uma chance de trabalhar com diferentes bibliotecas, como o React. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem a stack de tecnologias sugerida para esse projeto. Boa programação!
|
||||
|
||||
**Especificação de usuário nº 1:** a landing page do produto deve ter um elemento `header` com um `id="header"` correspondente.
|
||||
**História de usuário nº 1:** a página inicial do produto deve ter um elemento `header` com um `id="header"` correspondente.
|
||||
|
||||
**Especificação de usuário nº 2:** deve haver uma imagem dentro do elemento `header` com um `id="header-img"` correspondente. Um logotipo da empresa seria uma boa imagem para colocar aqui.
|
||||
**História de usuário nº 2:** deve haver uma imagem dentro do elemento `header` com um `id="header-img"` correspondente. Um logotipo da empresa seria uma boa imagem para colocar aqui.
|
||||
|
||||
**Especificação de usuário nº 3:** dentro do elemento `#header`, deve haver um elemento `nav` com um `id="nav-bar"`.
|
||||
**História de usuário nº 3:** dentro do elemento `#header`, deve haver um elemento `nav` com um `id="nav-bar"`.
|
||||
|
||||
**Especificação de usuário nº 4:** deve haver pelo menos três elementos clicáveis dentro do elemento `nav` e cada um deles deve ter a classe `nav-link`.
|
||||
**História de usuário nº 4:** deve haver pelo menos três elementos clicáveis dentro do elemento `nav` e cada um deles deve ter a classe `nav-link`.
|
||||
|
||||
**Especificação de usuário nº 5:** ao clicar em um botão com a classe `.nav-link` no elemento `nav`, o usuário deve ser levado para a seção correspondente na landing page.
|
||||
**História de usuário nº 5:** ao clicar em um botão com a classe `.nav-link` no elemento `nav`, o usuário deve ser levado para a seção correspondente na página inicial.
|
||||
|
||||
**Especificação de usuário nº 6:** é possível assistir a um vídeo do produto no elemento de `id="video"`.
|
||||
**História de usuário nº 6:** é possível assistir a um vídeo do produto no elemento de `id="video"`.
|
||||
|
||||
**Especificação de usuário nº 7:** a landing page deve ter um formulário (`form`) com um `id="form"`.
|
||||
**História de usuário nº 7:** a landing page deve ter um formulário (`form`) com um `id="form"`.
|
||||
|
||||
**Especificação de usuário nº 8:** dentro do formulário, deve haver um campo de entrada (`input`) com `id="email"`, onde deve ser possível digitar um endereço de e-mail.
|
||||
**História de usuário nº 8:** dentro do formulário, deve haver um campo de entrada (`input`) com `id="email"`, onde deve ser possível digitar um endereço de e-mail.
|
||||
|
||||
**Especificação de usuário nº 9:** o campo de entrada `#email` deve ter um placeholder (texto ilustrativo) para que o usuário saiba para que serve o campo.
|
||||
**História de usuário nº 9:** o campo de entrada `#email` deve ter um placeholder (texto ilustrativo) para que o usuário saiba para que serve o campo.
|
||||
|
||||
**Especificação de usuário nº 10:** o campo de entrada `#email` deve usar a validação do próprio HTML5 para confirmar que o texto inserido é um endereço de e-mail.
|
||||
**História de usuário nº 10:** o campo de entrada `#email` deve usar a validação do próprio HTML5 para confirmar que o texto inserido é um endereço de e-mail.
|
||||
|
||||
**Especificação de usuário nº 11:** dentro do formulário, deve haver um campo de entrada (`input`) do tipo botão com `id="submit"`.
|
||||
**História de usuário nº 11:** dentro do formulário, deve haver um campo de entrada (`input`) do tipo botão com `id="submit"`.
|
||||
|
||||
**Especificação de usuário nº 12:** quando o elemento `#submit` for clicado, o e-mail deve ser enviado para uma página estática (use esta URL fictícia: [https://www.reecodecamp.com/email-enviar](https://www.freecodecamp.com/email-submit)).
|
||||
**História de usuário nº 12:** quando o elemento `#submit` for clicado, o e-mail deve ser enviado para uma página estática (use esta URL fictícia: [https://www.freecodecamp.com/email-enviar](https://www.freecodecamp.com/email-submit)).
|
||||
|
||||
**Especificação de usuário nº 13:** a barra de navegação deve estar sempre na parte superior da viewport.
|
||||
**História de usuário nº 13:** a barra de navegação deve estar sempre na parte superior da viewport.
|
||||
|
||||
**Especificação de usuário nº 14:** a landing page deve ter pelo menos uma media query.
|
||||
**História de usuário nº 14:** a página inicial deve ter pelo menos uma media query.
|
||||
|
||||
**Especificação de usuário nº 15:** a landing page deve utilizar pelo menos uma vez o CSS Flexbox.
|
||||
**História de usuário nº 15:** a página inicial deve utilizar pelo menos uma vez o CSS Flexbox.
|
||||
|
||||
Você pode fazer o seu projeto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este modelo da CodePen</a> e, logo após, clicar em `Save` para criar seu próprio projeto. Como alternativa, use este link da nossa CDN para executar os testes em qualquer ambiente que você preferir: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
|
||||
@ -10,41 +10,41 @@ dashedName: build-a-survey-form
|
||||
|
||||
**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: <https://codepen.io/freeCodeCamp/full/VPaoNP>.
|
||||
|
||||
Atenda às [especificações de usuário](https://en.wikipedia.org/wiki/User_story) abaixo para passar em todos os testes. Dê à página o seu próprio estilo pessoal.
|
||||
Atenda às [histórias de usuário](https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio) abaixo e obtenha aprovação em todos os testes. Dê à página o seu próprio estilo pessoal.
|
||||
|
||||
Você pode usar HTML, JavaScript e CSS para completar este projeto. É recomendado utilizar CSS puro, pois é disso que trataram as lições até agora. É bom você adquirir alguma prática com CSS. Você pode usar Bootstrap ou SASS se quiser. Outras tecnologias (como, por exemplo, jQuery, React, Angular ou Vue) não são recomendadas para este projeto. Use-as por sua conta e risco. Outros projetos te darão uma chance de trabalhar com diferentes bibliotecas, como o React. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem a stack de tecnologias sugerida para esse projeto. Boa programação!
|
||||
|
||||
**Especificação de usuário nº 1:** deve haver um título com `id="title"` que possua o tamanho de uma tag h1.
|
||||
**História de usuário nº 1:** deve haver um título com `id="title"` que possua o tamanho de uma tag h1.
|
||||
|
||||
**Especificação de usuário nº 2:** deve haver uma descrição curta com `id="description"` que possua o tamanho de uma tag p.
|
||||
**História de usuário nº 2:** deve haver uma descrição curta com `id="description"` que possua o tamanho de uma tag p.
|
||||
|
||||
**Especificação de usuário nº 3:** deve haver um formulário (`form`) com `id="survey-form"`.
|
||||
**História de usuário nº 3:** deve haver um formulário (`form`) com `id="survey-form"`.
|
||||
|
||||
**Especificação de usuário nº 4:** dentro do elemento de formulário, é necessário inserir um nome em um campo de entrada (input) com `id="name"`.
|
||||
**História de usuário nº 4:** dentro do elemento de formulário, é necessário inserir um nome em um campo de entrada (input) com `id="name"`.
|
||||
|
||||
**Especificação de usuário nº 5:** dentro do elemento de formulário, é necessário inserir um e-mail em um campo de entrada (input) com `id="email"`.
|
||||
**História de usuário nº 5:** dentro do elemento de formulário, é necessário inserir um e-mail em um campo de entrada (input) com `id="email"`.
|
||||
|
||||
**Especificação de usuário nº 6:** se for informado um e-mail que não esteja correto, um erro de validação HTML5 deve ser mostrado.
|
||||
**História de usuário nº 6:** se for informado um e-mail que não esteja correto, um erro de validação HTML5 deve ser mostrado.
|
||||
|
||||
**Especificação de usuário nº 7:** dentro do elemento de formulário, é possível inserir um número em um campo de entrada (input) com `id="number"`.
|
||||
**História de usuário nº 7:** dentro do elemento de formulário, é possível inserir um número em um campo de entrada (input) com `id="number"`.
|
||||
|
||||
**Especificação de usuário nº 8:** se for informado qualquer dígito não-numérico, um erro de validação HTML5 deve ser mostrado.
|
||||
**História de usuário nº 8:** se for informado qualquer dígito não-numérico, um erro de validação HTML5 deve ser mostrado.
|
||||
|
||||
**Especificação de usuário nº 9:** se forem digitados números fora do intervalo permitido no campo de entrada de número, definido pelos atributos `min` e `max`, um erro de validação de HTML5 deve ser mostrado.
|
||||
**História de usuário nº 9:** se forem digitados números fora do intervalo permitido no campo de entrada de número, definido pelos atributos `min` e `max`, um erro de validação de HTML5 deve ser mostrado.
|
||||
|
||||
**Especificação de usuário nº 10:** para os campos de entrada (inputs) nome, e-mail e número dentro do formulário, deve haver rótulos (labels) correspondentes que descrevam o propósito de cada campo com os seguintes ids: `id="name-label"`, `id="email-label"`, e `id="number-label"`.
|
||||
**História de usuário nº 10:** para os campos de entrada (inputs) nome, e-mail e número dentro do formulário, deve haver rótulos (labels) correspondentes que descrevam o propósito de cada campo com os seguintes ids: `id="name-label"`, `id="email-label"`, e `id="number-label"`.
|
||||
|
||||
**Especificação de usuário nº 11:** para os campos de entrada nome, e-mail e número, deve haver um texto placeholder (text ilustrativo) que forneça uma descrição ou instruções para cada campo.
|
||||
**História de usuário nº 11:** para os campos de entrada nome, e-mail e número, deve haver um texto placeholder (texto ilustrativo) que forneça uma descrição ou instruções para cada campo.
|
||||
|
||||
**Especificação de usuário nº 12:** dentro do elemento de formulário, deve ser possível selecionar uma opção de uma lista suspensa que tenha um `id="dropdown"`.
|
||||
**História de usuário nº 12:** dentro do elemento de formulário, deve ser possível selecionar uma opção de uma lista suspensa que tenha um `id="dropdown"`.
|
||||
|
||||
**Especificação de usuário nº 13:** dentro do elemento de formulário, deve ser possível selecionar um campo de um ou mais grupos de inputs do tipo radio. Os grupos devem ser identificados pelo valor dado ao atributo `name`.
|
||||
**História de usuário nº 13:** dentro do elemento de formulário, deve ser possível selecionar um campo de um ou mais grupos de inputs do tipo radio. Os grupos devem ser identificados pelo valor dado ao atributo `name`.
|
||||
|
||||
**Especificação de usuário nº 14:** dentro do elemento de formulário, deve ser possível selecionar vários campos de uma série de caixas de seleção (checkbox). Cada um desses campos deve ter um atributo `value`.
|
||||
**História de usuário nº 14:** dentro do elemento de formulário, deve ser possível selecionar vários campos de uma série de caixas de seleção (checkbox). Cada um desses campos deve ter um atributo `value`.
|
||||
|
||||
**Especificação de usuário nº 15:** dentro do elemento de formulário, deve haver um campo `textarea` no final para comentários adicionais.
|
||||
**História de usuário nº 15:** dentro do elemento de formulário, deve haver um campo `textarea` no final para comentários adicionais.
|
||||
|
||||
**Especificação de usuário nº 16:** dentro do elemento de formulário, deve haver um botão com `id="submit"` para enviar todas as informações.
|
||||
**História de usuário nº 16:** dentro do elemento de formulário, deve haver um botão com `id="submit"` para enviar todas as informações.
|
||||
|
||||
Você pode fazer o seu projeto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este modelo da CodePen</a> e, logo após, clicar em `Save` para criar seu próprio projeto. Como alternativa, use este link da nossa CDN para executar os testes em qualquer ambiente que você preferir: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
|
||||
@ -10,39 +10,39 @@ dashedName: build-a-technical-documentation-page
|
||||
|
||||
**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: <https://codepen.io/freeCodeCamp/full/NdrKKL>.
|
||||
|
||||
Atenda às [especificações de usuário](https://en.wikipedia.org/wiki/User_story) abaixo para passar em todos os testes. Dê à página o seu próprio estilo pessoal.
|
||||
Atenda às [histórias de usuário](https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio) abaixo e obtenha aprovação em todos os testes. Dê à página o seu próprio estilo pessoal.
|
||||
|
||||
Você pode usar HTML, JavaScript e CSS para completar este projeto. É recomendado utilizar CSS puro, pois é disso que trataram as lições até agora. É bom você adquirir alguma prática com CSS. Você pode usar Bootstrap ou SASS se quiser. Outras tecnologias (como, por exemplo, jQuery, React, Angular ou Vue) não são recomendadas para este projeto. Use-as por sua conta e risco. Outros projetos te darão uma chance de trabalhar com diferentes bibliotecas, como o React. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem a stack de tecnologias sugerida para esse projeto. Boa programação!
|
||||
|
||||
**Especificação de usuário nº 1:** deve haver um elemento `main` com um `id="main-doc"`, que contém o conteúdo principal da página (documentação técnica).
|
||||
**História de usuário nº 1:** deve haver um elemento `main` com um `id="main-doc"`, que contém o conteúdo principal da página (documentação técnica).
|
||||
|
||||
**Especificação de usuário nº 2:** dentro do elemento `#main-doc`, deve haver várias seções (`section`), cada uma com a classe `main-section`. Deve haver um mínimo de 5.
|
||||
**História de usuário nº 2:** dentro do elemento `#main-doc`, deve haver várias seções (`section`), cada uma com a classe `main-section`. Deve haver um mínimo de 5.
|
||||
|
||||
**Especificação de usuário nº 3:** o primeiro elemento de cada `.main-section` deve ser um elemento de cabeçalho (`header`) que contém o texto que descreve o tópico desta seção.
|
||||
**História de usuário nº 3:** o primeiro elemento de cada `.main-section` deve ser um elemento de cabeçalho (`header`) que contém o texto que descreve o tópico desta seção.
|
||||
|
||||
**Especificação de usuário nº 4:** cada `section` com a classe `main-section` também deve ter um id que corresponda ao texto de cada `header` contido dentro dela. Os espaços existentes devem ser substituídos por sublinhados (por exemplo, a `section` que contém o cabeçalho "JavaScript e Java" deve ter um `id="JavaScript_and_Java"`).
|
||||
**História de usuário nº 4:** cada `section` com a classe `main-section` também deve ter um id que corresponda ao texto de cada `header` contido dentro dela. Os espaços existentes devem ser substituídos por sublinhados (por exemplo, a `section` que contém o cabeçalho "JavaScript e Java" deve ter um `id="JavaScript_and_Java"`).
|
||||
|
||||
**Especificação de usuário nº 5:** os elementos `.main-section` devem conter, juntos, pelo menos 10 elementos `p` no total (não 10 para cada elemento).
|
||||
**História de usuário nº 5:** os elementos `.main-section` devem conter, juntos, pelo menos 10 elementos `p` no total (não 10 para cada elemento).
|
||||
|
||||
**Especificação de usuário nº 6:** os elementos `.main-section` devem conter, juntos, pelo menos 5 elementos `code` no total (não 5 para cada elemento).
|
||||
**História de usuário nº 6:** os elementos `.main-section` devem conter, juntos, pelo menos 5 elementos `code` no total (não 5 para cada elemento).
|
||||
|
||||
**Especificação de usuário nº 7:** os elementos `.main-section` devem conter, juntos, pelo menos 5 elementos `li` no total (não 5 para cada elemento).
|
||||
**História de usuário nº 7:** os elementos `.main-section` devem conter, juntos, pelo menos 5 elementos `li` no total (não 5 para cada elemento).
|
||||
|
||||
**Especificação de usuário nº 8:** deve haver uma barra de navegação (`nav`) com um `id="navbar"`.
|
||||
**História de usuário nº 8:** deve haver uma barra de navegação (`nav`) com um `id="navbar"`.
|
||||
|
||||
**Especificação de usuário nº 9:** o elemento de barra de navegação (nav) deve conter um elemento `header` que contém o texto que descreve o tópico da documentação técnica.
|
||||
**História de usuário nº 9:** o elemento de barra de navegação (nav) deve conter um elemento `header` que contém o texto que descreve o tópico da documentação técnica.
|
||||
|
||||
**Especificação de usuário nº 10:** além disso, a barra de navegação (nav) deve conter elementos de âncora (`a`) com a classe `nav-link`. Deve haver um para cada elemento com a classe `main-section`.
|
||||
**História de usuário nº 10:** além disso, a barra de navegação (nav) deve conter elementos de âncora (`a`) com a classe `nav-link`. Deve haver um para cada elemento com a classe `main-section`.
|
||||
|
||||
**Especificação de usuário nº 11:** o elemento `header` na barra de navegação deve aparecer antes de qualquer elemento de âncora (`a`).
|
||||
**História de usuário nº 11:** o elemento `header` na barra de navegação deve aparecer antes de qualquer elemento de âncora (`a`).
|
||||
|
||||
**Especificação de usuário nº 12:** cada elemento com a classe `nav-link` deve conter um texto que corresponda ao texto do `header` dentro de cada `section` (exemplo: se você tem uma seção/cabeçalho "Olá mundo", sua barra de navegação deve ter um elemento que contém o texto "Olá mundo").
|
||||
**História de usuário nº 12:** cada elemento com a classe `nav-link` deve conter um texto que corresponda ao texto do `header` dentro de cada `section` (exemplo: se você tem uma seção/cabeçalho "Olá mundo", sua barra de navegação deve ter um elemento que contém o texto "Olá mundo").
|
||||
|
||||
**Especificação de usuário nº 13:** quando um elemento da barra de navegação for clicado, a página deve navegar para a seção correspondente ao elemento `main-doc` (exemplo: se eu clicar em um elemento `nav-link` que contém o texto "Olá mundo", a página deve navegar para o elemento `section` que tem esse id e contém o `header` correspondente.
|
||||
**História de usuário nº 13:** quando um elemento da barra de navegação for clicado, a página deve navegar para a seção correspondente ao elemento `main-doc` (exemplo: se eu clicar em um elemento `nav-link` que contém o texto "Olá mundo", a página deve navegar para o elemento `section` que tem esse id e contém o `header` correspondente.
|
||||
|
||||
**Especificação de usuário nº 14:** em dispositivos com tamanho regular (laptops, desktops), o elemento com `id="navbar"` deve ser mostrado no lado esquerdo da tela e deve sempre estar visível para o usuário.
|
||||
**História de usuário nº 14:** em dispositivos com tamanho regular (laptops, desktops), o elemento com `id="navbar"` deve ser mostrado no lado esquerdo da tela e deve sempre estar visível para o usuário.
|
||||
|
||||
**Especificação de usuário nº 15:** a página deve ter pelo menos uma media query.
|
||||
**História de usuário nº 15:** a página deve ter pelo menos uma media query.
|
||||
|
||||
Você pode fazer o seu projeto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este modelo da CodePen</a> e, logo após, clicar em `Save` para criar seu próprio projeto. Como alternativa, use este link da nossa CDN para executar os testes em qualquer ambiente que você preferir: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
|
||||
@ -10,27 +10,27 @@ dashedName: build-a-tribute-page
|
||||
|
||||
**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: <https://codepen.io/freeCodeCamp/full/zNqgVx>.
|
||||
|
||||
Atenda às [especificações de usuário](https://en.wikipedia.org/wiki/User_story) abaixo para passar em todos os testes. Dê à página o seu próprio estilo pessoal.
|
||||
Atenda às [histórias de usuário](https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio) abaixo e obtenha aprovação em todos os testes. Dê à página o seu próprio estilo pessoal.
|
||||
|
||||
Você pode usar HTML, JavaScript e CSS para completar este projeto. É recomendado utilizar CSS puro, pois é disso que trataram as lições até agora. É bom você adquirir alguma prática com CSS. Você pode usar Bootstrap ou SASS se quiser. Outras tecnologias (como, por exemplo, jQuery, React, Angular ou Vue) não são recomendadas para este projeto. Use-as por sua conta e risco. Outros projetos te darão uma chance de trabalhar com diferentes bibliotecas, como o React. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem a stack de tecnologias sugerida para esse projeto. Boa programação!
|
||||
|
||||
**Especificação de usuário nº 1:** a página de homenagem deve ter um elemento com um `id="main"` que envolva todos os demais elementos.
|
||||
**História de usuário nº 1:** a página de homenagem deve ter um elemento com um `id="main"` que envolva todos os demais elementos.
|
||||
|
||||
**Especificação de usuário nº 2:** deve haver um elemento com `id="title"`, que contenha um texto que descreva a pessoa a quem a página presta homenagem (por exemplo, "Dr. Norman Borlaug").
|
||||
**História de usuário nº 2:** deve haver um elemento com `id="title"`, que contenha um texto que descreva a pessoa a quem a página presta homenagem (por exemplo, "Dr. Norman Borlaug").
|
||||
|
||||
**Especificação de usuário nº 3:** deve haver um elemento `figure` ou `div` com um `id="img-div"` correspondente.
|
||||
**História de usuário nº 3:** deve haver um elemento `figure` ou `div` com um `id="img-div"` correspondente.
|
||||
|
||||
**Especificação de usuário nº 4:** dentro do elemento de id `img-div`, deve haver um elemento `img` com um `id="image"`.
|
||||
**História de usuário nº 4:** dentro do elemento de id `img-div`, deve haver um elemento `img` com um `id="image"`.
|
||||
|
||||
**Especificação de usuário nº 5:** dentro do elemento de id `img-div`, deve haver um elemento com um `id="img-caption"` que contenha um conteúdo textual descrevendo a imagem mostrada em `img-div`.
|
||||
**História de usuário nº 5:** dentro do elemento de id `img-div`, deve haver um elemento com um `id="img-caption"` que contenha um conteúdo textual descrevendo a imagem mostrada em `img-div`.
|
||||
|
||||
**Especificação de usuário nº 6:** deve haver um elemento com `id="tribute-info"`, que contenha conteúdo textual descrevendo a pessoa a quem a página presta homenagem.
|
||||
**História de usuário nº 6:** deve haver um elemento com `id="tribute-info"`, que contenha conteúdo textual descrevendo a pessoa a quem a página presta homenagem.
|
||||
|
||||
**Especificação de usuário nº 7:** deve haver um elemento `a` com um `id="tribute-link"`, que leve a um site externo que contenha informações adicionais sobre a pessoa a quem a página presta homenagem. DICA: você deve dar ao seu elemento um atributo `target` e definir o valor para `_blank` para que seu link possa ser aberto em uma nova aba (exemplo: `target="_blank"`).
|
||||
**História de usuário nº 7:** deve haver um elemento `a` com um `id="tribute-link"`, que leve a um site externo que contenha informações adicionais sobre a pessoa a quem a página presta homenagem. DICA: você deve dar ao seu elemento um atributo `target` e definir o valor para `_blank` para que seu link possa ser aberto em uma nova aba (exemplo: `target="_blank"`).
|
||||
|
||||
**Especificação de usuário nº 8:** o elemento `img` deve redimensionar responsivamente com relação à largura de seu elemento pai, sem exceder o seu tamanho original.
|
||||
**História de usuário nº 8:** o elemento `img` deve redimensionar responsivamente com relação à largura de seu elemento pai, sem exceder o seu tamanho original.
|
||||
|
||||
**Especificação de usuário nº 9:** o elemento `img` deve ser centralizado dentro de seu elemento pai.
|
||||
**História de usuário nº 9:** o elemento `img` deve ser centralizado dentro de seu elemento pai.
|
||||
|
||||
Você pode fazer o seu projeto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este modelo da CodePen</a> e, logo após, clicar em `Save` para criar seu próprio projeto. Como alternativa, use este link da nossa CDN para executar os testes em qualquer ambiente que você preferir: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`.
|
||||
|
||||
|
||||
@ -10,65 +10,65 @@ dashedName: build-a-25--5-clock
|
||||
|
||||
**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: <https://codepen.io/freeCodeCamp/full/XpKrrW>.
|
||||
|
||||
Atenda às [especificações de usuário abaixo](https://en.wikipedia.org/wiki/User_story) e obtenha aprovação em todos os testes. Dê a ele o seu próprio estilo pessoal.
|
||||
Atenda às [histórias de usuário](https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio) abaixo e obtenha aprovação em todos os testes. Dê a ele o seu próprio estilo pessoal.
|
||||
|
||||
Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e JQuery para completar este projeto. Você deve usar um framework de front-end (como React por exemplo) porque essa seção trata de aprender frameworks de front-end. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos buscando apoiar outros frameworks de front-end, como Angular e Vue, mas eles não são atualmente suportados. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem o conjunto de tecnologias sugeridas para esse projeto. Boa programação!
|
||||
|
||||
**Especificação de usuário nº 1:** eu consigo ver um elemento com `id="break-label"` que contém uma string (por exemplo, "Duração do intervalo").
|
||||
**História de usuário nº 1:** eu consigo ver um elemento com `id="break-label"` que contém uma string (por exemplo, "Duração do intervalo").
|
||||
|
||||
**Especificação de usuário nº 2:** eu consigo ver um elemento com `id="session-label"` que contém uma string (por exemplo, "Duração da sessão").
|
||||
**História de usuário nº 2:** eu consigo ver um elemento com `id="session-label"` que contém uma string (por exemplo, "Duração da sessão").
|
||||
|
||||
**Especificação de usuário nº 3:** eu consigo ver dois elementos clicáveis com os IDs correspondentes: `id="break-decrement"` e `id="session-decrement"`.
|
||||
**História de usuário nº 3:** eu consigo ver dois elementos clicáveis com os IDs correspondentes: `id="break-decrement"` e `id="session-decrement"`.
|
||||
|
||||
**Especificação de usuário nº 4:** eu consigo ver dois elementos clicáveis com os IDs correspondentes: `id="break-increment"` e `id="session-increment"`.
|
||||
**História de usuário nº 4:** eu consigo ver dois elementos clicáveis com os IDs correspondentes: `id="break-increment"` e `id="session-increment"`.
|
||||
|
||||
**Especificação de usuário nº 5:** eu consigo ver um elemento com um `id="break-length"` correspondente, e que, por padrão (no carregamento), exibe o valor de 5.
|
||||
**História de usuário nº 5:** eu consigo ver um elemento com um `id="break-length"` correspondente, e que, por padrão (no carregamento), exibe o valor de 5.
|
||||
|
||||
**Especificação de usuário nº 6:** eu consigo ver um elemento com um `id="session-length"` correspondente, e que, por padrão, exibe o valor de 25.
|
||||
**História de usuário nº 6:** eu consigo ver um elemento com um `id="session-length"` correspondente, e que, por padrão, exibe o valor de 25.
|
||||
|
||||
**Especificação de usuário nº 7:** eu consigo ver um elemento com um `id="timer-label"` correspondente, e que contém a string indicando que uma sessão foi inicializada (por exemplo, "Sessão").
|
||||
**História de usuário nº 7:** eu consigo ver um elemento com um `id="timer-label"` correspondente, e que contém a string indicando que uma sessão foi inicializada (por exemplo, "Sessão").
|
||||
|
||||
**Especificação de usuário nº 8:** eu consigo ver um elemento com `id="time-left"` correspondente. OBSERVAÇÃO: pausado ou em execução, o valor nesse campo deve sempre ser exibido no formato `mm:ss` (por exemplo, 25:00).
|
||||
**História de usuário nº 8:** eu consigo ver um elemento com `id="time-left"` correspondente. OBSERVAÇÃO: pausado ou em execução, o valor nesse campo deve sempre ser exibido no formato `mm:ss` (por exemplo, 25:00).
|
||||
|
||||
**Especificação de usuário nº 9:** eu consigo ver um elemento clicável com `id="start_stop"` correspondente.
|
||||
**História de usuário nº 9:** eu consigo ver um elemento clicável com `id="start_stop"` correspondente.
|
||||
|
||||
**Especificação de usuário nº 10:** eu consigo ver um elemento clicável com `id="reset"` correspondente.
|
||||
**História de usuário nº 10:** eu consigo ver um elemento clicável com `id="reset"` correspondente.
|
||||
|
||||
**Especificação de usuário nº 11:** quando eu clico no elemento com id `reset`, qualquer temporizador em execução deve ser parado. O valor dentro de `id="break-length"` deve retornar `5`, o valor dentro de `id="session-length"` deve retornar 25, e o elemento com `id="time-left"` deve ser redefinido para o seu estado padrão.
|
||||
**História de usuário nº 11:** quando eu clico no elemento com id `reset`, qualquer temporizador em execução deve ser parado. O valor dentro de `id="break-length"` deve retornar `5`, o valor dentro de `id="session-length"` deve retornar 25, e o elemento com `id="time-left"` deve ser redefinido para o seu estado padrão.
|
||||
|
||||
**Especificação de usuário nº 12:** quando eu clico no elemento com o id `break-decrement`, o valor dentro de `id="break-length"` decrementa 1, e eu consigo ver o valor atualizado.
|
||||
**História de usuário nº 12:** quando eu clico no elemento com o id `break-decrement`, o valor dentro de `id="break-length"` decrementa 1, e eu consigo ver o valor atualizado.
|
||||
|
||||
**Especificação de usuário nº 13:** quando eu clico no elemento com id `break-increment`, o valor dentro de `id="break-length"` incrementa 1, e eu consigo ver o valor atualizado.
|
||||
**História de usuário nº 13:** quando eu clico no elemento com id `break-increment`, o valor dentro de `id="break-length"` incrementa 1, e eu consigo ver o valor atualizado.
|
||||
|
||||
**Especificação de usuário nº 14:** quando eu clico no elemento com id `session-decrement`, o valor dentro de `id="session-length"` decrementa 1, e eu consigo ver o valor atualizado.
|
||||
**História de usuário nº 14:** quando eu clico no elemento com id `session-decrement`, o valor dentro de `id="session-length"` decrementa 1, e eu consigo ver o valor atualizado.
|
||||
|
||||
**Especificação de usuário nº 15:** quando eu clico no elemento com id `session-increment`, o valor dentro de `id="session-length"` incrementa 1, e eu consigo ver o valor atualizado.
|
||||
**História de usuário nº 15:** quando eu clico no elemento com id `session-increment`, o valor dentro de `id="session-length"` incrementa 1, e eu consigo ver o valor atualizado.
|
||||
|
||||
**Especificação de usuário nº 16:** eu não devo poder definir um comprimento de sessão ou de intervalo para <= 0.
|
||||
**História de usuário nº 16:** eu não devo poder definir um comprimento de sessão ou de intervalo para <= 0.
|
||||
|
||||
**Especificação de usuário nº 17:** eu não devo ser capaz de definir um comprimento de sessão ou de intervalo para > 60.
|
||||
**História de usuário nº 17:** eu não devo ser capaz de definir um comprimento de sessão ou de intervalo para > 60.
|
||||
|
||||
**Especificação de usuário nº 18:** quando eu clico pela primeira vez no elemento com `id="start_stop"`, o temporizador deve começar a correr a partir do valor exibido atualmente em `id="session-length"`, mesmo se o valor foi incrementado ou decrementado do valor original 25.
|
||||
**História de usuário nº 18:** quando eu clico pela primeira vez no elemento com `id="start_stop"`, o temporizador deve começar a correr a partir do valor exibido atualmente em `id="session-length"`, mesmo se o valor foi incrementado ou decrementado do valor original 25.
|
||||
|
||||
**Especificação de usuário nº 19:** se o temporizador estiver em execução, o elemento com id `time-left` deve exibir o tempo restante no formato `mm:ss` (decrementando 1 e atualizando a saída a cada 1000ms).
|
||||
**História de usuário nº 19:** se o temporizador estiver em execução, o elemento com id `time-left` deve exibir o tempo restante no formato `mm:ss` (decrementando 1 e atualizando a saída a cada 1000ms).
|
||||
|
||||
**Especificação de usuário nº 20:** se o timer estiver em execução e eu clicar no elemento com `id="start_stop"`, a contagem regressiva deve pausar.
|
||||
**História de usuário nº 20:** se o timer estiver em execução e eu clicar no elemento com `id="start_stop"`, a contagem regressiva deve pausar.
|
||||
|
||||
**Especificação de usuário nº 21:** se o temporizador estiver pausado e eu clicar no elemento com `id="start_stop"`, a contagem regressiva deve continuar rodando a partir do ponto no qual foi pausado.
|
||||
**História de usuário nº 21:** se o temporizador estiver pausado e eu clicar no elemento com `id="start_stop"`, a contagem regressiva deve continuar rodando a partir do ponto no qual foi pausado.
|
||||
|
||||
**Especificação de usuário nº 22:** quando a contagem regressiva de sessão chegar a zero (OBSERVAÇÃO: o temporizador DEVE alcançar 00:00), e uma nova contagem regressiva iniciar, o elemento com id `timer-label` deve exibir uma string indicando que um intervalo foi iniciado.
|
||||
**História de usuário nº 22:** quando a contagem regressiva de sessão chegar a zero (OBSERVAÇÃO: o temporizador DEVE alcançar 00:00), e uma nova contagem regressiva iniciar, o elemento com id `timer-label` deve exibir uma string indicando que um intervalo foi iniciado.
|
||||
|
||||
**Especificação de usuário nº 23:** quando a contagem regressiva de sessão alcançar zero (OBSERVAÇÃO: o temporizador DEVE alcançar 00:00), uma nova contagem regressiva de intervalo deve iniciar, contando regressivamente a partir do valor atualmente exibido no elemento `id="break-length"`.
|
||||
**História de usuário nº 23:** quando a contagem regressiva de sessão alcançar zero (OBSERVAÇÃO: o temporizador DEVE alcançar 00:00), uma nova contagem regressiva de intervalo deve iniciar, contando regressivamente a partir do valor atualmente exibido no elemento `id="break-length"`.
|
||||
|
||||
**Especificação de usuário nº 24:** quando a contagem regressiva de intervalo alcançar zero (OBSERVAÇÃO: o temporizador DEVE alcançar 00:00) e uma nova contagem regressiva iniciar, o elemento com o id `timer-label` deve exibir a string indicando que uma sessão foi iniciada.
|
||||
**História de usuário nº 24:** quando a contagem regressiva de intervalo alcançar zero (OBSERVAÇÃO: o temporizador DEVE alcançar 00:00) e uma nova contagem regressiva iniciar, o elemento com o id `timer-label` deve exibir a string indicando que uma sessão foi iniciada.
|
||||
|
||||
**Especificação de usuário nº 25:** quando a contagem regressiva de intervalo alcançar zero (OBSERVAÇÃO: o temporizador DEVE alcançar 00:00), uma nova contagem regressiva de sessão deve iniciar, contando regressivamente a partir do valor atualmente exibido no elemento com `id="session-length"`.
|
||||
**História de usuário nº 25:** quando a contagem regressiva de intervalo alcançar zero (OBSERVAÇÃO: o temporizador DEVE alcançar 00:00), uma nova contagem regressiva de sessão deve iniciar, contando regressivamente a partir do valor atualmente exibido no elemento com `id="session-length"`.
|
||||
|
||||
**Especificação de usuário nº 26:** quando uma contagem regressiva alcançar zero (OBSERVAÇÃO: o temporizador DEVE alcançar 00:00), um som indicando que o tempo acabou deve ser reproduzido. Isso deve utilizar uma tag HTML5 `audio` e ter um id correspondente a `id="beep"`.
|
||||
**História de usuário nº 26:** quando uma contagem regressiva alcançar zero (OBSERVAÇÃO: o temporizador DEVE alcançar 00:00), um som indicando que o tempo acabou deve ser reproduzido. Isso deve utilizar uma tag HTML5 `audio` e ter um id correspondente a `id="beep"`.
|
||||
|
||||
**Especificação de usuário nº 27:** o elemento audio com `id="beep"` deve ter 1 segundo ou mais de duração.
|
||||
**História de usuário nº 27:** o elemento audio com `id="beep"` deve ter 1 segundo ou mais de duração.
|
||||
|
||||
**Especificação de usuário nº 28:** o elemento audio com id `beep` deve parar de reproduzir e ser rebobinado para começar quando o elemento com o id `reset` for clicado.
|
||||
**História de usuário nº 28:** o elemento audio com id `beep` deve parar de reproduzir e ser rebobinado para começar quando o elemento com o id `reset` for clicado.
|
||||
|
||||
Você pode fazer o seu projeto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este modelo da CodePen</a> e clicando em `Save` para criar seu próprio pen. Como alternativa, use este link da nossa CDN para executar os testes em qualquer ambiente que você preferir: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
|
||||
@ -10,23 +10,23 @@ dashedName: build-a-drum-machine
|
||||
|
||||
**Objetivo:** Construa um app [CodePen.io](https://codepen.io) que seja funcionalmente semelhante a: <https://codepen.io/freeCodeCamp/full/MJyNMd>.
|
||||
|
||||
Atenda às [especificações de usuário abaixo](https://en.wikipedia.org/wiki/User_story) e obtenha aprovação em todos os testes. Dê a ele o seu próprio estilo pessoal.
|
||||
Atenda às [histórias de usuário](https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio) abaixo e obtenha aprovação em todos os testes. Dê a ele o seu próprio estilo pessoal.
|
||||
|
||||
Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e JQuery para completar este projeto. Você deve usar um framework de front-end (como React por exemplo) porque essa seção trata de aprender frameworks de front-end. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos buscando apoiar outros frameworks de front-end, como Angular e Vue, mas eles não são atualmente suportados. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem o conjunto de tecnologias sugeridas para esse projeto. Boa programação!
|
||||
|
||||
**Especificação de usuário nº 1:** eu devo ser capaz de ver um contêiner externo com um `id="drum-machine"` correspondente que contém todos os outros elementos.
|
||||
**História de usuário nº 1:** eu devo ser capaz de ver um contêiner externo com um `id="drum-machine"` correspondente que contém todos os outros elementos.
|
||||
|
||||
**Especificação de usuário nº 2:** dentro de `#drum-machine`, eu consigo ver um elemento com um `id="display"` correspondente.
|
||||
**História de usuário nº 2:** dentro de `#drum-machine`, eu consigo ver um elemento com um `id="display"` correspondente.
|
||||
|
||||
**Especificação de usuário nº 3:** dentro de `#drum-machine`, eu consigo ver 9 elementos de tambores clicáveis, cada um com o nome de classe `drum-pad`, um id único que descreve o clipe de áudio que o tambor será definido para executar, e um texto interno que corresponde a uma das teclas do teclado a seguir: `Q`, `W`, `E`, `A`, `S`, `D`, `Z`, `X`, `C`. Os tambores DEVEM estar nesta ordem.
|
||||
**História de usuário nº 3:** dentro de `#drum-machine`, eu consigo ver 9 elementos de tambores clicáveis, cada um com o nome de classe `drum-pad`, um id único que descreve o clipe de áudio que o tambor será definido para executar, e um texto interno que corresponde a uma das teclas do teclado a seguir: `Q`, `W`, `E`, `A`, `S`, `D`, `Z`, `X`, `C`. Os tambores DEVEM estar nesta ordem.
|
||||
|
||||
**Especificação de usuário nº 4:** dentro de cada `.drum-pad`, deve haver um elemento HTML5 `audio`, que tem o atributo `src` apontando para um clipe de áudio, o nome de classe `clip`, e um id correspondendo ao texto interno do seu `.drum-pad` pai (por exemplo, `id="Q"`, `id="W"`, `id="E"` e assim por diante).
|
||||
**História de usuário nº 4:** dentro de cada `.drum-pad`, deve haver um elemento HTML5 `audio`, que tem o atributo `src` apontando para um clipe de áudio, o nome de classe `clip`, e um id correspondendo ao texto interno do seu `.drum-pad` pai (por exemplo, `id="Q"`, `id="W"`, `id="E"` e assim por diante).
|
||||
|
||||
**Especificação de usuário nº 5:** quando eu clico em um elemento `.drum-pad`, o clipe de áudio dentro do seu elemento filho `audio` deve ser ativado.
|
||||
**História de usuário nº 5:** quando eu clico em um elemento `.drum-pad`, o clipe de áudio dentro do seu elemento filho `audio` deve ser ativado.
|
||||
|
||||
**Especificação de usuário nº 6:** quando eu pressionar a tecla de disparo associada a cada `.drum-pad`, o clipe de áudio dentro do elemento filho `audio` deve ser ativado (por exemplo, ao pressionar a tecla `Q`, deve ser acionado o tambor que tem a string `Q`, ao pressionar a tecla `W`, deve ser acionado o tambor que contém a string `W` e assim por diante).
|
||||
**História de usuário nº 6:** quando eu pressionar a tecla de disparo associada a cada `.drum-pad`, o clipe de áudio dentro do elemento filho `audio` deve ser ativado (por exemplo, ao pressionar a tecla `Q`, deve ser acionado o tambor que tem a string `Q`, ao pressionar a tecla `W`, deve ser acionado o tambor que contém a string `W` e assim por diante).
|
||||
|
||||
**Especificação de usuário nº 7:** quando um `.drum-pad` é acionado, uma string descrevendo o clipe de áudio associado é exibido como o texto interno do elemento `#display` (cada string precisa ser única).
|
||||
**História de usuário nº 7:** quando um `.drum-pad` é acionado, uma string descrevendo o clipe de áudio associado é exibido como o texto interno do elemento `#display` (cada string precisa ser única).
|
||||
|
||||
Você pode construir seu projeto com <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este template CodePen</a> e clicando `Save` para criar seu próprio pen. Ou você pode usar esse link CDN para rodar os testes em qualquer ambiente que você goste:`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
|
||||
@ -10,39 +10,39 @@ dashedName: build-a-javascript-calculator
|
||||
|
||||
**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: <https://codepen.io/freeCodeCamp/full/wgGVVX>.
|
||||
|
||||
Atenda às [especificações de usuário abaixo](https://en.wikipedia.org/wiki/User_story) e obtenha aprovação em todos os testes. Dê a ele o seu próprio estilo pessoal.
|
||||
Atenda às [histórias de usuário](https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio) abaixo e obtenha aprovação em todos os testes. Dê a ele o seu próprio estilo pessoal.
|
||||
|
||||
Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e JQuery para completar este projeto. Você deve usar um framework de front-end (como React por exemplo) porque essa seção trata de aprender frameworks de front-end. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos buscando apoiar outros frameworks de front-end, como Angular e Vue, mas eles não são atualmente suportados. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem o conjunto de tecnologias sugeridas para esse projeto. Boa programação!
|
||||
|
||||
**Especificação de usuário nº 1:** minha calculadora deve conter um elemento clicável contendo um `=` (sinal de igualdade) com o `id="equals"` correspondente.
|
||||
**História de usuário nº 1:** minha calculadora deve conter um elemento clicável contendo um `=` (sinal de igualdade) com o `id="equals"` correspondente.
|
||||
|
||||
**Especificação de usuário nº 2:** minha calculadora deve conter 10 elementos clicáveis contendo um número cada, de 0 até 9, com os ids correspondentes a seguir: `id="zero"`, `id="one"`, `id="two"`, `id="three"`, `id="four"`, `id="five"`, `id="six"`, `id="seven"`, `id="eight"` e `id="nine"`.
|
||||
**História de usuário nº 2:** minha calculadora deve conter 10 elementos clicáveis contendo um número cada, de 0 até 9, com os ids correspondentes a seguir: `id="zero"`, `id="one"`, `id="two"`, `id="three"`, `id="four"`, `id="five"`, `id="six"`, `id="seven"`, `id="eight"` e `id="nine"`.
|
||||
|
||||
**Especificação de usuário nº 3:** minha calculadora deve conter 4 elementos clicáveis, cada um contendo uma das 4 operações matemáticas primárias com os ids correspondentes a seguir: `id="add"`, `id="subtract"`, `id="multiply"`, `id="divide"`.
|
||||
**História de usuário nº 3:** minha calculadora deve conter 4 elementos clicáveis, cada um contendo uma das 4 operações matemáticas primárias com os ids correspondentes a seguir: `id="add"`, `id="subtract"`, `id="multiply"`, `id="divide"`.
|
||||
|
||||
**Especificação de usuário nº 4:** minha calculadora deve conter um elemento clicável contendo o símbolo `.` (ponto decimal) com o `id="decimal"` correspondente.
|
||||
**História de usuário nº 4:** minha calculadora deve conter um elemento clicável contendo o símbolo `.` (ponto decimal) com o `id="decimal"` correspondente.
|
||||
|
||||
**Especificação de usuário nº 5:** minha calculadora deve conter um elemento clicável com um `id="clear"`.
|
||||
**História de usuário nº 5:** minha calculadora deve conter um elemento clicável com um `id="clear"`.
|
||||
|
||||
**Especificação de usuário nº 6:** minha calculadora deve conter um elemento para exibir valores com o `id="display"` correspondente.
|
||||
**História de usuário nº 6:** minha calculadora deve conter um elemento para exibir valores com o `id="display"` correspondente.
|
||||
|
||||
**Especificação de usuário nº 7:** a qualquer momento, pressionar o botão `clear` limpará os valores de entrada e saída, e retornará a calculadora ao seu estado inicial. "0" deve ser mostrado no elemento com o id `display`.
|
||||
**História de usuário nº 7:** a qualquer momento, pressionar o botão `clear` limpará os valores de entrada e saída, e retornará a calculadora ao seu estado inicial. "0" deve ser mostrado no elemento com o id `display`.
|
||||
|
||||
**Especificação de usuário nº 8:** enquanto eu coloco números de entrada, eu devo ser capaz de ver a minha entrada no elemento com id `display`.
|
||||
**História de usuário nº 8:** enquanto eu coloco números de entrada, eu devo ser capaz de ver a minha entrada no elemento com id `display`.
|
||||
|
||||
**Especificação de usuário nº 9:** em qualquer ordem, eu devo ser capaz de adicionar, subtrair, multiplicar e dividir uma cadeia de números de qualquer tamanho, e quando eu pressionar `=`, o resultado correto deve ser mostrado no elemento com id `display`.
|
||||
**História de usuário nº 9:** em qualquer ordem, eu devo ser capaz de adicionar, subtrair, multiplicar e dividir uma cadeia de números de qualquer tamanho, e quando eu pressionar `=`, o resultado correto deve ser mostrado no elemento com id `display`.
|
||||
|
||||
**Especificação de usuário nº 10:** ao inserir números, minha calculadora não deve permitir um número de começar com múltiplos zeros.
|
||||
**História de usuário nº 10:** ao inserir números, minha calculadora não deve permitir um número de começar com múltiplos zeros.
|
||||
|
||||
**Especificação de usuário nº 11:** quando o elemento decimal for clicado, um `.` deve ser adicionado ao valor atualmente exibido. Dois `.` em um número não devem ser aceitos.
|
||||
**História de usuário nº 11:** quando o elemento decimal for clicado, um `.` deve ser adicionado ao valor atualmente exibido. Dois `.` em um número não devem ser aceitos.
|
||||
|
||||
**Especificação de usuário nº 12:** eu devo ser capaz de executar qualquer operação (`+`, `-`, `*`, `/`) em números contendo pontos decimais.
|
||||
**História de usuário nº 12:** eu devo ser capaz de executar qualquer operação (`+`, `-`, `*`, `/`) em números contendo pontos decimais.
|
||||
|
||||
**Especificação de usuário nº 13:** Se 2 ou mais operadores forem inseridos consecutivamente, a operação executada deve ser o último operador inserido, excluindo o símbolo de negação (`-`). Por exemplo, se `5 + * 7 =` for inserido, o resultado deve ser `35` (ou seja, `5 * 7`); se `5 * - 5 =` for inserido, o resultado deve ser `-25` (ou seja, `5 * (-5)`).
|
||||
**História de usuário nº 13:** Se 2 ou mais operadores forem inseridos consecutivamente, a operação executada deve ser o último operador inserido, excluindo o símbolo de negação (`-`). Por exemplo, se `5 + * 7 =` for inserido, o resultado deve ser `35` (ou seja, `5 * 7`); se `5 * - 5 =` for inserido, o resultado deve ser `-25` (ou seja, `5 * (-5)`).
|
||||
|
||||
**Especificação de usuário nº 14:** pressionar um operador imediatamente após um `=` deve iniciar um novo cálculo que opera no resultado da avaliação anterior.
|
||||
**História de usuário nº 14:** pressionar um operador imediatamente após um `=` deve iniciar um novo cálculo que opera no resultado da avaliação anterior.
|
||||
|
||||
**Especificação de usuário nº 15:** minha calculadora deve ter diversas casas decimais de precisão ao se tratar de arredondamento (note que não há um padrão exato, mas você deve ser capaz de lidar com cálculos como `2 / 7` com precisão razoável de pelo menos 4 casas decimais).
|
||||
**História de usuário nº 15:** minha calculadora deve ter diversas casas decimais de precisão ao se tratar de arredondamento (note que não há um padrão exato, mas você deve ser capaz de lidar com cálculos como `2 / 7` com precisão razoável de pelo menos 4 casas decimais).
|
||||
|
||||
**Nota para a lógica da calculadora:** deve-se notar que há duas principais escolas de pensamento na lógica de entrada da calculadora: a <dfn>lógica da execução imediata</dfn> e a <dfn>lógica da fórmula</dfn>. Nosso exemplo utiliza a lógica da fórmula e observa a ordem de precedência de operação. A lógica de execução imediata não faz isso. Qualquer uma é aceitável, mas observe que, dependendo de qual você escolher, sua calculadora pode alcançar diferentes resultados do que os nossos para certas equações (veja abaixo um exemplo). Desde que sua matemática possa ser verificada por outra calculadora em produção, não considere isso um bug.
|
||||
|
||||
|
||||
@ -10,21 +10,21 @@ dashedName: build-a-markdown-previewer
|
||||
|
||||
**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: <https://codepen.io/freeCodeCamp/full/GrZVVO>.
|
||||
|
||||
Atenda às [especificações de usuário abaixo](https://en.wikipedia.org/wiki/User_story) e obtenha aprovação em todos os testes. Dê a ele o seu próprio estilo pessoal.
|
||||
Atenda às [histórias de usuário](https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio) abaixo e obtenha aprovação em todos os testes. Dê a ele o seu próprio estilo pessoal.
|
||||
|
||||
Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e JQuery para completar este projeto. Você deve usar um framework de front-end (como React por exemplo) porque essa seção trata de aprender frameworks de front-end. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos buscando apoiar outros frameworks de front-end, como Angular e Vue, mas eles não são atualmente suportados. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem o conjunto de tecnologias sugeridas para esse projeto. Boa programação!
|
||||
|
||||
**Especificação de usuário nº 1:** eu consigo ver um elemento `textarea` com o `id="editor"` correspondente.
|
||||
**História de usuário nº 1:** eu consigo ver um elemento `textarea` com o `id="editor"` correspondente.
|
||||
|
||||
**Especificação de usuário nº 2:** eu consigo ver um elemento com o `id="preview"` correspondente.
|
||||
**História de usuário nº 2:** eu consigo ver um elemento com o `id="preview"` correspondente.
|
||||
|
||||
**Especificação de usuário nº 3:** quando eu insiro texto no elemento `#editor`, o elemento `#preview` é atualizado enquanto eu escrevo para exibir o conteúdo do textarea.
|
||||
**História de usuário nº 3:** quando eu insiro texto no elemento `#editor`, o elemento `#preview` é atualizado enquanto eu escrevo para exibir o conteúdo do textarea.
|
||||
|
||||
**Especificação de usuário nº 4:** quando insiro marcação do GitHub no elemento `#editor`, o texto é renderizado como HTML no elemento `#preview` enquanto eu escrevo (DICA: você não precisa analisar a marcação você mesmo - você pode importar a biblioteca Marked para isso: <https://cdnjs.com/libraries/marked>).
|
||||
**História de usuário nº 4:** quando insiro marcação do GitHub no elemento `#editor`, o texto é renderizado como HTML no elemento `#preview` enquanto eu escrevo (DICA: você não precisa analisar a marcação você mesmo - você pode importar a biblioteca Marked para isso: <https://cdnjs.com/libraries/marked>).
|
||||
|
||||
**Especificação de usuário nº 5:** quando meu pré-visualizador de marcação carregar pela primeira vez, o texto padrão no campo `#editor` deve conter uma marcação válida que represente pelo menos um de cada um dos elementos a seguir: um elemento (tamanho H1), um subelemento de título (tamanho H2), um link, um código em linha, um código de bloco, uma lista de item, um blockquote, uma imagem e um texto em negrito.
|
||||
**História de usuário nº 5:** quando meu pré-visualizador de marcação carregar pela primeira vez, o texto padrão no campo `#editor` deve conter uma marcação válida que represente pelo menos um de cada um dos elementos a seguir: um elemento (tamanho H1), um subelemento de título (tamanho H2), um link, um código em linha, um código de bloco, uma lista de item, um blockquote, uma imagem e um texto em negrito.
|
||||
|
||||
**Especificação de usuário nº 6:** quando meu pré-visualizador de marcação carregar pela primeira vez, a marcação padrão no campo `#editor` deve ser renderizada como HTML no elemento `#preview`.
|
||||
**História de usuário nº 6:** quando meu pré-visualizador de marcação carregar pela primeira vez, a marcação padrão no campo `#editor` deve ser renderizada como HTML no elemento `#preview`.
|
||||
|
||||
**Bônus opcional (você não precisa de aprovação nesse teste):** meu pré-visualizador de marcação interpreta o retorno de carro e o renderiza como elementos `br` (quebra de linha).
|
||||
|
||||
|
||||
@ -10,31 +10,31 @@ dashedName: build-a-random-quote-machine
|
||||
|
||||
**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: <https://codepen.io/freeCodeCamp/full/qRZeGZ>.
|
||||
|
||||
Atenda às [especificações de usuário abaixo](https://en.wikipedia.org/wiki/User_story) e obtenha aprovação em todos os testes. Dê a ele o seu próprio estilo pessoal.
|
||||
Atenda às [histórias de usuário](https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio) abaixo e obtenha aprovação em todos os testes. Dê a ele o seu próprio estilo pessoal.
|
||||
|
||||
Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e JQuery para completar este projeto. Você deve usar um framework de front-end (como React por exemplo) porque essa seção trata de aprender frameworks de front-end. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos buscando apoiar outros frameworks de front-end, como Angular e Vue, mas eles não são atualmente suportados. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem o conjunto de tecnologias sugeridas para esse projeto. Boa programação!
|
||||
|
||||
**Especificação de usuário nº 1:** eu consigo ver um elemento wrapper com o `id="quote-box"` correspondente.
|
||||
**História de usuário nº 1:** eu consigo ver um elemento wrapper com o `id="quote-box"` correspondente.
|
||||
|
||||
**Especificação de usuário nº 2:** dentro de `#quote-box`, eu consigo ver um elemento com o `id="text"` correspondente.
|
||||
**História de usuário nº 2:** dentro de `#quote-box`, eu consigo ver um elemento com o `id="text"` correspondente.
|
||||
|
||||
**Especificação de usuário nº 3:** dentro de `#quote-box`, eu consigo ver um elemento com o `id="author"` correspondente.
|
||||
**História de usuário nº 3:** dentro de `#quote-box`, eu consigo ver um elemento com o `id="author"` correspondente.
|
||||
|
||||
**Especificação de usuário nº 4:** dentro de `#quote-box`, eu consigo ver um elemento clicável com o `id="new-quote"` correspondente.
|
||||
**História de usuário nº 4:** dentro de `#quote-box`, eu consigo ver um elemento clicável com o `id="new-quote"` correspondente.
|
||||
|
||||
**Especificação de usuário nº 5:** dentro de `#quote-box`, eu consigo ver um elemento clicável `a` com o `id="tweet-quote"` correspondente.
|
||||
**História de usuário nº 5:** dentro de `#quote-box`, eu consigo ver um elemento clicável `a` com o `id="tweet-quote"` correspondente.
|
||||
|
||||
**Especificação de usuário nº 6:** ao carregar pela primeira vez, minha máquina de citação exibe uma citação aleatória no elemento com `id="text"`.
|
||||
**História de usuário nº 6:** ao carregar pela primeira vez, minha máquina de citação exibe uma citação aleatória no elemento com `id="text"`.
|
||||
|
||||
**Especificação de usuário nº 7:** ao carregar pela primeira vez, minha máquina de citação exibe o autor da citação aleatória no elemento com `id="author"`.
|
||||
**História de usuário nº 7:** ao carregar pela primeira vez, minha máquina de citação exibe o autor da citação aleatória no elemento com `id="author"`.
|
||||
|
||||
**Especificação de usuário nº 8:** quando o botão `#new-quote` é clicado, minha máquina de citação deve buscar uma nova citação e exibi-la no elemento `#text`.
|
||||
**História de usuário nº 8:** quando o botão `#new-quote` é clicado, minha máquina de citação deve buscar uma nova citação e exibi-la no elemento `#text`.
|
||||
|
||||
**Especificação de usuário nº 9:** minha máquina de citação deve buscar o novo autor da citação quando o botão `#new-quote` for clicado e o exibir no elemento `#author`.
|
||||
**História de usuário nº 9:** minha máquina de citação deve buscar o novo autor da citação quando o botão `#new-quote` for clicado e o exibir no elemento `#author`.
|
||||
|
||||
**Especificação de usuário nº 10:** eu posso tweetar a citação atual ao clicar no elemento `#tweet-quote` `a`. Esse elemento `a` deve incluir o caminho `"twitter.com/intent/tweet"` no seu atributo `href` para tweetar a citação atual.
|
||||
**História de usuário nº 10:** eu posso tweetar a citação atual ao clicar no elemento `#tweet-quote` `a`. Esse elemento `a` deve incluir o caminho `"twitter.com/intent/tweet"` no seu atributo `href` para tweetar a citação atual.
|
||||
|
||||
**Especificação de usuário nº 11:** o elemento wrapper `#quote-box` deve ser centralizado horizontalmente. Execute testes com o zoom do navegador em 100% e com a página maximizada.
|
||||
**História de usuário nº 11:** o elemento wrapper `#quote-box` deve ser centralizado horizontalmente. Execute testes com o zoom do navegador em 100% e com a página maximizada.
|
||||
|
||||
Você pode construir seu projeto com <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este template CodePen</a> e clicando `Save` para criar seu próprio pen. Ou você pode usar esse link CDN para rodar os testes em qualquer ambiente que você goste:`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
|
||||
@ -10,35 +10,35 @@ dashedName: visualize-data-with-a-bar-chart
|
||||
|
||||
**Objetivo:** criar um app do [CodePen.io](https://codepen.io) que possua uma funcionalidade similar a essa: <https://codepen.io/freeCodeCamp/full/GrZVaM>.
|
||||
|
||||
Atenda às [especificações de usuário](https://en.wikipedia.org/wiki/User_story) abaixo para passar em todos os testes. Dê a elas o seu próprio estilo pessoal.
|
||||
Atenda às [histórias de usuário](https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio) abaixo e obtenha aprovação em todos os testes. Dê a elas o seu próprio estilo pessoal.
|
||||
|
||||
Você pode usar HTML, JavaScript, CSS e a biblioteca de visualização D3, baseada em svg. Os testes requerem que os eixos sejam gerados usando a propriedade de eixos do D3, que geram automaticamente marcações ao longo do eixo. Essas marcações são exigidas para passar nos testes do D3 porque suas posições são usadas para determinar o alinhamento dos elementos do gráfico. Você vai encontrar informações sobre a geração de eixos em <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Os elementos DOM obrigatórios (não virtuais) são consultados no momento de cada teste. Se você usar um framework de front-end (como o Vue por exemplo), os resultados dos testes podem ser imprecisos para conteúdo dinâmico. Esperamos dar suporte a eles um dia, mas atualmente esses frameworks não são suportados para os projetos de D3.
|
||||
|
||||
**Especificação de usuário nº 1:** meu gráfico deve ter um título com um `id="title"` correspondente.
|
||||
**História de usuário nº 1:** meu gráfico deve ter um título com um `id="title"` correspondente.
|
||||
|
||||
**Especificação de usuário nº 2:** meu gráfico deve ter um elemento `g` no eixo x com um `id="x-axis"` correspondente.
|
||||
**História de usuário nº 2:** meu gráfico deve ter um elemento `g` no eixo x com um `id="x-axis"` correspondente.
|
||||
|
||||
**Especificação de usuário nº 3:** meu gráfico deve ter um elemento `g` no eixo y com um `id="y-axis"` correspondente.
|
||||
**História de usuário nº 3:** meu gráfico deve ter um elemento `g` no eixo y com um `id="y-axis"` correspondente.
|
||||
|
||||
**Especificação de usuário nº 4:** ambos os eixos devem conter múltiplos rótulos (labels) de marcação, cada um com uma `class="tick"` correspondente.
|
||||
**História de usuário nº 4:** ambos os eixos devem conter múltiplos rótulos (labels) de marcação, cada um com uma `class="tick"` correspondente.
|
||||
|
||||
**Especificação de usuário nº 5:** meu gráfico deve ter um elemento `rect` para cada ponto com uma classe `class="bar"` correspondente exibindo os dados.
|
||||
**História de usuário nº 5:** meu gráfico deve ter um elemento `rect` para cada ponto com uma classe `class="bar"` correspondente exibindo os dados.
|
||||
|
||||
**Especificação de usuário nº 6:** cada barra deve ter as propriedades `data-date` e `data-gdp`, contendo os valores `date` e `GDP`, respectivamente.
|
||||
**História de usuário nº 6:** cada barra deve ter as propriedades `data-date` e `data-gdp`, contendo os valores `date` e `GDP`, respectivamente.
|
||||
|
||||
**Especificação de usuário nº 7:** as propriedades `data-date` das barras devem corresponder à ordem fornecida pelos dados.
|
||||
**História de usuário nº 7:** as propriedades `data-date` das barras devem corresponder à ordem fornecida pelos dados.
|
||||
|
||||
**Especificação de usuário nº 8:** as propriedades `data-gdp` das barras devem corresponder à ordem fornecida pelos dados.
|
||||
**História de usuário nº 8:** as propriedades `data-gdp` das barras devem corresponder à ordem fornecida pelos dados.
|
||||
|
||||
**Especificação de usuário nº 9:** a altura de cada barra deve representar corretamente os dados de `GDP` correspondentes.
|
||||
**História de usuário nº 9:** a altura de cada barra deve representar corretamente os dados de `GDP` correspondentes.
|
||||
|
||||
**Especificação de usuário nº 10:** o atributo `data-date` e sua barra correspondente devem estar alinhados com o seu valor correspondente no eixo x.
|
||||
**História de usuário nº 10:** o atributo `data-date` e sua barra correspondente devem estar alinhados com o seu valor correspondente no eixo x.
|
||||
|
||||
**Especificação de usuário nº 11:** o atributo `data-gdp` e sua barra correspondente devem estar alinhados com o seu valor correspondente no eixo y.
|
||||
**História de usuário nº 11:** o atributo `data-gdp` e sua barra correspondente devem estar alinhados com o seu valor correspondente no eixo y.
|
||||
|
||||
**Especificação de usuário nº 12:** eu posso passar o mouse sobre uma área e ver uma dica com uma `id="tooltip"` correspondente, que exibe mais informações sobre a área.
|
||||
**História de usuário nº 12:** eu posso passar o mouse sobre uma área e ver uma dica com uma `id="tooltip"` correspondente, que exibe mais informações sobre a área.
|
||||
|
||||
**Especificação de usuário nº 13:** minha ferramenta de dica (tooltip) deve ter uma propriedade `data-date` que corresponda à `data-date` da área ativa.
|
||||
**História de usuário nº 13:** minha ferramenta de dica (tooltip) deve ter uma propriedade `data-date` que corresponda à `data-date` da área ativa.
|
||||
|
||||
Aqui está o dataset de que você precisará para completar este projeto: `https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json`
|
||||
|
||||
|
||||
@ -10,31 +10,31 @@ dashedName: visualize-data-with-a-choropleth-map
|
||||
|
||||
**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: <https://codepen.io/freeCodeCamp/full/EZKqza>.
|
||||
|
||||
Atenda às [especificações de usuário](https://en.wikipedia.org/wiki/User_story) abaixo para passar em todos os testes. Dê à página o seu próprio estilo pessoal.
|
||||
Atenda às [histórias de usuário](https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio) abaixo e obtenha aprovação em todos os testes. Dê à página o seu próprio estilo pessoal.
|
||||
|
||||
Você pode usar HTML, JavaScript, CSS e a biblioteca de visualização D3, baseada em svg. Os elementos DOM obrigatórios (não virtuais) são consultados no momento de cada teste. Se você usar um framework de front-end (como o Vue por exemplo), os resultados dos testes podem ser imprecisos para conteúdo dinâmico. Esperamos dar suporte a eles um dia, mas atualmente esses frameworks não são suportados para os projetos de D3.
|
||||
|
||||
**Especificação de usuário nº 1: ** meu coropleto deve ter um título com um `id="title"` correspondente.
|
||||
**História de usuário nº 1: ** meu coropleto deve ter um título com um `id="title"` correspondente.
|
||||
|
||||
**Especificação de usuário nº 2: ** meu coropleto deve ter um elemento de descrição com uma `id="description"` correspondente.
|
||||
**História de usuário nº 2: ** meu coropleto deve ter um elemento de descrição com uma `id="description"` correspondente.
|
||||
|
||||
**Especificação de usuário nº 3: ** meu coropleto deve ter condados com um `class="county"` correspondente que representa os dados.
|
||||
**História de usuário nº 3: ** meu coropleto deve ter condados com um `class="county"` correspondente que representa os dados.
|
||||
|
||||
**Especificação de usuário nº 4: ** deve haver pelo menos 4 cores de preenchimento diferentes usadas para os condados.
|
||||
**História de usuário nº 4: ** deve haver pelo menos 4 cores de preenchimento diferentes usadas para os condados.
|
||||
|
||||
**Especificação de usuário nº 5:** cada um dos meus condados devem ter propriedades `data-fips` e `data-education` contendo seus correspondentes valores de `fips` e `education`.
|
||||
**História de usuário nº 5:** cada um dos meus condados devem ter propriedades `data-fips` e `data-education` contendo seus correspondentes valores de `fips` e `education`.
|
||||
|
||||
** Especificação de usuário nº 6: ** meu coropleto deve ter um condado para cada dado fornecido.
|
||||
** História de usuário nº 6: ** meu coropleto deve ter um condado para cada dado fornecido.
|
||||
|
||||
**Especificação de usuário nº 7:** os condados devem ter os valores `data-fips` e `data-education` que correspondam aos dados da amostra.
|
||||
**História de usuário nº 7:** os condados devem ter os valores `data-fips` e `data-education` que correspondam aos dados da amostra.
|
||||
|
||||
**Especificação de usuário nº 8:** meu cloropleto deve ter uma legenda com um `id="legend"` correspondente.
|
||||
**História de usuário nº 8:** meu cloropleto deve ter uma legenda com um `id="legend"` correspondente.
|
||||
|
||||
**Especificação de usuário nº 9:** deve haver pelo menos 4 cores diferentes de preenchimento usadas para a legenda.
|
||||
**História de usuário nº 9:** deve haver pelo menos 4 cores diferentes de preenchimento usadas para a legenda.
|
||||
|
||||
**Especificação de usuário nº 10:** eu posso passar com o mouse sobre uma área e ver uma dica com o `id="tooltip"` correspondente, que exibe mais informações sobre a área.
|
||||
**História de usuário nº 10:** eu posso passar com o mouse sobre uma área e ver uma dica com o `id="tooltip"` correspondente, que exibe mais informações sobre a área.
|
||||
|
||||
**Especificação de usuário nº 11:** minha dica deve ter uma propriedade `data-education` que corresponde ao `data-education` da área ativa.
|
||||
**História de usuário nº 11:** minha dica deve ter uma propriedade `data-education` que corresponde ao `data-education` da área ativa.
|
||||
|
||||
Aqui estão os conjuntos de dados de que você precisará para completar esse projeto:
|
||||
|
||||
|
||||
@ -10,43 +10,43 @@ dashedName: visualize-data-with-a-heat-map
|
||||
|
||||
**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: <https://codepen.io/freeCodeCamp/full/JEXgeY>.
|
||||
|
||||
Atenda às [especificações de usuário abaixo](https://en.wikipedia.org/wiki/User_story) e obtenha aprovação em todos os testes. Dê a ele o seu próprio estilo pessoal.
|
||||
Atenda às [histórias de usuário](https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio) abaixo e obtenha aprovação em todos os testes. Dê a ele o seu próprio estilo pessoal.
|
||||
|
||||
Você pode usar HTML, JavaScript, CSS e a biblioteca de visualização D3, baseada em svg. Os elementos DOM necessários (não virtuais) são consultados no momento de cada teste. Se você usar um framework de front-end (como o Vue por exemplo), os resultados dos testes podem ser imprecisos para conteúdo dinâmico. Esperamos dar suporte a eles um dia, mas atualmente esses frameworks não são suportados para os projetos de D3.
|
||||
|
||||
**Especificação de usuário nº 1: ** meu mapa de calor deve ter um título com um `id="title"` correspondente.
|
||||
**História de usuário nº 1: ** meu mapa de calor deve ter um título com um `id="title"` correspondente.
|
||||
|
||||
**Especificação de usuário nº 2: ** meu mapa de calor deve ter uma descrição com uma `id="description"` correspondente.
|
||||
**História de usuário nº 2: ** meu mapa de calor deve ter uma descrição com uma `id="description"` correspondente.
|
||||
|
||||
**Especificação de usuário nº 3:** meu mapa de calor deve ter eixo x com um `id="x-axis"` correspondente.
|
||||
**História de usuário nº 3:** meu mapa de calor deve ter eixo x com um `id="x-axis"` correspondente.
|
||||
|
||||
**Especificação de usuário nº 4:** meu mapa de calor deve ter eixo y com um `id="y-axis"` correspondente.
|
||||
**História de usuário nº 4:** meu mapa de calor deve ter eixo y com um `id="y-axis"` correspondente.
|
||||
|
||||
**Especificação de usuário nº 5: ** meu mapa de calor deve ter elementos `rect` com uma `class="cell"` correspondente que representa os dados.
|
||||
**História de usuário nº 5: ** meu mapa de calor deve ter elementos `rect` com uma `class="cell"` correspondente que representa os dados.
|
||||
|
||||
**Especificação de usuário nº 6:** deve haver pelo menos 4 cores diferentes de preenchimento usadas para as células.
|
||||
**História de usuário nº 6:** deve haver pelo menos 4 cores diferentes de preenchimento usadas para as células.
|
||||
|
||||
**Especificação de usuário nº 7:** cada célula deve ter as propriedades `data-month`, `data-year`, `data-temp` contendo os valores de `month`, `year` e `temperature` correspondentes.
|
||||
**História de usuário nº 7:** cada célula deve ter as propriedades `data-month`, `data-year`, `data-temp` contendo os valores de `month`, `year` e `temperature` correspondentes.
|
||||
|
||||
**Especificação de usuário nº 8:** os valores `data-month` e `data-year` de cada célula devem estar dentro do intervalo dos dados.
|
||||
**História de usuário nº 8:** os valores `data-month` e `data-year` de cada célula devem estar dentro do intervalo dos dados.
|
||||
|
||||
**Especificação de usuário nº 9:** meu mapa de calor deve ter células que estejam alinhadas com o mês correspondente no eixo y.
|
||||
**História de usuário nº 9:** meu mapa de calor deve ter células que estejam alinhadas com o mês correspondente no eixo y.
|
||||
|
||||
**Especificação de usuário nº 10:** meu mapa de calor deve ter células que estejam alinhadas com o ano correspondente no eixo x.
|
||||
**História de usuário nº 10:** meu mapa de calor deve ter células que estejam alinhadas com o ano correspondente no eixo x.
|
||||
|
||||
**Especificação de usuário nº 11:** meu mapa de calor deve ter diversas etiquetas de confirmação no eixo y com o nome do mês por extenso.
|
||||
**História de usuário nº 11:** meu mapa de calor deve ter diversas etiquetas de confirmação no eixo y com o nome do mês por extenso.
|
||||
|
||||
**Especificação de usuário nº 12:** meu mapa de calor deve ter diversas etiquetas de confirmação no eixo x com os anos entre 1754 e 2015.
|
||||
**História de usuário nº 12:** meu mapa de calor deve ter diversas etiquetas de confirmação no eixo x com os anos entre 1754 e 2015.
|
||||
|
||||
**Especificação de usuário nº 13:** meu mapa de calor deve ter uma legenda com o `id="legend"` correspondente.
|
||||
**História de usuário nº 13:** meu mapa de calor deve ter uma legenda com o `id="legend"` correspondente.
|
||||
|
||||
**Especificação de usuário nº 14:** minha legenda deve conter elementos `rect`.
|
||||
**História de usuário nº 14:** minha legenda deve conter elementos `rect`.
|
||||
|
||||
**Especificação de usuário nº 15:** os elementos `rect` na legenda devem usar pelo menos 4 cores diferentes de preenchimento.
|
||||
**História de usuário nº 15:** os elementos `rect` na legenda devem usar pelo menos 4 cores diferentes de preenchimento.
|
||||
|
||||
**Especificação de usuário nº 16:** eu posso passar com o mouse sobre uma área e ver uma dica com o `id="tooltip"` correspondente, que exibe mais informações sobre a área.
|
||||
**História de usuário nº 16:** eu posso passar com o mouse sobre uma área e ver uma dica com o `id="tooltip"` correspondente, que exibe mais informações sobre a área.
|
||||
|
||||
**Especificação de usuário nº 17:** minha dica deve ter uma propriedade `data-year` que corresponde ao `data-year` da área ativa.
|
||||
**História de usuário nº 17:** minha dica deve ter uma propriedade `data-year` que corresponde ao `data-year` da área ativa.
|
||||
|
||||
Aqui está o conjunto de dados de que você vai precisar para completar esse projeto: `https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json`
|
||||
|
||||
|
||||
@ -10,39 +10,39 @@ dashedName: visualize-data-with-a-scatterplot-graph
|
||||
|
||||
**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: <https://codepen.io/freeCodeCamp/full/bgpXyK>.
|
||||
|
||||
Atenda às [especificações de usuário abaixo](https://en.wikipedia.org/wiki/User_story) e obtenha aprovação em todos os testes. Dê a ele o seu próprio estilo pessoal.
|
||||
Atenda às [histórias de usuário](https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio) abaixo e obtenha aprovação em todos os testes. Dê a ele o seu próprio estilo pessoal.
|
||||
|
||||
Você pode usar HTML, JavaScript, CSS e a biblioteca de visualização D3, baseada em svg. Os testes requerem que os eixos sejam gerados usando a propriedade de eixos do D3, que geram automaticamente marcações ao longo do eixo. Essas marcações são exigidas para passar nos testes do D3 porque suas posições são usadas para determinar o alinhamento dos elementos do gráfico. Você vai encontrar informações sobre a geração de eixos em <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Os elementos DOM necessários (não virtuais) são consultados no momento de cada teste. Se você usar um framework de front-end (como o Vue por exemplo), os resultados dos testes podem ser imprecisos para conteúdo dinâmico. Esperamos dar suporte a eles um dia, mas atualmente esses frameworks não são suportados para os projetos de D3.
|
||||
|
||||
**Especificação de usuário nº 1:** eu posso ver um elemento de título que tem um `id="title"` correspondente.
|
||||
**História de usuário nº 1:** eu posso ver um elemento de título que tem um `id="title"` correspondente.
|
||||
|
||||
**Especificação de usuário nº 2:** eu posso ver um eixo x com um `id="x-axis"` correspondente.
|
||||
**História de usuário nº 2:** eu posso ver um eixo x com um `id="x-axis"` correspondente.
|
||||
|
||||
**Especificação de usuário nº 3:** eu posso ver um eixo y com um `id="y-axis"` correspondente.
|
||||
**História de usuário nº 3:** eu posso ver um eixo y com um `id="y-axis"` correspondente.
|
||||
|
||||
**Especificação de usuário nº 4:** eu posso ver pontos e cada um deles tem uma classe `dot`, que representa os dados a serem plotados.
|
||||
**História de usuário nº 4:** eu posso ver pontos e cada um deles tem uma classe `dot`, que representa os dados a serem plotados.
|
||||
|
||||
**Especificação de usuário nº 5:** cada ponto deve ter as propriedades `data-xvalue` e `data-yvalue` contendo seus valores correspondentes de `x` e de `y`.
|
||||
**História de usuário nº 5:** cada ponto deve ter as propriedades `data-xvalue` e `data-yvalue` contendo seus valores correspondentes de `x` e de `y`.
|
||||
|
||||
**Especificação de usuário nº 6:** os valores `data-xvalue` e `data-yvalue` de cada ponto devem estar dentro do intervalo factual de dados e no formato de dados correto. Para `data-xvalue`, objetos de inteiros (anos completos) ou `Date` são aceitáveis para a avaliação dos testes. Para `data-yvalue` (minutos), use objetos `Date`.
|
||||
**História de usuário nº 6:** os valores `data-xvalue` e `data-yvalue` de cada ponto devem estar dentro do intervalo factual de dados e no formato de dados correto. Para `data-xvalue`, objetos de inteiros (anos completos) ou `Date` são aceitáveis para a avaliação dos testes. Para `data-yvalue` (minutos), use objetos `Date`.
|
||||
|
||||
**Especificação de usuário nº 7:** o `data-xvalue` e seu ponto correspondente devem estar alinhados com o ponto/valor correspondente no eixo x.
|
||||
**História de usuário nº 7:** o `data-xvalue` e seu ponto correspondente devem estar alinhados com o ponto/valor correspondente no eixo x.
|
||||
|
||||
**Especificação de usuário nº 8:** o `data-yvalue` e seu ponto correspondente devem estar alinhados com o ponto/valor correspondente no eixo y.
|
||||
**História de usuário nº 8:** o `data-yvalue` e seu ponto correspondente devem estar alinhados com o ponto/valor correspondente no eixo y.
|
||||
|
||||
**Especificação de usuário nº 9:** eu posso ver diversas etiquetas de confirmação no eixo y com o formato de tempo `%M:%S`.
|
||||
**História de usuário nº 9:** eu posso ver diversas etiquetas de confirmação no eixo y com o formato de tempo `%M:%S`.
|
||||
|
||||
**Especificação de usuário nº 10:** eu posso ver diversas etiquetas de confirmação no eixo x que mostram o ano.
|
||||
**História de usuário nº 10:** eu posso ver diversas etiquetas de confirmação no eixo x que mostram o ano.
|
||||
|
||||
**Especificação de usuário nº 11:** eu posso ver que o intervalo de etiquetas com o eixo x está dentro do intervalo factual de dados do eixo x.
|
||||
**História de usuário nº 11:** eu posso ver que o intervalo de etiquetas com o eixo x está dentro do intervalo factual de dados do eixo x.
|
||||
|
||||
**Especificação de usuário nº 12:** eu posso ver que o intervalo de etiquetas com o eixo y está dentro do intervalo factual de dados do eixo y.
|
||||
**História de usuário nº 12:** eu posso ver que o intervalo de etiquetas com o eixo y está dentro do intervalo factual de dados do eixo y.
|
||||
|
||||
**Especificação de usuário nº 13:** eu posso ver uma legenda que tem `id="legend"` e contém texto descritivo.
|
||||
**História de usuário nº 13:** eu posso ver uma legenda que tem `id="legend"` e contém texto descritivo.
|
||||
|
||||
**Especificação de usuário nº 14:** eu posso passar com o mouse sobre uma área e ver uma dica com o `id="tooltip"` correspondente, que exibe mais informações sobre a área.
|
||||
**História de usuário nº 14:** eu posso passar com o mouse sobre uma área e ver uma dica com o `id="tooltip"` correspondente, que exibe mais informações sobre a área.
|
||||
|
||||
**Especificação de usuário nº 15:** minha dica deve ter uma propriedade `data-year` que corresponde ao `data-xvalue` da área ativa.
|
||||
**História de usuário nº 15:** minha dica deve ter uma propriedade `data-year` que corresponde ao `data-xvalue` da área ativa.
|
||||
|
||||
Aqui está o conjunto de dados de que você vai precisar para completar esse projeto: `https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json`
|
||||
|
||||
|
||||
@ -10,31 +10,31 @@ dashedName: visualize-data-with-a-treemap-diagram
|
||||
|
||||
**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: <https://codepen.io/freeCodeCamp/full/KaNGNR>.
|
||||
|
||||
Atenda às [especificações de usuário abaixo](https://en.wikipedia.org/wiki/User_story) e obtenha aprovação em todos os testes. Dê a ele o seu próprio estilo pessoal.
|
||||
Atenda às [histórias de usuário](https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio) abaixo e obtenha aprovação em todos os testes. Dê a ele o seu próprio estilo pessoal.
|
||||
|
||||
Você pode usar HTML, JavaScript, CSS e a biblioteca de visualização D3, baseada em svg. Os testes requerem que os eixos sejam gerados usando a propriedade de eixos do D3, que geram automaticamente marcações ao longo do eixo. Essas marcações são exigidas para passar nos testes do D3 porque suas posições são usadas para determinar o alinhamento dos elementos do gráfico. Você vai encontrar informações sobre a geração de eixos em <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Os elementos DOM necessários (não virtuais) são consultados no momento de cada teste. Se você usar um framework de front-end (como o Vue por exemplo), os resultados dos testes podem ser imprecisos para conteúdo dinâmico. Esperamos dar suporte a eles um dia, mas atualmente esses frameworks não são suportados para os projetos de D3.
|
||||
|
||||
**Especificação de usuário nº 1: ** meu treemap deve ter um título com um `id="title"` correspondente.
|
||||
**História de usuário nº 1: ** meu treemap deve ter um título com um `id="title"` correspondente.
|
||||
|
||||
**Especificação de usuário nº 2: ** meu treemap deve ter uma descrição com uma `id="description"` correspondente.
|
||||
**História de usuário nº 2: ** meu treemap deve ter uma descrição com uma `id="description"` correspondente.
|
||||
|
||||
**Especificação de usuário nº 3: ** meu treemap deve ter elementos `rect` com uma `class="tile"` que representa os dados.
|
||||
**História de usuário nº 3: ** meu treemap deve ter elementos `rect` com uma `class="tile"` que representa os dados.
|
||||
|
||||
**Especificação de usuário nº 4:** deve haver pelo menos 4 cores diferentes de preenchimento usadas para os blocos.
|
||||
**História de usuário nº 4:** deve haver pelo menos 4 cores diferentes de preenchimento usadas para os blocos.
|
||||
|
||||
**Especificação de usuário nº 5:** cada bloco deve ter as propriedades `data-name`, `data-category` e `data-value` contendo os valores de `name`, `category` e `value` correspondentes.
|
||||
**História de usuário nº 5:** cada bloco deve ter as propriedades `data-name`, `data-category` e `data-value` contendo os valores de `name`, `category` e `value` correspondentes.
|
||||
|
||||
**Especificação de usuário nº 6:** a área de cada bloco deve corresponder à quantidade de `data-value`: blocos com um `data-value` maior devem ter uma área maior.
|
||||
**História de usuário nº 6:** a área de cada bloco deve corresponder à quantidade de `data-value`: blocos com um `data-value` maior devem ter uma área maior.
|
||||
|
||||
**Especificação de usuário nº 7:** meu treemap deve ter uma legenda com o `id="legend"` correspondente.
|
||||
**História de usuário nº 7:** meu treemap deve ter uma legenda com o `id="legend"` correspondente.
|
||||
|
||||
**Especificação de usuário nº 8:** minha legenda deve ter elementos `rect` com um `class="legend-item"` correspondente.
|
||||
**História de usuário nº 8:** minha legenda deve ter elementos `rect` com um `class="legend-item"` correspondente.
|
||||
|
||||
**Especificação de usuário nº 9:** os elementos `rect` na legenda devem usar pelo menos 2 cores diferentes de preenchimento.
|
||||
**História de usuário nº 9:** os elementos `rect` na legenda devem usar pelo menos 2 cores diferentes de preenchimento.
|
||||
|
||||
**Especificação de usuário nº 10:** eu posso passar com o mouse sobre uma área e ver uma dica com o `id="tooltip"` correspondente, que exibe mais informações sobre a área.
|
||||
**História de usuário nº 10:** eu posso passar com o mouse sobre uma área e ver uma dica com o `id="tooltip"` correspondente, que exibe mais informações sobre a área.
|
||||
|
||||
**Especificação de usuário nº 11:** minha dica deve ter uma propriedade `data-value` que corresponda à `data-value` da área ativa.
|
||||
**História de usuário nº 11:** minha dica deve ter uma propriedade `data-value` que corresponda à `data-value` da área ativa.
|
||||
|
||||
Para este projeto, você pode usar qualquer um dos seguintes conjuntos de dados:
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@ Quando terminar, certifique-se de que uma demonstração funcional do seu projet
|
||||
|
||||
# --instructions--
|
||||
|
||||
**Observação**: `helmet@^3.21.3` é necessário para as especificações de usuários. Isto significa que você precisará usar a versão anterior da documentação do Helmet, para obter informações sobre como obter as especificações de usuários.
|
||||
**Observação**: `helmet@^3.21.3` é necessário para as histórias de usuários. Isto significa que você precisará usar a versão anterior da documentação do Helmet, para obter informações sobre como obter as histórias de usuários.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -10,13 +10,13 @@ dashedName: build-a-freecodecamp-forum-homepage
|
||||
|
||||
**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: <https://codepen.io/freeCodeCamp/full/JqdoMV>.
|
||||
|
||||
Atenda às [especificações de usuário abaixo](https://en.wikipedia.org/wiki/User_story). Use quaisquer bibliotecas ou APIs de que você precisar. Dê a ele o seu próprio estilo pessoal.
|
||||
Atenda às [histórias de usuário](https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio) abaixo. Use quaisquer bibliotecas ou APIs de que você precisar. Dê a ele o seu próprio estilo pessoal.
|
||||
|
||||
**Especificação de usuário:** posso ver uma lista dos posts mais recentes do fórum freeCodeCamp.
|
||||
**História de usuário:** posso ver uma lista dos posts mais recentes do fórum do freeCodeCamp.
|
||||
|
||||
**Especificação de usuário:** para cada tópico, posso ver o título e uma lista de links para usuários que recentemente postaram nele.
|
||||
**História de usuário:** para cada tópico, posso ver o título e uma lista de links para usuários que recentemente postaram nele.
|
||||
|
||||
**Especificação de usuário:** posso ver o número de respostas e visualizações que cada tópico teve, e um carimbo de data/hora de quando o tópico foi ativo pela última vez.
|
||||
**História de usuário:** posso ver o número de respostas e visualizações que cada tópico teve, e um carimbo de data/hora de quando o tópico foi ativo pela última vez.
|
||||
|
||||
**Dica:** Para obter os 30 posts mais recentes do fórum: <https://forum-proxy.freecodecamp.rocks/latest>.
|
||||
|
||||
|
||||
@ -12,19 +12,19 @@ dashedName: build-a-light-bright-app
|
||||
|
||||
**Regra nº 1:** não olhe o código do projeto de exemplo. Descubra por conta própria.
|
||||
|
||||
**Regra nº 2:** atenda às [especificações de usuário abaixo](https://en.wikipedia.org/wiki/User_story). Use quaisquer bibliotecas ou APIs de que você precisar. Dê a ele o seu próprio estilo pessoal.
|
||||
**Regra nº 2:** atenda às [histórias de usuário](https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio) abaixo. Use quaisquer bibliotecas ou APIs de que você precisar. Dê a ele o seu próprio estilo pessoal.
|
||||
|
||||
**Especificação de usuário:** posso clicar ou arrastar o cursor do mouse para colorir os círculos.
|
||||
**História de usuário:** posso clicar ou arrastar o cursor do mouse para colorir os círculos.
|
||||
|
||||
**Especificação de usuário:** posso clicar duas vezes em um círculo colorido para remover a cor.
|
||||
**História de usuário:** posso clicar duas vezes em um círculo colorido para remover a cor.
|
||||
|
||||
**Especificação de usuário:** posso clicar em um círculo colorido para mudar a cor dele.
|
||||
**História de usuário:** posso clicar em um círculo colorido para mudar a cor dele.
|
||||
|
||||
**Especificação de usuário:** eu devo pegar um círculo de cor diferente em cada clique.
|
||||
**História de usuário:** eu devo pegar um círculo de cor diferente em cada clique.
|
||||
|
||||
**Especificação de usuário:** posso clicar no botão 'Reset' para remover a cor recente.
|
||||
**História de usuário:** posso clicar no botão 'Reset' para remover a cor recente.
|
||||
|
||||
**Especificação de usuário:** posso clicar no botão 'Reset All' para remover todas as cores dos círculos.
|
||||
**História de usuário:** posso clicar no botão 'Reset All' para remover todas as cores dos círculos.
|
||||
|
||||
Quando terminar, inclua um link para o seu projeto no CodePen e clique no botão "Eu completei esse desafio".
|
||||
|
||||
|
||||
@ -10,15 +10,15 @@ dashedName: build-a-nightlife-coordination-app
|
||||
|
||||
Crie um aplicativo full stack em JavaScript que seja funcionalmente semelhante a este: <https://yoyo44.herokuapp.com/>. Use um construtor de site de sua escolha para completar o projeto.
|
||||
|
||||
Aqui estão as especificações de usuário que você deve implementar para este projeto:
|
||||
Aqui estão as histórias de usuário que você deve implementar para este projeto:
|
||||
|
||||
**Especificação de usuário:** como usuário não autenticado, você pode visualizar todas as barras da minha área.
|
||||
**História de usuário:** como usuário não autenticado, você pode visualizar todas as barras da minha área.
|
||||
|
||||
**Especificação de usuário:** como usuário autenticado, você pode me adicionar a um bar para indicar que eu estarei lá esta noite.
|
||||
**História de usuário:** como usuário autenticado, você pode me adicionar a um bar para indicar que eu estarei lá esta noite.
|
||||
|
||||
**Especificação de usuário:** como usuário autenticado, você pode me remover de um bar para indicar que eu não quero mais ir lá.
|
||||
**História de usuário:** como usuário autenticado, você pode me remover de um bar para indicar que eu não quero mais ir lá.
|
||||
|
||||
**Especificação de usuário:** como um usuário não autenticado, quando você faz o login, você não deve ter que pesquisar novamente.
|
||||
**História de usuário:** como um usuário não autenticado, quando você faz o login, você não deve ter que pesquisar novamente.
|
||||
|
||||
**Dica:** tente usar a [API da Yelp](https://www.yelp.com/developers/documentation/v3) para encontrar estabelecimentos que os usuários pesquisam nas cidades. Se você usar a API da Yelp, certifique-se de mencionar isso na aplicação.
|
||||
|
||||
|
||||
@ -10,23 +10,23 @@ dashedName: build-a-pinterest-clone
|
||||
|
||||
**Objetivo:** criar uma aplicação no [Replit](https://replit.com/) que tenha função semelhante a esta: <https://build-a-pinterest-clone.freecodecamp.rocks/>.
|
||||
|
||||
Atenda às [especificações de usuário abaixo](https://en.wikipedia.org/wiki/User_story). Use quaisquer bibliotecas ou APIs de que você precisar. Dê a ele o seu próprio estilo pessoal.
|
||||
Atenda às [histórias de usuário](https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio) abaixo. Use quaisquer bibliotecas ou APIs de que você precisar. Dê a ele o seu próprio estilo pessoal.
|
||||
|
||||
**Especificação de usuário:** como usuário autenticado, posso fazer login com o GitHub.
|
||||
**História de usuário:** como usuário autenticado, posso fazer login com o GitHub.
|
||||
|
||||
**Especificação de usuário:** como usuário autenticado, eu posso vincular imagens.
|
||||
**História de usuário:** como usuário autenticado, eu posso vincular imagens.
|
||||
|
||||
**Especificação de usuário:** como usuário autenticado, eu posso excluir imagens que eu vinculei.
|
||||
**História de usuário:** como usuário autenticado, eu posso excluir imagens que eu vinculei.
|
||||
|
||||
**Especificação de usuário:** como usuário autenticado, eu posso ver um mural ao estilo do Pinterest com todas as imagens que eu vinculei.
|
||||
**História de usuário:** como usuário autenticado, eu posso ver um mural ao estilo do Pinterest com todas as imagens que eu vinculei.
|
||||
|
||||
**Especificação de usuário:** como usuário não autenticado, eu posso pesquisar os murais de imagens dos outros usuários.
|
||||
**História de usuário:** como usuário não autenticado, eu posso pesquisar os murais de imagens dos outros usuários.
|
||||
|
||||
**Especificação de usuário:** como um usuário não autenticado, se eu enviar uma imagem com o vínculo não funcional, ela será substituída por uma imagem temporária. (é possível usar o jQuery para detectar imagens sem o link funcional)
|
||||
**História de usuário:** como um usuário não autenticado, se eu enviar uma imagem com o vínculo não funcional, ela será substituída por uma imagem temporária. (é possível usar o jQuery para detectar imagens sem o link funcional)
|
||||
|
||||
**Dica:** o [Masonry.js](https://masonry.desandro.com/) é uma biblioteca que permite grades de imagens no estilo Pinterest.
|
||||
|
||||
Depois de terminar de implementar essas especificações de usuários, digite o URL para sua aplicação ao vivo e, como opção, seu repositório do GitHub. Então, clique no botão "Eu completei este desafio".
|
||||
Depois de terminar de implementar essas histórias de usuários, digite o URL para sua aplicação ao vivo e, como opção, seu repositório do GitHub. Então, clique no botão "Eu completei este desafio".
|
||||
|
||||
Você pode obter feedback sobre o seu projeto compartilhando-o no [fórum do freeCodeCamp](https://forum.freecodecamp.org/c/project-feedback/409).
|
||||
|
||||
|
||||
@ -12,15 +12,15 @@ dashedName: build-a-pong-game
|
||||
|
||||
**Regra nº 1:** não olhe o código do projeto de exemplo. Descubra por conta própria.
|
||||
|
||||
**Regra nº 2:** atenda às [especificações de usuário abaixo](https://en.wikipedia.org/wiki/User_story). Use quaisquer bibliotecas ou APIs de que você precisar. Dê a ele o seu próprio estilo pessoal.
|
||||
**Regra nº 2:** atenda às [histórias de usuário](https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio) abaixo. Use quaisquer bibliotecas ou APIs de que você precisar. Dê a ele o seu próprio estilo pessoal.
|
||||
|
||||
**Especificação de usuário:** posso controlar uma raquete.
|
||||
**História de usuário:** posso controlar uma raquete.
|
||||
|
||||
**Especificação de usuário:** o computador pode controlar a outra raquete.
|
||||
**História de usuário:** o computador pode controlar a outra raquete.
|
||||
|
||||
**Especificação de usuário:** a raquete do computador é invencível. Ela nunca deve perder a bola.
|
||||
**História de usuário:** a raquete do computador é invencível. Ela nunca deve perder a bola.
|
||||
|
||||
**Especificação de usuário:** o jogo mantém o registro dos resultados do jogador e do computador.
|
||||
**História de usuário:** o jogo mantém o registro dos resultados do jogador e do computador.
|
||||
|
||||
Quando terminar, inclua um link para o seu projeto no CodePen e clique no botão "Eu completei esse desafio".
|
||||
|
||||
|
||||
@ -10,19 +10,19 @@ dashedName: build-a-recipe-box
|
||||
|
||||
**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: <https://codepen.io/freeCodeCamp/full/dNVazZ/>.
|
||||
|
||||
Atenda às [especificações de usuário abaixo](https://en.wikipedia.org/wiki/User_story). Use quaisquer bibliotecas ou APIs de que você precisar. Dê a ele o seu próprio estilo pessoal.
|
||||
Atenda às [histórias de usuário](https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio) abaixo. Use quaisquer bibliotecas ou APIs de que você precisar. Dê a ele o seu próprio estilo pessoal.
|
||||
|
||||
**Especificação de usuário:** eu posso criar receitas que têm nomes e ingredientes.
|
||||
**História de usuário:** eu posso criar receitas que têm nomes e ingredientes.
|
||||
|
||||
**Especificação de usuário:** posso ver uma exibição indexada onde os nomes de todas as receitas são visíveis.
|
||||
**História de usuário:** posso ver uma exibição indexada onde os nomes de todas as receitas são visíveis.
|
||||
|
||||
**Especificação de usuário:** posso clicar em qualquer uma dessas receitas para visualizá-la.
|
||||
**História de usuário:** posso clicar em qualquer uma dessas receitas para visualizá-la.
|
||||
|
||||
**Especificação de usuário:** posso editar essas receitas.
|
||||
**História de usuário:** posso editar essas receitas.
|
||||
|
||||
**Especificação de usuário:** posso excluir essas receitas.
|
||||
**História de usuário:** posso excluir essas receitas.
|
||||
|
||||
**Especificação de usuário:** todas as novas receitas que eu adiciono são salvas no armazenamento local do meu navegador. Se eu atualizar a página, as receitas ainda estarão lá.
|
||||
**História de usuário:** todas as novas receitas que eu adiciono são salvas no armazenamento local do meu navegador. Se eu atualizar a página, as receitas ainda estarão lá.
|
||||
|
||||
**Dica:** você deve prefixar suas chaves de armazenamento local no CodePen, ou seja, `_username_recipes`
|
||||
|
||||
|
||||
@ -10,25 +10,25 @@ dashedName: build-a-roguelike-dungeon-crawler-game
|
||||
|
||||
**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: <https://codepen.io/freeCodeCamp/full/apLXEJ/>.
|
||||
|
||||
Atenda às [especificações de usuário abaixo](https://en.wikipedia.org/wiki/User_story). Use quaisquer bibliotecas ou APIs de que você precisar. Dê a ele o seu próprio estilo pessoal.
|
||||
Atenda às [histórias de usuário](https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio) abaixo. Use quaisquer bibliotecas ou APIs de que você precisar. Dê a ele o seu próprio estilo pessoal.
|
||||
|
||||
**Especificação de usuário:** eu tenho saúde, um nível e uma arma. Eu posso pegar uma arma melhor. Eu posso pegar itens de saúde.
|
||||
**História de usuário:** eu tenho saúde, um nível e uma arma. Eu posso pegar uma arma melhor. Eu posso pegar itens de saúde.
|
||||
|
||||
**Especificação de usuário:** todos os itens e inimigos do mapa são organizados aleatoriamente.
|
||||
**História de usuário:** todos os itens e inimigos do mapa são organizados aleatoriamente.
|
||||
|
||||
**Especificação de usuário:** eu posso me mover através de um mapa, descobrindo itens.
|
||||
**História de usuário:** eu posso me mover através de um mapa, descobrindo itens.
|
||||
|
||||
**Especificação de usuário:** eu posso me mover para qualquer lugar dentro dos limites do mapa, mas não posso me mover através de um inimigo até ter vencido.
|
||||
**História de usuário:** eu posso me mover para qualquer lugar dentro dos limites do mapa, mas não posso me mover através de um inimigo até ter vencido.
|
||||
|
||||
**Especificação de usuário:** grande parte do mapa está oculta. Quando eu dou um passo, todos os espaços que estão dentro de uma certa distância ao meu redor meus são revelados.
|
||||
**História de usuário:** grande parte do mapa está oculta. Quando eu dou um passo, todos os espaços que estão dentro de uma certa distância ao meu redor meus são revelados.
|
||||
|
||||
**Especificação de usuário:** quando eu derroto um inimigo, o inimigo vai embora e eu ganho XP, o que eventualmente aumenta meu nível.
|
||||
**História de usuário:** quando eu derroto um inimigo, o inimigo vai embora e eu ganho XP, o que eventualmente aumenta meu nível.
|
||||
|
||||
**Especificação de usuário:** quando eu enfrento um inimigo, nós ferimos um ao outro em turnos até que um de nós perca. Eu causo dano baseado no meu nível e na minha arma. O inimigo causa dano baseado em seu nível. O dano é, de certo modo, aleatório dentro de um intervalo.
|
||||
**História de usuário:** quando eu enfrento um inimigo, nós ferimos um ao outro em turnos até que um de nós perca. Eu causo dano baseado no meu nível e na minha arma. O inimigo causa dano baseado em seu nível. O dano é, de certo modo, aleatório dentro de um intervalo.
|
||||
|
||||
**Especificação de usuário:** quando eu encontrar e derrotar o chefe, eu ganho o jogo.
|
||||
**História de usuário:** quando eu encontrar e derrotar o chefe, eu ganho o jogo.
|
||||
|
||||
**Especificação de usuário:** o jogo deve ser desafiador, mas teoricamente ganhável.
|
||||
**História de usuário:** o jogo deve ser desafiador, mas teoricamente ganhável.
|
||||
|
||||
Quando terminar, inclua um link para o seu projeto no CodePen e clique no botão "Eu completei esse desafio".
|
||||
|
||||
|
||||
@ -10,23 +10,23 @@ dashedName: build-a-simon-game
|
||||
|
||||
**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: [https://codepen.io/freeCodeCamp/full/obYBjE](https://codepen.io/freeCodeCamp/full/obYBjE).
|
||||
|
||||
Atenda às [especificações de usuário abaixo](https://en.wikipedia.org/wiki/User_story). Use quaisquer bibliotecas ou APIs de que você precisar. Dê a ele o seu próprio estilo pessoal.
|
||||
Atenda às [histórias de usuário](https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio) abaixo. Use quaisquer bibliotecas ou APIs de que você precisar. Dê a ele o seu próprio estilo pessoal.
|
||||
|
||||
**Especificação de usuário:** sou confrontado com uma série aleatória de pressionamentos de botões.
|
||||
**História de usuário:** sou confrontado com uma série aleatória de pressionamentos de botões.
|
||||
|
||||
**Especificação de usuário:** cada vez que eu inserir uma série de pressionamentos de botões corretamente, vejo a mesma série de pressionamentos de botões, mas com um passo adicional.
|
||||
**História de usuário:** cada vez que eu inserir uma série de pressionamentos de botões corretamente, vejo a mesma série de pressionamentos de botões, mas com um passo adicional.
|
||||
|
||||
**Especificação de usuário:** eu ouço um som que corresponde a cada botão quando a série de pressionamento de botões é reproduzida e quando eu pessoalmente aperto um botão.
|
||||
**História de usuário:** eu ouço um som que corresponde a cada botão quando a série de pressionamento de botões é reproduzida e quando eu pessoalmente aperto um botão.
|
||||
|
||||
**Especificação de usuário:** se eu pressionar um botão errado, eu sou notificado de que fiz isso. Essa série de pressionamentos de botões começa novamente para me lembrar do padrão para que eu possa tentar novamente.
|
||||
**História de usuário:** se eu pressionar um botão errado, eu sou notificado de que fiz isso. Essa série de pressionamentos de botões começa novamente para me lembrar do padrão para que eu possa tentar novamente.
|
||||
|
||||
**Especificação de usuário:** eu posso ver quantos passos há na série atual de pressionamentos de botões.
|
||||
**História de usuário:** eu posso ver quantos passos há na série atual de pressionamentos de botões.
|
||||
|
||||
**Especificação de usuário:** se eu quiser reiniciar, posso apertar um botão para fazer isso. O jogo voltará a uma única etapa.
|
||||
**História de usuário:** se eu quiser reiniciar, posso apertar um botão para fazer isso. O jogo voltará a uma única etapa.
|
||||
|
||||
**Especificação de usuário:** posso jogar em modo restrito, onde, se eu apertar um botão errado, o jogo me notifica que eu fiz isso e o jogo reinicia com uma nova série aleatória de pressionamento de botões.
|
||||
**História de usuário:** posso jogar em modo restrito, onde, se eu apertar um botão errado, o jogo me notifica que eu fiz isso e o jogo reinicia com uma nova série aleatória de pressionamento de botões.
|
||||
|
||||
**Especificação de usuário:** posso vencer o jogo obtendo uma série de 20 etapas corretas. Eu fui notificado da minha vitória e, então, o jogo recomeça.
|
||||
**História de usuário:** posso vencer o jogo obtendo uma série de 20 etapas corretas. Eu fui notificado da minha vitória e, então, o jogo recomeça.
|
||||
|
||||
**Dica:** aqui estão os mp3s que você pode usar para cada botão: `https://s3.amazonaws.com/freecodecamp/simonSound1.mp3`, `https://s3.amazonaws.com/freecodecamp/simonSound2.mp3`, `https://s3.amazonaws.com/freecodecamp/simonSound3.mp3`, `https://s3.amazonaws.com/freecodecamp/simonSound4.mp3`.
|
||||
|
||||
|
||||
@ -10,13 +10,13 @@ dashedName: build-a-tic-tac-toe-game
|
||||
|
||||
**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: <https://codepen.io/freeCodeCamp/full/KzXQgy/>.
|
||||
|
||||
Atenda às [especificações de usuário abaixo](https://en.wikipedia.org/wiki/User_story). Use quaisquer bibliotecas ou APIs de que você precisar. Dê a ele o seu próprio estilo pessoal.
|
||||
Atenda às [histórias de usuário](https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio) abaixo. Use quaisquer bibliotecas ou APIs de que você precisar. Dê a ele o seu próprio estilo pessoal.
|
||||
|
||||
**Especificação de usuário:** eu posso jogar um jogo da velha com o computador.
|
||||
**História de usuário:** eu posso jogar um jogo da velha com o computador.
|
||||
|
||||
**Especificação de usuário:** meu jogo vai ser reiniciado assim que estiver concluído, então eu poderei jogar de novo.
|
||||
**História de usuário:** meu jogo vai ser reiniciado assim que estiver concluído, então eu poderei jogar de novo.
|
||||
|
||||
**Especificação de usuário:** eu posso escolher se eu quero jogar como X ou O.
|
||||
**História de usuário:** eu posso escolher se eu quero jogar como X ou O.
|
||||
|
||||
Quando terminar, inclua um link para o seu projeto no CodePen e clique no botão "Eu completei esse desafio".
|
||||
|
||||
|
||||
@ -10,23 +10,23 @@ dashedName: build-a-voting-app
|
||||
|
||||
Crie um aplicativo full stack em JavaScript que seja funcionalmente semelhante a este: <https://voting-app.freecodecamp.rocks/>. Use um construtor de site de sua escolha para completar o projeto.
|
||||
|
||||
Aqui estão as especificações de usuário que você deve implementar para este projeto:
|
||||
Aqui estão as histórias de usuário que você deve implementar para este projeto:
|
||||
|
||||
**Especificação de usuário:** como usuário autenticado, você pode manter minhas enquetes e voltar mais tarde para acessá-las.
|
||||
**História de usuário:** como usuário autenticado, você pode manter minhas enquetes e voltar mais tarde para acessá-las.
|
||||
|
||||
**Especificação de usuário:** como usuário autenticado, você pode compartilhar minhas enquetes com meus amigos.
|
||||
**História de usuário:** como usuário autenticado, você pode compartilhar minhas enquetes com meus amigos.
|
||||
|
||||
**Especificação de usuário:** como usuário autenticado, você pode ver os resultados agregados das minhas enquetes.
|
||||
**História de usuário:** como usuário autenticado, você pode ver os resultados agregados das minhas enquetes.
|
||||
|
||||
**Especificação de usuário:** como usuário autenticado, você pode excluir enquetes que eu decidir que não quero mais.
|
||||
**História de usuário:** como usuário autenticado, você pode excluir enquetes que eu decidir que não quero mais.
|
||||
|
||||
**Especificação de usuário:** como usuário autenticado, você pode criar uma enquete com uma quantidade qualquer de itens.
|
||||
**História de usuário:** como usuário autenticado, você pode criar uma enquete com uma quantidade qualquer de itens.
|
||||
|
||||
**Especificação de usuário:** como um usuário não autenticado ou autenticado, você pode ver e votar nas enquetes de todos.
|
||||
**História de usuário:** como um usuário não autenticado ou autenticado, você pode ver e votar nas enquetes de todos.
|
||||
|
||||
**Especificação de usuário:** como um usuário não autenticado ou autenticado, você pode ver os resultados das enquetes em forma de gráfico. (Isso pode ser implementado usando o Chart.js ou o Google Charts.)
|
||||
**História de usuário:** como um usuário não autenticado ou autenticado, você pode ver os resultados das enquetes em forma de gráfico. (Isso pode ser implementado usando o Chart.js ou o Google Charts.)
|
||||
|
||||
**Especificação de usuário:** Como um usuário autenticado, se você não gostar das opções em uma enquete, você pode criar uma nova opção.
|
||||
**História de usuário:** Como um usuário autenticado, se você não gostar das opções em uma enquete, você pode criar uma nova opção.
|
||||
|
||||
Quando terminar, certifique-se de que uma demonstração funcional do seu projeto está hospedada em algum lugar público. Em seguida, envie o URL para ela no campo `Solution Link`. Como opção, envie também um link para o código-fonte do projeto no campo `GitHub Link`.
|
||||
|
||||
|
||||
@ -10,11 +10,11 @@ dashedName: build-a-wikipedia-viewer
|
||||
|
||||
**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: <https://codepen.io/freeCodeCamp/full/wGqEga/>.
|
||||
|
||||
Atenda às [especificações de usuário abaixo](https://en.wikipedia.org/wiki/User_story). Use quaisquer bibliotecas ou APIs de que você precisar. Dê a ele o seu próprio estilo pessoal.
|
||||
Atenda às [histórias de usuário](https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio) abaixo. Use quaisquer bibliotecas ou APIs de que você precisar. Dê a ele o seu próprio estilo pessoal.
|
||||
|
||||
**Especificação de usuário:** eu posso pesquisar postagens na Wikipédia e ver as entradas da Wikipédia resultantes.
|
||||
**História de usuário:** eu posso pesquisar postagens na Wikipédia e ver as entradas da Wikipédia resultantes.
|
||||
|
||||
**Especificação de usuário:** posso clicar em um botão para ver uma entrada aleatória da Wikipédia.
|
||||
**História de usuário:** posso clicar em um botão para ver uma entrada aleatória da Wikipédia.
|
||||
|
||||
Dica nº 1: aqui está um URL que você pode usar para obter um artigo aleatório da Wikipédia: `https://en.wikipedia.org/wiki/Special:Random`.
|
||||
|
||||
|
||||
@ -10,13 +10,13 @@ dashedName: build-an-image-search-abstraction-layer
|
||||
|
||||
Crie uma aplicação full stack em JavaScript que permita a você pesquisar por imagens como essa: <https://image-search-abstraction-layer.freecodecamp.rocks/query/lolcats%20funny?page=10> e pesquisar consultas de pesquisa recentes como essa: <https://image-search-abstraction-layer.freecodecamp.rocks/recent/>. Use um construtor de site de sua escolha para completar o projeto.
|
||||
|
||||
Aqui estão as especificações de usuário que você deve implementar para este projeto:
|
||||
Aqui estão as histórias de usuário que você deve implementar para este projeto:
|
||||
|
||||
**Especificação de usuário:** você pode obter os URLs de imagem, descrição e URLs de página para um conjunto de imagens relacionadas a uma determinada string de pesquisa.
|
||||
**História de usuário:** você pode obter os URLs de imagem, descrição e URLs de página para um conjunto de imagens relacionadas a uma determinada string de pesquisa.
|
||||
|
||||
**Especificação de usuário:** você pode paginar pelas respostas, adicionando um parâmetro `?page=2` ao URL.
|
||||
**História de usuário:** você pode paginar pelas respostas, adicionando um parâmetro `?page=2` ao URL.
|
||||
|
||||
**Especificação de usuário:** você pode obter uma lista das strings de pesquisa enviadas mais recentemente.
|
||||
**História de usuário:** você pode obter uma lista das strings de pesquisa enviadas mais recentemente.
|
||||
|
||||
Quando terminar, certifique-se de que uma demonstração funcional do seu projeto está hospedada em algum lugar público. Em seguida, envie o URL para ela no campo `Solution Link`. Como opção, envie também um link para o código-fonte do projeto no campo `GitHub Link`.
|
||||
|
||||
|
||||
@ -10,19 +10,19 @@ dashedName: build-the-game-of-life
|
||||
|
||||
**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: <https://codepen.io/freeCodeCamp/full/BpwMZv/>.
|
||||
|
||||
Atenda às [especificações de usuário abaixo](https://en.wikipedia.org/wiki/User_story). Use quaisquer bibliotecas ou APIs de que você precisar. Dê a ele o seu próprio estilo pessoal.
|
||||
Atenda às [histórias de usuário](https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio) abaixo. Use quaisquer bibliotecas ou APIs de que você precisar. Dê a ele o seu próprio estilo pessoal.
|
||||
|
||||
**Especificação de usuário:** assim que eu chegar ao jogo, ele vai gerar aleatoriamente um tabuleiro e começar a jogar.
|
||||
**História de usuário:** assim que eu chegar ao jogo, ele vai gerar aleatoriamente um tabuleiro e começar a jogar.
|
||||
|
||||
**Especificação de usuário:** posso iniciar e parar o tabuleiro.
|
||||
**História de usuário:** posso iniciar e parar o tabuleiro.
|
||||
|
||||
**Especificação de usuário:** posso configurar o tabuleiro.
|
||||
**História de usuário:** posso configurar o tabuleiro.
|
||||
|
||||
**Especificação de usuário:** posso limpar o tabuleiro.
|
||||
**História de usuário:** posso limpar o tabuleiro.
|
||||
|
||||
**Especificação de usuário:** quando eu pressionar iniciar, o jogo vai começar.
|
||||
**História de usuário:** quando eu pressionar iniciar, o jogo vai começar.
|
||||
|
||||
**Especificação de usuário:** cada vez que o tabuleiro muda, posso ver quantas gerações já passaram.
|
||||
**História de usuário:** cada vez que o tabuleiro muda, posso ver quantas gerações já passaram.
|
||||
|
||||
**Dica:** aqui está uma explicação do Jogo da Vida da Conway escrito pelo próprio John Conway: <https://www.youtube.com/watch?v=E8kUJL04ELA>
|
||||
|
||||
|
||||
@ -10,15 +10,15 @@ dashedName: chart-the-stock-market
|
||||
|
||||
Crie um aplicativo full stack em JavaScript que seja funcionalmente semelhante a este: <https://chart-the-stock-market.freecodecamp.rocks/>. Use um construtor de site de sua escolha para completar o projeto.
|
||||
|
||||
Aqui estão as especificações de usuário que você deve implementar para este projeto:
|
||||
Aqui estão as histórias de usuário que você deve implementar para este projeto:
|
||||
|
||||
**Especificação de usuário:** você pode ver um gráfico exibindo as linhas de tendência recentes para cada ação adicionada.
|
||||
**História de usuário:** você pode ver um gráfico exibindo as linhas de tendência recentes para cada ação adicionada.
|
||||
|
||||
**Especificação de usuário:** você pode adicionar novas ações pelos códigos de negociação.
|
||||
**História de usuário:** você pode adicionar novas ações pelos códigos de negociação.
|
||||
|
||||
**Especificação de usuário:** você pode remover ações.
|
||||
**História de usuário:** você pode remover ações.
|
||||
|
||||
**Especificação de usuário:** você pode ver alterações em tempo real quando qualquer outro usuário adicionar ou remover uma ação. Para isso, você precisará usar Web Sockets.
|
||||
**História de usuário:** você pode ver alterações em tempo real quando qualquer outro usuário adicionar ou remover uma ação. Para isso, você precisará usar Web Sockets.
|
||||
|
||||
Quando terminar, certifique-se de que uma demonstração funcional do seu projeto está hospedada em algum lugar público. Em seguida, envie o URL para ela no campo `Solution Link`. Como opção, envie também um link para o código-fonte do projeto no campo `GitHub Link`.
|
||||
|
||||
|
||||
@ -10,17 +10,17 @@ dashedName: manage-a-book-trading-club
|
||||
|
||||
**Objetivo:** criar uma aplicação no [Replit](https://replit.com/) que tenha função semelhante a esta: <https://manage-a-book-trading-club.freecodecamp.rocks/>.
|
||||
|
||||
Atenda às [especificações de usuário abaixo](https://en.wikipedia.org/wiki/User_story). Use quaisquer bibliotecas ou APIs de que você precisar. Dê a ele o seu próprio estilo pessoal.
|
||||
Atenda às [histórias de usuário](https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio) abaixo. Use quaisquer bibliotecas ou APIs de que você precisar. Dê a ele o seu próprio estilo pessoal.
|
||||
|
||||
**Especificação de usuário:** eu posso ver todos os livros publicados por todos os usuários.
|
||||
**História de usuário:** eu posso ver todos os livros publicados por todos os usuários.
|
||||
|
||||
**Especificação de usuário:** posso adicionar um novo livro.
|
||||
**História de usuário:** posso adicionar um novo livro.
|
||||
|
||||
**Especificação de usuário:** posso atualizar minhas configurações para armazenar meu nome completo, cidade e estado.
|
||||
**História de usuário:** posso atualizar minhas configurações para armazenar meu nome completo, cidade e estado.
|
||||
|
||||
**Especificação de usuário:** posso propor uma troca e esperar que o outro usuário aceite a troca.
|
||||
**História de usuário:** posso propor uma troca e esperar que o outro usuário aceite a troca.
|
||||
|
||||
Depois de terminar de implementar essas especificações de usuários, digite o URL para sua aplicação ao vivo e, como opção, seu repositório do GitHub. Então, clique no botão "Eu completei este desafio".
|
||||
Depois de terminar de implementar essas histórias de usuários, digite o URL para sua aplicação ao vivo e, como opção, seu repositório do GitHub. Então, clique no botão "Eu completei este desafio".
|
||||
|
||||
Você pode obter feedback sobre o seu projeto compartilhando-o no [fórum freeCodeCamp](https://forum.freecodecamp.org/c/project-feedback/409).
|
||||
|
||||
|
||||
@ -10,13 +10,13 @@ dashedName: map-data-across-the-globe
|
||||
|
||||
**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: <https://codepen.io/freeCodeCamp/full/mVEJag>.
|
||||
|
||||
Atenda às seguintes [especificações de usuário](https://en.wikipedia.org/wiki/User_story). Use quaisquer bibliotecas ou APIs de que você precisar. Dê a ele o seu próprio estilo pessoal.
|
||||
Atenda às seguintes [histórias de usuário](https://en.wikipedia.org/wiki/User_story). Use quaisquer bibliotecas ou APIs de que você precisar. Dê a ele o seu próprio estilo pessoal.
|
||||
|
||||
**Especificação de usuário:** posso ver onde todos os meteoritos pousaram no mapa do mundo.
|
||||
**História de usuário:** posso ver onde todos os meteoritos pousaram no mapa do mundo.
|
||||
|
||||
**Especificação de usuário:** eu posso dizer o tamanho relativo do meteorito, apenas olhando para a forma como ele é representado no mapa.
|
||||
**História de usuário:** eu posso dizer o tamanho relativo do meteorito, apenas olhando para a forma como ele é representado no mapa.
|
||||
|
||||
**Especificação de usuário:** posso passar o mouse sobre os dados do meteorito para obter dados adicionais.
|
||||
**História de usuário:** posso passar o mouse sobre os dados do meteorito para obter dados adicionais.
|
||||
|
||||
**Dica:** aqui está um conjunto de dados que você pode usar para criar essa aplicação: <https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/meteorite-strike-data.json>
|
||||
|
||||
|
||||
@ -10,27 +10,27 @@ dashedName: p2p-video-chat-application
|
||||
|
||||
**Objetivo:** criar uma aplicação no [Replit](https://replit.com/) que tenha função semelhante a esta: <https://p2p-video-chat-application.freecodecamp.rocks/>.
|
||||
|
||||
Atenda às [especificações de usuário abaixo](https://en.wikipedia.org/wiki/User_story). Use quaisquer bibliotecas ou APIs de que você precisar. Dê a ele o seu próprio estilo pessoal.
|
||||
Atenda às [histórias de usuário](https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio) abaixo. Use quaisquer bibliotecas ou APIs de que você precisar. Dê a ele o seu próprio estilo pessoal.
|
||||
|
||||
**Especificação de usuário:** ao chegar, o navegador me pedirá para acessar minha câmera e microfone.
|
||||
**História de usuário:** ao chegar, o navegador me pedirá para acessar minha câmera e microfone.
|
||||
|
||||
**Especificação de usuário:** depois que eu conceder permissão, sou solicitado a digitar um nome de sala.
|
||||
**História de usuário:** depois que eu conceder permissão, sou solicitado a digitar um nome de sala.
|
||||
|
||||
**Especificação de usuário:** quando eu digitar o nome da sala, ela será criada se não existir nenhuma sala com esse nome.
|
||||
**História de usuário:** quando eu digitar o nome da sala, ela será criada se não existir nenhuma sala com esse nome.
|
||||
|
||||
**Especificação de usuário:** um amigo meu pode posteriormente ir para o mesmo site, digitar a mesma sala em que eu entrei e entrar na mesma sala. Então, ele pode entrar em uma videoconferência comigo.
|
||||
**História de usuário:** um amigo meu pode posteriormente ir para o mesmo site, digitar a mesma sala em que eu entrei e entrar na mesma sala. Então, ele pode entrar em uma videoconferência comigo.
|
||||
|
||||
**Especificação de usuário:** se eu digitar um nome de sala e se já há duas pessoas nessa sala, recebo uma notificação de que a sala está cheia.
|
||||
**História de usuário:** se eu digitar um nome de sala e se já há duas pessoas nessa sala, recebo uma notificação de que a sala está cheia.
|
||||
|
||||
**Especificação de usuário:** qualquer um pode criar ou entrar em qualquer sala. Pode haver várias salas, mas todas devem ter nomes únicos.
|
||||
**História de usuário:** qualquer um pode criar ou entrar em qualquer sala. Pode haver várias salas, mas todas devem ter nomes únicos.
|
||||
|
||||
**Especificação de usuário:** posso optar por não permitir que o site acesse meu microfone e câmera. Se eu optar por não fazer isto, ou se ocorrer algum outro problema com o driver, vejo uma mensagem de erro dizendo que eles são necessários.
|
||||
**História de usuário:** posso optar por não permitir que o site acesse meu microfone e câmera. Se eu optar por não fazer isto, ou se ocorrer algum outro problema com o driver, vejo uma mensagem de erro dizendo que eles são necessários.
|
||||
|
||||
**Especificação de usuário:** quando eu escolher cancelar a etapa de entrada do nome da sala, se eu não digitar um nome ou digitar apenas espaços, a aplicação deve me pedir novamente para digitar um nome de sala válido.
|
||||
**História de usuário:** quando eu escolher cancelar a etapa de entrada do nome da sala, se eu não digitar um nome ou digitar apenas espaços, a aplicação deve me pedir novamente para digitar um nome de sala válido.
|
||||
|
||||
**Especificação de usuário:** se uma das duas pessoas na sala desconectar, elas poderão se reconectar à mesma sala e continuar conversando.
|
||||
**História de usuário:** se uma das duas pessoas na sala desconectar, elas poderão se reconectar à mesma sala e continuar conversando.
|
||||
|
||||
Depois de terminar de implementar essas especificações de usuários, digite o URL para sua aplicação ao vivo e, como opção, seu repositório do GitHub. Então, clique no botão "Eu completei este desafio".
|
||||
Depois de terminar de implementar essas histórias de usuários, digite o URL para sua aplicação ao vivo e, como opção, seu repositório do GitHub. Então, clique no botão "Eu completei este desafio".
|
||||
|
||||
Você pode obter feedback sobre o seu projeto compartilhando-o no [fórum do freeCodeCamp](https://forum.freecodecamp.org/c/project-feedback/409).
|
||||
|
||||
|
||||
@ -10,11 +10,11 @@ dashedName: show-national-contiguity-with-a-force-directed-graph
|
||||
|
||||
**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: <https://codepen.io/freeCodeCamp/full/xVopBo>.
|
||||
|
||||
Atenda às seguintes [especificações de usuário](https://en.wikipedia.org/wiki/User_story). Use quaisquer bibliotecas ou APIs de que você precisar. Dê a ele o seu próprio estilo pessoal.
|
||||
Atenda às seguintes [histórias de usuário](https://en.wikipedia.org/wiki/User_story). Use quaisquer bibliotecas ou APIs de que você precisar. Dê a ele o seu próprio estilo pessoal.
|
||||
|
||||
**Especificação de usuário:** eu posso ver um gráfico orientado por força que mostra quais países compartilham fronteiras.
|
||||
**História de usuário:** eu posso ver um gráfico orientado por força que mostra quais países compartilham fronteiras.
|
||||
|
||||
**Especificação de usuário:** posso ver a bandeira de cada país em seu nó.
|
||||
**História de usuário:** posso ver a bandeira de cada país em seu nó.
|
||||
|
||||
**Dica:** aqui está um conjunto de dados que você pode usar para criar essa aplicação: <https://raw.githubusercontent.com/DealPete/forceDirected/master/countries.json>
|
||||
|
||||
|
||||
@ -12,13 +12,13 @@ dashedName: show-the-local-weather
|
||||
|
||||
**Regra nº 1:** não olhe o código do projeto de exemplo. Descubra por conta própria.
|
||||
|
||||
**Regra nº 2:** atenda às [especificações de usuário abaixo](https://en.wikipedia.org/wiki/User_story). Use quaisquer bibliotecas ou APIs de que você precisar. Dê a ele o seu próprio estilo pessoal.
|
||||
**Regra nº 2:** atenda às [histórias de usuário](https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio) abaixo. Use quaisquer bibliotecas ou APIs de que você precisar. Dê a ele o seu próprio estilo pessoal.
|
||||
|
||||
**Especificação de usuário:** posso ver o clima na minha localização atual.
|
||||
**História de usuário:** posso ver o clima na minha localização atual.
|
||||
|
||||
**Especificação de usuário:** posso ver um ícone diferente ou uma imagem de fundo (por exemplo, montanha de neve, deserto quente) dependendo do tempo.
|
||||
**História de usuário:** posso ver um ícone diferente ou uma imagem de fundo (por exemplo, montanha de neve, deserto quente) dependendo do tempo.
|
||||
|
||||
**Especificação de usuário:** posso apertar um botão para alternar entre Fahrenheit e Celsius.
|
||||
**História de usuário:** posso apertar um botão para alternar entre Fahrenheit e Celsius.
|
||||
|
||||
**Observação:** muitos navegadores de internet agora requerem uma conexão HTTP segura (`https://`) para obter a localidade de um usuário através da geolocalização do HTML5. Por esta razão, recomendamos o uso da geolocalização do HTML5 para obter a localização do usuário e, em seguida, usar a API do clima do freeCodeCamp [https://weather-proxy. reecodecamp.rocks/](https://weather-proxy.freecodecamp.rocks/), que usa uma conexão HTTP segura para o clima. Além disso, certifique-se de se conectar ao [CodePen.io](https://codepen.io) via `https://`.
|
||||
|
||||
|
||||
@ -10,13 +10,13 @@ dashedName: use-the-twitch-json-api
|
||||
|
||||
**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: <https://codepen.io/freeCodeCamp/full/Myvqmo/>.
|
||||
|
||||
Atenda às [especificações de usuário abaixo](https://en.wikipedia.org/wiki/User_story). Use quaisquer bibliotecas ou APIs de que você precisar. Dê a ele o seu próprio estilo pessoal.
|
||||
Atenda às [histórias de usuário](https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio) abaixo. Use quaisquer bibliotecas ou APIs de que você precisar. Dê a ele o seu próprio estilo pessoal.
|
||||
|
||||
**Especificação de usuário:** posso ver se o freeCodeCamp está atualmente transmitindo no Twitch.tv.
|
||||
**História de usuário:** posso ver se o freeCodeCamp está atualmente transmitindo no Twitch.tv.
|
||||
|
||||
**Especificação de usuário:** posso clicar na saída de status e ser enviado diretamente para o canal do Twitch.tv do freeCodeCamp.
|
||||
**História de usuário:** posso clicar na saída de status e ser enviado diretamente para o canal do Twitch.tv do freeCodeCamp.
|
||||
|
||||
**Especificação de usuário:** se um usuário do Twitch estiver transmitindo atualmente, posso ver detalhes adicionais sobre o que ele está transmitindo.
|
||||
**História de usuário:** se um usuário do Twitch estiver transmitindo atualmente, posso ver detalhes adicionais sobre o que ele está transmitindo.
|
||||
|
||||
**Dica:** a documentação relevante sobre a API de JSON do Twitch.tv está aqui: <https://dev.twitch.tv/docs/api/reference/#get-streams>.
|
||||
|
||||
|
||||
@ -0,0 +1,47 @@
|
||||
---
|
||||
id: bd7158d8c242eddfaeb5bd13
|
||||
title: Criar uma página de portfólio pessoal
|
||||
challengeType: 3
|
||||
forumTopicId: 301143
|
||||
dashedName: build-a-personal-portfolio-webpage
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: <https://codepen.io/freeCodeCamp/full/zNBOYG>.
|
||||
|
||||
Atenda às [histórias de usuário](https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio) abaixo e obtenha aprovação em todos os testes. Dê ao projeto o seu próprio estilo pessoal.
|
||||
|
||||
Você pode usar HTML, JavaScript e CSS para completar este projeto. É recomendado utilizar CSS puro, pois é disso que trataram as lições até agora. É bom você adquirir alguma prática com CSS. Você pode usar Bootstrap ou SASS se quiser. Outras tecnologias (como, por exemplo, jQuery, React, Angular ou Vue) não são recomendadas para este projeto. Use-as por sua conta e risco. Outros projetos darão a você uma oportunidade de trabalhar com diferentes bibliotecas, como o React. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem o conjunto de tecnologias sugeridas para esse projeto. Boa programação!
|
||||
|
||||
**História de usuário nº 1:** o portfólio deve ter uma seção de boas-vindas com um id de `welcome-section`.
|
||||
|
||||
**História de usuário nº 2:** a seção de boas-vindas deve ter um elemento `h1` que contenha algum texto.
|
||||
|
||||
**História de usuário nº 3:** o portfólio deve ter uma seção de projetos com um id de `projects`.
|
||||
|
||||
**História de usuário nº 4:** a seção de projetos deve conter pelo menos um elemento com uma classe de `project-tile` para armazenar um projeto.
|
||||
|
||||
**História de usuário nº 5:** a seção de projetos deve conter pelo menos um link para um projeto.
|
||||
|
||||
**História de usuário nº 6:** o portfólio deve ter uma seção de projetos com um id de `navbar`.
|
||||
|
||||
**História de usuário nº 7:** a barra de navegação deve conter pelo menos um link clicável para navegar por diferentes seções na página.
|
||||
|
||||
**História de usuário nº 8:** o portfólio deve ter um link com id `profile-link`, que abre um perfil do GitHub ou do FCC em uma nova aba.
|
||||
|
||||
**História de usuário nº 9:** o portfólio deve ter pelo menos uma media query.
|
||||
|
||||
**História de usuário nº 10:** a altura da seção de boas-vindas deve ser igual à altura da viewport.
|
||||
|
||||
**História de usuário nº 11:** a barra de navegação deve estar sempre na parte superior da viewport.
|
||||
|
||||
Você pode construir seu projeto com <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este template CodePen</a> e clicando `Save` para criar seu próprio pen. Ou você pode usar esse link CDN para rodar os testes em qualquer ambiente que você goste:`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
Quando você terminar, envie o URL do seu projeto depois de ele haver passado em todos os testes.
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
@ -0,0 +1,55 @@
|
||||
---
|
||||
id: 587d78af367417b2b2512b04
|
||||
title: Criar uma página inicial para um produto
|
||||
challengeType: 3
|
||||
forumTopicId: 301144
|
||||
dashedName: build-a-product-landing-page
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: <https://codepen.io/freeCodeCamp/full/RKRbwL>.
|
||||
|
||||
Atenda às [histórias de usuário](https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio) abaixo e obtenha aprovação em todos os testes. Dê ao projeto o seu próprio estilo pessoal.
|
||||
|
||||
Você pode usar HTML, JavaScript e CSS para completar este projeto. É recomendado utilizar CSS puro, pois é disso que trataram as lições até agora. É bom você adquirir alguma prática com CSS. Você pode usar Bootstrap ou SASS se quiser. Outras tecnologias (como, por exemplo, jQuery, React, Angular ou Vue) não são recomendadas para este projeto. Use-as por sua conta e risco. Outros projetos darão a você uma oportunidade de trabalhar com diferentes bibliotecas, como o React. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem o conjunto de tecnologias sugeridas para esse projeto. Boa programação!
|
||||
|
||||
**História de usuário nº 1:** a página inicial do produto deve ter um elemento `header` com um `id="header"` correspondente.
|
||||
|
||||
**História de usuário nº 2:** deve haver uma imagem dentro do elemento `header` com um `id="header-img"` correspondente. Um logotipo da empresa seria uma boa imagem para colocar aqui.
|
||||
|
||||
**História de usuário nº 3:** dentro do elemento `#header`, deve haver um elemento `nav` com um `id="nav-bar"`.
|
||||
|
||||
**História de usuário nº 4:** deve haver pelo menos três elementos clicáveis dentro do elemento `nav` e cada um deles deve ter a classe `nav-link`.
|
||||
|
||||
**História de usuário nº 5:** ao clicar em um botão com a classe `.nav-link` no elemento `nav`, o usuário deve ser levado para a seção correspondente na página inicial.
|
||||
|
||||
**História de usuário nº 6:** é possível assistir a um vídeo do produto no elemento de `id="video"`.
|
||||
|
||||
**História de usuário nº 7:** a página inicial deve ter um formulário (`form`) com um `id="form"`.
|
||||
|
||||
**História de usuário nº 8:** dentro do formulário, deve haver um campo de entrada (`input`) com `id="email"`, onde deve ser possível digitar um endereço de e-mail.
|
||||
|
||||
**História de usuário nº 9:** o campo de entrada `#email` deve ter um placeholder (texto ilustrativo) para que o usuário saiba para que serve o campo.
|
||||
|
||||
**História de usuário nº 10:** o campo de entrada `#email` deve usar a validação do próprio HTML5 para confirmar que o texto inserido é um endereço de e-mail.
|
||||
|
||||
**História de usuário nº 11:** dentro do formulário, deve haver um campo de entrada (`input`) do tipo botão com `id="submit"`.
|
||||
|
||||
**História de usuário nº 12:** quando o elemento `#submit` for clicado, o e-mail deve ser enviado para uma página estática (use esta URL fictícia: [https://www.freecodecamp.com/email-enviar](https://www.freecodecamp.com/email-submit)).
|
||||
|
||||
**História de usuário nº 13:** a barra de navegação deve estar sempre na parte superior da viewport.
|
||||
|
||||
**História de usuário nº 14:** a página inicial deve ter pelo menos uma media query.
|
||||
|
||||
**História de usuário nº 15:** a página inicial deve utilizar pelo menos uma vez o CSS Flexbox.
|
||||
|
||||
Você pode fazer o seu projeto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este modelo da CodePen</a> e, logo após, clicar em `Save` para criar seu próprio projeto. Como alternativa, use este link da nossa CDN para executar os testes em qualquer ambiente que você preferir: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
Quando você terminar, envie o URL do seu projeto depois de ele haver passado em todos os testes.
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
@ -0,0 +1,57 @@
|
||||
---
|
||||
id: 587d78af367417b2b2512b03
|
||||
title: Criar um formulário de pesquisa
|
||||
challengeType: 3
|
||||
forumTopicId: 301145
|
||||
dashedName: build-a-survey-form
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: <https://codepen.io/freeCodeCamp/full/VPaoNP>.
|
||||
|
||||
Atenda às [histórias de usuário](https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio) abaixo e obtenha aprovação em todos os testes. Dê ao projeto o seu próprio estilo pessoal.
|
||||
|
||||
Você pode usar HTML, JavaScript e CSS para completar este projeto. É recomendado utilizar CSS puro, pois é disso que trataram as lições até agora. É bom você adquirir alguma prática com CSS. Você pode usar Bootstrap ou SASS se quiser. Outras tecnologias (como, por exemplo, jQuery, React, Angular ou Vue) não são recomendadas para este projeto. Use-as por sua conta e risco. Outros projetos darão a você uma oportunidade de trabalhar com diferentes bibliotecas, como o React. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem o conjunto de tecnologias sugeridas para esse projeto. Boa programação!
|
||||
|
||||
**História de usuário nº 1:** deve haver um título com `id="title"` que possua o tamanho de uma tag h1.
|
||||
|
||||
**História de usuário nº 2:** deve haver uma descrição curta com `id="description"` que possua o tamanho de uma tag p.
|
||||
|
||||
**História de usuário nº 3:** deve haver um formulário (`form`) com `id="survey-form"`.
|
||||
|
||||
**História de usuário nº 4:** dentro do elemento de formulário, é necessário inserir um nome em um campo de entrada (input) com `id="name"`.
|
||||
|
||||
**História de usuário nº 5:** dentro do elemento de formulário, é necessário inserir um e-mail em um campo de entrada (input) com `id="email"`.
|
||||
|
||||
**História de usuário nº 6:** se for informado um e-mail que não esteja correto, um erro de validação HTML5 deve ser mostrado.
|
||||
|
||||
**História de usuário nº 7:** dentro do elemento de formulário, é possível inserir um número em um campo de entrada (input) com `id="number"`.
|
||||
|
||||
**História de usuário nº 8:** se for informado qualquer dígito não-numérico, um erro de validação HTML5 deve ser mostrado.
|
||||
|
||||
**História de usuário nº 9:** se forem digitados números fora do intervalo permitido no campo de entrada de número, definido pelos atributos `min` e `max`, um erro de validação de HTML5 deve ser mostrado.
|
||||
|
||||
**História de usuário nº 10:** para os campos de entrada (inputs) nome, e-mail e número dentro do formulário, deve haver rótulos (labels) correspondentes que descrevam o propósito de cada campo com os seguintes ids: `id="name-label"`, `id="email-label"`, e `id="number-label"`.
|
||||
|
||||
**História de usuário nº 11:** para os campos de entrada nome, e-mail e número, deve haver um texto placeholder (texto ilustrativo) que forneça uma descrição ou instruções para cada campo.
|
||||
|
||||
**História de usuário nº 12:** dentro do elemento de formulário, deve ser possível selecionar uma opção de uma lista suspensa que tenha um `id="dropdown"`.
|
||||
|
||||
**História de usuário nº 13:** dentro do elemento de formulário, deve ser possível selecionar um campo de um ou mais grupos de inputs do tipo radio. Os grupos devem ser identificados pelo valor dado ao atributo `name`.
|
||||
|
||||
**História de usuário nº 14:** dentro do elemento de formulário, deve ser possível selecionar vários campos de uma série de caixas de seleção (checkbox). Cada um desses campos deve ter um atributo `value`.
|
||||
|
||||
**História de usuário nº 15:** dentro do elemento de formulário, deve haver um campo `textarea` no final para comentários adicionais.
|
||||
|
||||
**História de usuário nº 16:** dentro do elemento de formulário, deve haver um botão com `id="submit"` para enviar todas as informações.
|
||||
|
||||
Você pode fazer o seu projeto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este modelo da CodePen</a> e, logo após, clicar em `Save` para criar seu próprio projeto. Como alternativa, use este link da nossa CDN para executar os testes em qualquer ambiente que você preferir: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
Quando você terminar, envie o URL do seu projeto depois de ele haver passado em todos os testes.
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
@ -0,0 +1,55 @@
|
||||
---
|
||||
id: 587d78b0367417b2b2512b05
|
||||
title: Criar uma página de documentação técnica
|
||||
challengeType: 3
|
||||
forumTopicId: 301146
|
||||
dashedName: build-a-technical-documentation-page
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: <https://codepen.io/freeCodeCamp/full/NdrKKL>.
|
||||
|
||||
Atenda às [histórias de usuário](https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio) abaixo e obtenha aprovação em todos os testes. Dê ao projeto o seu próprio estilo pessoal.
|
||||
|
||||
Você pode usar HTML, JavaScript e CSS para completar este projeto. É recomendado utilizar CSS puro, pois é disso que trataram as lições até agora. É bom você adquirir alguma prática com CSS. Você pode usar Bootstrap ou SASS se quiser. Outras tecnologias (como, por exemplo, jQuery, React, Angular ou Vue) não são recomendadas para este projeto. Use-as por sua conta e risco. Outros projetos darão a você uma oportunidade de trabalhar com diferentes bibliotecas, como o React. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem o conjunto de tecnologias sugeridas para esse projeto. Boa programação!
|
||||
|
||||
**História de usuário nº 1:** deve haver um elemento `main` com um `id="main-doc"`, que contém o conteúdo principal da página (documentação técnica).
|
||||
|
||||
**História de usuário nº 2:** dentro do elemento `#main-doc`, deve haver várias seções (`section`), cada uma com a classe `main-section`. Deve haver um mínimo de 5.
|
||||
|
||||
**História de usuário nº 3:** o primeiro elemento de cada `.main-section` deve ser um elemento de cabeçalho (`header`) que contém o texto que descreve o tópico desta seção.
|
||||
|
||||
**História de usuário nº 4:** cada `section` com a classe `main-section` também deve ter um id que corresponda ao texto de cada `header` contido dentro dela. Os espaços existentes devem ser substituídos por sublinhados (por exemplo, a `section` que contém o cabeçalho "JavaScript e Java" deve ter um `id="JavaScript_and_Java"`).
|
||||
|
||||
**História de usuário nº 5:** os elementos `.main-section` devem conter, juntos, pelo menos 10 elementos `p` no total (não 10 para cada elemento).
|
||||
|
||||
**História de usuário nº 6:** os elementos `.main-section` devem conter, juntos, pelo menos 5 elementos `code` no total (não 5 para cada elemento).
|
||||
|
||||
**História de usuário nº 7:** os elementos `.main-section` devem conter, juntos, pelo menos 5 elementos `li` no total (não 5 para cada elemento).
|
||||
|
||||
**História de usuário nº 8:** deve haver uma barra de navegação (`nav`) com um `id="navbar"`.
|
||||
|
||||
**História de usuário nº 9:** o elemento de barra de navegação (nav) deve conter um elemento `header` que contém o texto que descreve o tópico da documentação técnica.
|
||||
|
||||
**História de usuário nº 10:** além disso, a barra de navegação (nav) deve conter elementos de âncora (`a`) com a classe `nav-link`. Deve haver um para cada elemento com a classe `main-section`.
|
||||
|
||||
**História de usuário nº 11:** o elemento `header` na barra de navegação deve aparecer antes de qualquer elemento de âncora (`a`).
|
||||
|
||||
**História de usuário nº 12:** cada elemento com a classe `nav-link` deve conter um texto que corresponda ao texto do `header` dentro de cada `section` (exemplo: se você tem uma seção/cabeçalho "Olá mundo", sua barra de navegação deve ter um elemento que contém o texto "Olá mundo").
|
||||
|
||||
**História de usuário nº 13:** quando um elemento da barra de navegação for clicado, a página deve navegar para a seção correspondente ao elemento `main-doc` (exemplo: se eu clicar em um elemento `nav-link` que contém o texto "Olá mundo", a página deve navegar para o elemento `section` que tem esse id e contém o `header` correspondente.
|
||||
|
||||
**História de usuário nº 14:** em dispositivos com tamanho regular (laptops, desktops), o elemento com `id="navbar"` deve ser mostrado no lado esquerdo da tela e deve sempre estar visível para o usuário.
|
||||
|
||||
**História de usuário nº 15:** a página deve ter pelo menos uma media query.
|
||||
|
||||
Você pode fazer o seu projeto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este modelo da CodePen</a> e, logo após, clicar em `Save` para criar seu próprio projeto. Como alternativa, use este link da nossa CDN para executar os testes em qualquer ambiente que você preferir: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
Quando você terminar, envie o URL do seu projeto depois de ele haver passado em todos os testes.
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
@ -0,0 +1,43 @@
|
||||
---
|
||||
id: bd7158d8c442eddfaeb5bd18
|
||||
title: Criar uma página de homenagem
|
||||
challengeType: 3
|
||||
forumTopicId: 301147
|
||||
dashedName: build-a-tribute-page
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: <https://codepen.io/freeCodeCamp/full/zNqgVx>.
|
||||
|
||||
Atenda às [histórias de usuário](https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio) abaixo e obtenha aprovação em todos os testes. Dê ao projeto o seu próprio estilo pessoal.
|
||||
|
||||
Você pode usar HTML, JavaScript e CSS para completar este projeto. É recomendado utilizar CSS puro, pois é disso que trataram as lições até agora. É bom você adquirir alguma prática com CSS. Você pode usar Bootstrap ou SASS se quiser. Outras tecnologias (como, por exemplo, jQuery, React, Angular ou Vue) não são recomendadas para este projeto. Use-as por sua conta e risco. Outros projetos darão a você uma oportunidade de trabalhar com diferentes bibliotecas, como o React. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem o conjunto de tecnologias sugeridas para esse projeto. Boa programação!
|
||||
|
||||
**História de usuário nº 1:** a página de homenagem deve ter um elemento com um `id="main"` que envolva todos os demais elementos.
|
||||
|
||||
**História de usuário nº 2:** deve haver um elemento com `id="title"`, que contenha um texto que descreva a pessoa a quem a página presta homenagem (por exemplo, "Dr. Norman Borlaug").
|
||||
|
||||
**História de usuário nº 3:** deve haver um elemento `figure` ou `div` com um `id="img-div"` correspondente.
|
||||
|
||||
**História de usuário nº 4:** dentro do elemento de id `img-div`, deve haver um elemento `img` com um `id="image"`.
|
||||
|
||||
**História de usuário nº 5:** dentro do elemento de id `img-div`, deve haver um elemento com um `id="img-caption"` que contenha um conteúdo textual descrevendo a imagem mostrada em `img-div`.
|
||||
|
||||
**História de usuário nº 6:** deve haver um elemento com `id="tribute-info"`, que contenha conteúdo textual descrevendo a pessoa a quem a página presta homenagem.
|
||||
|
||||
**História de usuário nº 7:** deve haver um elemento `a` com um `id="tribute-link"`, que leve a um site externo que contenha informações adicionais sobre a pessoa a quem a página presta homenagem. DICA: você deve dar ao seu elemento um atributo `target` e definir o valor para `_blank` para que seu link possa ser aberto em uma nova aba (exemplo: `target="_blank"`).
|
||||
|
||||
**História de usuário nº 8:** o elemento `img` deve redimensionar responsivamente com relação à largura de seu elemento pai, sem exceder o seu tamanho original.
|
||||
|
||||
**História de usuário nº 9:** o elemento `img` deve ser centralizado dentro de seu elemento pai.
|
||||
|
||||
Você pode fazer o seu projeto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este modelo da CodePen</a> e, logo após, clicar em `Save` para criar seu próprio projeto. Como alternativa, use este link da nossa CDN para executar os testes em qualquer ambiente que você preferir: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`.
|
||||
|
||||
Quando você terminar, envie o URL do seu projeto depois de ele haver passado em todos os testes.
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
Reference in New Issue
Block a user