oop-example.js

function App(title, type) {
  this.title = title;
  this.body = document.querySelector('body');
}

App.prototype.contTemplate = function() {
  this.contTmpl = document.createElement('div');
  this.contTmpl.classList.add('tasks-cont');
};

App.prototype.render = function() {
  this.contTemplate();
  document.body.appendChild(this.contTmpl);
};

function Task(title, id, type) {
  this.title = title;
  this.id = id;
  this.completed = false;
  this.typeTask = type || 'regular';
}

Task.prototype.template = function() {
  var htmlTemplate = document.createElement('div');
  htmlTemplate
    .setAttribute('data-id', this.id);

  htmlTemplate
    .classList
    .add('task', (this.typeTask == 'regular' ? 'task-default' : 'task-urgent'));

  var span = document.createElement('span');
  var spanContent = document.createTextNode(this.title);
  span.appendChild(spanContent);

  var checkbox = document.createElement('input');
  checkbox.type = 'checkbox';
  checkbox.name = 'name';
  // checkbox.value = 'false';
  checkbox
    .setAttribute('cont-id', this.id);

  htmlTemplate.appendChild(span);
  htmlTemplate.appendChild(checkbox);

  this.event(checkbox, 'change');

  return htmlTemplate;
};

Task.prototype.complete = function(event) {
  var isChecked = event.target.checked;
  var dataId = event.target.getAttribute('cont-id');
  var el = document.querySelector('[data-id="' + dataId + '"]');

  if (isChecked) {
    el.classList.add('complete');
  } else {
    el.classList.remove('complete');
  }

};

Task.prototype.event = function(el, event) {
  el.addEventListener(event, this.complete.bind(this));
};

function RegularTask(title, id) {
  Task.call(this, title, id);
}

RegularTask.prototype = Object.create(Task.prototype);

function UrgentTask(title, id) {
  Task.call(this, title, id, 'urgent');
};

UrgentTask.prototype = Object.create(Task.prototype);

function TaskManager() {
  this.id = 0;
}

TaskManager.prototype.getId = function() {
  return this.id++;
};

TaskManager.prototype.add = function(title) {
  var taskId = this.getId()
  var task = new RegularTask(title, taskId);
  var html = task.template();
  this.render(task.typeTask, html);
};

TaskManager.prototype.addUrgent = function(title) {
  var taskId = this.getId();
  var task = new UrgentTask(title, taskId);
  var html = task.template();
  this.render(task.typeTask, html);
};

TaskManager.prototype.render = function(type, html) {
  var taskcont = document.querySelector('.tasks-cont');
  if (type === 'regular') {
    taskcont.appendChild(html);
  }else {
    taskcont.insertBefore(html, taskcont.childNodes[0]);
  }
};

var myApp = new App('js Tasks');
myApp.render();

myTm = new TaskManager();