Membuat Daftar Tugas Interaktif dengan jQuery

Daftar tugas yang bisa ditambah dan dihapus langsung di halaman membuat pengguna betah berlama-lama. Dengan jQuery, kamu bisa membangun fitur ini tanpa banyak kode. Ikuti panduan berikut untuk membuat daftar tugas interaktif dengan jQuery dari nol.

Menyiapkan Struktur HTML

Mulai dengan kerangka sederhana: sebuah input teks, tombol tambah, dan daftar kosong. Simpan sebagai index.html.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Daftar Tugas</title>
  <style>
    .selesai { text-decoration: line-through; color: #888; }
    li { margin: 8px 0; }
  </style>
</head>
<body>
  <h1>Daftar Tugas</h1>
  <input type="text" id="inputTugas" placeholder="Tugas baru...">
  <button id="tombolTambah">Tambah</button>
  <ul id="daftarTugas"></ul>

  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

Struktur ini cukup untuk memulai. Interaksi akan ditambahkan lewat file script.js terpisah agar kode tetap rapi.

Menambahkan Tugas Baru

Bungkus logika penambahan dalam fungsi tambahTugas yang dipanggil saat tombol diklik atau tombol Enter ditekan. Pastikan input tidak kosong.

$(document).ready(function() {
  function tambahTugas() {
    var teks = $('#inputTugas').val().trim();
    if (teks === '') return;

    var $li = $('<li>').text(teks);
    var $tombolHapus = $('<button>Hapus</button>').addClass('hapus');
    $li.append($tombolHapus);
    $('#daftarTugas').append($li);
    $('#inputTugas').val('').focus();
  }

  $('#tombolTambah').on('click', tambahTugas);
  $('#inputTugas').on('keypress', function(e) {
    if (e.which === 13) tambahTugas();
  });
});

Di sini kita memakai .append() untuk menyisipkan elemen baru ke dalam <ul>. Jika kamu perlu menyisipkan di posisi tertentu, pelajari berbagai metode penambahan elemen DOM.

Menghapus Tugas

Tombol hapus dibuat dinamis, jadi event handler harus dipasang dengan event delegation. Gunakan .on() pada elemen induk yang sudah ada saat halaman dimuat.

$('#daftarTugas').on('click', '.hapus', function() {
  $(this).closest('li').remove();
});

$(this).closest('li') mencari elemen <li> terdekat dari tombol yang diklik. Setelah itu .remove() menghapusnya dari DOM. Pendekatan ini menghindari pemasangan event pada setiap tombol baru.

Menandai Tugas Selesai

Klik pada teks tugas untuk menandainya selesai. Cukup tambahkan atau hapus kelas selesai pada elemen <li>.

$('#daftarTugas').on('click', 'li', function(e) {
  if ($(e.target).is('button')) return;
  $(this).toggleClass('selesai');
});

Kita memeriksa apakah yang diklik adalah tombol hapus untuk mencegah konflik. Jika bukan, kelas selesai akan di-toggle. CSS .selesai sudah disiapkan di awal untuk memberikan efek coret.

Menyimpan Tugas ke Local Storage

Agar daftar tidak hilang saat halaman dimuat ulang, simpan data ke localStorage. Setiap perubahan (tambah, hapus, toggle) harus memperbarui penyimpanan.

Buat fungsi simpanTugas yang mengumpulkan teks dan status selesai dari setiap <li>, lalu simpan sebagai JSON.

function simpanTugas() {
  var tugas = [];
  $('#daftarTugas li').each(function() {
    tugas.push({
      teks: $(this).text().replace('Hapus', '').trim(),
      selesai: $(this).hasClass('selesai')
    });
  });
  localStorage.setItem('daftarTugas', JSON.stringify(tugas));
}

Panggil simpanTugas() di akhir tambahTugas, setelah remove(), dan setelah toggle. Saat halaman dimuat, baca dari localStorage dan render ulang daftar.

function muatTugas() {
  var tersimpan = localStorage.getItem('daftarTugas');
  if (!tersimpan) return;
  var tugas = JSON.parse(tersimpan);
  $('#daftarTugas').empty();
  tugas.forEach(function(item) {
    var $li = $('<li>').text(item.teks);
    if (item.selesai) $li.addClass('selesai');
    var $tombolHapus = $('<button>Hapus</button>').addClass('hapus');
    $li.append($tombolHapus);
    $('#daftarTugas').append($li);
  });
}
$(document).ready(muatTugas);

Dengan begitu, pengguna bisa menutup browser dan kembali lagi tanpa kehilangan daftar. Pastikan untuk memanggil simpanTugas() setiap kali ada perubahan.

Merapikan Kode dan Menghindari Kesalahan Umum

Selalu gunakan event delegation untuk elemen yang dibuat secara dinamis. Hindari memasang event handler langsung pada tombol yang belum ada. Selain itu, periksa kembali selector yang digunakan agar tidak salah sasaran. Untuk referensi lebih lanjut tentang selector, lihat panduan memilih selector jQuery.

Jika kamu baru mulai belajar jQuery, ada baiknya membaca tips praktis jQuery untuk pemula agar lebih percaya diri.

Ringkasan

Membuat daftar tugas interaktif dengan jQuery melibatkan penambahan elemen, penanganan event dinamis, dan penyimpanan data di sisi klien. Mulai dari struktur HTML sederhana, lalu tambahkan fungsionalitas satu per satu. Dengan mengikuti langkah di atas, kamu sudah punya aplikasi daftar tugas yang berfungsi penuh.

Pertanyaan yang Sering Diajukan

Bagaimana cara menambahkan tugas dengan menekan tombol Enter?

Tangkap event keypress pada input, lalu periksa e.which === 13. Jika benar, panggil fungsi tambahTugas.

Mengapa tombol hapus tidak berfungsi setelah menambah tugas baru?

Kemungkinan event handler dipasang langsung pada tombol yang belum ada. Gunakan event delegation dengan .on('click', '.hapus', handler) pada elemen induk.

Apakah data di localStorage aman?

Data di localStorage hanya tersimpan di browser pengguna dan tidak dikirim ke server. Untuk aplikasi produksi, pertimbangkan penyimpanan di server dengan autentikasi yang tepat.