Assignment 2 – JavaScript Basics

Task Description

Build an interactive TODO application using vanilla JavaScript. The app must use localStorage for data persistence.

Requirements

• Add new tasks by typing text
• Toggle task completed/incomplete state
• Delete tasks
• Save data to localStorage
• Filter: all / active / completed

Example Code

class TodoApp {
  constructor() {
    this.todos = JSON.parse(localStorage.getItem('todos')) || [];
    this.filter = 'all';
    this.render();
  }

  addTodo(text) {
    this.todos.push({
      id: Date.now(),
      text,
      completed: false,
    });
    this.save();
    this.render();
  }

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

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

  render() {
    // Update DOM...
  }
}

const app = new TodoApp();

Submission

• Deadline: March 21, 2025, 23:59
• Method: GitHub repository link on Moodle
• Grading: Maximum 20 points