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;
}