Ameliorations services: une seule fonction d'affichage, singulier/pluriel au chargement, classe virgule; rappel suite (exos 8-11)

2026-06-23 09:25:02 +02:00
parent 19e0b777ca
commit 5ad4bded37
1 changed files with 82 additions and 0 deletions
@@ -0,0 +1,82 @@
+# 👍 Bien joué + 3 améliorations + la suite
+
+Le `localStorage` est **réglé** : tu lis bien la valeur au chargement, tu la convertis en nombre (`parseInt`) et tu rafraîchis l'affichage avec `mettreAJourTOTAL()`. Recharge avec 12 véhicules → il affiche 12. C'était l'objectif, c'est fait. 👏
+
+Voici 3 petites améliorations (rien de cassé, juste plus propre/correct), puis ce qu'il te reste à faire.
+
+---
+
+## 1. 🧹 N'avoir **qu'une seule** fonction d'affichage
+
+Tu utilises `mettreAJourTOTAL()` dans le bouton `+` (parfait), mais le bouton `−` utilise encore l'ancienne paire :
+
+```js
+(mettreAJourGPS(), mettreAJourCONSO());   // ← dans boutonMoins
+```
+
+`mettreAJourTOTAL` fait **déjà** tout ce que font ces deux fonctions réunies. Donc :
+- dans `boutonMoins`, remplace `(mettreAJourGPS(), mettreAJourCONSO());` par `mettreAJourTOTAL();`
+- supprime `mettreAJourGPS` et `mettreAJourCONSO`, devenues inutiles.
+
+> 💡 **À retenir :** une seule fonction d'affichage = un seul endroit à corriger le jour où tu changes l'affichage. C'est exactement le ménage qu'on avait commencé : finis-le, ton fichier sera plus court et plus sûr.
+
+---
+
+## 2. 🐛 Le mot « véhicule(s) » est faux après un rechargement
+
+Au chargement, `mettreAJourTOTAL()` met bien à jour le **nombre**, mais **pas** le mot. Donc si tu recharges avec 12, tu lis « **12 véhicule** » (singulier, faux), parce que la mise à jour du mot n'a lieu que dans les clics `+` / `−`.
+
+La bonne approche : mettre la logique singulier/pluriel **dans** `mettreAJourTOTAL`, pour qu'elle soit toujours correcte (au chargement **et** aux clics).
+
+```js
+function mettreAJourTOTAL() {
+  affichageNb.textContent = nbVehicules;
+  affichageGéo.textContent = nbVehicules * PRIX_GPS;
+  affichageConso.textContent = nbVehicules * PRIX_CONSOMMATION;
+  mot_vehicules.textContent = nbVehicules === 1 ? "véhicule" : "véhicules";   // ← ici
+}
+```
+
+Du coup tu peux **enlever** les `if (nbVehicules === 1) ... else ...` qui sont en double dans tes deux boutons : ils sont maintenant gérés au même endroit.
+
+> 💡 **Même idée que le point 1 :** tout ce qui concerne « afficher l'état du devis » vit dans **une** fonction. Tu l'appelles, et tout est juste — nombre, totaux, et mot.
+
+---
+
+## 3. 🎯 La classe avec une virgule (pas encore corrigée)
+
+Dans `services.html` :
+
+```html
+<section class="simulateur, padding_left">   <!-- ❌ -->
+```
+
+Rappel : en HTML, les classes se séparent par un **espace**, pas une virgule (la virgule, c'est pour les sélecteurs **CSS**). Là, ta section a une classe qui s'appelle `simulateur,` (avec la virgule) → une règle `.simulateur` ne s'y appliquera jamais.
+
+```html
+<section class="simulateur padding_left">    <!-- ✅ -->
+```
+
+---
+
+## 🚀 La suite : il te reste 4 exos dans ton rattrapage
+
+Tu as fait : conditions ✅, compteur ✅, validation envoi ✅, tableau de services ✅, localStorage ✅. Il reste (dans `PROCHAINE_ETAPE_services_2.md`, toujours en mode indices) :
+
+- **Exo 8 — Mode sombre** (`classList.toggle`)
+- **Exo 9 — Horloge** dans le pied de page (`setInterval`)
+- **Exo 10 — `fetch`** d'un `vehicules.json` (avec le mini-serveur `python3 -m http.server`)
+- **Exo 11 — Navbar en composant réutilisable** (une fonction qui renvoie le HTML + `insertAdjacentHTML`)
+
+> 🔎 Pour l'exo 10, Mélissa vient de faire le même sur sa page : si tu bloques, le concept est de **récupérer** les données avec `fetch`/`await` puis de les **afficher** avec une boucle (comme ton tableau de services, mais à partir du fichier au lieu du tableau écrit en dur).
+
+Quand tu auras fait ces 4-là, tu seras au même niveau que la page contact. Et si un point coince, le filet `SOLUTIONS_services_2.md` est là — mais cherche d'abord. 🙂
+
+---
+
+## ✅ Récap
+
+- [ ] Une seule fonction d'affichage (`mettreAJourTOTAL` partout, supprimer les 2 autres)
+- [ ] Logique singulier/pluriel **dans** `mettreAJourTOTAL` (correct au chargement aussi)
+- [ ] `class="simulateur padding_left"` (espace, pas virgule)
+- [ ] Continuer : mode sombre, horloge, fetch, navbar (exos 8 → 11)