From cc5540fbacc0dedbe25281d091fa39efc66169b3 Mon Sep 17 00:00:00 2001 From: Said Date: Fri, 5 Apr 2024 07:16:29 +0200 Subject: [PATCH 1/2] Mise-en-place-de-la-liaison-entre-les-labels-et-les-for --- starterOnly/modal.js | 183 ++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 181 insertions(+), 2 deletions(-) diff --git a/starterOnly/modal.js b/starterOnly/modal.js index 694a848564..7217ff2169 100644 --- a/starterOnly/modal.js +++ b/starterOnly/modal.js @@ -6,18 +6,197 @@ function editNav() { x.className = "topnav"; } } - // DOM Elements const modalbg = document.querySelector(".bground"); const modalBtn = document.querySelectorAll(".modal-btn"); const formData = document.querySelectorAll(".formData"); - +const close=document.querySelector(".close");//je viens de creer cette classe afin de la fermer // launch modal event modalBtn.forEach((btn) => btn.addEventListener("click", launchModal)); +//========================================================================================================================= +// Attachez un événement de clic à la croix de fermeture +close.addEventListener("click", closeModal); +// Fonction pour fermer la fenêtre modale +function closeModal() { + modalbg.style.display = "none"; +} +//========================================================================================================================= // launch modal form function launchModal() { modalbg.style.display = "block"; } +//========================================================================================================================= +// Sélectionnez le bouton d'inscription +const inscriptionBtn = document.querySelector(".btn-submit"); +// Ajoutez un événement de clic au bouton d'inscription +inscriptionBtn.addEventListener("click", afficherMessage); + +//========================================= function afficherMessage() ====================================================== +// Fonction pour afficher le message "Vous êtes inscrit" +function afficherMessage() { + inscriptionBtn.addEventListener("click", afficherMessage) +// Sélectionner l'élément div avec la classe "said" +const divResultat = document.querySelector(".resultat"); +// Créer un élément de paragraphe +const paragraphe = document.createElement("p"); +// Ajouter le texte "Je t'aime" au paragraphe +paragraphe.textContent = "vous etes inscrit (de la fonction AfficherMessage()) "; +// Ajouter le paragraphe à la div avec la classe "said" +divResultat.appendChild(paragraphe); +//return "Vous êtes inscrit" +return "vous etes inscrit" +} +//============================================ function verifierChaine(chaine) ===================================================== +function verifierChaine(chaine) { + // Vérifie si la longueur de la chaîne est supérieure à 2 + if (chaine.length > 2) { + // Vérifie si la chaîne ne contient que des lettres (pas de chiffres) + if (/^[a-zA-Z]+$/.test(chaine)) { + alert("La chaîne est valide !"); + } else { + alert("La chaîne ne doit contenir que des lettres !"); + } + } else { + alert("La chaîne doit avoir plus de deux lettres !"); + } +} +//============================================== function verifierEmail(email) ======================================================= +function verifierEmail(email) { + // Vérifie si l'email contient un "@" et un "." + if (email.includes("@") && email.includes(".")) { + alert("L'email est valide !"); + } else { + alert("L'email n'est pas valide !"); + } +} +//============================================== function verifierChampsVides() ======================================================= +function verifierChampsVides() { + var champs = document.querySelectorAll('input[type="text"], input[type="email"], textarea'); + + // Parcourt chaque champ + for (var i = 0; i < champs.length; i++) { + // Vérifie si le champ est vide + if (champs[i].value.trim() === '') { + // Change la couleur de fond du champ pour indiquer qu'il est vide + champs[i].style.backgroundColor = 'red'; + + // Affiche un message d'erreur pour cet élément + alert("Le champ " + champs[i].name + " est vide !"); + + // Arrête la fonction ici + return false; + } + } + + return true; +} +//=================================================== function validate() =========================================================== +function validate(){ + //verifierChampsVides() + //================================================================================================= +/* Recuperation de l'ensemble des input et textaera */ +// Au niveau de la fiche d'inscription, récuperation de la donnée prénom : + let balisePrenom = document.getElementById("first") + let prenom= balisePrenom.value + console.log(prenom) // affiche ce qui est contenu dans la balisePrenom + //verifierChaine(prenom) + //================================================================================================= + // Au niveau de la fiche d'inscription, récuperation de la donnée nom : + let baliseNom = document.getElementById("last") + let nom= baliseNom.value + console.log(nom) // affiche ce qui est contenu dans la baliseNom + // verifierChaine(nom) + //================================================================================================= + // Au niveau de la fiche d'inscription, récuperation de la donnée email : + let baliseEmail = document.getElementById("email") + let email= baliseEmail.value + console.log(email) // affiche ce qui est contenu dans la baliseEmail + verifierEmail(email) + //================================================================================================= + // Au niveau de la fiche d'inscription, récuperation de la donnée birtdate : + let baliseBirthdate = document.getElementById("birthdate") + let dateanniverasaire= baliseBirthdate.value + console.log(dateanniverasaire) // affiche ce qui est contenu dans la baliseBirthDate + //================================================================================================= + // Au niveau de la fiche d'inscription, récuperation de la donnée quantité : + let baliseQuantity = document.getElementById("quantity") + let quantite= baliseQuantity.value + console.log(quantite) // affiche ce qui est contenu dans la baliseQuantity +//================================================================================================= + /*Recuperation des données concernant les radioButton*/ +let baliseVille = document.querySelectorAll('input[name="location"]')//je créee une variable qui recuperera un tableau de radioButton +let ville = "" +for (let i = 0; i < baliseVille.length; i++) { + if (baliseVille[i].checked) { + ville = baliseVille[i].value + break + } +} +console.log(ville) // affiche la valeur du radio coché + //================================================================================================= +/* Recuperation des donnees concernant les checkbox */ +// Si true, la validation de l'acceptation des conditions est effectuée +let checkbox1 = document.getElementById("checkbox1") +let acceptationConditions = checkbox1.checked +//console.log(acceptationConditions); // affiche true ou false +if(acceptationConditions===true){ + console.log("J'ai lu et accepté les conditions d'utilisation.") +}else{ + console.log("Je n'ai pas lu et accepté les conditions d'utilisation.") +} +// Si true, la validation de l'acceptation pour recevoir des informations sur les nouveaux evenements est effectuée +let checkbox2 = document.getElementById("checkbox2") +let acceptationInformations = checkbox2.checked +//console.log(acceptationInformations);// affiche true ou false +if(acceptationInformations===true){ + console.log("Je souhaite être prévenu des prochains évènements.") +}else{ + console.log("Je ne souhaite pas être prévenu des prochains évènements.") +} +//================================================================================================= + // return false // formulaire inavalide +// console.log("je suis passe par la fin de la fonction validate()") + // On empêche le comportement par défaut +} + + +//===================================================================================================================================== +//===================================================================================================================================== +// function said(){ +// const divResultat = document.querySelector(".resultat"); +// // Créer un élément de paragraphe +// const paragraphe = document.createElement("p"); +// // Ajouter le texte "Je t'aime" au paragraphe +// paragraphe.textContent = "vous etes inscrit dans la fonction said"; +// // Ajouter le paragraphe à la div avec la classe "said" +// divResultat.appendChild(paragraphe); +// console.log("je suis passé par la fonction said") +// } +//===================================================================================================================================== +// function afficherDiv(div){ +// if (div ==="vous etes inscrit"){ +// console.log("j'ai recupere la variable") +// const divSaid = document.querySelector(".said"); +// // Créer un élément de paragraphe +// const paragraphe = document.createElement("p"); +// // Ajouter le texte "Je t'aime" au paragraphe +// paragraphe.textContent = "vous etes inscrit AFFICHER "; +// // Ajouter le paragraphe à la div avec la classe "said" +// divSaid.appendChild(paragraphe); +// console.log("je suis passé par la fonction afficherDiv") +// //return "Vous êtes inscrit" +// } +// else{ +// console.log("je n'ai rien reçu et donc je ne peux rien afficher") +// } + + + +// } +//said() +//test() +//console.log(afficherMessage()); +//afficherDiv(afficherMessage()); From 71bbd60b70fa86dcba731ec09cc074753f8b6454 Mon Sep 17 00:00:00 2001 From: Manssouri Date: Fri, 26 Apr 2024 07:37:17 +0200 Subject: [PATCH 2/2] finalisation --- desktop.ini | 6 + starterOnly/index.html | 341 ++++++++++++++++++----------------------- starterOnly/modal.css | 33 +++- starterOnly/modal.js | 207 +++++++++++++++++++++---- starterOnly/test.html | 28 ++++ 5 files changed, 391 insertions(+), 224 deletions(-) create mode 100644 desktop.ini create mode 100644 starterOnly/test.html diff --git a/desktop.ini b/desktop.ini new file mode 100644 index 0000000000..18ed644332 --- /dev/null +++ b/desktop.ini @@ -0,0 +1,6 @@ +[.ShellClassInfo] +IconResource=C:\WINDOWS\System32\SHELL32.dll,307 +[ViewState] +Mode= +Vid= +FolderType=Generic diff --git a/starterOnly/index.html b/starterOnly/index.html index 25fef80699..6341ddd99f 100644 --- a/starterOnly/index.html +++ b/starterOnly/index.html @@ -1,23 +1,23 @@ - - - Reservation - - - - - - -
- -
-
-
-

- Marathon national
- de jeux vidéos -

-

- Vous aimez jouer ? Notre prochain évènement gaming est ouvert - aux réservations... Places limitées ! -

- -
-
- img -
+ + +
+
+
+

+ Marathon national
+ de jeux vidéos +

+

+ Vous aimez jouer ? Notre prochain évènement gaming est ouvert + aux réservations... Places limitées ! +

+
+ img +
+ + +
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-

A quel tournoi souhaitez-vous participer cette année ?

-
- - - - - - - - - - - - -
+
+
+ +
+ +
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+ +
+
+ +

A quel tournoi souhaitez-vous participer cette année ?

+
+ + + + + + + + + + + + +
-
- - -
- - -
-
- - +
+ + +
+ + +
+
+ + +
+
+
+ +
+
+
+
+ +
+
+ + + + + + +
-
-
-

- Copyright 2014 - 2022, GameOn Inc. -

-
- - - +
+
+
+
+

+ Copyright 2014 - 2022, GameOn Inc. +

+ +
+ + + + \ No newline at end of file diff --git a/starterOnly/modal.css b/starterOnly/modal.css index 38cdea6251..200d68b921 100644 --- a/starterOnly/modal.css +++ b/starterOnly/modal.css @@ -20,7 +20,15 @@ body { max-width: 1300px; margin: 0 auto; } - +#divPrenom:empty { + color: red; +} +#divNom:empty { + color: red; +} +#divEmail:empty { + color: red; +} p { margin-bottom: 0; padding: 0.5vw; @@ -526,4 +534,25 @@ footer { opacity: 1; } } - +/* ======================================================================================================================================= */ +/* ici, c'est mon css test */ +.container { + display: flex; /* Utilisation de flexbox pour aligner le contenu */ + justify-content: center; /* Centre horizontalement le contenu */ + align-items: center; /* Centre verticalement le contenu */ + height: 200px; /* Hauteur de la div container (à ajuster selon tes besoins) */ + /* border: 1px solid black; Ajout d'une bordure pour visualiser la div */ + margin-bottom: 25%; + margin-top:25% +} +.bground1 { + display: none; + position: fixed; + z-index: 1; + left: 0; + top: 0; + height: 100%; + width: 100%; + overflow: auto; + background-color: rgba(26, 39, 156, 0.4); +} \ No newline at end of file diff --git a/starterOnly/modal.js b/starterOnly/modal.js index 7217ff2169..b2e56e3c46 100644 --- a/starterOnly/modal.js +++ b/starterOnly/modal.js @@ -8,18 +8,126 @@ function editNav() { } // DOM Elements const modalbg = document.querySelector(".bground"); +const modalbg1 = document.querySelector(".bground1"); const modalBtn = document.querySelectorAll(".modal-btn"); +const boutonfermersaid=document.querySelector(".btnSaid")//mon bouton fermer const formData = document.querySelectorAll(".formData"); -const close=document.querySelector(".close");//je viens de creer cette classe afin de la fermer +const close=document.querySelector(".close");//je viens de créer cette classe afin de la fermer +const close1=document.querySelector(".close1");//je viens de créer cette classe afin de la fermer +let isError=false; +let prenom=document.getElementById("first");//Recupération de la donnée prénom +let nom=document.getElementById("last")//Recupération de la donnée nom +let email=document.getElementById("email")//Recupération de la donnée email +let dateDeNaissance=document.getElementById("birthdate")//Recupération de la donnée birthdate +let quantite=document.getElementById("quantity")//Recupération de la donnée quantity // launch modal event modalBtn.forEach((btn) => btn.addEventListener("click", launchModal)); - +// modalbtnSaid.forEach((btn) => btn.addEventListener("click", closeModal1)); +boutonfermersaid.addEventListener("click", function() { + // Cache la div en lui donnant un style display:none + modalbg1.style.display = "none"; +}); +// boutonfermersaid.addEventListener("click", closeModal1); //========================================================================================================================= // Attachez un événement de clic à la croix de fermeture close.addEventListener("click", closeModal); // Fonction pour fermer la fenêtre modale function closeModal() { modalbg.style.display = "none"; + +} +// Attachez un événement de clic à la croix de fermeture +close1.addEventListener("click", closeModal1); +// Fonction pour fermer la fenêtre modale +function closeModal1() { + modalbg1.style.display = "none"; + +} + +//================================ function erreurMessage(idDiv,idInput,messageErreur) ==================================== +// function erreurMessage(idDiv,idInput,messageErreur){ + function erreurMessage(idDiv,messageErreur){ + //var variableInput=document.getElementById(idInput).value; + var paragraphe=document.createElement("p"); + paragraphe.textContent=messageErreur; + // paragraphe.textContent=verifieChainesVides(variableInput); + var divAffichage=document.getElementById(idDiv); + divAffichage.innerHTML=""; + divAffichage.appendChild(paragraphe); + } +//================================ function ReinitialisationErreurMessage(idDiv) ==================================== +function ReinitialisationDeErreurMessage(idDiv) { + // function erreurMessage(idDiv,messageErreur){ + //var variableInput=document.getElementById(idInput).value; + var paragraphe=document.createElement("p"); + paragraphe.textContent=""; + // paragraphe.textContent=verifieChainesVides(variableInput); + var divAffichage=document.getElementById(idDiv); + divAffichage.innerHTML=""; + divAffichage.appendChild(paragraphe); + } +//=============================== function appliquerStylesSurInputBordureRouge (idInput) ===================================== +function appliquerStylesSurInputBordureRouge(idInput) { + var inputElement = document.getElementById(idInput); // Sélectionne l'élément input par son ID + + // Vérifie si l'élément input existe + if (inputElement) { + // Applique les styles CSS à l'élément input + inputElement.style.border = "4px solid red"; // Crée une bordure de 2 pixels d'épaisseur, solide et rouge + inputElement.style.borderRadius = "5px"; // Ajoute un léger arrondi aux coins de la bordure + inputElement.style.padding = "5px"; // Ajoute un peu d'espace à l'intérieur de la bordure + } else { + // Affiche un message d'erreur si l'élément input n'est pas trouvé + console.error("L'élément input avec l'ID spécifié n'existe pas."); + } +} +//==================================function reinitialisationStylesInput(idInput)============================================== +function reinitialisationStylesInput(idInput) { + var inputElement = document.getElementById(idInput); // Sélectionne l'élément input par son ID + + // Vérifie si l'élément input existe + if (inputElement) { + // Applique les styles CSS à l'élément input + // inputElement.style.border = "0.8px solid #ccc"; // Crée une bordure de 2 pixels d'épaisseur, solide et rouge + inputElement.style.border = "0.8px solid #ccc"; // Crée une bordure de 2 pixels d'épaisseur, solide et rouge + inputElement.style.borderRadius = "8px"; // Ajoute un léger arrondi aux coins de la bordure + inputElement.style.padding = "8px"; // Ajoute un peu d'espace à l'intérieur de la bordure + + // inputElement.style.outline=none; + + } else { + // Affiche un message d'erreur si l'élément input n'est pas trouvé + console.error("L'élément input avec l'ID spécifié n'existe pas."); + } +} + + + +//================================== fonction messageErreur(id , message) ================================================== +// id est l'id de ma div, le message est un message d'erreur en fonction de la situation rencontrée. +// function messageErreur(id, messageerreur){ +// let resultat=document.getElementById(id); +// let paragraphe=document.createElement("p"); +// paragraphe.textContent=messageErreur; +// resultat.appendChild(paragraphe); + +// } + +//================================== fonction reinitialisationDesChamps () ================================================= +function reinitialisationDesChamps () { +prenom.value=""; +nom.value=""; +email.value=""; +dateDeNaissance.value=""; +quantite.value=""; + +} +//================================== function reinitialisationFormulaire() ================================================ +function reinitialisationFormulaire(){ + reinitialisationDesChamps () // reinitialisation des champs + ReinitialisationDeErreurMessage("divPrenom") //reinitialisation de la divPrenom + ReinitialisationDeErreurMessage("divNom") //reinitialisation de la divNom + ReinitialisationDeErreurMessage("divEmail") //reinitialisation de la divEmail } //========================================================================================================================= // launch modal form @@ -30,7 +138,7 @@ function launchModal() { // Sélectionnez le bouton d'inscription const inscriptionBtn = document.querySelector(".btn-submit"); // Ajoutez un événement de clic au bouton d'inscription -inscriptionBtn.addEventListener("click", afficherMessage); +//inscriptionBtn.addEventListener("click", afficherMessage); //========================================= function afficherMessage() ====================================================== // Fonction pour afficher le message "Vous êtes inscrit" @@ -41,33 +149,66 @@ const divResultat = document.querySelector(".resultat"); // Créer un élément de paragraphe const paragraphe = document.createElement("p"); // Ajouter le texte "Je t'aime" au paragraphe -paragraphe.textContent = "vous etes inscrit (de la fonction AfficherMessage()) "; +// paragraphe.textContent = "vous etes inscrit (de la fonction AfficherMessage()) "; +paragraphe.textContent = "Merci, votre réservation a été reçue "; // Ajouter le paragraphe à la div avec la classe "said" divResultat.appendChild(paragraphe); //return "Vous êtes inscrit" return "vous etes inscrit" } //============================================ function verifierChaine(chaine) ===================================================== -function verifierChaine(chaine) { + +function verifierChaine(chaine,label,idDiv,idInput) { // Vérifie si la longueur de la chaîne est supérieure à 2 if (chaine.length > 2) { // Vérifie si la chaîne ne contient que des lettres (pas de chiffres) if (/^[a-zA-Z]+$/.test(chaine)) { - alert("La chaîne est valide !"); + // alert("Le "+label + " est valide !"); + reinitialisationStylesInput(idInput);// si erreur , repasse dans la boucle une deuxieme fois et reinitialise le input , car c'est valide + ReinitialisationDeErreurMessage(idDiv);//reinitialisation de la div } else { - alert("La chaîne ne doit contenir que des lettres !"); + // alert("Le "+label + " ne doit contenir que des lettres !"); + erreurMessage(idDiv,"Le "+label + " ne doit contenir que des lettres !") + appliquerStylesSurInputBordureRouge(idInput); + isError=true; } } else { - alert("La chaîne doit avoir plus de deux lettres !"); + // alert("Le "+label + " doit avoir plus de deux lettres !"); + erreurMessage(idDiv,"Le "+label + " doit avoir plus de deux lettres !") + appliquerStylesSurInputBordureRouge(idInput); + isError=true; } } + +// function verifierChaine(chaine,label) { +// // Vérifie si la longueur de la chaîne est supérieure à 2 +// if (chaine.length > 2) { +// // Vérifie si la chaîne ne contient que des lettres (pas de chiffres) +// if (/^[a-zA-Z]+$/.test(chaine)) { +// // alert("Le "+label + " est valide !"); +// } else { +// alert("Le "+label + " ne doit contenir que des lettres !"); + +// isError=true; +// } +// } else { +// alert("Le "+label + " doit avoir plus de deux lettres !"); +// isError=true; +// } +// } + //============================================== function verifierEmail(email) ======================================================= function verifierEmail(email) { // Vérifie si l'email contient un "@" et un "." if (email.includes("@") && email.includes(".")) { - alert("L'email est valide !"); + //alert("L'email est valide !"); + reinitialisationStylesInput("email") + ReinitialisationDeErreurMessage("divEmail") } else { - alert("L'email n'est pas valide !"); + // alert("L'email n'est pas valide !"); + erreurMessage("divEmail","L'email n'est pas valide !") + appliquerStylesSurInputBordureRouge("email"); + isError=true; } } //============================================== function verifierChampsVides() ======================================================= @@ -83,6 +224,7 @@ function verifierChampsVides() { // Affiche un message d'erreur pour cet élément alert("Le champ " + champs[i].name + " est vide !"); + isError=true; // Arrête la fonction ici return false; @@ -91,8 +233,12 @@ function verifierChampsVides() { return true; } +document.getElementsByTagName("form")[0].addEventListener('submit', validate);//tous les elements html de la page, recherche de tous les elements form en mode tableau //=================================================== function validate() =========================================================== -function validate(){ +function validate(event){ + console.log(event) + event.preventDefault() + isError=false; //verifierChampsVides() //================================================================================================= /* Recuperation de l'ensemble des input et textaera */ @@ -100,13 +246,13 @@ function validate(){ let balisePrenom = document.getElementById("first") let prenom= balisePrenom.value console.log(prenom) // affiche ce qui est contenu dans la balisePrenom - //verifierChaine(prenom) + verifierChaine(prenom, "prenom","divPrenom","first") //================================================================================================= // Au niveau de la fiche d'inscription, récuperation de la donnée nom : let baliseNom = document.getElementById("last") let nom= baliseNom.value console.log(nom) // affiche ce qui est contenu dans la baliseNom - // verifierChaine(nom) + verifierChaine(nom,"nom","divNom","last") //================================================================================================= // Au niveau de la fiche d'inscription, récuperation de la donnée email : let baliseEmail = document.getElementById("email") @@ -154,25 +300,34 @@ if(acceptationInformations===true){ }else{ console.log("Je ne souhaite pas être prévenu des prochains évènements.") } +if (isError===false){ + modalbg1.style.display="block"; + // afficherMessage();// affiche message sur la premiere page , inscription reussie + closeModal()//feremeture de la fenetre + reinitialisationFormulaire();//cette fonction fait appel a plusieurs fonctions pour reinitialiser le formulaire + +} + //================================================================================================= - // return false // formulaire inavalide -// console.log("je suis passe par la fin de la fonction validate()") +console.log("je suis passe par la fin de la fonction validate()") +return false // formulaire inavalide + // On empêche le comportement par défaut } +// let test= validate(); +// console.log(test); +// alert(test) +// //si ma fonction validate est a true alors je ferme et je dis que je suis inscrit +// if (validate()===false){ +// closeModal(); +// inscriptionBtn.addEventListener("click", afficherMessage); +// afficherMessage(); +// } //===================================================================================================================================== //===================================================================================================================================== -// function said(){ -// const divResultat = document.querySelector(".resultat"); -// // Créer un élément de paragraphe -// const paragraphe = document.createElement("p"); -// // Ajouter le texte "Je t'aime" au paragraphe -// paragraphe.textContent = "vous etes inscrit dans la fonction said"; -// // Ajouter le paragraphe à la div avec la classe "said" -// divResultat.appendChild(paragraphe); -// console.log("je suis passé par la fonction said") -// } + //===================================================================================================================================== // function afficherDiv(div){ // if (div ==="vous etes inscrit"){ @@ -180,7 +335,7 @@ if(acceptationInformations===true){ // const divSaid = document.querySelector(".said"); // // Créer un élément de paragraphe // const paragraphe = document.createElement("p"); -// // Ajouter le texte "Je t'aime" au paragraphe +// // Ajouter le texte "vous etes inscrit" au paragraphe // paragraphe.textContent = "vous etes inscrit AFFICHER "; // // Ajouter le paragraphe à la div avec la classe "said" // divSaid.appendChild(paragraphe); diff --git a/starterOnly/test.html b/starterOnly/test.html new file mode 100644 index 0000000000..168b893ab2 --- /dev/null +++ b/starterOnly/test.html @@ -0,0 +1,28 @@ + + + + Reservation + + + + + + + +
+
+ +
+ +
+
+
+ + + + +
+
+
+ + \ No newline at end of file