✅ To-Do List — Gestionnaire de tâches
Application web de gestion de tâches avec catégories personnalisées, priorités et persistance des données via localStorage
À propos du projet
To-Do List est une application web de gestion de tâches développée entièrement en JavaScript vanilla, sans aucune dépendance externe. Elle permet à l'utilisateur de créer, organiser, modifier et supprimer ses tâches du quotidien, avec un système de catégories et de priorités.
L'application intègre une persistance des données via localStorage, ce qui signifie que les tâches restent enregistrées même après fermeture du navigateur. Elle propose également un mode sombre/clair dont la préférence est mémorisée entre les sessions.
Fonctionnalités principales
Ajout de tâches
Formulaire complet permettant de saisir une tâche, de choisir sa catégorie (Travail, Personnel, Urgent) et d'affecter une priorité (Haute, Moyenne, Basse).
Catégories personnalisées
Possibilité de créer ses propres catégories à la volée via l'option "Créer une nouvelle catégorie". Les nouvelles catégories sont automatiquement ajoutées aux filtres.
Modification en ligne
Édition directe du texte et de la catégorie d'une tâche grâce à contentEditable, sans quitter la page ni ouvrir de modal. La priorité reste verrouillée.
Filtres dynamiques
Filtrage en temps réel par catégorie et par priorité. Les options du filtre catégorie se mettent à jour automatiquement selon les catégories présentes dans les tâches.
Persistance localStorage
Toutes les tâches sont sérialisées en JSON et stockées dans le localStorage du navigateur. Elles sont rechargées automatiquement à chaque ouverture de la page.
Mode sombre / clair
Bascule entre thème clair et sombre via un bouton dédié. La préférence est sauvegardée dans le localStorage pour être conservée entre les sessions.
Architecture technique
Structure HTML & tableau de tâches
L'interface repose sur un <table> HTML avec un <tbody id="taskList"> rempli dynamiquement par JavaScript. Les colonnes couvrent le texte, la catégorie, la priorité et les actions.
Tableau de données global et persistance
Un tableau global tasks[] centralise toutes les tâches sous forme d'objets { task, category, priority }. La fonction saveTasks() le sérialise en JSON dans le localStorage après chaque opération.
Rendu et filtrage dynamique
La fonction renderTasks() régénère entièrement le tableau à chaque action, en appliquant les filtres actifs de catégorie et de priorité. updateFilterCategories() maintient les options de filtre synchronisées avec les données.
Édition inline avec contentEditable
editTask() active contentEditable="true" sur les cellules modifiables et bascule le bouton en mode "Enregistrer". saveTask() récupère le contenu édité, met à jour tasks[] et désactive l'édition.
Gestion des erreurs et UX
Validation des champs à l'ajout avec affichage d'un message d'erreur animé (opacité en fondu via setTimeout). Réinitialisation automatique du formulaire après ajout réussi.
Compétences acquises
- Manipulation avancée du DOM : création, modification et suppression d'éléments dynamiquement
- Utilisation de localStorage pour la persistance des données côté client
- Gestion d'état avec un tableau global comme source de vérité unique
- Édition inline contentEditable pour une UX fluide sans modal
- Filtrage et rendu conditionnel en JavaScript vanilla
- Gestion du thème sombre/clair avec sauvegarde des préférences utilisateur