htmlcssjavascriptkomponennotifikasiMenengah10 mnt baca

Toast Notification

Notifikasi kecil yang muncul sesaat di pojok layar seperti di aplikasi Android.

Apa Itu Toast?

Toast adalah pesan kecil yang "melompat" muncul lalu hilang sendiri, seperti roti dari pemanggang (makanya disebut toast). Dipakai untuk "Data tersimpan", "Pesan terkirim", "Item dihapus". Bedanya dengan modal: toast tidak mengunci layar dan tidak butuh interaksi.

Langkah Membangun

HTML: Satu kontainer <div id="wadahToast"> fixed di pojok kanan bawah. Toast dibuat dinamis oleh JS, bukan ditulis manual.

CSS: Toast: background gelap, teks putih, border-radius, shadow, animasi slide-in dari kanan. Tiga varian warna: sukses (hijau), error (merah), info (biru). Ada progress bar tipis di bawah yang menyusut sesuai sisa waktu tampil.

JS: Fungsi tampilkanToast(pesan, tipe):

  1. Buat elemen div.toast, isi pesan + ikon sesuai tipe.
  2. Masukkan ke wadah, picu animasi masuk.
  3. setTimeout 3 detik: animasi keluar lalu hapus elemen.
  4. Klik toast untuk menutup manual lebih cepat.

Kenapa Dibuat Dinamis?

Karena toast dipicu dari banyak tempat (tombol simpan, form, dsb). Satu fungsi yang bisa dipanggil dari mana saja jauh lebih rapi daripada menulis HTML toast berulang kali.

Kesalahan Umum

  • Toast menumpuk tak terbatas jika pengguna spam klik (batasi maksimal 3-4 toast, hapus yang tertua).
  • Timeout tidak dibersihkan saat toast ditutup manual (simpan id timeout dan clearTimeout).
  • Toast menutupi tombol penting (posisikan di area yang tidak mengganggu).

Tantangan

Tantangan: Toast dengan Tombol Aksi

Buat varian toast "Item dihapus" yang punya tombol "Urungkan" selama 5 detik. Kalau diklik, tampilkan toast baru "Dihapus dibatalkan". Ini pola umum di Gmail dan aplikasi file.

Tugas

Tugas: Sistem Notifikasi Lengkap

Kembangkan toast menjadi sistem notifikasi lengkap: (1) maksimal 4 toast tampil bersamaan, toast kelima menghapus yang tertua; (2) tiap toast punya tombol tutup ×; (3) tambah tipe "peringatan" (kuning); (4) riwayat: semua notifikasi tersimpan dalam array dan bisa dilihat lewat tombol "Riwayat" yang membuka modal daftar. Tulis kodenya sendiri dari nol, lalu kirim untuk dinilai AI tutor.

Kriteria penilaian:

  • Maksimal 4 toast tampil, toast baru menggeser yang tertua
  • Tiap toast punya tombol tutup yang berfungsi
  • Ada 4 tipe: sukses, error, info, peringatan dengan warna berbeda
  • Tombol Riwayat membuka modal berisi daftar semua notifikasi yang pernah muncul

AI tutor akan memeriksa bug, kesalahan syntax, dan memberi saran perbaikan.