Remove and complete buttons for checklist in JavaScript

In the previous lesson, after solving the problems, you should have obtained the following code:

<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.textContent = this.value; list.appendChild(li); this.value = ''; } });

Let's now add buttons 'remove' and 'done'. Let's design these buttons as span tags. We will also place the task text in the span tag:

input.addEventListener('keypress', function(event) { if (event.key == 'Enter') { let li = document.createElement('li'); let task = document.createElement('span'); task.textContent = this.value; li.appendChild(task); let remove = document.createElement('span'); remove.textContent = 'remove'; li.appendChild(remove); let mark = document.createElement('span'); mark.textContent = 'done'; li.appendChild(mark); list.appendChild(li); this.value = ''; } });

Let's also assign CSS classes to each of the span tags so that they can be accessed via CSS to make the beauty we need:

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.textContent = this.value; li.appendChild(task); let remove = document.createElement('span'); remove.classList.add('remove'); remove.textContent = 'remove'; li.appendChild(remove); let mark = document.createElement('span'); mark.classList.add('mark'); mark.textContent = 'done'; li.appendChild(mark); list.appendChild(li); this.value = ''; } });

Add CSS to assigned classes:

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