Jago JavaScript 2: Mini Project - To-Do List Interaktif

Kita akan membuat aplikasi daftar tugas sederhana namun fungsional. User bisa ngetik tugas, tekan Enter atau klik tambah, lalu tugasnya muncul di bawah.

🧩 Apa yang Akan Dipelajari

• Mengambil nilai dari sebuah input field.
• Membuat elemen li secara dinamis lengkap dengan tombol hapusnya.
• Menggunakan Event Delegation sederhana untuk fitur hapus.
• Memberikan gaya CSS lewat JavaScript.

🚀 Langkah-Langkah

1. Struktur HTML & CSS Dasar

Siapkan file index.html kamu. Kita butuh wadah buat input dan tempat naruh daftar tugasnya.

<div class="container">
    <h1>My Tasks 📝</h1>
    <div class="input-group">
        <input type="text" id="todo-input" placeholder="Apa rencana hari ini?">
        <button id="add-btn">Tambah</button>
    </div>
    <ul id="todo-list">
        </ul>
</div>

<style>
    .completed { text-decoration: line-through; color: gray; }
    li { cursor: pointer; margin-bottom: 5px; display: flex; justify-content: space-between; }
    .delete-btn { color: red; margin-left: 10px; cursor: pointer; }
</style>

2. Logika Menambah Tugas (Create Element)

Kita buat fungsi untuk mengambil teks dari input dan menjadikannya elemen daftar baru.

const input = document.getElementById('todo-input');
const addBtn = document.getElementById('add-btn');
const todoList = document.getElementById('todo-list');

function addTask() {
    const taskText = input.value;

    if (taskText === "") {
        alert("Isi dulu tugasnya, Kay!");
        return;
    }

    // 1. Bikin elemen li
    const li = document.createElement('li');
    li.innerHTML = `
        <span>${taskText}</span>
        <span class="delete-btn">X</span>
    `;

    // 2. Tambahkan fitur klik untuk selesai (Toggle Class)
    li.querySelector('span').addEventListener('click', function() {
        this.classList.toggle('completed');
    });

    // 3. Tambahkan fitur hapus (Remove Element)
    li.querySelector('.delete-btn').addEventListener('click', function() {
        li.remove();
    });

    // 4. Tempel ke list utama dan kosongkan input
    todoList.appendChild(li);
    input.value = "";
}

addBtn.addEventListener('click', addTask);

3. Tambahan: Fitur Enter

Biar lebih enak, kita tambahin supaya user bisa tekan tombol Enter di keyboard buat nambah tugas.

input.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') {
        addTask();
    }
});

💡 Analisis Kode

• input.value: Digunakan buat ngambil apa yang diketik user.
• li.innerHTML: Cara cepat buat bikin struktur di dalam li (teks tugas + tombol X).
• li.remove(): Karena tombol hapus ada di dalam li, kita bisa langsung perintahin si li buat menghapus dirinya sendiri.
• classList.toggle: Otomatis nambahin/ngapus class .completed di CSS buat efek coret.

❗ Tantangan Untukmu (Challenge)

Coba modifikasi kodenya:

1. Tambahkan fitur "Hapus Semua" (tombol buat kosongin ul).
2. Tambahkan Jumlah Tugas (teks yang nampilin berapa banyak li yang ada di daftar).

🎯 Kesimpulan

Selamat! Kamu sudah resmi jadi DOM Manipulator. Kamu sudah bisa bikin aplikasi yang berinteraksi langsung dengan user. Ini adalah batu loncatan besar sebelum kamu masuk ke framework seperti React atau Vue.