Toast mesajı

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

Bir 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 kendiliğinden 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 bildirimini stillendirmek 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 mesajını 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, butona tıklandığında toast bildirimini görünür hale getirir ve 3 saniye sonra otomatik olarak gizler.

Görev

Kolay

Amacınız, toast mesajının güzel görünmesini ve görünmeye/kaybolmaya hazır hale gelmesini sağlamaktır.

position: fixed özelliğini bottom ve left ile birlikte kullanarak toast mesajını sayfanın alt orta kısmına yerleştirin.
Okunabilir olması için bir arka plan rengi (background color) verin ve metin rengini (text color) değiştirin.
Mesajın sıkışık görünmemesi için biraz iç boşluk (padding) ekleyin.
Köşelerin pürüzsüz görünmesini sağlayın.
Varsayılan olarak gizli kalması için (JavaScript onu göstermeden önce) opaklığını 0 (opacity to 0) olarak ayarlayın.

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>