TodosController.js

export default class TodosController {
  constructor(model, view) {
    this.model = model;
    this.view = view;
    this.init();
  }

  init() {
    this.view.createView();
    this.setEventListeners();
  }

  setEventListeners() {
    const { input, form, todosList, display } = this.view.cashe;
    form.onsubmit = e => {
      e.preventDefault();
      this.addItem({
        title: input.value,
        id: Math.round(performance.now()),
        done: false
      });
      input.value = "";
    };
    this.model.todos.forEach(item => {
      this.addItem(item);
    });
    todosList.onclick = e => {
      this.doneOrDeleteItem(e.target);
    };
    display.onclick = e => {
      this.controlDisplay(e.target);
    };
  }

  addItem(item) {
    this.model.addItem(item);
  }

  doneOrDeleteItem(target) {
    let id = target.closest(".list-item").dataset.itemid;
    id = Number(id);
    if (target.matches(".delete-item")) {
      this.model.deleteItem(id);
    }
    if (target.matches(".list-item")) {
      this.model.markAsDone(id);
    }
  }

  controlDisplay(target) {
    if (target.matches(".done")) {
      this.model.itemsDone();
    }

    if (target.matches(".all")) {
      this.model.allItems();
    }
  }
}