Todo List Interaktif dengan Manipulasi DOM JavaScript

itechnobuzz.com – Membuat aplikasi Todo List adalah latihan klasik dalam pengembangan web, terutama saat belajar manipulasi DOM dengan JavaScript. Todo List ini memungkinkan pengguna untuk menambah item, menandai item sebagai selesai, dan menghapus item yang tidak diperlukan. Dalam artikel ini, kita akan membuat aplikasi Todo List sederhana dan belajar bagaimana menggunakan DOM untuk membuat halaman yang interaktif dan dinamis.

Langkah 1: Membuat Struktur HTML Todo List

Pertama, kita membutuhkan struktur HTML dasar. Struktur ini akan berisi input untuk menambah item baru, tombol untuk memicu penambahan, dan area daftar untuk menampilkan item-item todo.

Pada bagian HTML ini, kita memiliki:

Input Text untuk memasukkan tugas baru.
Tombol Tambah untuk menambahkan tugas ke daftar.
Unordered List (<ul>) yang akan menampilkan daftar tugas.

Langkah 2: Menambahkan Gaya CSS

Tambahkan gaya sederhana untuk membuat daftar tugas lebih mudah dibaca dan interaktif. CSS akan membuat perbedaan visual antara tugas yang sudah selesai dan yang belum. Kode css di bawah ini sudah kita tambahkan pada Struktur html pada gambar diatas. lihat bagian <head> – <style>

Langkah 3: Menulis Todo List JavaScript untuk Manipulasi DOM (script.js)

Berikut ini adalah kode JavaScript yang akan menangani manipulasi DOM untuk menambah, menghapus, dan menandai tugas sebagai selesai. Buka lembar Sheet baru dan simpan dengan nama script.js agar terhubung dengan struktur html yang baru saja kita buat diatas lihat sintaks <script src=“script.js”></script> pada gambar struktur html

Penjelasan Kode JavaScript

Menambahkan Item Todo Baru: Fungsi addTodo() mengambil nilai dari input dan membuat elemen baru dalam bentuk <li>. Elemen ini berisi teks tugas dan tombol “Hapus”.
Menandai Tugas sebagai Selesai: Dengan menambahkan event listener pada elemen teks tugas (todoContent), kita bisa menandai tugas sebagai selesai menggunakan toggle pada kelas completed. Kelas completed ini memberi gaya coret pada teks, menandakan bahwa tugas tersebut sudah selesai.
Menghapus Item Todo: Tombol “Hapus” ditambahkan ke setiap item todo dan diberi event listener untuk menghapus elemen item tersebut dari DOM menggunakan removeChild().
Menambahkan Item dengan Tombol Enter: Agar lebih user-friendly, pengguna dapat menekan tombol Enter untuk menambah tugas, bukan hanya dengan tombol “Tambah”.

Tips Tambahan

Validasi Input: Pastikan untuk memeriksa apakah input kosong agar pengguna tidak bisa menambahkan tugas yang kosong.
Feedback Visual: Memberikan gaya khusus (seperti warna abu-abu untuk tugas yang selesai) mempermudah pengguna untuk mengetahui status tugas.

Dengan mengikuti langkah-langkah di atas, kamu bisa membuat aplikasi Todo List interaktif yang sederhana namun fungsional. Manipulasi DOM seperti ini adalah dasar dari pengembangan web interaktif dan bisa digunakan dalam proyek yang lebih kompleks. Selamat mencoba, dan semoga aplikasi Todo List ini bermanfaat buat kamu ya.

Todo List Interaktif dengan Manipulasi DOM JavaScript