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>