freeCodeCamp

4.6 KiB

Raw Blame History

id	title	isRequired	challengeType	videoUrl	localeTitle
587d78af367417b2b2512b03	Build a Survey Form	true	3		Criar um formulário de pesquisa

Description

Objetivo: criar um aplicativo CodePen.io que seja funcionalmente semelhante a este: https://codepen.io/freeCodeCamp/full/VPaoNP . Cumpra as histórias de usuário 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! História do usuário 1: posso ver um título com id="title" em tamanho de texto H1. User Story # 2: Eu posso ver uma breve explicação com id="description" em P tamanho do texto. User Story # 3: posso ver um form com id="survey-form" . User Story # 4: Dentro do elemento form, eu tenho que inserir meu nome em um campo com id="name" . User Story # 5: Dentro do elemento form, eu tenho que inserir um email em um campo com id="email" . História do usuário nº 6: se eu inserir um e-mail que não esteja formatado corretamente, verei um erro de validação do HTML5. User Story # 7: Dentro do formulário, posso inserir um número em um campo com id="number" . História do usuário nº 8: se eu inserir números diferentes na entrada do número, verei um erro de validação do HTML5. User Story # 9: Se eu inserir números fora do intervalo da entrada do número, que são definidos pelos atributos min e max , verei um erro de validação HTML5. User Story # 10: 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: id="name-label" , id="email-label" e id="number-label" . História do usuário nº 11: 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. User Story # 12: Dentro do elemento form, posso selecionar uma opção em um menu suspenso que tenha um id="dropdown" . User Story # 13: 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 name . User Story # 14: Dentro do elemento form, posso selecionar vários campos de uma série de checkboxes, cada um dos quais deve ter um atributo value . User Story # 15: Dentro do elemento form, é apresentada uma textarea no final para comentários adicionais. User Story # 16: Dentro do elemento form, eu recebi um botão com id="submit" para enviar todas as minhas entradas. Você pode criar seu projeto, bifurcando essa caneta CodePen . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método Read-Search-Ask se você ficar preso.

Instructions

Tests

tests: []

Challenge Seed

Solution

// solution required

4.6 KiB Raw Blame History