Toast-Nachricht

Teil des Abschnitts JavaScript in Action 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 eine Rückmeldung zu geben. Sie blendet normalerweise nach ein paar Sekunden aus.

Erstellen Sie 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 stylen. Wir verwenden zwei Klassen: .hidden, um ihn unsichtbar zu halten, und .show, um ihn erscheinen zu lassen.

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

Fügen Sie 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 wieder aus.

Aufgabe

Einfach

Dein Ziel ist es, den Toast ansprechend zu gestalten und für das Erscheinen/Verschwinden vorzubereiten.

Platziere die Toast-Nachricht unten in der Mitte der Seite unter Verwendung von position: fixed mit bottom und left.
Gib ihm eine Hintergrundfarbe und ändere die Textfarbe, um ihn lesbar zu machen.
Füge etwas Padding hinzu, damit die Nachricht nicht eingeengt wirkt.
Sorge dafür, dass die Ecken glatt aussehen.
Setze die Opacity auf 0, damit er standardmäßig ausgeblendet ist (bevor das JavaScript ihn 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>