Checklist in JavaScript

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.

enru