From ceceb1865ffd88e5d401f5dd474f0f9a458b7125 Mon Sep 17 00:00:00 2001
From: matthieureynier <mashuuu.r@gmail.com>
Date: Mon, 22 Jun 2026 09:24:49 +0200
Subject: [PATCH] Rattrapage JS services (mode indices, sans solution):
 conditions, tableaux/boucles, filter, localStorage, classList, setInterval,
 fetch, composant navbar

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 PROCHAINE_ETAPE_services_2.md | 200 ++++++++++++++++++++++++++++++++++
 1 file changed, 200 insertions(+)
 create mode 100644 PROCHAINE_ETAPE_services_2.md

diff --git a/PROCHAINE_ETAPE_services_2.md b/PROCHAINE_ETAPE_services_2.md
new file mode 100644
index 0000000..4da4a8e
--- /dev/null
+++ b/PROCHAINE_ETAPE_services_2.md
@@ -0,0 +1,200 @@
+# 🧗 Rattrapage JavaScript — page services
+
+Salut Guillaume ! 👋
+
+Tu as raté une journée, ce guide est là pour rattraper. Il couvre tout ce que le projet a avancé côté JavaScript, **dans l'ordre**, sur **ta** page services (le simulateur, le tableau des services, le formulaire de suggestions).
+
+> ⚠️ **Ce guide est différent des précédents : il ne donne PAS le code tout fait.**
+> Pour chaque exo tu as : un **🎯 objectif**, des **🔍 pistes** (quoi chercher, quels mots-clés, les pièges), et un **✅ test**. À toi d'écrire le code. C'est en cherchant que ça rentre — et tu retiendras dix fois mieux qu'en copiant-collant.
+>
+> 🔎 Ton meilleur réflexe : taper dans Google **« MDN » + le nom de la chose** (ex. `MDN addEventListener`). MDN, c'est la doc de référence du web, en français, avec des exemples.
+
+---
+
+## 🩹 Avant de continuer : 3 choses à revoir dans ton `devis.js`
+
+Tu as déjà bien attaqué le simulateur. Trois petits points à corriger toi-même (cherche, ne devine pas) :
+
+1. Dans ton HTML, ta textarea a `row="6"`. Regarde bien l'attribut : il existe au **pluriel**. Lequel est le bon ? (cherche `MDN textarea rows`).
+2. Ton blocage à 100 véhicules : tu ajoutes 1, tu **affiches**, *puis* tu testes `> 99`. Dans quel ordre faudrait-il faire pour ne jamais afficher 100 une fraction de seconde ? (indice : teste **avant** d'afficher).
+3. Tu as une fonction `mettreAJourTOTAL` et une variable `totalargent` qui ne servent pas vraiment (le total affiché est toujours 0). Demande-toi : *d'où devrait venir le total ?* (indice : il se **calcule** à partir de `nbVehicules`, il ne se stocke pas dans une variable à part).
+
+> 💡 Règle générale que tu retrouveras partout : une valeur qui **se déduit** d'une autre (le total se déduit du nombre de véhicules) ne se **stocke** pas — on la **recalcule** au moment de l'afficher.
+
+---
+
+# 🟢 Étape 1 — Les conditions (`if` / `else`)
+
+## 🧪 Exo 1 — Singulier / pluriel dans le simulateur
+
+**🎯 Objectif :** quand il y a **1** véhicule, afficher « 1 véhicule » ; à partir de 2, « N véhicules ».
+
+**🔍 Pistes :**
+- La structure à chercher : `if (condition) { ... } else { ... }` → cherche `MDN if else`.
+- Pour comparer deux valeurs : l'opérateur d'égalité. Attention, en JS **`=` et `===` ne font pas la même chose** → cherche `difference == === javascript`. Dans un `if`, c'est presque toujours le triple.
+- Où mettre ce code ? Là où tu mets déjà à jour l'affichage du nombre.
+
+**✅ Test :** descends à 1 → « véhicule » ; monte à 2+ → « véhicules ».
+
+---
+
+# 🟢 Étape 2 — Réagir à la saisie et à l'envoi
+
+## 🧪 Exo 2 — Un compteur de caractères sur le formulaire de suggestions
+
+**🎯 Objectif :** sous ta textarea, afficher « Il vous reste X caractères » qui se met à jour **à chaque frappe** (ta limite est `maxlength="500"`).
+
+**🔍 Pistes :**
+- Il te faut un endroit où afficher le nombre : ajoute un `<span>` avec un `id` dans ton HTML.
+- L'événement qui se déclenche à chaque frappe dans un champ → cherche `MDN input event` (ce n'est pas `"click"`).
+- Pour savoir combien de caractères ont été tapés : sur un champ, `.value` donne le texte, et il existe une propriété qui donne sa **longueur** (la même que pour compter les éléments d'une liste) → cherche `javascript string length`.
+- Le reste = 500 moins ce nombre.
+
+**✅ Test :** tape du texte → le nombre descend (499, 498…) et s'arrête à 0.
+
+**Bonus :** passe le compteur en rouge sous 50 caractères → cherche `element.style.color` et l'opérateur ternaire `condition ? ... : ...`.
+
+## 🧪 Exo 3 — Empêcher l'envoi d'un message vide
+
+**🎯 Objectif :** si on clique « Envoyer » avec une suggestion vide, bloquer l'envoi et afficher un message.
+
+**🔍 Pistes :**
+- L'événement déclenché quand un formulaire est envoyé → cherche `MDN form submit event`.
+- Pour **annuler** l'envoi par défaut → cherche `preventDefault`.
+- Pour considérer « que des espaces » comme vide → cherche `javascript trim`.
+- Afficher un message rapide → la fonction `alert(...)`.
+
+**✅ Test :** envoi à vide → message + pas de rechargement. Avec du texte → ça passe.
+
+---
+
+# 🟡 Étape 3 — Les tableaux et les boucles (le gros morceau)
+
+Jusqu'ici tes variables contiennent **une** valeur. Pour une **liste**, il y a les tableaux. C'est la base de presque tout.
+
+## 🧪 Exo 4 — Décrire tes services dans un tableau d'objets
+
+**🎯 Objectif :** au lieu d'avoir tes 4 services écrits « en dur » dans le `<table>`, range-les dans une **liste** en JavaScript.
+
+**🔍 Pistes :**
+- Une **liste** s'écrit avec des crochets `[ ]` → cherche `javascript array`.
+- Chaque service a plusieurs infos (nom, description, prix) : ça, c'est un **objet** `{ }` avec des étiquettes → cherche `javascript object`.
+- Combine les deux : une liste d'objets `[ { ... }, { ... } ]`.
+- Pour parcourir la liste et tout afficher dans la console → cherche `javascript for of`.
+
+**✅ Test :** un `console.log` dans la boucle affiche tes 4 services, un par ligne.
+
+## 🧪 Exo 5 — Générer les lignes du tableau automatiquement
+
+**🎯 Objectif :** que les lignes `<tr>` de ton tableau soient **fabriquées par le JS** à partir de la liste de l'exo 4. Ajouter un service = juste ajouter un objet à la liste.
+
+**🔍 Pistes :**
+- Vide le corps de ton tableau dans le HTML et donne-lui un `id` (garde l'en-tête `<thead>`). Cherche `html tbody`.
+- Deux approches existent, regarde les deux et choisis :
+  - assembler du texte HTML et l'injecter → cherche `innerHTML` et `template literals` (les accents graves `` ` `` avec `${...}`) ;
+  - fabriquer chaque élément proprement → cherche `document.createElement` et `append`.
+- Une boucle parcourt la liste et ajoute une ligne par service.
+
+**✅ Test :** le tableau s'affiche comme avant. Ajoute un 5ᵉ service dans la liste → la ligne apparaît sans toucher au HTML.
+
+> 💡 Tu viens de toucher au principe des sites modernes : **les données d'un côté, l'affichage de l'autre**. On change les données, l'affichage suit.
+
+## 🧪 Exo 6 — Une barre de recherche qui filtre les services
+
+**🎯 Objectif :** un champ où l'on tape, et le tableau ne garde que les services dont le nom contient le texte.
+
+**🔍 Pistes :**
+- Mets ton « affichage du tableau » dans une **fonction** que tu peux rappeler avec une liste différente.
+- Pour ne garder que certains éléments d'une liste → cherche `MDN Array filter`.
+- Pour ignorer les majuscules → cherche `toLowerCase`, et pour tester « contient » → cherche `string includes`.
+- À chaque frappe (`input`), filtre puis ré-affiche.
+
+**✅ Test :** tape « géo » → seul le service de géolocalisation reste ; efface → tout revient.
+
+---
+
+# 🟡 Étape 4 — Donner une mémoire à la page (`localStorage`)
+
+## 🧪 Exo 7 — Se souvenir du nombre de véhicules choisi
+
+**🎯 Objectif :** si on règle le simulateur sur 12 véhicules et qu'on recharge la page, il doit revenir à **12**, pas à 1.
+
+**🔍 Pistes :**
+- Le petit coffre-fort du navigateur qui survit au rechargement → cherche `MDN localStorage` (`setItem` pour ranger, `getItem` pour relire).
+- Sauvegarde à chaque changement ; relis au chargement de la page.
+- ⚠️ **Piège classique :** ce qui sort de `localStorage` est toujours du **texte**, pas un nombre. `"12" + 1` donne `"121"`, pas `13` ! Cherche `parseInt javascript` pour reconvertir en nombre.
+
+**✅ Test :** règle un nombre, recharge (F5) → le simulateur repart sur ce nombre.
+
+---
+
+# 🟠 Étape 5 — Le style dynamique et le temps réel
+
+## 🧪 Exo 8 — Un bouton « Mode sombre »
+
+**🎯 Objectif :** un bouton qui bascule la page en thème sombre, et re-clic pour revenir.
+
+**🔍 Pistes :**
+- Prépare une classe CSS (ex. `body.sombre { ... }`) avec un fond foncé et un texte clair.
+- En JS, pour ajouter/enlever une classe en un seul geste → cherche `classList toggle`.
+
+**✅ Test :** clic → sombre, re-clic → clair.
+
+## 🧪 Exo 9 — Une horloge qui tourne dans le pied de page
+
+**🎯 Objectif :** afficher l'heure actuelle, mise à jour **chaque seconde**.
+
+**🔍 Pistes :**
+- Pour obtenir l'heure : cherche `MDN Date` et `toLocaleTimeString`.
+- Pour répéter une action à intervalle régulier → cherche `MDN setInterval` (la durée est en **millisecondes** : 1 seconde = ?).
+
+**✅ Test :** l'heure s'affiche et avance toute seule.
+
+---
+
+# 🔴 Étape 6 — Aller chercher des données ailleurs (`fetch`)
+
+C'est l'étape la plus avancée, prends ton temps.
+
+## 🧪 Exo 10 — Charger une liste de véhicules depuis un fichier JSON
+
+**🎯 Objectif :** créer un fichier `vehicules.json` (quelques véhicules : modèle, immatriculation, km) et l'afficher dans un tableau via JavaScript, au lieu de l'écrire en dur.
+
+**🔍 Pistes :**
+- Le format JSON ressemble à une liste d'objets, mais avec des règles strictes (guillemets doubles partout, pas de virgule finale) → cherche `JSON format`.
+- Pour aller chercher un fichier → cherche `MDN fetch`. Comme ça prend du temps, on utilise `async` / `await` → cherche `async await javascript`.
+- ⚠️ **Important :** `fetch` ne marche pas si tu ouvres la page en double-cliquant (`file://`). Il faut un mini-serveur : dans un terminal, dans le dossier du projet, lance `python3 -m http.server 8000`, puis ouvre `http://localhost:8000/...`. Cherche `python http server` si besoin.
+- Pour réagir si le fichier est introuvable → cherche `try catch javascript`.
+
+**✅ Test :** la liste des véhicules s'affiche. Renomme le fichier exprès → un message d'erreur s'affiche au lieu d'un plantage.
+
+---
+
+# 🏁 Étape 7 — Pour être au niveau du reste du projet
+
+## 🧪 Exo 11 — La navbar en composant réutilisable
+
+**🎯 Objectif :** ta barre de navigation est recopiée à l'identique dans `index.html`, `services.html`, `contact.html`. L'écrire **une seule fois** en JavaScript et l'injecter sur la page.
+
+**🔍 Pistes :**
+- Une **fonction** qui **renvoie** le HTML de la navbar (avec `return` et un *template literal*) → cherche `javascript return` et `template literals`.
+- Pour insérer ce HTML en haut du `<body>` → cherche `insertAdjacentHTML`.
+- Pour mettre en valeur le bouton de la page courante, passe à la fonction un **paramètre** (ex. la page active) et utilise une condition pour choisir la classe du bouton.
+
+**✅ Test :** supprime la navbar écrite en dur dans le HTML, garde le JS → elle réapparaît. Changer un lien = un seul endroit à modifier.
+
+---
+
+## 🗺️ Quand tu auras fait tout ça, tu sauras :
+
+- les **conditions** (`if`/`else`, ternaire) et les **événements** (`input`, `submit`, `click`)
+- les **tableaux** et **objets**, les **boucles**, `filter`
+- **générer du HTML** depuis des données
+- la **mémoire** (`localStorage`) et le piège du texte vs nombre
+- le **style dynamique** (`classList`) et le **temps réel** (`setInterval`)
+- les **données distantes** (`fetch`, `async`/`await`, JSON)
+- le **composant réutilisable**
+
+C'est exactement le niveau où en est la page contact, tu seras à jour.
+
+Note tes questions au fur et à mesure — et résiste à l'envie de chercher « la réponse toute faite » : cherche d'abord **le concept**, le code viendra de toi.