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

Кнопки для удаления и завершения в чеклисте на JavaScript

В предыдущем уроке после решения задач у вас должен был получится следующий код:

<input id="input"> <ul id="list"></ul> let input = document.querySelector('#input'); let list = document.querySelector('#list'); input.addEventListener('keypress', function(event) { if (event.key == 'Enter') { let li = document.createElement('li'); li.innerHTML = this.value; list.appendChild(li); this.value = ''; } });

Давайте теперь добавим кнопочки 'удалить' и 'сделано'. Выполним эти кнопочки в виде тегов span. Также в теге span разместим и текст дела:

input.addEventListener('keypress', function(event) { if (event.key == 'Enter') { let li = document.createElement('li'); let task = document.createElement('span'); task.innerHTML = this.value; li.appendChild(task); let remove = document.createElement('span'); remove.innerHTML = 'удалить'; li.appendChild(remove); let mark = document.createElement('span'); mark.innerHTML = 'сделано'; li.appendChild(mark); list.appendChild(li); this.value = ''; } });

Давайте также навесим CSS классы на каждый из тегов span, чтобы к ним можно было обратиться через CSS и навести нужную нам красоту:

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; li.appendChild(task); let remove = document.createElement('span'); task.classList.add('remove'); // добавлено remove.innerHTML = 'удалить'; li.appendChild(remove); let mark = document.createElement('span'); task.classList.add('mark'); // добавлено mark.innerHTML = 'сделано'; li.appendChild(mark); list.appendChild(li); this.value = ''; } });

Добавим CSS к навешенным классам:

#list span { margin-right: 5px; } #list .remove, #list .mark { color: blue; cursor: pointer; } #list .remove:hover, #list .mark:hover { text-decoration: underline; }