Correction services: classes HTML (espace vs virgule), menage JS (code mort/duplique), coherence message alerte

2026-06-22 15:41:36 +02:00
parent 0075fd6c1c
commit 54fe8935a2
1 changed files with 98 additions and 0 deletions
@@ -0,0 +1,98 @@
+# 🔧 Corrections — classes CSS & ménage dans le JS
+
+Très bon boulot Guillaume : singulier/pluriel, compteur de caractères, validation à l'envoi, tableau de services généré en JS — tout y est. Deux points à corriger, dont **une notion à bien fixer**.
+
+---
+
+## 1. 🎯 Notion à corriger : les classes HTML se séparent par des **espaces**, pas des virgules
+
+Dans `services.html` :
+
+```html
+<section class="simulateur, padding_left">   <!-- ❌ la virgule -->
+```
+
+Tu as écrit `class="simulateur, padding_left"`. Le problème : dans l'attribut `class`, les noms de classes se séparent par des **espaces**. Avec ta virgule, le navigateur comprend **deux** classes :
+- une classe qui s'appelle littéralement `simulateur,` (avec la virgule collée !)
+- une classe `padding_left`
+
+Donc le jour où tu écriras une règle `.simulateur { ... }` dans ton CSS, **elle ne s'appliquera pas** : ta section ne porte pas la classe `simulateur`, mais `simulateur,`.
+
+### ✅ La correction
+```html
+<section class="simulateur padding_left">    <!-- ✅ un simple espace -->
+```
+
+> 🧠 **D'où vient la confusion ?** La virgule, tu l'as vue… mais en **CSS**, pas en HTML. Ce sont deux contextes différents :
+> - En **CSS**, la virgule sépare plusieurs **sélecteurs** : `.a, .b { color: red }` = « applique à `.a` **et** à `.b` ».
+> - En **HTML**, l'attribut `class` liste les classes d'un élément, séparées par des **espaces** : `class="a b"` = « cet élément a les classes `a` et `b` ».
+>
+> 💡 **À retenir :** virgule = pour lister des sélecteurs **en CSS**. Espace = pour lister des classes **dans le HTML**.
+
+**✅ Test :** ajoute temporairement `.simulateur { border: 2px solid red; }` dans ton CSS. Avec la virgule → aucun cadre. Après correction (espace) → le cadre rouge apparaît.
+
+---
+
+## 2. 🧹 Ménage dans `devis.js` : du code en double et du code mort
+
+Regarde tes trois fonctions :
+
+```js
+function mettreAJourGPS() {
+  affichageNb.textContent = nbVehicules;
+  affichageGéo.textContent = nbVehicules * PRIX_GPS;
+}
+function mettreAJourCONSO() {
+  affichageNb.textContent = nbVehicules;            // ← déjà fait par GPS
+  affichageConso.textContent = nbVehicules * PRIX_CONSOMMATION;
+}
+function mettreAJourTOTAL() {                         // ← jamais appelée !
+  affichageNb.textContent = nbVehicules;
+  affichageGéo.textContent = nbVehicules * PRIX_GPS;
+  affichageConso.textContent = nbVehicules * PRIX_CONSOMMATION;
+}
+```
+
+Deux soucis :
+- `mettreAJourTOTAL` n'est **jamais appelée** : c'est du **code mort** (elle ne sert à rien).
+- `mettreAJourGPS` et `mettreAJourCONSO` se **répètent** (toutes les deux refont `affichageNb`), et tu dois les appeler ensemble : `(mettreAJourGPS(), mettreAJourCONSO())`.
+
+La bonne nouvelle : la fonction qui fait **tout proprement**, tu l'as déjà écrite — c'est `mettreAJourTOTAL` ! Elle met à jour le nombre, le GPS **et** la conso en une seule fois.
+
+### ✅ La piste (à toi de l'appliquer)
+- Garde **une seule** fonction d'affichage (par exemple renomme `mettreAJourTOTAL` en `mettreAJour`).
+- Dans tes deux écouteurs `+` et `−`, remplace `(mettreAJourGPS(), mettreAJourCONSO())` par un simple `mettreAJour();`.
+- Supprime `mettreAJourGPS` et `mettreAJourCONSO` devenues inutiles.
+
+> 💡 **À retenir :** quand deux bouts de code font la même chose, on les **réunit dans une seule fonction** qu'on appelle où il faut. Moins de copies = moins de risques d'en oublier une le jour où tu modifies. Et le code jamais appelé, on le **supprime** : il n'apporte rien et brouille la lecture.
+
+> 🔎 Au passage : `(mettreAJourGPS(), mettreAJourCONSO())` fonctionne, mais ces parenthèses avec une virgule sont une astuce inhabituelle. Deux instructions sur deux lignes (ou un seul `mettreAJour();`) sont plus claires.
+
+---
+
+## 3. 🐛 Petit détail : le message de l'alerte ne dit pas la vérité
+
+```js
+if (zoneMsg.value.trim() === "") {
+  evenement.preventDefault();
+  alert("Merci de remplir tous les champs");   // ← mais tu ne vérifies QUE le message
+}
+```
+
+Ton alerte dit « remplir **tous** les champs », mais ton `if` ne teste que la **textarea** (le nom et l'e-mail peuvent être vides, ça passe quand même).
+
+À toi de choisir :
+- soit ajuster le **texte** (« Merci d'écrire un message »),
+- soit **vraiment** vérifier les autres champs aussi (avec des `if` supplémentaires sur `name.value` et `mail.value`).
+
+> 💡 **À retenir :** un message affiché à l'utilisateur doit correspondre à ce que le code vérifie **réellement**, sinon c'est trompeur.
+
+---
+
+## ✅ Récap
+
+- [ ] `class="simulateur padding_left"` (espace, pas virgule)
+- [ ] Une seule fonction d'affichage du devis ; supprimer le code mort et le code en double
+- [ ] Faire correspondre le message de l'alerte à ce qui est vraiment vérifié
+
+Le reste de ta page est solide. Ces corrections, c'est surtout de la **rigueur** — exactement ce qui fait la différence entre du code qui « marche » et du code propre.