Guest User

Untitled

a guest
Mar 14th, 2018
297
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.13 KB | None | 0 0
  1. (function(win, doc){
  2. /*
  3. 1. Envolva todo o conteúdo desse desafio em uma IIFE.
  4. 2. Adicione a diretiva 'use strict';
  5. 3. Passe por parâmetro para a IIFE os objetos window e document.
  6. 4. Dessa vez não é necessário criar um HTML. Ele já existe, e vamos utilizar
  7. a marcação criada nele para fazer nosso desafio ;)
  8.  
  9. O HTML NÃO PODE ser alterado!
  10. */
  11.  
  12. /*
  13. Ao carregar a página, pergunte ao usuário "Qual o seu nome?". Atribua o
  14. resultado à uma variável chamada `username`. Se o usuário não digitar um
  15. nome, `username` deve receber "Desconhecido".
  16. Com a resposta, mostre um alert com a mensagem "Bem vindo [USERNAME]!"
  17. */
  18.  
  19. let username = prompt('Qual o seu nome?');
  20.  
  21. if(!username)
  22. username = 'Desconhecido';
  23.  
  24. alert('Bem vindo ' + username);
  25.  
  26. /*
  27. Agora, pergunte ao usuário "Qual o seu e-mail?", atribuindo o resultado à
  28. uma variável chamada `email`.
  29. */
  30.  
  31. let email = prompt('Qual o seu e-mail?');
  32.  
  33. /*
  34. - Selecione o input de "Nome", atribuindo-o à uma variável chamada
  35. `$inputUsername`.
  36. */
  37.  
  38. let $inputUsername = doc.querySelector('[type=text]');
  39.  
  40. /*
  41. - Selecione o input de "Email", atribuindo-o à uma variável chamada
  42. `$inputEmail`.
  43. */
  44.  
  45. let $inputEmail = doc.querySelector('[type=email]');
  46.  
  47. /*
  48. - Selecione o campo de "Mensagem", atribuindo-o à uma variável chamada
  49. `$message`.
  50. */
  51.  
  52. let $message = doc.querySelector('textarea');
  53.  
  54.  
  55. /*
  56. - Selecione o botão de envio do formulário, atribuindo-o à uma variável
  57. chamada `$button`.
  58. */
  59.  
  60. let $button = doc.querySelector('[type=submit]');
  61.  
  62. /*
  63. Preencha os campos de "Nome" e "Email" que estão no documento com os valores
  64. entrados pelo usuário.
  65. */
  66.  
  67. $inputUsername.value = username;
  68. $inputEmail.value = email;
  69.  
  70. /*
  71. Adicione um listener de evento de click ao botão que faça o seguinte:
  72. 1. Verificar se todos os campos estão preenchidos:
  73. - Mostrar um alert para cada campo não preenchido, como abaixo:
  74. - Se o campo de "Nome" não estiver preenchido, mostrar:
  75. - "Preencha o nome do usuário!"
  76. - Se o campo de "Email" não estiver preenchido, mostrar:
  77. - "Preencha o e-mail!"
  78. - Se o campo de "Mensagem" não estiver preenchido, mostrar:
  79. - "Preencha a mensagem!"
  80. - Se o campo de "Email" for inválido, mostrar:
  81. - "Entre com um e-mail válido!"
  82.  
  83. 2. Para verificar se o e-mail é válido use a função `isValidEmail`, passando
  84. o e-mail que foi entrado no campo de "Email" por parâmetro. (A função
  85. `isValidEmail` será criada logo abaixo).
  86.  
  87. 3. Se tudo estiver OK, pergunte ao usuário:
  88. - "Tem certeza que deseja enviar o formulário?"
  89. Se for confirmado, mostre um alerta com a mensagem:
  90. - "Enviado com sucesso!"
  91. Caso contrário, mostre um alerta com a mensagem:
  92. - "Não enviado."
  93. */
  94.  
  95. $button.addEventListener('click', function(event){
  96. event.preventDefault();
  97. let message = '';
  98. let isError = false;
  99.  
  100. if($inputUsername.value === 'Desconhecido') {
  101. isError = true;
  102. message += 'Preencha o nome do usuário\n';
  103. }
  104.  
  105. if(!$inputEmail.value) {
  106. isError = true;
  107. message += 'Preencha o e-mail\n';
  108. }
  109.  
  110. if(!$message.value) {
  111. isError = true;
  112. message += 'Preencha a mensagem!\n';
  113. }
  114.  
  115. if(!isValidEmail($inputEmail.value)) {
  116. isError = true;
  117. message += 'Entre com um e-mail válido!';
  118. }
  119.  
  120. if(isError)
  121. alert(message);
  122.  
  123. if(!isError) {
  124. let finish = confirm('Tem certeza que deseja enviar o formulário?');
  125. let message;
  126.  
  127. if(finish)
  128. message = 'Enviado com sucesso!';
  129. else
  130. message = 'Não enviado.';
  131.  
  132. alert(message);
  133. }
  134. console.log(isError);
  135. }, false);
  136.  
  137. /*
  138. Crie uma função chamada `isValidEmail`, que será usada na validação do
  139. envio do formulário.
  140. Essa função deve receber o e-mail por parâmetro e verificar se é um e-mail
  141. válido.
  142. As regras para validação são:
  143. - O nome do usuário (antes do arroba), pode ser qualquer caractere
  144. alfanumérico, incluindo o underscore, sinal de "+" e o ponto;
  145. - Após o arroba, o domínio pode conter somente caracteres alfanuméricos
  146. e o underscore;
  147. - Para a extensão, o domínio deve vir seguido de um ponto, e no mínimo
  148. 2 caracteres alfanuméricos;
  149. - O final do domínio é opcional, mas se existir, deve começar com um
  150. ponto, seguido de no máximo 2 caracteres alfanuméricos.
  151.  
  152. Alguns e-mails válidos que podem ser usados para testar:
  153. - "meu.email+categoria@gmail.com"
  154. - "juca_malandro@bol.com.br"
  155. - "pedrobala@hotmail.uy"
  156. - "sandro@culinaria.dahora"
  157.  
  158. Alguns e-mails inválidos:
  159. - "walter-da-silva@maraca.br"
  160. - "rita-marica@titica.a.b"
  161. - "agua_@evida.br.com"
  162. */
  163.  
  164. function isValidEmail(email) {
  165. let emailValidator = /^[\w.+_]+@[\w_]+(?:.\w+)(?:.\w{2})?$/;
  166.  
  167. return emailValidator.test(email);
  168. }
  169.  
  170. }(window, document));
Add Comment
Please, Sign In to add comment