corrections + update js formulaire

pages/css/devis.js

@@ -3,10 +3,13 @@ const affichageGéo = document.getElementById("géolocalisation");
 const affichageConso = document.getElementById("consommation");
 const boutonPlus = document.getElementById("plus");
 const boutonMoins = document.getElementById("moins");
+const mot_vehicules = document.getElementById("mot_vehic");
 const PRIX_GPS = 30;
 const PRIX_CONSOMMATION = 15;
+const zoneMsg = document.getElementById("msg");
+const txt_restant = document.getElementById("txt_restant");
+const MAX = 500;
 let nbVehicules = 1;
-let totalargent = 0;
 function mettreAJourGPS() {
   affichageNb.textContent = nbVehicules;
   affichageGéo.textContent = nbVehicules * PRIX_GPS;
@@ -16,19 +19,29 @@ function mettreAJourCONSO() {
   affichageConso.textContent = nbVehicules * PRIX_CONSOMMATION;
 }
 function mettreAJourTOTAL() {
-  affichageNb.textContent = totalargent;
-  affichageGéo.textContent = totalargent + PRIX_GPS + PRIX_CONSOMMATION;
+  affichageNb.textContent = nbVehicules;
+  affichageGéo.textContent = nbVehicules * PRIX_GPS;
+  affichageConso.textContent = nbVehicules * PRIX_CONSOMMATION;
 }
 boutonPlus.addEventListener("click", function () {
   nbVehicules = nbVehicules + 1;
-  (mettreAJourGPS(), mettreAJourCONSO());
   if (nbVehicules > 99) {
     nbVehicules = nbVehicules - 1;
   }
+  if (nbVehicules === 1) mot_vehicules.textContent = "véhicule";
+  else mot_vehicules.textContent = "véhicules";
+  (mettreAJourGPS(), mettreAJourCONSO());
 });
 boutonMoins.addEventListener("click", function () {
   if (nbVehicules > 1) {
     nbVehicules = nbVehicules - 1;
   }
+  if (nbVehicules === 1) mot_vehicules.textContent = "véhicule";
+  else mot_vehicules.textContent = "véhicules";
   (mettreAJourGPS(), mettreAJourCONSO());
 });
+zoneMsg.addEventListener("input", function () {
+  const reste = MAX - zoneMsg.value.length;
+  txt_restant.textContent = reste;
+  txt_restant.style.color = reste < 50 ? "red" : "black";
+});

pages/services.html

@@ -52,10 +52,11 @@
             <h2>Estimez votre devis</h2>
             <p>Nombre de véhicules dans votre flotte :</p>
             <button id="moins" type="button">−</button>
-            <span id="nb_vehicules">1</span>
+            <span id="nb_vehicules">1</span> <span id="mot_vehic">véhicule</span>
             <button id="plus" type="button">+</button>
             <p>Total géolocalisation : <strong id="géolocalisation">30</strong> €/mois</p>
             <p>Total consommation : <strong id="consommation">15</strong> €/mois</p>
+
         </section>
         <div class="center">
         <div class="formulaire">
@@ -73,7 +74,8 @@
             <li>
               <label for="msg">Message&nbsp;:</label>
               <textarea id="msg" placeholder="Je pense qu'il faudrait..." name="user_message"
-                  row="6" cols="40" maxlength="500"></textarea>
+                  rows="5" cols="40" maxlength="500"></textarea>
+              <p>Il vous reste <span id="txt_restant">500</span> caractères.</p>
             </li>
             <div id="boutton_formulaire">
               <button type="submit"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-send-icon lucide-send"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"/><path d="m21.854 2.147-10.94 10.939"/></svg>Envoyer le message</button>