Curso HTML Módulo JavaScript – Continue Desenvolvendo

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:
- Nome;
- Sobrenome;
- E-mail;
- Telefone;
- Assunto;
- Mensagem.
Insira um botão para enviar a mensagem;
Crie uma área de mensagem com a tag “section” para receber o conteúdo dinâmico na página;
Crie um arquivo JavaScript chamado “script.js” para inserir o código e o inclua na página HTML via tag script;
Crie a função “validarDados” dentro do arquivo “script.js” e siga a seguinte lógica:
- Pegue a área de mensagem pelo id e todos os campos do formulário via seletor;
- Crie um array de erros vazio;
- Crie um contador de erros começando com 0;
- Faça um loop pelos campos;
- Se algum campo estiver vazio:
  - Coloque o campo dentro do array de erros;
  - Incremente o contador de erros.
- Fora do loop, se o contador de erros for maior que 0, monte uma mensagem de erro com:
  - 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”);
  - Um parágrafo com o texto: “Corrija os campos a seguir:”;
  - 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);
  - Finalize a lista fora do loop e depois insira o HTML gerado dentro da área de mensagens.
- Mas se o contador de erros não for maior que 0, gere o seguinte HTML:
  - 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”;
  - Um parágrafo com o texto: “Verifique se os dados a seguir foram preenchidos corretamente:”;
  - 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;
  - Finalize a lista fora do loop;
  - 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”;
  - Depois insira o HTML gerado dentro da área de mensagens.
- Fora do if-else, dê foco no h2 que deve estar dentro da área de mensagens;
Crie a função “enviarMensagem”:
- Dê um alerta dizendo: “Agradecemos pela mensagem!”;
- Pegue o formulário e chame sua função “submit()”.
Depois de criar essas funções, chame a função “validarDados” adicionando um listener:
- 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;
- 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();
});
```