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>