Task Manager App

A Task Manager looks simple, but it secretly trains you on 95% of what front-end devs do every day:

• • Reading user input
• • Updating the DOM based on app state
• • Saving data so it survives page refreshes
• • Organizing logic in classes instead of spaghetti code
• • Handling edge cases (empty tasks, filters, invalid input)

Apps like Todoist, Microsoft To Do, ClickUp, Trello all start from this same idea: a list of items with state (done/not done, priority, tags, etc.). If you can build this project cleanly, you're already thinking like a real JS dev.

Your HTML is split into three main zones:

💡 Tip: When you build other projects (Notes app, Budget tracker, Habit tracker), reuse this same 3-zone layout: inputs → controls/filters → results list.

All the logic lives inside one class:

class TaskManager {
  constructor() {
    this.tasks = this.loadTasks();
    this.currentFilter = 'all';
    this.render();
  }
}

Every instance has:

• • tasks: an array of all task objects
• • currentFilter: which view is active (all, active, completed, high)

Each task looks like:

{
  id: 1732012345678,
  text: "Finish JavaScript lesson",
  priority: "high",
  completed: false,
  createdAt: "2025-11-19T11:30:00.000Z"
}

That's already proper data modeling – which is what you'll do with databases later.

Two key methods:

loadTasks() {
  const saved = localStorage.getItem('tasks');
  return saved ? JSON.parse(saved) : [];
}

saveTasks() {
  localStorage.setItem('tasks', JSON.stringify(this.tasks));
}

localStorage only stores strings, so you convert:

• • Save → JSON.stringify(this.tasks)
• • Load → JSON.parse(saved)

addTask(text, priority) {
  if (!text.trim()) {
    alert('Please enter a task!');
    return;
  }

  const task = {
    id: Date.now(),
    text: text.trim(),
    priority,
    completed: false,
    createdAt: new Date().toISOString()
  };

  this.tasks.unshift(task);
  this.saveTasks();
  this.render();
}

What this teaches you:

• • Input validation – don't accept empty strings
• • Unique IDs – Date.now() is an easy, unique-enough ID for small apps
• • Unshift vs push – unshift() puts new tasks at the top of the list
• • Refresh UI – every change calls saveTasks() then render()

Toggle complete:

toggleTask(id) {
  const task = this.tasks.find(t => t.id === id);
  if (task) {
    task.completed = !task.completed;
    this.saveTasks();
    this.render();
  }
}

Delete task:

deleteTask(id) {
  this.tasks = this.tasks.filter(t => t.id !== id);
  this.saveTasks();
  this.render();
}

Patterns you're learning:

• • find() to get one item from an array
• • filter() to remove items by creating a new array
• • Always treat the array like state → modify → save → re-render

getFilteredTasks() {
  switch (this.currentFilter) {
    case 'active':
      return this.tasks.filter(t => !t.completed);
    case 'completed':
      return this.tasks.filter(t => t.completed);
    case 'high':
      return this.tasks.filter(t => t.priority === 'high');
    default:
      return this.tasks;
  }
}

Then in setFilter:

setFilter(filter) {
  this.currentFilter = filter;

  document.querySelectorAll('.filter-btn').forEach(btn => {
    btn.classList.remove('active');
  });
  event.target.classList.add('active');

  this.render();
}

What you're doing here:

• • Keeping one source of truth: currentFilter
• • Styling the active button with a CSS class
• • Using .filter() to generate the current view

render() {
  const taskList = document.getElementById('taskList');
  const filtered = this.getFilteredTasks();

  if (filtered.length === 0) {
    taskList.innerHTML =
      '<li style="text-align: center; color: #999; padding: 20px;">No tasks to show</li>';
    return;
  }

  taskList.innerHTML = filtered.map(task => `
    <li class="task-item ${task.completed ? 'completed' : ''}">
      <div class="task-content">
        <span>${task.text}</span>
        <span class="priority priority-${task.priority}">
          ${task.priority.toUpperCase()}
        </span>
      </div>
      <div class="task-actions">
        <button class="complete-btn" onclick="taskManager.toggleTask(${task.id})">
          ${task.completed ? '↺' : '✓'}
        </button>
        <button class="delete-btn" onclick="taskManager.deleteTask(${task.id})">✕</button>
      </div>
    </li>
  `).join('');
}

Key patterns:

• • Template literals for clean HTML
• • Using dynamic classes (completed, priority-high, etc.)
• • One .innerHTML = ... per render → avoids many DOM mutations

Global helpers:

function addTask() {
  const input = document.getElementById('taskInput');
  const priority = document.getElementById('prioritySelect').value;
  taskManager.addTask(input.value, priority);
  input.value = '';
}

function filterTasks(filter) {
  taskManager.setFilter(filter);
}

Enter key support:

document.getElementById('taskInput').addEventListener('keypress', (e) => {
  if (e.key === 'Enter') addTask();
});

This is already nice UX – users can quickly hit Enter instead of clicking.

Here's how to use this project to become scary-good at JavaScript: