# Создание чеклиста на 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(); }); });`
← →
↑