Projet JavaScript débutant : une liste de tâches en 4 étapes
Ton objectif : ajouter une tâche, la marquer comme terminée et la supprimer. Tu vas séparer les données de l’affichage, tester chaque comportement et repartir avec un fichier qui fonctionne dans le navigateur. Prérequis : variables, fonctions, tableaux et quelques balises HTML.
Publié par Projet Carthage · Mis à jour le
Essaie le projet terminé
Cet aperçu et son code source téléchargeable fonctionnent sans compte, sans installation et sans service externe.
Ouvre le fichier téléchargé dans ton navigateur. Pour le modifier, utilise un éditeur de texte. La liste repart volontairement de zéro au rechargement.
Explications & Fondations Techniques
1. Décrire les données. Une tâche est un objet avec id, title et done. Le tableau tasks contient toutes les tâches. L’identifiant reste stable même après une suppression : utiliser la position dans le tableau comme identité ferait cibler le mauvais élément après un changement d’ordre.
2. Ajouter sans accepter une saisie vide. addTask nettoie le titre avec trim(), refuse un titre vide ou un identifiant déjà utilisé, puis retourne un nouveau tableau. Les espaces extérieurs disparaissent, mais le texte de la tâche est conservé. Avant l’interface, teste cette fonction avec une liste vide et le titre « Lire la leçon ».
3. Terminer et supprimer. toggleTask utilise map pour copier le tableau en inversant done uniquement pour la tâche visée. removeTask utilise filter pour conserver les autres tâches. Une tâche introuvable ne doit pas faire disparaître une autre tâche. Les tableaux reçus ne sont jamais modifiés par ces trois fonctions.
4. Relier les interactions. Le formulaire écoute submit et appelle preventDefault pour éviter le rechargement. Une case à cocher appelle toggleTask ; un bouton appelle removeTask. Après chaque changement, render reconstruit la liste et son compteur à partir de tasks. C’est la donnée qui décide de l’affichage, plutôt qu’un compteur modifié séparément.
Afficher une saisie comme du texte. Le fichier complet utilise textContent pour le titre et createElement pour les éléments. Une tâche contenant <b>Lire</b> doit afficher ces caractères, pas créer une balise. Cette précaution permet d’éviter qu’une saisie soit interprétée comme du HTML.
Vérifier avant d’ajouter des fonctions. Essaie une saisie vide, deux tâches différentes, deux tâches du même titre, une tâche cochée puis décochée et une suppression. Les identifiants distinguent deux titres identiques. Le compteur doit toujours correspondre au nombre de tâches non terminées. Recharger remet volontairement la démonstration à zéro ; aucune sauvegarde permanente n’est annoncée.
Pour consolider : ajoute ensuite un filtre « À faire », puis écris le test qui prouve que masquer les tâches terminées ne les supprime pas. Quand cette distinction est claire, les projets MAX abordent des contraintes plus poussées, des étapes cumulatives et des tests côté serveur.
Exemple de Code Pratique
Essayer cet exemplefunction addTask(tasks, title, id) {
const clean = title.trim();
if (!clean || tasks.some(task => task.id === id)) return tasks;
return [...tasks, { id, title: clean, done: false }];
}
function toggleTask(tasks, id) {
return tasks.map(task =>
task.id === id ? { ...task, done: !task.done } : task
);
}
function removeTask(tasks, id) {
return tasks.filter(task => task.id !== id);
}
const first = addTask([], " Lire ", 1);
const done = toggleTask(first, 1);
console.log(first[0].title); // Lire
console.log(first[0].done); // false
console.log(done[0].done); // true
console.log(removeTask(done, 1).length); // 0Documentation pour vérifier les notions
Pièges Fréquents & Mauvaises Pratiques
✗ Supprimer le mauvais élément
tasks.splice(tasks.findIndex(task => task.id === id), 1);const remaining = tasks.filter(task => task.id !== id);findIndex renvoie -1 quand la tâche est absente. splice(-1, 1) supprimerait alors la dernière tâche et modifierait le tableau original. filter exprime directement ce qui doit rester.
✗ Confondre titre et identifiant
tasks.filter(task => task.title !== title);tasks.filter(task => task.id !== id);Deux tâches peuvent porter le même titre. Supprimer par identifiant permet de n’en retirer qu’une.
Questions Fréquentes
Faut-il installer React ou Node.js ?▾
Non. Le fichier HTML téléchargeable contient son style et son JavaScript. Ouvre-le directement dans un navigateur récent. React et Node.js ne sont pas nécessaires pour ce projet.
Est-ce que ce projet nécessite le Pass MAX ?▾
Non. Ce guide, sa démonstration et son fichier sont accessibles gratuitement sans compte. Les projets MAX sont des parcours distincts avec sauvegarde, étapes cumulatives et évaluations.
Les tâches restent-elles après rechargement ?▾
Non, ce premier projet garde les données en mémoire. Une sauvegarde avec localStorage constitue une extension possible, avec gestion des données invalides et des erreurs de stockage.
Maîtrisez JavaScript pas à pas
Résolvez des défis interactifs directement dans votre navigateur avec retour immédiat et indices progressifs.