Cleanup the code, add a lot of comment and change the sonnerie + tweaks a little bit the look from some page

contacts.html

@@ -66,6 +66,7 @@
     <button id="submitBtn" class="btn">Envoyer</button>
   </form>
  <br>
+ </div>
     <footer>
       <div class="foot">
         <p>
@@ -85,6 +86,5 @@
         <p id="item1">Created by <a href="https://www.linkedin.com/in/cl%C3%A9ment-brossaud-719313262/" class="copya">Clément Brossaud</a> and <a href="https://www.linkedin.com/in/felix-marquet-5071bb167/" class="copya">Félix Marquet</a></p>
       </div>
     </footer>
- </div>
   </body>
 </html>

src/css/style_contacts.css

@@ -25,10 +25,11 @@ img{
 
 .icon {
   padding: 10px;
-  background: #7D7D7D;
+  background: #e9ecef;
   width: 50px;
   height: auto;
   text-align: center;
+  border-radius: 3px;
 }
 
 .input-field {

src/js/InfosEtContact/contacts/contacts.js

@@ -1,22 +1,28 @@
 function validateForm() {
+    //Récupérer les valeurs des champs
     var prenomNom = document.getElementById("usrnInp").value;
     var email = document.getElementById("emailInp").value;
     var message = document.getElementById("textarea1Inp").value;
 
+    //Définir les expressions régulières
     var prenomNomRegex = /^[a-zA-Z]+\s[a-zA-Z]+$/;
     var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 
+    //Tester les valeurs des champs avec les expressions régulières
     var isPrenomNomValid = prenomNomRegex.test(prenomNom);
     var isEmailValid = emailRegex.test(email);
     var isMessageValid = message.length >= 20 && message.length <= 1000;
     //console.log(isPrenomNomValid, isEmailValid, isMessageValid);
     //console.log(prenomNom, email, message);
 
+    //Récupérer les éléments d'erreur
     var submitBtn = document.getElementById("submitBtn");
     var prenomNomError = document.getElementById("usrnError");
     var emailError = document.getElementById("emailError");
     var messageError = document.getElementById("textarea1Error");
 
+
+    //Afficher les messages d'erreur
     if (isPrenomNomValid) {
         prenomNomError.innerHTML = "";
     } else {
@@ -46,8 +52,22 @@ function validateForm() {
 }
 
 document.getElementById("submitBtn").addEventListener("click", function() {
+    //Pile ou face
+    let pileOuFace = prompt("Pile ou face ?");
+    let result = 0;
+    if (pileOuFace === "pile") {
+        result = 0;
+    }
+    else if(pileOuFace === "face"){
+        result = 1;
+    }
+    else{
+        alert("Vous n'avez pas entré pile ou face ! Vous devez tous recommencer !")
+        console.error("Ni pile, ni face !");
+        window.location.reload();
+    }
     var random = Math.floor(Math.random() * 2);
-    if (random === 0) {
+    if (random === result) {
         alert("Vous avez gagné ! Votre message a bien été envoyé !");
     }
     else{
@@ -61,4 +81,7 @@ document.getElementById("usrnInp").addEventListener("input", validateForm);
 document.getElementById("emailInp").addEventListener("input", validateForm);
 document.getElementById("textarea1Inp").addEventListener("input", validateForm);
 
-console.log("contacts.js chargé !");
+//Appeler la fonction validateForm au chargement de la page
+validateForm();
+
+console.log("contacts.js chargé !");

src/js/membres/membres.js

@@ -1,8 +1,10 @@
 
 let editMode = false;
+//Verifie si toute la page est chargée
 document.addEventListener('DOMContentLoaded', function() {
+    //Attends la fin du loader pour afficher le bouton
     setTimeout(function () {
-
+        //Création du bouton Mode édition
         const editButton = document.createElement('button');
         editButton.innerText = 'Mode édition';
 
@@ -18,13 +20,13 @@ document.addEventListener('DOMContentLoaded', function() {
         editButton.style.cursor = 'pointer';
 
         editButton.addEventListener('click', function() {
-
-
+            //Verifie si le mode édition est activé si oui demande confirmation pour le désactiver
             if (editMode === true) {
                 const confirmation = confirm('Voulez vous vraiment quitter le mode édition?');
                 if (confirmation === true) {
                     console.log("Désactivation du mode édition");
                     editMode = false;
+                    //Supprime le bouton ajouter un membre
                     editButton.style.background = '#48435C';
                     const removeMemberButton = document.getElementById('addMemberButton');
                     removeMemberButton.remove();
@@ -36,6 +38,7 @@ document.addEventListener('DOMContentLoaded', function() {
 
                 }
             }
+            //Si le mode édition n'est pas activé demande le nom et le mot de passe du profil administrateur
             else{
                 const adminName = prompt('Entrez le nom du profil administrateur :');
                 if (adminName === 'admin') {
@@ -43,6 +46,7 @@ document.addEventListener('DOMContentLoaded', function() {
                     if (adminPwd === 'admin_pwd') {
                         editMode = true;
                         console.log('Mode édition activé !');
+                        //Création du bouton ajouter un membre
                         editButton.style.background = 'red';
                         const addMemberButton = document.createElement('button');
                         addMemberButton.innerText = 'Ajouter un membre';
@@ -63,9 +67,11 @@ document.addEventListener('DOMContentLoaded', function() {
                         document.body.appendChild(addMemberButton);
                     } else {
                         alert('Mot de passe du profil administrateur incorrect !');
+                        console.error('Mot de passe du profil administrateur incorrect !');
                     }
                 } else {
                     alert('Nom de profil administrateur incorrect !');
+                    console.error('Nom de profil administrateur incorrect !');
                 }
             }
         });
@@ -85,11 +91,11 @@ document.addEventListener('DOMContentLoaded', function() {
 });
 
 function addMember() {
-    //Create the newMember
+    //Création de la nouvelle carte
     const newCard = document.createElement('div');
     newCard.classList.add('NewMembresJS', 'SmallCard', 'Card');
 
-    //Add the image of the newMember
+    //Ajout de l'image de la nouvelle carte
     const cardIMG = document.createElement('img');
     cardIMG.setAttribute('src', '/src/img/membres/NewCard.jpg')
     cardIMG.className = 'cardImg';
@@ -97,19 +103,19 @@ function addMember() {
     newCard.appendChild(cardIMG);
 
 
-    //Add the hover of the newMember
+    //Ajout de l'hover de la nouvelle carte
     const CardHover = document.createElement('div');
     CardHover.className = 'BigCardHover';
 
 
-    //Add the name of the newMember
+    //Ajout du nom de la nouvelle carte
     const memberName = document.createElement('h2');
     memberName.innerText = 'Nom du membre';
     CardHover.appendChild(memberName);
 
     newCard.appendChild(CardHover);
 
-    //Add the delete button of the newMember
+    //Ajoout du bouton supprimer
     const deleteButton = document.createElement('button');
     deleteButton.innerText = 'Supprimer';
     deleteButton.id = 'deleteButton';
@@ -118,7 +124,7 @@ function addMember() {
     });
     newCard.appendChild(deleteButton);
 
-    //Add the modal of the newMember
+    //Ajout du modal
     const modal = document.createElement('div');
     modal.className = 'modal';
     const modalContent = document.createElement('div');
@@ -129,21 +135,21 @@ function addMember() {
     closeBtn.addEventListener('click', function() {
         modal.style.display = 'none';
     });
-    //Add the content of the modal
+
     modalContent.appendChild(closeBtn);
 
-    //Add the image of the modal
+    //Ajout de l'image du modal
     const modalIMG = document.createElement('img');
     modalIMG.setAttribute('src', '/src/img/membres/NewCard.jpg')
     modalIMG.className = 'cardImg';
     modalIMG.setAttribute('alt', 'Nom du membre')
     modalContent.appendChild(modalIMG);
 
-    //Add the hover of the modal
+    //Ajout de l'hover du modal
     const modalHover = document.createElement('div');
     modalHover.className = 'BigCardHover';
 
-    //Add the name of the modal
+    //Ajoout du nom du modal
     const modalName = document.createElement('h2');
     modalName.innerText = 'Nom du membre';
 
@@ -152,19 +158,19 @@ function addMember() {
     modalContent.appendChild(modalHover);
     modal.appendChild(modalContent);
 
-    //Add the action when the newMember is clicked for the modal
+    //Ajoout de l'event click sur la nouvelle carte pour afficher le modal
     newCard.addEventListener('click', function() {
         modal.style.display = 'block';
     });
 
-    //Add the newMember to the page
+    //Ajout de la nouvelle carte et du modal a la page
     const membersContainer = document.getElementById('NewMembres');
     membersContainer.appendChild(newCard);
     membersContainer.appendChild(modal);
 }
 
 
-//Modal for the card
+//Modal pour la carte de chaque membre
 
 const cards = document.querySelectorAll('.Card');
 const modals = document.querySelectorAll('.modal');

src/js/navbarAndFooter.js

@@ -1,12 +1,15 @@
+//Définir les variables
 const burger = document.querySelector('.burger-menu');
 const menu = document.querySelector('.menu');
 
 burger.onclick = function() {
+    //Afficher ou cache le menu
     menu.classList.toggle('show-menu');
 };
 
 
 function updateTime() {
+    //Afficher l'heure actuelle
     setInterval(function() {var now = new Date();
         var hours = now.getHours();
         var minutes = now.getMinutes();
@@ -17,6 +20,7 @@ function updateTime() {
 }
 
 function startTimer() {
+    //Afficher le temps écoulé sur la page
     var startTime = Date.now();
     setInterval(function() {
         var elapsedTime = Date.now() - startTime;
@@ -29,6 +33,7 @@ function startTimer() {
 }
 
 document.addEventListener("click", function(event) {
+    //Afficher une alerte si on clique sur le bouton "Membres"
     if (event.target.id === "membresNav"){
         const confirmation = confirm('Voulez vous vraiment aller sur la page membres?');
         if (confirmation === true) {
@@ -40,22 +45,22 @@ document.addEventListener("click", function(event) {
     }
 });
 
+//Récupérer les éléments du menu
 const menuItems = document.querySelectorAll('.menu li');
 
 menuItems.forEach((menuItem) => {
+    //Récupérer la couleur de fond originale
     const originalBgColor = menuItem.style.backgroundColor;
     console.log(originalBgColor)
     menuItem.addEventListener('mouseover', () => {
-        const newBgColor = '';
+        //Récupérer la nouvelle couleur de fond
+        const newBgColor = menuItem.dataset.color;
         menuItem.style.backgroundColor = newBgColor;
-        console.log(`L'ancienne couleur de fond était ${originalBgColor}, la nouvelle couleur est ${newBgColor}.`);
-    });
-
-    menuItem.addEventListener('mouseout', () => {
-        menuItem.style.backgroundColor = originalBgColor;
+        console.log("L'ancienne couleur de fond était " + originalBgColor + " et la nouvelle est " + newBgColor + ".")
     });
 });
 
+//Lance les fonctions updateTime et startTimer
 updateTime();
 startTimer();
 
@@ -73,10 +78,12 @@ let phoneNumbers = document.querySelectorAll('a.telFooter');
 phoneNumbers.forEach(function(phoneNumber) {
     console.log(phoneNumber);
     phoneNumber.addEventListener('copy', function(event) {
+        // On récupère le numéro de téléphone
         let copiedText = event.clipboardData.getData('text/plain');
         console.log(copiedText);
+        // On demande à l'utilisateur de confirmer qu'il veut appeler ce numéro
         let input = prompt('Si vous voulez appeler ce numéro : ' + copiedText + ', entrez le de nouveau dans le champ ci-dessous puis validez');
-        if (input === copiedText){
+        if (input === copiedText){ // Si l'utilisateur a entré le numéro de téléphone correctement
             console.log("Vous appelez ce numéro : " + copiedText);
             let audio = new Audio('/src/sound/sonnerie.mp3');
             audio.play();

src/js/projets/projetsFunc.js

@@ -1,5 +1,7 @@
 function returnToTopButton(){
+    //Attend 2 secondes avant de creer le bouton pour attendre la fin du loader
     setTimeout(function (){
+        //Creation du bouton
         var TopButton = document.createElement("button");
         TopButton.setAttribute("id", "returnToTopButton");
         TopButton.setAttribute("onclick", "returnToTop()");