Dynamic To-Do App with JavaScript: Array Methods + DOM Manipulation

This app will allow you to:

1. Add tasks
2. Mark tasks as completed
3. Delete tasks
4. Sort tasks
5. Drag-and-drop tasks to reorder

HTML Structure

<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, for clarity)

<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: Array + DOM + Events

<script>
let tasks = []; // array to store 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 the tasks
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;
      renderTasks();
    });

    // Delete task on double click
    li.addEventListener("dblclick", () => {
      tasks.splice(index, 1);
      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);
      renderTasks();
    });

    taskList.appendChild(li);
  });
}

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

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

// Optional: Press Enter to add task
input.addEventListener("keypress", (e) => {
  if (e.key === "Enter") addBtn.click();
});
</script>

Features in Action

1. Add Tasks → Enter text and click "Add Task" or press Enter.
2. Mark Completed → Click a task to toggle completion.
3. Delete Task → Double-click a task to remove it.
4. Sort Tasks → Click "Sort Tasks" to reorder alphabetically.
5. Drag-and-Drop → Drag a task to change its order.

How This Combines Everything

• Array Methods: push, splice, sort, and array indexing for manipulation.
• DOM Manipulation: createElement, appendChild, innerHTML, className.
• Event Handling: click, dblclick, dragstart, drop, dragover, keypress.
• Dynamic Rendering: renderTasks() updates the UI every time the array changes.