Build a Complete Interactive App

It's time to apply everything you've learned! This final project combines HTML structure, CSS styling, and JavaScript functionality to create a real, production-ready application.

You'll implement features like adding tasks, marking them complete, filtering, local storage persistence, and responsive design.

This project demonstrates how all JavaScript concepts work together: DOM manipulation, events, arrays, objects, local storage, and more.

// Complete To-Do Application JavaScript

class TodoApp {
  constructor() {
    this.todos = this.loadTodos();
    this.filter = 'all';
    this.init();
  }

  init() {
    this.renderTodos();
    this.attachEventListeners();
  }

  attachEventListeners() {
    const form = document.getElementById('todoForm');
    const input = document.getElementById('todoInput');
    const filterBtns = document.querySelectorAll('.filter-btn');

    form.addEventListener('submit', (e) => {
      e.preventDefault();
      this.addTodo(input.value.trim());
      input.value = '';
    });

    filterBtns.forEach(btn => {
      btn.addEventListener('click', (e) => {
        this.setFilter(e.target.dataset.filter);
      });
    });
  }

  addTodo(text) {
    if (!text) return;

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

    this.todos.push(todo);
    this.saveTodos();
    this.renderTodos();
  }

  toggleTodo(id) {
    const todo = this.todos.find(t => t.id === id);
    if (todo) {
      todo.completed = !todo.completed;
      this.saveTodos();
      this.renderTodos();
    }
  }

  deleteTodo(id) {
    this.todos = this.todos.filter(t => t.id !== id);
    this.saveTodos();
    this.renderTodos();
  }

  setFilter(filter) {
    this.filter = filter;
    document.querySelectorAll('.filter-btn').forEach(btn => {
      btn.classList.toggle('active',
        btn.dataset.filter === filter);
    });
    this.renderTodos();
  }

  getFilteredTodos() {
    switch(this.filter) {
      case 'active':
        return this.todos.filter(t => !t.completed);
      case 'completed':
        return this.todos.filter(t => t.completed);
      default:
        return this.todos;
    }
  }

  renderTodos() {
    const container = document.getElementById('todoList');
    const filtered = this.getFilteredTodos();

    if (filtered.length === 0) {
      container.innerHTML =
        '<p class="empty">No tasks found</p>';
      return;
    }

    container.innerHTML = filtered.map(todo => `
      <div class="todo-item ${todo.completed ? 'completed' : ''}">
        <input type="checkbox"
          ${todo.completed ? 'checked' : ''}
          onchange="app.toggleTodo(${todo.id})">
        <span>${this.escapeHtml(todo.text)}</span>
        <button onclick="app.deleteTodo(${todo.id})">
          Delete
        </button>
      </div>
    `).join('');

    this.updateStats();
  }

  updateStats() {
    const total = this.todos.length;
    const completed = this.todos.filter(t => t.completed).length;
    const active = total - completed;

    document.getElementById('stats').innerHTML = `
      Total: ${total} | Active: ${active} | Completed: ${completed}
    `;
  }

  saveTodos() {
    localStorage.setItem('todos', JSON.stringify(this.todos));
  }

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

  escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
  }
}

// Initialize app
const app = new TodoApp();

• Class-Based Structure - Organized code using ES6 classes
• Local Storage - Persist todos across browser sessions
• CRUD Operations - Create, Read, Update, Delete tasks
• Filtering - Show all, active, or completed tasks
• Event Handling - Form submission, clicks, checkboxes
• DOM Manipulation - Dynamic rendering of task list
• Data Validation - Input sanitization and validation
• Statistics - Real-time count of tasks
• Responsive Design - Mobile-friendly interface

<div class="todo-app">
  <h1>📝 My To-Do List</h1>

  <form id="todoForm">
    <input
      type="text"
      id="todoInput"
      placeholder="What needs to be done?"
      required
      autocomplete="off">
    <button type="submit">Add Task</button>
  </form>

  <div class="filters">
    <button class="filter-btn active" data-filter="all">All</button>
    <button class="filter-btn" data-filter="active">Active</button>
    <button class="filter-btn" data-filter="completed">Completed</button>
  </div>

  <div id="todoList"></div>

  <div id="stats" class="stats">Total: 0 | Active: 0 | Completed: 0</div>

  <div class="footer">
    <button id="clearCompleted">Clear Completed</button>
    <button id="clearAll">Clear All</button>
  </div>
</div>