Persistent To-Do App with JavaScript, Array Methods, and DOM Manipulation

This version keeps all tasks saved in your browser’s storage.

HTML

<div id="todo-app">
  <h1>My To-Do List</h1>
  <input type="text" id="task-input" placeholder="Add a task" />
  <button id="add-btn">Add Task</button>
  <button id="sort-btn">Sort Tasks</button>
  <ul id="task-list"></ul>
</div>

CSS (optional)

<style>
  #task-list li {
    padding: 8px;
    border: 1px solid #ccc;
    margin-bottom: 4px;
    cursor: move;
    list-style: none;
  }

  #task-list li.completed {
    text-decoration: line-through;
    color: gray;
  }
</style>

JavaScript: Persistent Version

<script>
let tasks = [];

// Load tasks from localStorage
function loadTasks() {
  const stored = localStorage.getItem("tasks");
  tasks = stored ? JSON.parse(stored) : [];
}

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

const input = document.getElementById("task-input");
const addBtn = document.getElementById("add-btn");
const sortBtn = document.getElementById("sort-btn");
const taskList = document.getElementById("task-list");

// Render tasks to the DOM
function renderTasks() {
  taskList.innerHTML = "";
  tasks.forEach((task, index) => {
    const li = document.createElement("li");
    li.textContent = task.text;
    li.className = task.completed ? "completed" : "";
    li.draggable = true;

    // Toggle completed
    li.addEventListener("click", () => {
      tasks[index].completed = !tasks[index].completed;
      saveTasks();
      renderTasks();
    });

    // Delete task on double click
    li.addEventListener("dblclick", () => {
      tasks.splice(index, 1);
      saveTasks();
      renderTasks();
    });

    // Drag and drop
    li.addEventListener("dragstart", (e) => {
      e.dataTransfer.setData("text/plain", index);
    });

    li.addEventListener("dragover", (e) => e.preventDefault());

    li.addEventListener("drop", (e) => {
      e.preventDefault();
      const draggedIndex = e.dataTransfer.getData("text");
      const temp = tasks[draggedIndex];
      tasks.splice(draggedIndex, 1);
      tasks.splice(index, 0, temp);
      saveTasks();
      renderTasks();
    });

    taskList.appendChild(li);
  });
}

// Add a new task
addBtn.addEventListener("click", () => {
  const text = input.value.trim();
  if (!text) return;
  tasks.push({ text, completed: false });
  saveTasks();
  input.value = "";
  renderTasks();
});

// Sort tasks alphabetically
sortBtn.addEventListener("click", () => {
  tasks.sort((a, b) => a.text.localeCompare(b.text));
  saveTasks();
  renderTasks();
});

// Add task on Enter key
input.addEventListener("keypress", (e) => {
  if (e.key === "Enter") addBtn.click();
});

// Initialize app
loadTasks();
renderTasks();
</script>

Features Now Include:

1. Add Tasks → Press Enter or click button.
2. Mark Completed → Click a task.
3. Delete Task → Double-click a task.
4. Sort Tasks → Click the sort button.
5. Drag-and-Drop → Reorder tasks by dragging.
6. Persistent Storage → Tasks remain after page reload.