On this page

Project: Interactive To-Do List

Checking access...

This project brings together everything from the DOM & Browser APIs module — selecting elements, DOM manipulation, events, event delegation, forms, browser storage, and modern APIs — to build a complete, production-quality to-do list application.

Project Overview

You’ll build a to-do list that:

Add tasks with a title (and optional description)
Mark tasks as complete/incomplete
Delete tasks
Edit existing tasks
Filter tasks (All, Active, Completed)
Persist tasks in localStorage
Count remaining tasks
Use event delegation for efficiency
Has a clean, accessible interface

Step 1: HTML Structure

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
  <meta charset="UTF-8" />
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
  <title>To-Do List</title>
7
  <link rel="stylesheet" href="styles.css" />
8
</head>
9
<body>
10
  <div class="container">
11
    <header>
12
      <h1>To-Do List</h1>
13
    </header>
14

15
    <!-- Add Task Form -->
16
    <form id="todo-form" class="todo-form">
17
      <div class="input-group">
18
        <input
19
          type="text"
20
          id="todo-input"
21
          placeholder="What needs to be done?"
22
          required
23
          autofocus
24
        />
25
        <button type="submit">Add</button>
26
      </div>
27
    </form>
28

29
    <!-- Filters -->
30
    <div class="filters">
31
      <button class="filter-btn active" data-filter="all">All</button>
32
      <button class="filter-btn" data-filter="active">Active</button>
33
      <button class="filter-btn" data-filter="completed">Completed</button>
34
    </div>
35

36
    <!-- Task List -->
37
    <ul id="todo-list" class="todo-list">
38
      <!-- Tasks rendered by JavaScript -->
39
    </ul>
40

41
    <!-- Empty State -->
42
    <div id="empty-state" class="empty-state">
43
      <p>No tasks yet. Add one above!</p>
44
    </div>
45

46
    <!-- Footer -->
47
    <div class="todo-footer">
48
      <span id="task-count">0 tasks remaining</span>
49
      <button id="clear-completed" class="clear-btn">Clear Completed</button>
50
    </div>
51
  </div>
52

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

Step 2: CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  padding: 2rem 1rem;
}

.container {
  max-width: 550px;
  margin: 0 auto;
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

header {
  background: #f8f9fa;
  padding: 1.5rem;
  border-bottom: 1px solid #e9ecef;
}

header h1 {
  text-align: center;
  color: #333;
  font-size: 1.5rem;
}

/* Form */
.todo-form {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #e9ecef;
}

.input-group {
  display: flex;
  gap: 0.5rem;
}

#todo-input {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 2px solid #dee2e6;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.2s;
}

#todo-input:focus {
  outline: none;
  border-color: #667eea;
}

.input-group button {
  padding: 0.75rem 1.5rem;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s;
}

.input-group button:hover {
  background: #5a6fd6;
}

/* Filters */
.filters {
  display: flex;
  gap: 0.25rem;
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid #e9ecef;
  justify-content: center;
}

.filter-btn {
  padding: 0.4rem 1rem;
  border: 1px solid #dee2e6;
  background: white;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.2s;
}

.filter-btn:hover {
  background: #f0f0f0;
}

.filter-btn.active {
  background: #667eea;
  color: white;
  border-color: #667eea;
}

/* Task List */
.todo-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.todo-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.5rem;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.15s;
}

.todo-item:hover {
  background: #fafafa;
}

.todo-item:last-child {
  border-bottom: none;
}

/* Checkbox */
.todo-checkbox {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: #667eea;
  flex-shrink: 0;
}

/* Task content */
.todo-content {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.todo-text {
  font-size: 1rem;
  color: #333;
  word-break: break-word;
}

.todo-item.completed .todo-text {
  text-decoration: line-through;
  color: #adb5bd;
}

/* Edit input */
.edit-input {
  flex: 1;
  padding: 0.3rem 0.5rem;
  border: 2px solid #667eea;
  border-radius: 4px;
  font-size: 1rem;
}

/* Action buttons */
.todo-actions {
  display: flex;
  gap: 0.25rem;
  opacity: 0;
  transition: opacity 0.15s;
}

.todo-item:hover .todo-actions {
  opacity: 1;
}

.action-btn {
  padding: 0.3rem 0.6rem;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8rem;
  transition: all 0.15s;
}

.edit-btn {
  background: #e7f5ff;
  color: #1c7ed6;
}

.edit-btn:hover {
  background: #d0ebff;
}

.delete-btn {
  background: #fff5f5;
  color: #c92a2a;
}

.delete-btn:hover {
  background: #ffe3e3;
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
  color: #adb5bd;
  display: none;
}

.empty-state.visible {
  display: block;
}

/* Footer */
.todo-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85rem 1.5rem;
  background: #f8f9fa;
  border-top: 1px solid #e9ecef;
  font-size: 0.85rem;
  color: #868e96;
}

.clear-btn {
  padding: 0.3rem 0.75rem;
  border: 1px solid #dee2e6;
  background: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8rem;
  color: #c92a2a;
  transition: all 0.15s;
}

.clear-btn:hover {
  background: #fff5f5;
}

.clear-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

Step 3: JavaScript

1
class TodoApp {
2
  constructor() {
3
    // DOM references
4
    this.form = document.getElementById("todo-form");
5
    this.input = document.getElementById("todo-input");
6
    this.list = document.getElementById("todo-list");
7
    this.emptyState = document.getElementById("empty-state");
8
    this.taskCount = document.getElementById("task-count");
9
    this.clearCompleted = document.getElementById("clear-completed");
10

11
    // State
12
    this.todos = this.loadTodos();
13
    this.currentFilter = "all";
14

15
    this.init();
16
  }
17

18
  init() {
19
    // Event listeners
20
    this.form.addEventListener("submit", (e) => this.handleAdd(e));
21
    this.list.addEventListener("click", (e) => this.handleListClick(e));
22
    this.list.addEventListener("dblclick", (e) => this.handleDoubleClick(e));
23
    this.list.addEventListener("keydown", (e) => this.handleListKeydown(e));
24
    this.clearCompleted.addEventListener("click", () => this.clearCompletedTodos());
25

26
    // Filter buttons
27
    document.querySelectorAll(".filter-btn").forEach((btn) => {
28
      btn.addEventListener("click", () => {
29
        document.querySelectorAll(".filter-btn").forEach((b) => b.classList.remove("active"));
30
        btn.classList.add("active");
31
        this.currentFilter = btn.dataset.filter;
32
        this.render();
33
      });
34
    });
35

36
    // Initial render
37
    this.render();
38
  }
39

40
  // --- Data persistence ---
41
  loadTodos() {
42
    try {
43
      const data = localStorage.getItem("todos");
44
      return data ? JSON.parse(data) : [];
45
    } catch {
46
      return [];
47
    }
48
  }
49

50
  saveTodos() {
51
    try {
52
      localStorage.setItem("todos", JSON.stringify(this.todos));
53
    } catch (e) {
54
      console.warn("Failed to save todos:", e);
55
    }
56
  }
57

58
  // --- CRUD operations ---
59
  handleAdd(event) {
60
    event.preventDefault();
61
    const text = this.input.value.trim();
62
    if (!text) return;
63

64
    this.todos.push({
65
      id: Date.now(),
66
      text,
67
      completed: false,
68
      createdAt: new Date().toISOString(),
69
    });
70

71
    this.input.value = "";
72
    this.saveTodos();
73
    this.render();
74
    this.input.focus();
75
  }
76

77
  handleListClick(event) {
78
    const target = event.target;
79
    const item = target.closest(".todo-item");
80
    if (!item) return;
81

82
    const id = parseInt(item.dataset.id);
83

84
    // Checkbox toggle
85
    if (target.classList.contains("todo-checkbox")) {
86
      this.toggleTodo(id);
87
      return;
88
    }
89

90
    // Action buttons
91
    if (target.classList.contains("delete-btn")) {
92
      this.deleteTodo(id);
93
      return;
94
    }
95

96
    if (target.classList.contains("edit-btn")) {
97
      this.startEditing(id);
98
      return;
99
    }
100
  }
101

102
  handleDoubleClick(event) {
103
    const item = event.target.closest(".todo-item");
104
    if (!item) return;
105
    const id = parseInt(item.dataset.id);
106
    this.startEditing(id);
107
  }
108

109
  handleListKeydown(event) {
110
    if (event.key === "Enter") {
111
      const editInput = event.target.closest(".edit-input");
112
      if (editInput) {
113
        const item = editInput.closest(".todo-item");
114
        const id = parseInt(item.dataset.id);
115
        this.saveEdit(id, editInput.value);
116
      }
117
    }
118

119
    if (event.key === "Escape") {
120
      const editInput = event.target.closest(".edit-input");
121
      if (editInput) {
122
        const item = editInput.closest(".todo-item");
123
        const id = parseInt(item.dataset.id);
124
        this.cancelEditing(id);
125
      }
126
    }
127
  }
128

129
  toggleTodo(id) {
130
    const todo = this.todos.find((t) => t.id === id);
131
    if (todo) {
132
      todo.completed = !todo.completed;
133
      this.saveTodos();
134
      this.render();
135
    }
136
  }
137

138
  deleteTodo(id) {
139
    this.todos = this.todos.filter((t) => t.id !== id);
140
    this.saveTodos();
141
    this.render();
142
  }
143

144
  startEditing(id) {
145
    // Cancel any existing editing
146
    this.todos.forEach((t) => (t.editing = false));
147

148
    const todo = this.todos.find((t) => t.id === id);
149
    if (todo) {
150
      todo.editing = true;
151
      this.render();
152

153
      // Focus and select the edit input
154
      const item = this.list.querySelector(`[data-id="${id}"]`);
155
      const editInput = item?.querySelector(".edit-input");
156
      if (editInput) {
157
        editInput.focus();
158
        editInput.select();
159
      }
160
    }
161
  }
162

163
  saveEdit(id, newText) {
164
    const text = newText.trim();
165
    if (text) {
166
      const todo = this.todos.find((t) => t.id === id);
167
      if (todo) {
168
        todo.text = text;
169
        todo.editing = false;
170
        this.saveTodos();
171
        this.render();
172
      }
173
    } else {
174
      this.deleteTodo(id);
175
    }
176
  }
177

178
  cancelEditing(id) {
179
    const todo = this.todos.find((t) => t.id === id);
180
    if (todo) {
181
      todo.editing = false;
182
      this.render();
183
    }
184
  }
185

186
  clearCompletedTodos() {
187
    const hadCompleted = this.todos.some((t) => t.completed);
188
    if (!hadCompleted) return;
189

190
    this.todos = this.todos.filter((t) => !t.completed);
191
    this.saveTodos();
192
    this.render();
193
  }
194

195
  // --- Filtering ---
196
  getFilteredTodos() {
197
    switch (this.currentFilter) {
198
      case "active":
199
        return this.todos.filter((t) => !t.completed);
200
      case "completed":
201
        return this.todos.filter((t) => t.completed);
202
      default:
203
        return this.todos;
204
    }
205
  }
206

207
  // --- Rendering ---
208
  render() {
209
    const filtered = this.getFilteredTodos();
210
    const activeCount = this.todos.filter((t) => !t.completed).length;
211

212
    // Render items
213
    if (filtered.length === 0) {
214
      this.list.innerHTML = "";
215
      this.emptyState.classList.add("visible");
216

217
      const messages = {
218
        all: "No tasks yet. Add one above!",
219
        active: "No active tasks. Great job! 🎉",
220
        completed: "No completed tasks yet.",
221
      };
222
      this.emptyState.querySelector("p").textContent = messages[this.currentFilter];
223
    } else {
224
      this.list.innerHTML = filtered
225
        .map((todo) => this.renderItem(todo))
226
        .join("");
227
      this.emptyState.classList.remove("visible");
228
    }
229

230
    // Update counts
231
    this.taskCount.textContent = `${activeCount} task${activeCount !== 1 ? "s" : ""} remaining`;
232

233
    // Update clear completed button
234
    const hasCompleted = this.todos.some((t) => t.completed);
235
    this.clearCompleted.disabled = !hasCompleted;
236
  }
237

238
  renderItem(todo) {
239
    const isEditing = todo.editing || false;
240

241
    if (isEditing) {
242
      return `
243
        <li class="todo-item" data-id="${todo.id}">
244
          <input class="edit-input" type="text" value="${this.escapeHtml(todo.text)}" />
245
        </li>
246
      `;
247
    }
248

249
    return `
250
      <li class="todo-item ${todo.completed ? "completed" : ""}" data-id="${todo.id}">
251
        <input
252
          class="todo-checkbox"
253
          type="checkbox"
254
          ${todo.completed ? "checked" : ""}
255
          aria-label="Mark '${this.escapeHtml(todo.text)}' as ${todo.completed ? "incomplete" : "complete"}"
256
        />
257
        <span class="todo-text">${this.escapeHtml(todo.text)}</span>
258
        <div class="todo-actions">
259
          <button class="action-btn edit-btn" aria-label="Edit task">Edit</button>
260
          <button class="action-btn delete-btn" aria-label="Delete task">Delete</button>
261
        </div>
262
      </li>
263
    `;
264
  }
265

266
  escapeHtml(str) {
267
    const div = document.createElement("div");
268
    div.textContent = str;
269
    return div.innerHTML;
270
  }
271
}
272

273
// Initialise the app
274
document.addEventListener("DOMContentLoaded", () => {
275
  new TodoApp();
276
});

Step 4: Run It

Open index.html in your browser. The app should be fully functional:

Type a task and press Enter or click Add
Click the checkbox to toggle completion
Hover over a task to reveal Edit and Delete buttons
Double-click a task to edit it inline
Use the filter buttons to switch views
Click Clear Completed to remove finished tasks
Close and reopen the page — tasks persist via localStorage

Extension Ideas

Due dates: Add a date input field with sorting by due date (overdue tasks highlighted in red)
Categories/Projects: Allow grouping tasks into categories with a dropdown filter
Drag and drop reordering: Use the Drag and Drop API to reorder tasks
Dark mode: Add a theme toggle persisted in localStorage
Keyboard shortcuts: n for new task, Ctrl+z for undo, ? for help
Export/Import: Add JSON export and import for backup
Voice input: Use the Web Speech API for adding tasks by voice