Aller au contenu principal

Projet final 1

Objectif​

Valider tous les acquis en créant un mini site web interactif complet. Mettre en pratique la logique, HTML, CSS et JavaScript dans un projet concret.

Théorie​

Présentation du projet​

Vous allez créer une application web complète qui démontre toutes les compétences acquises.

Objectif du projet : Créer un Gestionnaire de Projets Personnels - une application web qui permet de gérer des projets avec leurs tâches.

Spécifications fonctionnelles​

Fonctionnalités principales :

  1. Gestion de projets

    • Créer un nouveau projet (nom, description, date)
    • Afficher la liste des projets
    • Supprimer un projet
    • Marquer un projet comme terminé

  2. Gestion de tâches

    • Ajouter des tâches à un projet
    • Afficher les tâches d'un projet
    • Marquer une tâche comme terminée
    • Supprimer une tâche

  3. Interface utilisateur

    • Design moderne et responsive
    • Navigation intuitive
    • Feedback visuel (messages de succès/erreur)
    • Animations subtiles

  4. Persistance des données

    • Sauvegarder dans le localStorage du navigateur
    • Charger les données au démarrage
    • Gérer la synchronisation

Structure technique​

Fichiers du projet :

mon-projet/
├── index.html          # Structure principale
├── style.css           # Styles (ou style.scss)
├── script.js           # Logique JavaScript
└── README.md           # Documentation

Technologies utilisées :

  • HTML5 (structure sémantique)
  • CSS3 (ou SCSS) (design moderne)
  • JavaScript (logique et interactivité)
  • Tailwind CSS (optionnel, pour accélérer)

Architecture du code​

Organisation JavaScript :

// Structure de données
let projets = [];

// Classes
class Projet {
    constructor(nom, description, date) {
        this.id = Date.now();
        this.nom = nom;
        this.description = description;
        this.date = date;
        this.termine = false;
        this.taches = [];
    }
}

class Tache {
    constructor(titre, description) {
        this.id = Date.now();
        this.titre = titre;
        this.description = description;
        this.termine = false;
    }
}

// Fonctions de gestion
function creerProjet(nom, description, date) {
    // Logique
}

function afficherProjets() {
    // Affichage
}

function sauvegarderDonnees() {
    // localStorage
}

function chargerDonnees() {
    // localStorage
}

// Initialisation
document.addEventListener('DOMContentLoaded', function() {
    chargerDonnees();
    afficherProjets();
    // Écouteurs d'événements
});

Fonctionnalités détaillées​

1. Création de projet

  • Formulaire avec validation
  • Génération d'ID unique
  • Ajout à la liste
  • Sauvegarde automatique

2. Affichage des projets

  • Liste avec cartes
  • Informations : nom, description, date, statut
  • Compteur de tâches
  • Boutons d'action

3. Gestion des tâches

  • Ajout de tâches à un projet
  • Liste des tâches avec statut
  • Checkbox pour marquer terminé
  • Suppression

4. Persistance

  • Sauvegarde dans localStorage
  • Chargement au démarrage
  • Synchronisation automatique

Design et UX​

Principes de design :

  • Clarté : Interface intuitive
  • Cohérence : Style uniforme
  • Feedback : Messages clairs
  • Responsive : Fonctionne sur mobile

Éléments visuels :

  • Cartes pour les projets
  • Badges pour les statuts
  • Icônes pour les actions
  • Couleurs cohérentes

Exercice - Planification​

Avant de coder, planifiez votre projet :

  1. Wireframe

    • Dessinez la structure de la page
    • Identifiez les zones principales
    • Placez les éléments clés

  2. Structure de données

    • Définissez la structure des projets
    • Définissez la structure des tâches
    • Planifiez le stockage

  3. Fonctionnalités

    • Listez toutes les fonctionnalités
    • Priorisez-les (essentiel, important, optionnel)
    • Estimez la complexité

  4. Design

    • Choisissez une palette de couleurs
    • Définissez la typographie
    • Planifiez les composants réutilisables

Guide de développement​

Étape 1 : Structure HTML​

Créez la structure de base avec :

  • Header avec titre
  • Zone de création de projet
  • Liste des projets
  • Modales pour les détails (optionnel)

Étape 2 : Styles CSS​

Appliquez un design moderne :

  • Layout responsive
  • Cartes pour les projets
  • Boutons stylisés
  • Animations subtiles

Étape 3 : Logique JavaScript​

Implémentez les fonctionnalités :

  • Classes Projet et Tache
  • Fonctions CRUD (Create, Read, Update, Delete)
  • Gestion du localStorage
  • Événements utilisateur

Étape 4 : Intégration​

Assemblez tout :

  • Connectez HTML, CSS, JS
  • Testez chaque fonctionnalité
  • Corrigez les bugs
  • Améliorez l'UX

Étape 5 : Améliorations​

Ajoutez des fonctionnalités avancées :

  • Recherche de projets
  • Filtres (tous, actifs, terminés)
  • Statistiques (nombre de projets, tâches)
  • Export des données (optionnel)

Critères d'évaluation​

Fonctionnalité (40%) :

  • Toutes les fonctionnalités de base implémentées
  • Gestion complète des projets et tâches
  • Persistance des données fonctionnelle

Code (30%) :

  • Code organisé et structuré
  • Utilisation appropriée des concepts appris
  • Pas de code dupliqué
  • Commentaires pertinents

Design (20%) :

  • Interface claire et intuitive
  • Design moderne et cohérent
  • Responsive sur tous les écrans

Bonus (10%) :

  • Fonctionnalités supplémentaires
  • Animations et transitions
  • Améliorations UX

Ressources et aide​

Si vous êtes bloqué :

  1. Revisitez les modules précédents
  2. Consultez la documentation MDN (JavaScript, HTML, CSS)
  3. Testez étape par étape
  4. Utilisez console.log() pour déboguer

Bonnes pratiques :

  • Commencez simple, ajoutez progressivement
  • Testez régulièrement
  • Sauvegardez votre travail
  • Documentez votre code

Quiz de révision​

Avant de commencer, vérifiez vos connaissances :

  1. Comment créer un élément HTML avec JavaScript ?
  2. Comment sauvegarder des données dans le localStorage ?
  3. Comment gérer les événements utilisateur ?
  4. Comment créer des classes en JavaScript ?
  5. Comment rendre une page responsive ?

Mini défi - Prototype rapide​

Avant le projet complet, créez un prototype minimal :

Prototype :

  • Un formulaire pour ajouter un projet
  • Une liste qui affiche les projets
  • Bouton pour supprimer
  • Sauvegarde basique

Objectif : Valider l'approche avant de tout développer.

Développement du projet​

Phase 1 : Setup (1-2 heures)​

  1. Créez la structure de fichiers
  2. Configurez votre environnement
  3. Créez le HTML de base
  4. Ajoutez les styles de base

Phase 2 : Fonctionnalités de base (3-4 heures)​

  1. Création de projets
  2. Affichage des projets
  3. Suppression de projets
  4. Sauvegarde localStorage

Phase 3 : Gestion des tâches (2-3 heures)​

  1. Ajout de tâches
  2. Affichage des tâches
  3. Marquer comme terminé
  4. Suppression de tâches

Phase 4 : Améliorations (2-3 heures)​

  1. Design et animations
  2. Validation des formulaires
  3. Messages de feedback
  4. Responsive design

Phase 5 : Finalisation (1-2 heures)​

  1. Tests complets
  2. Correction des bugs
  3. Optimisations
  4. Documentation

Présentation finale​

Préparez une présentation de votre projet :

À présenter :

  1. Démonstration : Montrez l'application fonctionnelle
  2. Architecture : Expliquez la structure du code
  3. Défis : Parlez des difficultés rencontrées
  4. Apprentissages : Ce que vous avez appris

Durée : 5-10 minutes

Support :

  • Application fonctionnelle
  • Code source commenté
  • README avec instructions

Validation finale​

Votre projet est validé si :

  • ✅ Toutes les fonctionnalités de base fonctionnent
  • ✅ Le code est organisé et commenté
  • ✅ L'interface est claire et responsive
  • ✅ Les données persistent correctement
  • ✅ Pas d'erreurs majeures

Objectif : Créer une application web complète qui démontre toutes vos compétences acquises pendant la formation.

Félicitations ! Vous avez terminé toute la formation. Vous êtes maintenant capable de créer des applications web complètes de A à Z !