Checkliste en JavaScript

Dans cette leçon, nous allons implémenter une checkliste. Une checkliste est un programme qui permet de créer une liste de tâches planifiées, puis, au fur et à mesure de leur réalisation, de marquer ces tâches comme accomplies.

Faisons en sorte que les tâches puissent être ajoutées, supprimées, modifiées et marquées comme accomplies.

Voici un exemple de ce que nous devrions obtenir (pour saisir une nouvelle tâche, entrez le texte dans l'input et appuyez sur Entrée, pour modifier effectuez un double-clic sur le texte de la tâche) :

Commençons

Ainsi, commençons la réalisation de la tâche décrite.

Pour commencer, écrivons le code HTML pour notre checkliste. Supposons que les nouvelles tâches soient saisies à l'aide d'un input et ajoutées à la liste ul :

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

Ajoutons immédiatement le code CSS, ajoutant une certaine beauté à notre checkliste :

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

Comme d'habitude, divisons la tâche complexe en étapes simples.

Comme première étape, faisons en sorte qu'on puisse entrer du texte dans l'input, appuyer sur Entrée - et qu'une li avec le texte saisi soit ajoutée à la fin de ul.

Voici l'ébauche de code implémentant ce qui est décrit :

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

input.addEventListener('keypress', function(event) {
	if (event.key == 'Enter') {
		// ici se trouvera le code pour ajouter une nouvelle li à la liste
	}
});

Complétez la partie manquante du code pour résoudre la tâche décrite.

Modifiez la tâche précédente pour que après avoir appuyé sur la touche Entrée, le texte de l'input soit effacé.