39 lines
4.6 KiB
Markdown
39 lines
4.6 KiB
Markdown
|
---
|
||
|
|
id: 587d78af367417b2b2512b03
|
||
|
|
title: Build a Survey Form
|
||
|
|
isRequired: true
|
||
|
|
challengeType: 3
|
||
|
|
videoUrl: ''
|
||
|
|
localeTitle: Criar um formulário de pesquisa
|
||
|
|
---
|
||
|
|
|
||
|
|
## Description
|
||
|
|
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/VPaoNP" target="_blank">https://codepen.io/freeCodeCamp/full/VPaoNP</a> . Cumpra as <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">histórias de usuário</a> abaixo e faça todos os testes para passar. Dê seu estilo pessoal. Você pode usar HTML, JavaScript e CSS para concluir este projeto. CSS simples é recomendado porque é isso que as lições cobriram até agora e você deve praticar com o CSS simples. Você pode usar o Bootstrap ou o SASS, se desejar. Tecnologias adicionais (por exemplo, jQuery, React, Angular ou Vue) não são recomendadas para este projeto, e usá-las é por sua conta e risco. Outros projetos lhe darão a chance de trabalhar com diferentes pilhas de tecnologia, como o React. Aceitaremos e tentaremos corrigir todos os relatórios de problemas que usam a pilha de tecnologia sugerida para este projeto. Codificação feliz! <strong>História do usuário 1:</strong> posso ver um título com <code>id="title"</code> em tamanho de texto H1. <strong>User Story # 2:</strong> Eu posso ver uma breve explicação com <code>id="description"</code> em P tamanho do texto. <strong>User Story # 3:</strong> posso ver um <code>form</code> com <code>id="survey-form"</code> . <strong>User Story # 4:</strong> Dentro do elemento form, eu tenho que inserir meu nome em um campo com <code>id="name"</code> . <strong>User Story # 5:</strong> Dentro do elemento form, eu tenho que inserir um email em um campo com <code>id="email"</code> . <strong>História do usuário nº 6:</strong> se eu inserir um e-mail que não esteja formatado corretamente, verei um erro de validação do HTML5. <strong>User Story # 7:</strong> Dentro do formulário, posso inserir um número em um campo com <code>id="number"</code> . <strong>História do usuário nº 8:</strong> se eu inserir números diferentes na entrada do número, verei um erro de validação do HTML5. <strong>User Story # 9:</strong> Se eu inserir números fora do intervalo da entrada do número, que são definidos pelos atributos <code>min</code> e <code>max</code> , verei um erro de validação HTML5. <strong>User Story # 10:</strong> Para os campos de entrada de nome, email e número dentro do formulário, posso ver rótulos correspondentes que descrevem o objetivo de cada campo com os seguintes IDs: <code>id="name-label"</code> , <code>id="email-label"</code> e <code>id="number-label"</code> . <strong>História do usuário nº 11:</strong> para os campos de entrada de nome, e-mail e número, posso ver o texto do marcador de posição que fornece uma descrição ou instruções para cada campo. <strong>User Story # 12:</strong> Dentro do elemento form, posso selecionar uma opção em um menu suspenso que tenha um <code>id="dropdown"</code> . <strong>User Story # 13:</strong> Dentro do elemento form, posso selecionar um campo de um ou mais grupos de botões de opção. Cada grupo deve ser agrupado usando o atributo <code>name</code> . <strong>User Story # 14:</strong> Dentro do elemento form, posso selecionar vários campos de uma série de checkboxes, cada um dos quais deve ter um atributo <code>value</code> . <strong>User Story # 15:</strong> Dentro do elemento form, é apresentada uma <code>textarea</code> no final para comentários adicionais. <strong>User Story # 16:</strong> Dentro do elemento form, eu recebi um botão com <code>id="submit"</code> para enviar todas as minhas entradas. Você pode criar seu projeto, bifurcando <a href="http://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">essa caneta CodePen</a> . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Quando terminar, envie a URL para o seu traba
|
||
|
|
|
||
|
|
## Instructions
|
||
|
|
<section id="instructions">
|
||
|
|
</section>
|
||
|
|
|
||
|
|
## Tests
|
||
|
|
<section id='tests'>
|
||
|
|
|
||
|
|
```yml
|
||
|
|
tests: []
|
||
|
|
|
||
|
|
```
|
||
|
|
|
||
|
|
</section>
|
||
|
|
|
||
|
|
## Challenge Seed
|
||
|
|
<section id='challengeSeed'>
|
||
|
|
|
||
|
|
</section>
|
||
|
|
|
||
|
|
## Solution
|
||
|
|
<section id='solution'>
|
||
|
|
|
||
|
|
```js
|
||
|
|
// solution required
|
||
|
|
```
|
||
|
|
</section>
|