En bref
La to-do list est le projet d’apprentissage le plus recommandé du web, et ce n’est pas un hasard : derrière ses trois boutons se cachent tous les mécanismes d’une vraie application, un état qui évolue, une interface qui le reflète, des données qui persistent. Le projet se construit en trois temps. D’abord le squelette : une page HTML propre, un champ de saisie, un bouton et une liste vide, habillés d’un CSS simple. Ensuite le cœur JavaScript : représenter les tâches dans un tableau d’objets, afficher la liste à partir de cet état, puis brancher l’ajout, la suppression et le marquage comme terminé. Enfin la persistance et les extensions : sauvegarder les tâches pour qu’elles survivent au rechargement, ajouter filtres, compteur ou priorités, et mettre le résultat en ligne. Chaque étape produit un résultat visible et chaque difficulté rencontrée correspond à une notion fondamentale : c’est exactement ce qui fait de ce petit projet un si grand professeur.
Tous les parcours d’apprentissage finissent par y passer, au point d’en faire un rite initiatique : le projet to-do list. Sa réputation est méritée, car aucun autre projet ne condense autant de notions fondamentales dans un périmètre aussi rassurant. Voici comment le construire de bout en bout, proprement, en prolongement des 15 idées de projets pour débutant et du guide complet pour apprendre à coder.
Poser le squelette : HTML et CSS
Commence par définir le périmètre par écrit, trois phrases suffisent : l’utilisateur peut ajouter une tâche, la marquer comme faite, la supprimer, et la liste survit au rechargement de la page. Tout le reste, priorités, échéances, catégories, appartient aux extensions et attendra que le socle fonctionne : c’est la discipline qui distingue les projets finis des projets fantômes. Côté structure, une page HTML sobre fait l’affaire : un titre, un formulaire réduit à un champ de saisie et un bouton d’ajout, et une liste vide qui accueillera les tâches. Utilise les balises qui disent ce qu’elles contiennent, un formulaire pour la saisie, une liste pour les tâches, plutôt qu’un empilement de blocs anonymes : cette sémantique te servira au moment de brancher le JavaScript, et elle installe de bons réflexes d’accessibilité. Prends aussi dès maintenant l’habitude professionnelle qui ne coûte rien : un dossier propre, et un premier commit avec Git et GitHub avant même la première ligne de style.
L’habillage CSS mérite une heure, pas une semaine : une largeur de contenu centrée, des espacements réguliers, des boutons visiblement cliquables et un état visuel distinct pour les tâches terminées, texte barré ou estompé. Résiste à la tentation du design spectaculaire à ce stade, il détourne l’énergie du vrai sujet ; en revanche, soigne les détails qui changent l’usage, comme un champ de saisie qui reprend le focus après chaque ajout. Vérifie enfin que ta page reste utilisable sur un écran de téléphone, quitte à approfondir plus tard avec rendre un site responsive. Ce squelette statique a une vertu pédagogique : il matérialise la frontière entre la structure, la présentation et le comportement, les trois couches du web. Tout ce qui va suivre habite la troisième, et c’est précisément parce que les deux premières sont posées proprement que le JavaScript va pouvoir s’y brancher sans douleur.
Le cœur JavaScript : un état et des actions
Voici le moment qui transforme l’exercice en leçon d’architecture : ne code pas ta liste en manipulant directement les éléments de la page, code-la autour d’un état. Concrètement, tes tâches vivent dans un tableau d’objets JavaScript, chaque objet portant un identifiant, un texte et un booléen terminé ; et une fonction unique, appelons-la afficherListe, reconstruit l’affichage à partir de ce tableau. Chaque action de l’utilisateur suit alors le même cycle limpide : modifier le tableau, puis rappeler afficherListe. Ajouter une tâche, c’est pousser un objet dans le tableau ; la supprimer, c’est le retirer ; la marquer comme faite, c’est basculer son booléen. Ce schéma état puis rendu est exactement celui qu’industrialisent les frameworks modernes, et le découvrir à la main sur trente lignes de code, en organisant proprement tes fonctions JavaScript, vaut tous les cours théoriques sur le sujet.
Le branchement des interactions t’apprendra les subtilités du DOM réel. L’ajout passe par l’écoute de la soumission du formulaire, en pensant à empêcher le rechargement de page par défaut et à ignorer les saisies vides. Pour la suppression et le marquage, le piège classique attend tous les débutants : les tâches étant créées dynamiquement, le plus propre est d’écouter les clics sur la liste entière puis d’identifier la tâche concernée par son identifiant, la fameuse délégation d’événements, plutôt que d’attacher un écouteur à chaque bouton. Attends-toi à des bugs, tâche qui ne se supprime pas, affichage dupliqué, et accueille-les comme le programme du jour : chacun désigne une notion à consolider, et la démarche méthodique de débogage, observer, isoler, corriger, s’apprend précisément ici, sur un projet assez petit pour que chaque erreur reste compréhensible. Quand les trois actions fonctionnent, prends dix minutes pour relire et simplifier : ce rituel de relecture est une habitude d’orfèvre qui se prend sur les petits projets.
Persistance, extensions et mise en ligne
Ta liste fonctionne mais oublie tout au rechargement : il est temps de lui donner une mémoire. Le stockage local du navigateur fait parfaitement l’affaire pour ce projet : à chaque modification du tableau, tu en sauvegardes une copie convertie en texte au format JSON, et au chargement de la page, tu recharges ce texte pour reconstruire ton état avant le premier affichage. Cette petite mécanique, sérialiser, stocker, relire, désérialiser, est un condensé de ce que font toutes les applications avec leurs serveurs, et elle t’oblige à gérer ton premier cas limite de données : que faire au tout premier lancement, quand rien n’a encore été sauvegardé. Teste ensuite comme un utilisateur méfiant : recharge en pleine saisie, ajoute vingt tâches, supprime tout ; chaque comportement étrange découvert maintenant est une leçon gratuite. À ce stade, tu tiens une application complète, état, interface, persistance, et tu as le droit d’être fier.
Les extensions transforment alors l’exercice en projet personnel, et c’est leur vraie fonction : choisis-en deux ou trois qui te parlent plutôt que de toutes les empiler. Un compteur de tâches restantes, des filtres toutes, actives, terminées, une édition au double clic, des priorités colorées, une date d’échéance : chacune te fera retraverser le cycle état, actions, affichage avec une difficulté croissante. Termine par le geste qui change le statut du projet : la mise en ligne, en quelques minutes grâce aux solutions de déploiement gratuit, et un README qui raconte tes choix. Une to-do list personnalisée, robuste et accessible en ligne a toute sa place dans un portfolio de débutant, précisément parce que les recruteurs savent tout ce qu’elle cache. Et quand tu voudras la refaire avec un framework ou lui donner un vrai serveur, tu mesureras le chemin parcouru : c’est le même projet, mais ce sera un autre développeur.
Questions fréquentes
Pourquoi la to-do list est-elle le projet débutant par excellence ?
Parce qu’elle condense, dans un périmètre minuscule, tous les mécanismes d’une vraie application : un état qui évolue, une interface qui le reflète, des interactions utilisateur et des données qui persistent. Chaque difficulté rencontrée correspond à une notion fondamentale réutilisable partout.
Faut-il un framework comme React pour coder une to-do list ?
Non, et c’est même déconseillé pour la première version : le JavaScript pur t’oblige à comprendre le cycle état puis affichage que les frameworks automatisent. Refaire ensuite le même projet avec React est d’ailleurs un excellent exercice de comparaison.
Combien de temps faut-il pour terminer ce projet ?
Compte une à deux semaines de sessions courtes pour la version complète avec sauvegarde : un ou deux soirs pour le squelette, quelques sessions pour la logique et ses bugs formateurs, une session pour la persistance, puis le temps que tu choisis d’offrir aux extensions.
Une to-do list a-t-elle sa place dans un portfolio ?
Oui, à condition d’être personnalisée au-delà du tutoriel de base : extensions choisies, design soigné, code propre et projet en ligne avec un README qui explique tes choix. Les recruteurs connaissent la valeur pédagogique de ce projet et regardent précisément ce que tu en as fait.
Sources
Cet article a une vocation informative et pédagogique. Les plateformes, outils et formations éventuellement cités le sont à titre d’exemple ; compare plusieurs options avant de t’engager ou de payer.