Ocultar el mensaje Toast

Parte de la sección JavaScript en Acción del Journey de HTML de Coddy. Lección 12 de 27.

Desafío

Fácil

Oculta el mensaje emergente después de 3 segundos.

No queremos que el mensaje emergente permanezca para siempre, así que vamos a ocultarlo después de un breve retraso:

Usa setTimeout() para crear un retraso de 3 segundos.
Dentro de la función de tiempo de espera, añade la clase "hidden" al elemento del mensaje emergente.
También elimina la clase "show" del elemento del mensaje emergente para que desaparezca suavemente.

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>