Toast-Nachricht ausblenden

Teil des Abschnitts JavaScript in Aktion der HTML-Journey von Coddy. Lektion 12 von 27.

Aufgabe

Einfach

Die Toast-Meldung nach 3 Sekunden ausblenden.

Die Toast-Meldung soll nicht für immer angezeigt werden, also blenden wir sie nach einer kurzen Verzögerung aus:

Verwende setTimeout(), um eine Verzögerung von 3 Sekunden zu erstellen.
Füge innerhalb der Timeout-Funktion die Klasse "hidden" zum Toast-Element hinzu.
Entferne außerdem die Klasse "show" vom Toast-Element, damit es sanft verschwindet.

Probier es selbst

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