Komunikat Toast

Część sekcji JavaScript w praktyce ścieżki HTML w Coddy. Lekcja 8 z 27.

Komunikat typu toast to małe powiadomienie, które na krótko pojawia się na ekranie, aby przekazać użytkownikowi informację zwrotną. Zwykle znika po kilku sekundach.

Utwórz podstawową strukturę HTML:

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

Dodaj trochę CSS, aby wystylizować powiadomienie toast. Używamy dwóch klas: .hidden, aby pozostało niewidoczne, oraz .show, aby się pojawiło.

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

Teraz dodaj JavaScript, aby wyświetlać i ukrywać powiadomienie typu toast:

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);
});

Ten kod sprawia, że powiadomienie typu toast staje się widoczne po kliknięciu przycisku i automatycznie znika po 3 sekundach.

Wyzwanie

Łatwy

Twoim celem jest sprawić, by powiadomienie toast wyglądało estetycznie i było gotowe do pojawiania się oraz znikania.

Umieść powiadomienie toast na środku, u dołu strony, używając position: fixed wraz z bottom i left.
Ustaw mu kolor tła i zmień kolor tekstu, aby tekst był czytelny.
Dodaj trochę paddingu, aby treść powiadomienia nie była ściśnięta.
Nadaj narożnikom zaokrąglony wygląd.
Ustaw jego opacity na 0, aby domyślnie był ukryty (zanim JavaScript go wyświetli).

Spróbuj swoich sił

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

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

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