javas.js

const form = document.getElementById("itemForm");
const input = document.getElementById("itemInput");
const daftar = document.getElementById("daftar");
const errorMessage = document.getElementById("errorMessage");

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

items.forEach(function(item) {
    const li = document.createElement("li");
    li.textContent = item.text;
    if (item.selesai) {
        li.classList.add("selesai");
    }
    const tombolHapus = document.createElement("button");
    tombolHapus.textContent = "❌";
    tombolHapus.classList.add("hapus");
    li.appendChild(tombolHapus);
    li.addEventListener("click", function(e) {
        if (e.target.classList.contains("hapus")) {
            // Animasi hilang sebelum remove
            li.classList.add("hilang");
            setTimeout(() => {
                li.remove();
                items = items.filter(i => i.text !== item.text);
                localStorage.setItem("daftarTugas", JSON.stringify(items));
            }, 300); // 300ms sesuai durasi animasi CSS
        } else {
            li.classList.toggle("selesai");
            const data = items.find(i => i.text === item.text);
            if (data) data.selesai = li.classList.contains("selesai");
            localStorage.setItem("daftarTugas", JSON.stringify(items));
        }
    });
    daftar.append(li);
});

form.addEventListener("submit", function(event) {
    event.preventDefault();
    const itemForm = input.value.trim();
    if (itemForm === "") {
        errorMessage.textContent = "Hey isi dulu! Field tidak boleh kosong";
        input.classList.add("invalid");
        return;
    }
    errorMessage.textContent = "";
    input.classList.remove("invalid");
    const li = document.createElement("li");
    li.textContent = itemForm;
    li.classList.add("tampil");
    const tombolHapus = document.createElement("button");
    tombolHapus.textContent = "❌";
    tombolHapus.classList.add("hapus");
    li.appendChild(tombolHapus);
    li.addEventListener("click", function(e) {
        if (e.target.classList.contains("hapus")) {
            li.classList.add("hilang");
            setTimeout(() => {
                li.remove();
                items = items.filter(i => i.text !== itemForm);
                localStorage.setItem("daftarTugas", JSON.stringify(items));
            }, 300);
        } else {
            li.classList.toggle("selesai");
            const data = items.find(i => i.text === itemForm);
            if (data) data.selesai = li.classList.contains("selesai");
            localStorage.setItem("daftarTugas", JSON.stringify(items));
        }
    });
    daftar.append(li);
    items.push({ text: itemForm, selesai: false });
    localStorage.setItem("daftarTugas", JSON.stringify(items));
    
    input.value = "";
});