Checklist em JavaScript

Nesta lição, implementaremos um checklist. Um checklist é um programa que permite criar uma lista de tarefas planejadas e, em seguida, à medida que essas tarefas são realizadas, marcá-las como concluídas.

Vamos fazer com que as tarefas possam ser adicionadas, excluídas, editadas e marcadas como concluídas.

Aqui está um exemplo do que devemos obter (para inserir uma nova tarefa, digite o texto no input e pressione Enter, para editar, faça duplo clique no texto da tarefa):

Vamos começar

Então, vamos começar a implementar a tarefa descrita.

Para começar, vamos escrever o código HTML para o nosso checklist. Suponha que novas tarefas sejam inseridas usando um input e adicionadas a uma lista ul:

<input id="input">
<ul id="list"></ul>

Vamos adicionar imediatamente o código CSS, adicionando um pouco de beleza ao nosso checklist:

body {
	text-align: center;
}
#input, #list {
	display: inline-block;
}
#list {
	padding: 0;
	list-style-type: none;
}

Como de costume, vamos dividir a tarefa complexa em etapas simples.

Como primeira etapa, vamos fazer com que seja possível digitar texto no input, pressionar Enter - e um li seja adicionado ao final do ul com o texto digitado.

Aqui está um esboço do código que implementa o descrito:

let input = document.querySelector('#input');
let list = document.querySelector('#list');

input.addEventListener('keypress', function(event) {
	if (event.key == 'Enter') {
		// aqui estará o código para adicionar um novo li à lista
	}
});

Complete a parte que falta do código para resolver a tarefa descrita.

Modifique a tarefa anterior para que após pressionar a tecla Enter, o texto do input seja limpo.