Projet Personnel
JavaScript

  • Projet 20 pts
  • Examen écrit 20 pts
  • ~8 semaines
  • Rendu : 7 juin 23h59

Ta mission

  • Afficher dynamiquement une liste de ressources
  • Trier par différents critères
  • Chercher en temps réel
  • Ajouter via un formulaire
  • Supprimer des éléments
Voir les exigences Évaluation

Concept du projet

Le principe

Créer un site web en HTML, CSS et JavaScript pour gérer une ressource de ton choix. Les données sont stockées dans un tableau d'objets JavaScript directement dans ton code (pas d'API externe).

Le site doit permettre d'afficher, trier, rechercher, ajouter et supprimer des éléments de ta collection.

Exemples de ressources

  • Pokémons, films, séries TV
  • Légumes, recettes de cuisine
  • Jeux vidéo, livres, albums
  • Voitures, sneakers, plantes
  • Pays, villes, monuments
  • ... tout ce qui te passionne !

Validation obligatoire du choix par l'enseignant avant le 25 mars.

Objectifs

Manipulation du DOM

Créer, modifier et supprimer des éléments HTML dynamiquement avec createElement, querySelector et innerHTML

Gestion des événements

Réagir aux actions utilisateur avec addEventListener : clics, saisie, soumission de formulaires

Manipulation de données

Travailler avec des tableaux d'objets : filter, sort, find, splice

Formulaires dynamiques

Créer des formulaires avec validation et ajout de données en temps réel

Recherche et tri

Implémenter un filtrage en temps réel et un tri multi-critères

Code propre et structuré

Nommage clair, commentaires pertinents, fonctions bien découpées, code organisé

À rendre

Projet en ligne

Ton projet doit être accessible en ligne via GitHub Pages ou Vercel.

Arborescence type :

mon-projet/
├── css/style.css
├── js/script.js
├── img/
├── index.html
└── README.md

README.md obligatoire

  • Description du projet
  • Fonctionnalités implémentées
  • Ressource choisie (avec justification)
  • Captures d'écran du résultat
  • Section transparence IA : outils utilisés, prompts, ce que tu as appris vs. généré

Exigences techniques

HTML5

  • Structure sémantique : header, nav, main, footer
  • Formulaire avec labels associés
  • Attributs alt sur les images

CSS

  • Variables CSS pour les couleurs
  • Flexbox ou Grid pour la mise en page
  • Responsive : minimum 2 media queries
  • Pseudo-classes :hover et :focus

JavaScript

  • Tableau d'objets comme source de données
  • Fonctions de rendu DOM (createElement / innerHTML)
  • addEventListener pour les interactions
  • Manipulation de tableaux : filter, sort, splice

Fonctionnalités

Obligatoires

  • Affichage dynamique de la liste
  • Tri par différents critères
  • Recherche en temps réel
  • Ajout via formulaire
  • Suppression d'éléments

Optionnelles +bonus

  • Modification d'une ressource existante +1 pt
  • Filtrage par catégorie (select / dropdown) +1 pt

Planification

  1. 25 mars — S8

    Choix de la ressource

    • Choisir et faire valider sa ressource par l'enseignant
    • Réfléchir aux propriétés des objets (nom, type, image...)
  2. 1er avril — S9

    Lancement

    • Structure HTML + CSS de base
    • Tableau d'objets de test (5-10 éléments)
    • Premier affichage statique
  3. 22 avril — S10

    Affichage dynamique + événements

    • Fonction de rendu DOM (génération des cartes/lignes)
    • Premiers addEventListener
  4. 29 avril — S11

    Tri + recherche

    • Tri multi-critères avec sort()
    • Recherche en temps réel avec filter()
  5. 6 mai — S12

    Ajout + suppression

    • Formulaire d'ajout avec validation
    • Bouton de suppression sur chaque élément
  6. 13 mai — S13

    Finalisation

    • Responsive design (mobile + desktop)
    • Bonus : modification, filtrage par catégorie
    • Nettoyage du code et commentaires
  7. 20 mai — S14

    Révisions

    • Préparation de l'examen écrit
    • Révision de la théorie JavaScript
  8. 27 mai — S15

    Examen blanc

    • Simulation de l'examen écrit en conditions réelles
  9. 7 juin — 23h59

    Rendu final du projet

    • Projet déployé en ligne (GitHub Pages / Vercel)
    • README.md complet
    • Code propre et commenté
  10. 9 juin

    Examen de module (écrit)

    • Durée : 30 minutes
    • QCM, appariement, code à trous, détection d'erreurs

Évaluation

Projet (20 pts)

Critère Pts
Fonctionnalités
Affichage liste de ressources2
Tri par différents critères2
Recherche en temps réel2
Ajout via formulaire2
Suppression2
Code & Architecture
Structure fichiers propre1
HTML sémantique + CSS organisé2
JS propre (nommage, fonctions, commentaires)2
Responsive (mobile + desktop)1
README complet1
UX / Design
Interface cohérente et soignée2
Feedback utilisateur (confirmations, messages)1
Bonus
Modification de ressource+1
Filtrage par catégorie+1
Total20 (+2)

Examen écrit (20 pts)

L'examen de module porte sur la théorie JavaScript vue en cours.

  • Format : QCM + appariement + code à trous + détection d'erreurs
  • Durée : 30 minutes
  • Date : 9 juin 2026

Matière couverte

  • Variables, types de données
  • Conditions et boucles
  • Fonctions
  • Tableaux et objets
  • Manipulation du DOM
  • Événements (addEventListener)

Un examen blanc sera réalisé en classe la semaine du 27 mai.

Support & IA

Aide disponible

  • En classe : questions à l'enseignant pendant les séances
  • devjs.ch : documentation et exercices
  • MDN Web Docs : référence JavaScript officielle

Utilisation de l'IA

L'IA (ChatGPT, Claude, Copilot...) est autorisée sous conditions :

  • Tu dois comprendre 100% du code que tu rends
  • Tu dois pouvoir expliquer chaque ligne
  • Section transparence IA obligatoire dans le README
  • L'examen écrit vérifiera ta compréhension réelle

Copier sans comprendre = 0 points.

Checklist d'auto-évaluation

Coche chaque item au fur et à mesure. Ta progression est sauvegardée automatiquement.

0% complété

Fonctionnalités

Code

Qualité

Préparation