Toast message

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 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 erscheint.

.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 den button geklickt wird, und blendet ihn nach 3 seconds automatisch aus.

Aufgabe

Einfach

Dein Ziel ist es, den toast ansprechend aussehen zu lassen und ihn auf das Erscheinen bzw. Verschwinden vorzubereiten.

Platziere die toast-Nachricht im center at the bottom der Page mit position: fixed sowie bottom und left.
Gib ihr eine background color und ändere die text color, damit sie lesbar ist.
Füge etwas padding hinzu, damit die Nachricht nicht eingeengt wirkt.
Sorge für abgerundete Ecken.
Setze die opacity 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>