вопросы пишите мне в телеграмм +375298176892
можно скачать офлайн версию сайта: code.mu old.code.mu

Окончательный код на JavaScript

Вот окончательный вариант того, что у нас должно получится:

body { text-align: center; } #input, #list { display: inline-block; } #list { padding: 0; list-style-type: none; } #list span { margin-right: 5px; } #list .remove, #list .mark { color: blue; cursor: pointer; } #list .remove:hover, #list .mark:hover { text-decoration: underline; } #list .done .task { text-decoration: line-through; } <div id="wrapper"> <input id="input"><br> <ul id="list"></ul> </div> let input = document.querySelector('#input'); let list = document.querySelector('#list'); input.addEventListener('keypress', function(event) { if (event.key == 'Enter') { let li = document.createElement('li'); let task = document.createElement('span'); task.classList.add('task'); task.innerHTML = this.value; task.addEventListener('dblclick', function() { let text = this.innerHTML; this.innerHTML = ''; let edit = document.createElement('input'); edit.value = text; this.appendChild(edit); let self = this; edit.addEventListener('keypress', function(event) { if (event.key == 'Enter') { self.innerHTML = this.value; } }); }); li.appendChild(task); let remove = document.createElement('span'); remove.innerHTML = 'удалить'; remove.classList.add('remove'); remove.addEventListener('click', function() { this.parentElement.parentElement.removeChild(this.parentElement); }); li.appendChild(remove); let mark = document.createElement('span'); mark.innerHTML = 'сделано'; mark.classList.add('mark'); mark.addEventListener('click', function() { this.parentElement.classList.add('done'); }); li.appendChild(mark); list.appendChild(li); this.value = ''; } });

: