MVC and Architecture

// Model — pure data + business rules
class TodoModel {
  private todos: Todo[] = [];

  getAll() { return [...this.todos]; }

  add(text: string): Todo {
    const todo = { id: Date.now(), text, done: false };
    this.todos.push(todo);
    return todo;
  }

  toggle(id: number) {
    const todo = this.todos.find(t => t.id === id);
    if (todo) todo.done = !todo.done;
  }

  delete(id: number) {
    this.todos = this.todos.filter(t => t.id !== id);
  }
}

// View — renders HTML, emits user events
class TodoView {
  private addBtn = document.getElementById('add-btn')!;
  private input = document.getElementById('new-todo') as HTMLInputElement;
  private list = document.getElementById('todo-list')!;

  onAdd?: (text: string) => void;

  constructor() {
    this.addBtn.addEventListener('click', () => {
      this.onAdd?.(this.input.value);
      this.input.value = '';
    });
  }

  render(todos: Todo[]) {
    this.list.innerHTML = todos.map(t => \`
      <li data-id="\${t.id}" class="\${t.done ? 'done' : ''}">
        \${t.text}
      </li>\`).join('');
  }
}

// Controller — connects Model and View
class TodoController {
  constructor(private model: TodoModel, private view: TodoView) {
    this.view.onAdd = (text) => {
      this.model.add(text);
      this.view.render(this.model.getAll());
    };
    this.view.render(this.model.getAll());
  }
}

new TodoController(new TodoModel(), new TodoView());