Mostrar el mensaje Toast

Parte de la sección JavaScript en Acción 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 enviarlo. Debe aparecer un mensaje emergente que indique que el envío se realizó correctamente y, después, desaparecer tras 3 segundos.

Pasos para completar en JavaScript:

Añade el detector de eventos:
- Obtén el elemento form y guárdalo en una variable
- Obtén el elemento toast y guárdalo en una variable
- Añade un detector de eventos de tipo "submit" al formulario
Dentro del detector de eventos:
- Usa event.preventDefault() para evitar que la página se actualice
- Muestra el mensaje emergente añadiendo la clase "show"
- Elimina la clase "hidden" del mensaje emergente

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>