Application de gestion de tâches avancée
Organisez. Priorisez. Accomplissez.
ToDo Pro est une application web moderne de gestion de tâches conçue pour aller bien au-delà du simple to-do basique. Elle offre un système complet de priorités, de deadlines, de filtres dynamiques et de drag & drop, le tout dans une interface au design glassmorphism premium avec support dark/light mode.
Projet universitaire — développé en HTML / CSS / JavaScript pur (aucun framework).
| Fonctionnalité | Description |
|---|---|
| 🎯 Priorités | Trois niveaux : Haute 🔴, Moyenne 🟡, Basse 🟢 avec indicateurs visuels |
| 📅 Deadlines | Sélection de date avec détection automatique des retards et tâches du jour |
| 🔍 Filtres dynamiques | Par statut (toutes, en cours, terminées, en retard) et par priorité |
| 🌙 Dark / Light Mode | Basculement fluide entre thèmes avec sauvegarde de la préférence |
| 🔥 Drag & Drop | Réorganisation des tâches par glisser-déposer |
| 🏷️ Catégories | Général, Travail, Études, Personnel |
| 📊 Statistiques | Compteurs animés + barre de progression en temps réel |
| ✏️ Édition modale | Modification complète des tâches via un modal élégant |
| 🔔 Notifications Toast | Feedback visuel sur chaque action utilisateur |
| 🔤 Tri multi-critères | Par date, priorité, deadline ou ordre alphabétique |
| 🔎 Recherche | Recherche instantanée avec debounce |
| 💾 Persistance | Sauvegarde automatique dans localStorage |
| 📱 Responsive | Interface adaptée mobile, tablette et desktop |
- HTML5 — Structure sémantique (
header,section,footer,form) - CSS3 — Variables CSS, Flexbox, Grid, animations,
backdrop-filter, media queries - JavaScript ES6+ — Manipulation DOM avancée,
localStorage, Event delegation, Drag & Drop API
├── Manipulation DOM avancée (createElement, classList, dataset, innerHTML)
├── Event delegation (un seul listener sur le parent)
├── localStorage (JSON.parse / JSON.stringify)
├── Drag & Drop API natif (dragstart, dragover, drop...)
├── Debounce (recherche en temps réel optimisée)
├── requestAnimationFrame (animation des compteurs)
├── Template literals (rendu dynamique du HTML)
└── Fonctions utilitaires (generateId, formatDate, escapeHTML...)
- Un navigateur web moderne (Chrome, Firefox, Edge, Safari)
- Aucune dépendance, aucun serveur requis
# 1. Cloner le dépôt
git clone https://github.com/Ahmedbrg/ToDo-Pro.git
# 2. Ouvrir dans le navigateur
# Double-cliquer sur index.html
# ou utiliser Live Server dans VS Code💡 Astuce : utilisez l'extension Live Server dans VS Code pour un rechargement automatique.
ToDo-Pro/
├── index.html # Structure HTML de l'application
├── style.css # Styles avec thèmes dark/light et animations
├── app.js # Logique JavaScript (DOM, localStorage, drag & drop)
└── README.md # Documentation du projet
L'application utilise un design glassmorphism moderne :
- 🌌 Arrière-plan animé avec des orbes flottants
- 🪟 Effets de verre (
backdrop-filter: blur) sur les cartes - 🎨 Palette harmonieuse : violet (
#7c5cfc), cyan (#00d4aa), rouge (#ff4d6a) - ✨ Micro-animations : hover, slide-in/out, compteurs, bounce
- 🔤 Typographie : Inter (Google Fonts)
Interface principale avec le thème sombre par défaut, orbes animés en arrière-plan et cartes glassmorphism.
Basculez avec le toggle ☀️/🌙 en haut à droite — la préférence est sauvegardée automatiquement.
- Ajouter une tâche — Remplissez le champ texte, choisissez priorité/deadline/catégorie, puis cliquez sur
+ Ajouter - Compléter une tâche — Cliquez sur la checkbox à gauche de la tâche
- Modifier une tâche — Survolez la tâche et cliquez sur ✏️
- Supprimer une tâche — Survolez la tâche et cliquez sur 🗑️
- Filtrer — Utilisez les boutons de filtre par statut ou par priorité
- Rechercher — Tapez dans la barre de recherche pour filtrer instantanément
- Trier — Sélectionnez un critère de tri dans le menu déroulant
- Réorganiser — Glissez-déposez les tâches pour changer leur ordre
- Actions en masse — Supprimez toutes les terminées ou terminez tout d'un coup
Ahmed Berguiga
- GitHub : @Ahmedbrg
Ce projet est sous licence MIT — libre d'utilisation, de modification et de distribution.
Fait avec ❤️ pour un projet universitaire — 2026