Die Toast-Nachricht anzeigen

Teil des Abschnitts JavaScript in Action der HTML-Journey von Coddy — Lektion 11 von 27.

Aufgabe

Einfach

Erstellen Sie ein Formular, das beim Absenden eine Erfolgsmeldung anzeigt. Eine Toast-Nachricht soll erscheinen, die besagt, dass die Übermittlung erfolgreich war, und dann nach 3 Sekunden verschwinden.

Schritte zur Fertigstellung in JavaScript:

Den Event-Listener hinzufügen:
- Holen Sie sich das form-Element und speichern Sie es in einer Variablen
- Holen Sie sich das toast-Element und speichern Sie es in einer Variablen
- Fügen Sie dem Formular einen "submit"-Event-Listener hinzu
Innerhalb des Event-Listeners:
- Verwenden Sie event.preventDefault(), um zu verhindern, dass die Seite neu geladen wird
- Zeigen Sie den Toast an, indem Sie die "show"-Klasse hinzufügen
- Entfernen Sie die "hidden"-Klasse vom Toast

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>