Mini Project: To-Do List Sederhana dengan JavaScript

To-Do List adalah aplikasi daftar tugas yang membantu kamu mencatat hal-hal yang perlu dilakukan. Untuk itu dalam tutorial kali ini kita akan membuat Mini Project: To-Do List Sederhana dengan JavaScript. Karena dengan JavaScript, kita bisa membuat versi sederhananya yang bisa:

Menambah tugas baru,
Menandai tugas yang sudah selesai,
Menghapus tugas, dan
Menyimpan data ke LocalStorage agar tetap ada meski halaman di-refresh.

Mini project ini cocok untuk pemula yang ingin melatih dasar DOM manipulation, event handling, dan penyimpanan lokal (LocalStorage) di browser.

1. Struktur Dasar HTML

Buat file index.html:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>To-Do List JavaScript</title>
  <style>
    body { font-family: Arial; max-width: 400px; margin: 50px auto; }
    h1 { text-align: center; }
    ul { list-style: none; padding: 0; }
    li { 
      padding: 8px; 
      margin: 5px 0; 
      background: #f0f0f0; 
      border-radius: 5px;
      display: flex; 
      justify-content: space-between;
      align-items: center;
    }
    li.done { text-decoration: line-through; color: gray; }
    button { margin-left: 10px; }
  </style>
</head>
<body>

  <h1> To-Do List</h1>

  <input type="text" id="taskInput" placeholder="Tulis tugas baru..." />
  <button id="addBtn">Tambah</button>

  <ul id="taskList"></ul>

  <script src="app.js"></script>
</body>
</html>

2. Logika Dasar JavaScript

Buat file app.js dan mulai dengan:

const input = document.getElementById("taskInput");
const addBtn = document.getElementById("addBtn");
const list = document.getElementById("taskList");

let tasks = JSON.parse(localStorage.getItem("tasks")) || [];

// Tampilkan tugas saat halaman dibuka
renderTasks();

3. Fungsi Tambah Tugas

addBtn.addEventListener("click", addTask);

function addTask() {
  const text = input.value.trim();
  if (text === "") return alert("Tugas tidak boleh kosong!");

  const newTask = { text, done: false };
  tasks.push(newTask);
  saveTasks();
  renderTasks();
  input.value = "";
}

Penjelasan:

Mengecek agar input tidak kosong,
Menambahkan tugas ke array tasks,
Menyimpan ke LocalStorage, dan
Menampilkan ulang daftar.

4. Menampilkan Daftar Tugas (`renderTasks`)

function renderTasks() {
  list.innerHTML = "";
  tasks.forEach((task, index) => {
    const li = document.createElement("li");
    li.textContent = task.text;

    if (task.done) li.classList.add("done");

    // Tombol centang & hapus
    const checkBtn = document.createElement("button");
    checkBtn.textContent = "✔️";
    checkBtn.addEventListener("click", () => toggleDone(index));

    const delBtn = document.createElement("button");
    delBtn.textContent = "❌";
    delBtn.addEventListener("click", () => deleteTask(index));

    li.append(checkBtn, delBtn);
    list.appendChild(li);
  });
}

5. Menandai & Menghapus Tugas

function toggleDone(index) {
  tasks[index].done = !tasks[index].done;
  saveTasks();
  renderTasks();
}

function deleteTask(index) {
  if (confirm("Yakin ingin menghapus tugas ini?")) {
    tasks.splice(index, 1);
    saveTasks();
    renderTasks();
  }
}

6. Menyimpan ke LocalStorage

function saveTasks() {
  localStorage.setItem("tasks", JSON.stringify(tasks));
}

Dengan LocalStorage, daftar tugas tetap tersimpan meskipun browser ditutup atau halaman di-refresh.

Studi Kasus Interaktif

Tambah beberapa tugas → muncul di daftar.
Klik tombol ✔️ → tugas berubah jadi garis coret.
Klik ❌ → tugas terhapus.
Refresh halaman → daftar masih ada (tersimpan di LocalStorage).

Kesimpulan

Mini project To-Do List JavaScript ini melatihmu untuk:

Mengelola DOM dan event listener,
Menggunakan array & object untuk menyimpan data,
Menerapkan LocalStorage untuk penyimpanan permanen.

Setelah ini, kamu bisa mengembangkan fitur seperti:

Edit tugas,
Filter tugas selesai / belum,
Sinkronisasi ke database dengan API.