Aplikasi Todo List Dasar

Kenapa Todo App?

Todo list adalah "Hello World"-nya aplikasi nyata: ia punya input, daftar data, dan tiga operasi dasar (tambah, ubah status, hapus). Pola ini adalah fondasi semua aplikasi CRUD (Create, Read, Update, Delete): kasir, inventaris, media sosial, semuanya CRUD.

Langkah Membangun

HTML: Input teks + tombol "Tambah", dan <ul id="daftar"> kosong sebagai wadah tugas.

CSS: Tampilan aplikasi sungguhan: kartu putih di tengah, tiap item tugas berupa baris dengan checkbox, teks, dan tombol hapus. Tugas selesai: teks tercoret (text-decoration: line-through) dan memudar.

JS: Inilah intinya, pola CRUD:

1. Create: Ambil nilai input, buat objek { teks, selesai: false }, masukkan ke array todos, render ulang.
2. Read/Render: Fungsi render() membangun ulang <li> dari array. Satu sumber kebenaran: array, bukan DOM.
3. Update: Klik item -> balik selesai (toggle), render ulang.
4. Delete: Klik tombol × -> hapus dari array dengan splice atau filter, render ulang.

Tambahan UX: tekan Enter di input = tambah (tanpa klik tombol), input kosong ditolak, dan penghitung "X tugas tersisa".

Kesalahan Umum

• Menyimpan status di DOM saja (class) tanpa array data, sehingga sulit dikembangkan (tambah filter jadi mustahil).
• Lupa membersihkan input setelah menambah.
• Event listener dipasang ulang setiap render dengan cara yang menumpuk (render ulang innerHTML lalu pasang listener baru tiap kali, atau pakai event delegation).