Lista de verificación en JavaScript

En esta lección implementaremos una lista de verificación. Una lista de verificación es un programa que permite hacer una lista de tareas planificadas, y luego, a medida que se completan estas tareas, marcarlas como realizadas.

Hagamos que las tareas se puedan añadir, eliminar, editar y marcar como realizadas.

He aquí un ejemplo de lo que deberíamos obtener (para introducir una nueva tarea, introduce texto en el input y pulsa Enter, para editar haz doble clic en el texto de la tarea):

Empecemos

Entonces, procedamos a implementar la tarea descrita.

Para empezar, escribamos el código HTML para nuestra lista de verificación. Dejemos que las nuevas tareas se introduzcan mediante un input y se añadan a la lista ul:

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

Inmediatamente añadamos el código CSS, agregando algo de belleza a nuestra lista de verificación:

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

Como es habitual, dividamos la tarea compleja en etapas sencillas.

Como primera etapa, hagamos que se pueda introducir texto en el input, pulsar Enter - y se añada una li al final del ul con el texto introducido.

He aquí un esbozo de código que implementa lo descrito:

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

input.addEventListener('keypress', function(event) {
  if (event.key == 'Enter') {
    // aquí irá el código para añadir una nueva li a la lista
  }
});