Toast message

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

toast message, kullanıcıya geri bildirim vermek için ekranda kısa süreliğine görünen küçük bir bildirimdir. Genellikle birkaç seconds sonra yavaşça 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>

Toast’u biçimlendirmek için biraz CSS ekleyin. İki sınıf kullanıyoruz: 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 toast öğesini 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 toast bildirimini görünür hale getirir ve 3 saniye sonra otomatik olarak gizler.

Görev

Kolay

Amacın toast'ın hoş görünmesini ve görünmeye/kaybolmaya hazır olmasını sağlamak.

Toast mesajını center at the bottom konumuna, position: fixed ile birlikte bottom ve left kullanarak yerleştir.
Okunabilir olması için ona bir background color ver ve text color değerini değiştir.
Mesajın sıkışık görünmemesi için biraz padding ekle.
Köşelerin pürüzsüz görünmesini sağla.
Varsayılan olarak gizli olması için opacity to 0 olarak ayarla (JavaScript onu göstermeden önce).

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>