Proyek Akhir: To-Do List

Saatnya membangun!

Kita akan membuat To-Do List sederhana. Proyek ini memakai hampir semua yang sudah kamu pelajari: variable, array, function, DOM, dan event.

Fitur

1. Pengguna mengetik tugas lalu menekan tombol Tambah.
2. Tugas muncul sebagai daftar.
3. Klik sebuah tugas untuk menghapusnya.

Langkah berpikir

• Simpan data di array tugas.
• Buat function render() yang menggambar ulang daftar dari array.
• Saat submit: push ke array, kosongkan input, panggil render().
• Saat item diklik: splice dari array, panggil render().

Kerangka kode

const tugas = [];

function render() {
  daftar.innerHTML = "";
  tugas.forEach((t, i) => {
    const li = document.createElement("li");
    li.textContent = t;
    li.addEventListener("click", () => {
      tugas.splice(i, 1);
      render();
    });
    daftar.appendChild(li);
  });
}

Pola "data di array, tampilan digambar dari data" adalah dasar dari framework modern seperti React dan Vue.

Selamat!

Setelah bab ini lulus, kerjakan quiz akhir. Nilai minimal 70 akan membuka sertifikat kelulusanmu.