Создание чеклиста на JavaScript

В данном видео я покажу вам, как создать чеклист на чистом JavaScript. Чеклист представляет собой список задач, которые мы планируем выполнить. Выполненную задачу можно будет отметить специальной галочкой. Кроме того, задачи можно будет редактировать и удалять.

Исходники кода

.done span {
	text-decoration: line-through;
	color: gray;
}

<ul id="checklist"></ul>
<input id="add">

let checklist = document.querySelector('#checklist');
let add = document.querySelector('#add');

add.addEventListener('blur', function() {
	let li = document.createElement('li');
	checklist.appendChild(li);
	
	let span = document.createElement('span');
	span.innerHTML = this.value;
	this.value = '';
	li.appendChild(span);
	span.addEventListener('click', function func() {
		let input = document.createElement('input');
		input.value = this.innerHTML;
		this.innerHTML = '';
		this.appendChild(input);
		
		this.removeEventListener('click', func);
		
		input.addEventListener('blur', function() {
			span.innerHTML = this.value;
			span.addEventListener('click', func);
		});
	});
	
	let checkbox = document.createElement('input');
	checkbox.type = 'checkbox';
	li.appendChild(checkbox);
	checkbox.addEventListener('click', function() {
		li.classList.toggle('done');
	});
	
	let remove = document.createElement('a');
	remove.innerHTML = 'X';
	remove.href = '';
	li.appendChild(remove);
	remove.addEventListener('click', function(event) {
		li.parentElement.removeChild(li);
		
		event.preventDefault();
	});
});