Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
class Task {
constructor(title) {
this.title = title;
this.isDone = false;
}
render() {
this.element = document.createElement('li');
this.element.innerText = this.title;
this.element.className = this.isDone && 'done';
this.checkbox = document.createElement('input');
this.checkbox.type = 'checkbox';
this.checkbox.onchange = this.toggle.bind(this);
this.element.prepend(this.checkbox);
this.deleteButton = document.createElement('button');
this.deleteButton.type = 'button';
this.deleteButton.innerText = 'delete';
this.deleteButton.onclick = this.destroy.bind(this);
this.element.append(this.deleteButton);
return this.element;
}
toggle() {
this.isDone = !this.isDone;
this.element.className = this.isDone && 'done';
}
destroy() {
this.element.remove();
}
}
class List {
constructor(container) {
this.container = container;
this.tasks = [];
}
render() {
this.element = document.createElement('ul');
this.container.append(this.element);
}
add(title) {
const task = new Task(title);
this.element.append(task.render());
this.tasks.push(task);
}
}
const list = new List(document.getElementById('todo'));
document.getElementById('form').onsubmit = (event) => {
const el = document.getElementById('task');
list.add(el.value);
el.value = '';
el.focus();
event.preventDefault();
};
list.render();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.