Toast mesajı

Coddy'nin HTML Journey'sinin JavaScript Eylemde bölümünün bir parçası. Ders 8 / 27.

toast mesajı, kullanıcıya geri bildirim vermek için ekranda kısa süreliğine görünen küçük bir bildirimdir. Genellikle birkaç saniye sonra kaybolur.

Temel bir HTML yapısı oluşturun:

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

Bildirim mesajına stil vermek için biraz CSS ekleyelim. İki sınıf kullanıyoruz: onu görünmez tutmak için .hidden ve görünmesini sağlamak için .show.

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

Şimdi bildirimi göstermek ve gizlemek için JavaScript ekleyin:

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

Bu kod, düğmeye tıklandığında bildirimi görünür hâle getirir ve 3 saniye sonra otomatik olarak gizler.

Görev

Kolay

Amacınız bildirimin güzel görünmesini ve görünür/gizlenmeye hazır olmasını sağlamak.

position: fixed ile bottom ve left kullanarak bildirim mesajını sayfanın alt kısmında ortalayın.
arka plan rengi verin ve metin rengini değiştirin.
Mesajın sıkışık görünmemesi için biraz dolgu ekleyin.
Köşelerin yumuşak görünmesini sağlayın.
Opaklığını 0 olarak ayarlayın; böylece varsayılan olarak (JavaScript onu göstermeden önce) gizli olur.

Kendin dene

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