Data dan Halaman Web · Pelajaran 10 dari 10
Proyek: logika daftar tugas
10 menit baca · BelajarCode
Aplikasi daftar tugas (to-do list) adalah proyek klasik untuk berlatih JavaScript. Kita mulai dari logikanya, yang bisa diuji di Playground. Setelah itu, menyambungkannya ke tampilan tinggal memakai DOM.
Rancangan data
Setiap tugas adalah objek dengan id, judul, dan selesai. Semua tugas disimpan dalam satu array.
1let tugas = [];2let idBerikutnya = 1;34function tambah(judul) {5 const bersih = judul.trim();6 if (bersih === "") return null;7 const baru = { id: idBerikutnya++, judul: bersih, selesai: false };8 tugas.push(baru);9 return baru;10}1112function tandaiSelesai(id) {13 const t = tugas.find((t) => t.id === id);14 if (t) t.selesai = true;15}1617function hapus(id) {18 tugas = tugas.filter((t) => t.id !== id);19}2021function tampilkan(judulDaftar, daftar) {22 console.log(`${judulDaftar} (${daftar.length})`);23 for (const t of daftar) {24 console.log(` [${t.selesai ? "x" : " "}] ${t.id}. ${t.judul}`);25 }26}2728tambah("Kerjakan PR matematika");29tambah(" Baca bab 3 sejarah ");30tambah("Latihan JavaScript");31tambah(" ");32tandaiSelesai(1);33hapus(2);3435tampilkan("Semua tugas", tugas);36tampilkan("Belum selesai", tugas.filter((t) => !t.selesai));37const persen = Math.round(tugas.filter((t) => t.selesai).length / tugas.length * 100);38console.log(`Kemajuan: ${persen}%`);Semua tugas (2) [x] 1. Kerjakan PR matematika [ ] 3. Latihan JavaScript Belum selesai (1) [ ] 3. Latihan JavaScript Kemajuan: 50%
Hal penting dari proyek ini
- Judul dibersihkan dengan
trim(), dan judul kosong ditolak. Tugas " " tidak pernah masuk. - Setiap tugas punya
idunik, sehingga bisa ditandai atau dihapus walaupun judulnya sama. filterdipakai untuk menghapus dan untuk menampilkan tugas yang belum selesai, tanpa perulangan manual.- Setiap fungsi mengerjakan satu hal dan mudah diuji sendiri.
Menyambungkan ke halaman
Di halaman web, fungsi tampilkan diganti dengan fungsi yang membuat elemen <li> untuk setiap tugas, dan tombol "Tambah" memanggil tambah(input.value) lalu menggambar ulang daftarnya. Untuk menyimpan tugas walaupun halaman dimuat ulang, data bisa disimpan di localStorage dalam bentuk JSON.
Cek pemahaman
Kenapa setiap tugas diberi id, bukan hanya dikenali dari judulnya?
Latihan
Ubah judul dan urutkan
Tambahkan dua fungsi: ubahJudul(id, judulBaru) yang menolak judul kosong, dan urutkanBelumSelesaiDulu() yang mengembalikan salinan daftar dengan tugas yang belum selesai di atas.
Pembahasan
1let tugas = [2 { id: 1, judul: "Kerjakan PR", selesai: true },3 { id: 2, judul: "Baca bab 3", selesai: false },4 { id: 3, judul: "Latihan JS", selesai: false },5];67function ubahJudul(id, judulBaru) {8 const bersih = judulBaru.trim();9 const t = tugas.find((t) => t.id === id);10 if (!t || bersih === "") return false;11 t.judul = bersih;12 return true;13}1415function urutkanBelumSelesaiDulu() {16 return [...tugas].sort((a, b) => Number(a.selesai) - Number(b.selesai));17}1819console.log(ubahJudul(2, "Baca bab 3 dan buat ringkasan"));20console.log(ubahJudul(3, " "));21for (const t of urutkanBelumSelesaiDulu()) {22 console.log(t.selesai ? "selesai" : "belum", "-", t.judul);23}true false belum - Baca bab 3 dan buat ringkasan belum - Latihan JS selesai - Kerjakan PR
Number(false) bernilai 0 dan Number(true) bernilai 1, sehingga tugas yang belum selesai berada di depan. Metode sort di JavaScript stabil, jadi urutan di antara tugas yang sama statusnya tidak berubah.
Jalankan contoh kode di pelajaran ini tanpa instalasi lewat compiler JavaScript online.