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:

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

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

cssbody {
  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:

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