Curso Continue Desenvolvendo
HTML Acessível, Lógica de Programação e JavaScript

Como a programação só vinga se praticar, resolva o seguinte:

1. Crie uma página com um formulário para que o usuário possa entrar em contato que possua entradas de texto com seus respectivos labels para:
A. Nome;
B. Sobrenome;
C. E-mail;
D. Telefone;
E. Assunto;
F. Mensagem.

2. Insira um botão para enviar a mensagem;

3. Crie uma área de mensagem com a tag "section" para receber o conteúdo dinâmico na página;

4. Crie um arquivo JavaScript chamado "script.js" para inserir o código e o inclua na página HTML via tag script;

5. Crie a função "validarDados" dentro do arquivo "script.js" e siga a seguinte lógica:
A. Pegue a área de mensagem pelo id e todos os campos do formulário via seletor;
B. Crie um array de erros vazio;
C. Crie um contador de erros começando com 0;
D. Faça um loop pelos campos;
E. Se algum campo estiver vazio:
E.1. Coloque o campo dentro do array de erros;
E.2. Incremente o contador de erros.
F. Fora do loop, se o contador de erros for maior que 0, monte uma mensagem de erro com:
F.1. O título sendo um h2 tendo o atributo tabindex para receber foco via JavaScript e com o texto "Existem X erros no formulário" (X é igual ao "contador de erros");
F.2. Um parágrafo com o texto: "Corrija os campos a seguir:";
F.3. Crie uma lista e faça um loop pelo array de erros e monte cada item de lista dentro do loop, contendo um link com o rotulo: "O campo X não deve ficar vazio" e o link deve apontar para o respectivo campo (X significa o rótulo do campo);
F.4. Finalize a lista fora do loop e depois insira o HTML gerado dentro da área de mensagens.
G. Mas se o contador de erros não for maior que 0, gere o seguinte HTML:
G.1. O título sendo um h2 tendo o atributo tabindex para receber foco via JavaScript  e com o texto "Confirmação de envio de dados";
G.2. Um parágrafo com o texto: "Verifique se os dados a seguir foram preenchidos corretamente:";
G.3. Crie uma lista e faça um loop pelo array de campos e monte cada item de lista dentro do loop, contendo um link com o rotulo: "[label do campo]: [valor do campo]" e o link deve apontar para o respectivo campo;
G.4. Finalize a lista fora do loop;
G.5. Insira também no HTML gerado um botão com o atributo "onclick" que chama uma função chamada "enviarMensagem" e o rótulo sendo "Confirmar e enviar os dados preenchidos";
G.6. Depois insira o HTML gerado dentro da área de mensagens.
H. Fora do if-else, dê foco no h2 que deve estar dentro da área de mensagens;

6. Crie a função "enviarMensagem":
A. Dê um alerta dizendo: "Agradecemos pela mensagem!";
B. pegue o formulário e chame sua função "submit()".

7. Depois de criar essas funções, chame a função "validarDados" adicionando um listener:
A. Fora das funções, pegue o formulário via seletor e adicione um ouvinte de evento para o evento "submit" atrelado à uma função anônima;
B. Dentro da função anônima, cancele o comportamento padrão do evento "submit" (que seria enviar o formulário) e chame a função "validarDados". Isso deve ser feito da seguinte maneira:

formulario.addEventListener("submit", function (event) {
  event.preventDefault();
  validarDados();
});

E não se esqueça: independentemente de qualquer coisa, continue desenvolvendo!