Tugas Akhir
Penjelasan
Sekarang saatnya menggabungkan semua yang sudah dipelajari — dari component dasar sampai JS Interop — jadi satu aplikasi utuh. Kamu akan membuat aplikasi Todo List sederhana yang menggabungkan @bind, @foreach dengan @key, EventCallback, dan conditional rendering.
Tugas
Buat component TodoApp.razor dengan properti daftarTodo (List berisi record TodoItem(int Id, string Teks, bool Selesai)) dan inputBaru (string, diikat lewat @bind). Buat method TambahTodo() untuk menambah todo baru ke daftarTodo. Tampilkan daftarTodo lewat @foreach dengan @key="item.Id", tiap item punya checkbox (@bind atau @onchange untuk toggle Selesai) dan tombol hapus. Hitung dan tampilkan ringkasan "X dari Y todo selesai" di bagian atas.
Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.
Tips
Kalau bingung mulai dari mana, kerjakan TambahTodo() dan render list-nya dulu (tanpa checkbox/hapus), cek hasilnya di browser, baru tambahkan ToggleSelesai() dan HapusTodo() satu per satu. Program besar selalu lebih mudah kalau dipecah jadi langkah-langkah kecil.