Exibir a mensagem Toast

Parte da seção JavaScript em Ação do Journey de HTML da Coddy. Lição 11 de 27.

Desafio

Fácil

Crie um formulário que exiba uma mensagem de sucesso quando enviado. Uma mensagem de toast deve aparecer informando que o envio foi bem-sucedido e desaparecer após 3 segundos.

Etapas a serem concluídas em JavaScript:

Adicione o event listener:
- Obtenha o elemento form e armazene-o em uma variável
- Obtenha o elemento toast e armazene-o em uma variável
- Adicione um event listener de "submit" ao formulário
Dentro do event listener:
- Use event.preventDefault() para impedir que a página seja atualizada
- Exiba o toast adicionando a classe "show"
- Remova a classe "hidden" do toast

Experimente você mesmo

<!DOCTYPE html>
<html>
<head>
  <title>Form with Toast</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h2>Subscribe to our Newsletter</h2>
    <form id="myForm">
      <input type="text" id="name" placeholder="Enter your name">
      <button type="submit">Submit</button>
    </form>
  </div>

  <!-- Toast -->
  <div id="toast" class="toast hidden">Form submitted successfully!</div>

  <script src="script.js"></script>
</body>
</html>