Challenge-20 JS-Ninja

challenge-20.js

(function(win, doc){
    /*
    1. Envolva todo o conteúdo desse desafio em uma IIFE.
    2. Adicione a diretiva 'use strict';
    3. Passe por parâmetro para a IIFE os objetos window e document.
    4. Dessa vez não é necessário criar um HTML. Ele já existe, e vamos utilizar
    a marcação criada nele para fazer nosso desafio ;)

    O HTML NÃO PODE ser alterado!
    */

    /*
    Ao carregar a página, pergunte ao usuário "Qual o seu nome?". Atribua o
    resultado à uma variável chamada `username`. Se o usuário não digitar um
    nome, `username` deve receber "Desconhecido".
    Com a resposta, mostre um alert com a mensagem "Bem vindo [USERNAME]!"
    */
    
    let username = prompt('Qual o seu nome?');

    if(!username)
      username = 'Desconhecido';

    alert('Bem vindo ' +  username);

    /*
    Agora, pergunte ao usuário "Qual o seu e-mail?", atribuindo o resultado à
    uma variável chamada `email`.
    */
    
    let email = prompt('Qual o seu e-mail?');

    /*
    - Selecione o input de "Nome", atribuindo-o à uma variável chamada
    `$inputUsername`.
    */
    
    let $inputUsername = doc.querySelector('[type=text]');

    /*
    - Selecione o input de "Email", atribuindo-o à uma variável chamada
    `$inputEmail`.
    */
    
    let $inputEmail = doc.querySelector('[type=email]');

    /*
    - Selecione o campo de "Mensagem", atribuindo-o à uma variável chamada
    `$message`.
    */
    
    let $message = doc.querySelector('textarea');
    

    /*
    - Selecione o botão de envio do formulário, atribuindo-o à uma variável
    chamada `$button`.
    */
    
    let $button = doc.querySelector('[type=submit]');

    /*
    Preencha os campos de "Nome" e "Email" que estão no documento com os valores
    entrados pelo usuário.
    */
    
    $inputUsername.value = username;
    $inputEmail.value = email;

    /*
    Adicione um listener de evento de click ao botão que faça o seguinte:
    1. Verificar se todos os campos estão preenchidos:
    - Mostrar um alert para cada campo não preenchido, como abaixo:
    - Se o campo de "Nome" não estiver preenchido, mostrar:
        - "Preencha o nome do usuário!"
    - Se o campo de "Email" não estiver preenchido, mostrar:
        - "Preencha o e-mail!"
    - Se o campo de "Mensagem" não estiver preenchido, mostrar:
        - "Preencha a mensagem!"
    - Se o campo de "Email" for inválido, mostrar:
        - "Entre com um e-mail válido!"

    2. Para verificar se o e-mail é válido use a função `isValidEmail`, passando
    o e-mail que foi entrado no campo de "Email" por parâmetro. (A função
    `isValidEmail` será criada logo abaixo).

    3. Se tudo estiver OK, pergunte ao usuário:
        - "Tem certeza que deseja enviar o formulário?"
    Se for confirmado, mostre um alerta com a mensagem:
        - "Enviado com sucesso!"
    Caso contrário, mostre um alerta com a mensagem:
        - "Não enviado."
    */
    
    $button.addEventListener('click', function(event){
      event.preventDefault();
      let message = '';
      let isError = false;

      if($inputUsername.value === 'Desconhecido') {
        isError = true;
        message += 'Preencha o nome do usuário\n';
      }

      if(!$inputEmail.value) {
        isError = true;
        message += 'Preencha o e-mail\n';
      }

      if(!$message.value) {
        isError = true;
        message += 'Preencha a mensagem!\n';
      }

      if(!isValidEmail($inputEmail.value)) {
        isError = true;
        message += 'Entre com um e-mail válido!';
      }

      if(isError)
        alert(message);

      if(!isError) {
        let finish = confirm('Tem certeza que deseja enviar o formulário?');
        let message;

        if(finish)
          message = 'Enviado com sucesso!';
        else
          message = 'Não enviado.';
        
        alert(message);
      }
      console.log(isError);
    }, false);

    /*
    Crie uma função chamada `isValidEmail`, que será usada na validação do
    envio do formulário.
    Essa função deve receber o e-mail por parâmetro e verificar se é um e-mail
    válido.
    As regras para validação são:
        - O nome do usuário (antes do arroba), pode ser qualquer caractere
        alfanumérico, incluindo o underscore, sinal de "+" e o ponto;
        - Após o arroba, o domínio pode conter somente caracteres alfanuméricos
        e o underscore;
        - Para a extensão, o domínio deve vir seguido de um ponto, e no mínimo
        2 caracteres alfanuméricos;
        - O final do domínio é opcional, mas se existir, deve começar com um
        ponto, seguido de no máximo 2 caracteres alfanuméricos.

    Alguns e-mails válidos que podem ser usados para testar:
        - "[email protected]"
        - "[email protected]"
        - "[email protected]"
        - "[email protected]"

    Alguns e-mails inválidos:
        - "[email protected]"
        - "[email protected]"
        - "[email protected]"
    */

    function isValidEmail(email) {
      let emailValidator = /^[\w.+_]+@[\w_]+(?:.\w+)(?:.\w{2})?$/;

      return emailValidator.test(email);
    }

}(window, document));