Mostrar el mensaje Toast

Parte de la sección JavaScript in Action del Journey de HTML de Coddy. Lección 11 de 27.

Desafío

Fácil

Crea un formulario que muestre un mensaje de éxito al ser enviado. Debe aparecer un mensaje toast indicando que el envío fue exitoso y luego desaparecer después de 3 segundos.

Pasos a completar en JavaScript:

Añade el escuchador de eventos (event listener):
- Obtén el elemento form y almacénalo en una variable
- Obtén el elemento toast y almacénalo en una variable
- Añade un escuchador de eventos "submit" al formulario
Dentro del escuchador de eventos:
- Usa event.preventDefault() para evitar que la página se refresque
- Muestra el toast añadiendo la clase "show"
- Elimina la clase "hidden" del toast

Pruébalo tú mismo

<!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>