Topic 16  JavaScript Projects

Project 1 — To-Do List App

javascript

// Full To-Do List with Local Storage

const input  = document.querySelector(“#task-input”);

const list   = document.querySelector(“#task-list”);

const addBtn = document.querySelector(“#add-btn”);

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

function render() {

  list.innerHTML = “”;

  tasks.forEach((task, i) => {

    const li = document.createElement(“li”);

    li.textContent = task.text;

    if (task.done) li.classList.add(“done”);

    // Toggle done on click

    li.addEventListener(“click”, () => {

      tasks[i].done = !tasks[i].done;

      save();

    });

    // Delete button

    const del = document.createElement(“button”);

    del.textContent = “×”;

    del.addEventListener(“click”, (e) => {

      e.stopPropagation(); // Don’t trigger li click

      tasks.splice(i, 1);

      save();

    });

    li.appendChild(del);

    list.appendChild(li);

  });

}

function save() {

  localStorage.setItem(“tasks”, JSON.stringify(tasks));

  render();

}

addBtn.addEventListener(“click”, () => {

  let text = input.value.trim();

  if (!text) return;

  tasks.push({ text, done: false });

  input.value = “”;

  save();

});

input.addEventListener(“keydown”, (e) => {

  if (e.key === “Enter”) addBtn.click();

});

render(); // Load tasks when page opens