In this tutorial, we will implement a checklist. A Checklist is a program that allows you to make a list of planned tasks, and then, as these tasks are completed, mark these tasks as done.
Let's make it so that tasks can be added, deleted, edited and marked as done.
Here is an example of what we should get (to enter
a new task - enter the text into the input and
press Enter
, to edit - double-click on the
text of the task):
Let's begin
So, let's start the implementation of the described problem.
First, let's write the HTML code for our checklist.
Let new tasks be introduced using input and
added to the ul
list:
<input id="input">
<ul id="list"></ul>
Immediately add CSS code that adds some beauty to our checklist:
body {
text-align: center;
}
#input, #list {
display: inline-block;
}
#list {
padding: 0;
list-style-type: none;
}
As usual, we break a complex problem into simple steps.
As a first step, we will make it possible
to enter text into the input, press
Enter
- and li
with the
entered text is added to the end of ul
.
Here is a draft code that implements the described:
let input = document.querySelector('#input');
let list = document.querySelector('#list');
input.addEventListener('keypress', function(event) {
if (event.key == 'Enter') {
// here will be the code for adding new li to the list
}
});
Add the missing part of the code to solve the described task.
Modify the previous task so that after
pressing the Enter
key, the
input text is cleared.