Toast-Nachricht

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

Eine Toast-Nachricht ist eine kleine Benachrichtigung, die kurz auf dem Bildschirm erscheint, um dem Benutzer Feedback zu geben. Sie wird normalerweise nach einigen Sekunden ausgeblendet.

Erstelle eine grundlegende HTML-Struktur:

<div class="container">
    <button id="showToast">Show Toast</button>
    <div id="toast" class="hidden">This is a toast message!</div>
</div>

Füge etwas CSS hinzu, um den Toast zu gestalten. Wir verwenden zwei Klassen: .hidden, um ihn unsichtbar zu halten, und .show, damit er angezeigt wird.

.toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    background-color: #333;
    color: white;
    padding: 15px 25px;
}
.show {
    opacity: 1;
}
.hidden {
    display: none;
}

Füge nun JavaScript hinzu, um den Toast anzuzeigen und auszublenden:

const showToastBtn = document.getElementById('showToast');
const toast = document.getElementById('toast');

showToastBtn.addEventListener('click', function() {
    toast.classList.remove('hidden');
    toast.classList.add('show');

    setTimeout(function() {
        toast.classList.remove('show');
        toast.classList.add('hidden');
    }, 3000);
});

Dieser Code macht den Toast sichtbar, wenn auf die Schaltfläche geklickt wird, und blendet ihn nach 3 Sekunden automatisch aus.

Aufgabe

Einfach

Dein Ziel ist es, die Toast-Nachricht ansprechend aussehen zu lassen und sie für das Ein- und Ausblenden vorzubereiten.

Platziere die Toast-Nachricht mit position: fixed sowie bottom und left unten mittig auf der Seite.
Gib ihr eine Hintergrundfarbe und ändere die Textfarbe, damit sie lesbar ist.
Füge etwas Innenabstand hinzu, damit die Nachricht nicht beengt wirkt.
Lass die Ecken abgerundet aussehen.
Setze die Deckkraft auf 0, damit sie standardmäßig ausgeblendet ist (bevor JavaScript sie anzeigt).

Probier es selbst

<!DOCTYPE html>
<html>
<head>
  <title>Toast Notification Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>My Profile Settings</h1>
  </header>

  <main>
    <p>Update your profile and save changes. A toast message will confirm your action.</p>
    <button id="showToast">Save Changes</button>
  </main>

  <!-- Toast -->
  <div id="toast" class="toast hidden">✅Your changes have been saved!</div>

  <script src="script.js"></script>
</body>
</html>