Caso não lembre como funciona o processo de entrega, clique aqui

Para o exercício de hoje, vamos utilizar um template! Dentro desse template vocês vão encontrar uma estrutura para trabalharmos com diferentes tipos de input! :)

Para executar este exercício, você pode criar uma nova aplicação React, utilizar o CodeSandbox ou usar este template do repositório.

• Caso use este template, lembre-se de dar um npm install assim que baixar!
• Caso estiver usando o codeSandBox, pode usar esse template aqui: https://codesandbox.io/s/exercicios-inputs-controlados-ns0df5?file=/src

Caso queira criar uma nova aplicação React, basta copiar os conteúdos deste repositório e colar dentro da pasta do seu projeto criado.

Primeiro, vamos analisar todo o código que vocês estão recebendo.

Você não precisa responder às questões abaixo dentro de seu projeto, mas é importante que leia o projeto e reflita sobre os questionamentos antes de prosseguir.

• Observe o App.js, o que você consegue visualizar que já conhece?

• Entende o <GlobalStyles/>?

• Analize os componentes dentro do App.js, quantos e quais componentes estão sendo chamados aqui?

• Agora analize o JSX de cada um desses componentes.

• Você vai perceber que o componente MainPage é o componente principal do projeto. É lá onde está armazenado os componentes NameForm e ConfirmationForm.

• Foi criada uma lógica de renderização na linha 30 do componente MainPage que vai ser usada por você nos próximos exercícios. Você não precisa entender 100% como ela funciona por enquanto nem fazer nada para que ela funcione.

• Agora analize o componente NameForm. Ele é uma versão componentizada do exercício da aula ao vivo. Perceba que, agora, ele precisa receber props para funcionar corretamente.

• O componente ConfirmationForm está incompleto. Seu trabalho será criar esse componente e administrar o controle dos inputs que serão pedidos a seguir.

Agora vamos incrementar o formulário que trabalhamos em aula, que agora é o componente NameForm, com uma prática muito comum no desenvolvimento Front-end: verificações.

O seu trabalho agora é garantir que o usuário está inserindo corretamente as informações que você precisa. Para isso, siga os seguintes passos e requisitos:

• A pessoa estudante só pode se inscrever na Labenu se for maior de idade
• O input de nome precisa ter no mínimo 10 caracteres e no máximo 30.
• Verifique se o e-mail está no formato correto: [email protected]
• Caso os dois inputs de email estejam com conteúdo iguais, o usuário pode seguir pra próxima etapa. (implemente o input controlado para a confirmação de email)
• Todos os campos são obrigatórios.

Atenção: A lógica de avançar para a próxima etapa do formulário deve funcionar apenas SE todos os requisitos forem atendidos. Caso contrário, uma mensagem de alert() deve aparecer para o usuário indicando que ele não respondeu o formulário corretamente.Caso todas as verificações sejam atendidas pode mudar o valor do estado formFlow e mudar de página.

Agora que os requisitos da etapa anterior foram atendidos, você precisa criar os inputs do próximo formulário do zero. Além disso, você também precisa controlar todos esses inputs e verificar se os dados atendem os requisitos para finalizar a inscrição da pessoa estudante.

Para este formulário você vai precisar:

• Criar um input onde seja possível inserir a data de nascimento da pessoa.
• Criar um input onde seja possível inserir o número de telefone da pessoa.
• Criar um input do tipo dropdown onde a pessoa possa escolher um gênero entre as seguintes opções: Homem cisgênero, Mulher cisgênero, Homem trans, Mulher trans, Pessoa não binária, Prefiro não dizer. (Pode dar uma olhada aqui no conteúdo selecionado: (https://reactjs.org/docs/forms.html#the-select-tag:~:text=In%20HTML%2C%20%3Cselect,one%20place.%20For%20example%3A)
• Criar um input do tipo dropdown onde a pessoa possa escolher como se autodeclara: Negro, branco, pardo, amarelo, indígena ou prefiro não dizer.
• Criar 2 inputs do tipo radio onde a pessoa possa escolher apenas uma opção entre as duas: Curso integral web fullstack ou Curso noturno web fullstack (pode dar uma olhada aqui: https://www.w3schools.com/tags/att_input_type_radio.asp)
• Criar 2 inputs do tipo checkbox onde a pessoa confirma que: Tem ensino médio completo e Tem disponibilidade para participar das atividades. (Pode dar uma olhada aqui: https://www.w3schools.com/tags/att_input_type_checkbox.asp)

Quando tudo estiver finalizado, crie uma função de onClick no botão Enviar dados do componente ConfirmationForm que limpa os inputs e confirma para o usuário através de um alert() que a inscrição foi finalizada. Isso só pode acontecer se todos os campos forem preenchidos.

Atenção: Só deve ser possível selecionar uma única opção nos inputs de drowdown para gênero e autodeclaração de cor.