const affichageNb = document.getElementById("nb_vehicules");
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;
function mettreAJourGPS() {
  affichageNb.textContent = nbVehicules;
  affichageGéo.textContent = nbVehicules * PRIX_GPS;
}
function mettreAJourCONSO() {
  affichageNb.textContent = nbVehicules;
  affichageConso.textContent = nbVehicules * PRIX_CONSOMMATION;
}
function mettreAJourTOTAL() {
  affichageNb.textContent = nbVehicules;
  affichageGéo.textContent = nbVehicules * PRIX_GPS;
  affichageConso.textContent = nbVehicules * PRIX_CONSOMMATION;
}
boutonPlus.addEventListener("click", function () {
  nbVehicules = nbVehicules + 1;
  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";
});