Exibir a Mensagem Toast

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

Desafio

Fácil

Crie um formulário que mostre uma mensagem de sucesso ao ser enviado. Uma mensagem toast deve aparecer dizendo que o envio foi bem-sucedido e, em seguida, desaparecer após 3 segundos.

Passos para completar 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 evitar que a página seja recarregada
- Mostre 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>