Sticky Notes (Catatan Tempel)

Kenapa Sticky Notes?

Sticky notes digital menggabungkan CRUD dengan sentuhan playful: catatan warna-warni yang bisa ditambah, diedit langsung, dan dihapus. Semua tersimpan otomatis.

Langkah Membangun

HTML: Tombol "+ Catatan Baru" dan area papan (<div id="papan">).

CSS: Catatan berbentuk kotak dengan warna acak dari palet (kuning, pink, hijau, biru), sedikit rotasi acak agar terlihat natural seperti ditempel miring, dan shadow. Efek hover: rotasi kembali lurus dan sedikit membesar.

JS:

1. Array catatan berisi { id, teks, warna }, dimuat dari localStorage.
2. Tambah: buat catatan baru dengan warna acak, fokuskan textarea-nya.
3. Edit: pakai contenteditable atau textarea; setiap perubahan (event input, dengan debounce) simpan ke localStorage.
4. Hapus: tombol × dengan konfirmasi.
5. Rotasi acak disimpan di data agar konsisten setelah refresh.

contenteditable vs textarea

contenteditable="true" membuat elemen HTML bisa diketik langsung, cocok untuk sticky notes yang tampil seperti kertas. Textarea lebih mudah tapi terlihat seperti form. Pilih sesuai kebutuhan.

Kesalahan Umum

• Menyimpan setiap keystroke tanpa debounce (boros, walau untuk data kecil masih aman).
• Warna/rotasi berubah setiap refresh karena diacak saat render (simpan di data).
• ID duplikat menyebabkan hapus/edit salah sasaran (pakai Date.now() atau crypto.randomUUID()).