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:

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

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

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

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

Escriba la parte faltante del código para resolver la tarea descrita.

Modifique la tarea anterior para que después de pulsar la tecla Enter ocurra un borrado del texto del input.