issue OpenClassrooms-Student-Center#4: Affichage du message du remerc…

…iement et l'application du css
manelgasmi · Aug 7, 2024 · aea5ad4 · aea5ad4
1 parent 8176432
commit aea5ad4
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 49 deletions.
diff --git a/starterOnly/index.html b/starterOnly/index.html
@@ -52,9 +52,9 @@ <h1 class="hero-headline">
 
       <div class="bground">
         <div class="content">
-          <button class="close"></button>
+          <button class="close close-btn"></button>
           <div class="modal-body">
-            <form
+            <form 
               novalidate
               name="reserve"
               action="index.html"
@@ -220,6 +220,14 @@ <h1 class="hero-headline">
                 value="C'est parti"
               />
             </form>
+            <div id="thankYouMessage" class="hidden">
+              <p>
+                Merci pour<br>votre inscription
+              </p>
+              <button class="btn-submit button close-btn">
+                Fermer
+              </button>
+            </div>
           </div>
         </div>
       </div>

diff --git a/starterOnly/modal.css b/starterOnly/modal.css
@@ -35,10 +35,10 @@ img {
   margin: 3.5%;
 }
 .header-logo {
-    float: left;
+  float: left;
 }
 .main-navbar {
-    float: right;
+  float: right;
 }
 .topnav a {
   float: left;
@@ -79,15 +79,19 @@ img {
 }
 
 @media screen and (max-width: 768px) {
-  .topnav a {display: none;}
+  .topnav a {
+    display: none;
+  }
   .topnav a.icon {
     float: right;
     display: block;
   }
 }
 
 @media screen and (max-width: 768px) {
-  .topnav.responsive {position: relative;}
+  .topnav.responsive {
+    position: relative;
+  }
   .topnav.responsive .icon {
     position: absolute;
     right: 0;
@@ -100,16 +104,16 @@ img {
   }
 }
 
-
-
- @media screen and (max-width: 540px) {
-  .topnav a {display: none;}
+@media screen and (max-width: 540px) {
+  .topnav a {
+    display: none;
+  }
   .topnav a.icon {
     float: right;
     display: block;
     margin-top: -15px;
   }
-} 
+}
 
 main {
   font-size: 130%;
@@ -121,8 +125,6 @@ main {
   margin: 1px 20px 15px;
   border-radius: 2rem;
   text-align: justify;
-
-
 }
 
 .modal-btn {
@@ -325,7 +327,7 @@ input[data-error]::after {
   content: " ";
   height: 33px;
   width: 3px;
-  top:0;
+  top: 0;
   background-color: #fff;
 }
 .close:before {
@@ -403,9 +405,16 @@ input[data-error]::after {
   z-index: 99;
 }
 
-/* Hide the items when the select box is closed: */
-.select-hide {
-  display: none;
+.hidden {
+  display: none !important;
+}
+
+.btn-close-thankYouMessage {
+  width: 182px;
+  height: 40px;
+  border-radius: 10px;
+  color: #ffffff;
+  background-color: rgba(254, 20, 47, 1);
 }
 
 .select-items div:hover,
@@ -417,6 +426,23 @@ input[data-error]::after {
   font-weight: normal;
   font-size: 16px;
 }
+
+#thankYouMessage {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  text-align: center;
+  align-items: center;
+}
+
+#thankYouMessage p {
+  font-weight: 400;
+  font-size: 36px;
+  min-height: 40rem;
+  align-items: center;
+  display: flex;
+}
+
 .hero-section {
   min-height: 93vh;
   border-radius: 10px;
@@ -539,4 +565,3 @@ footer {
     opacity: 1;
   }
 }
-
diff --git a/starterOnly/modal.js b/starterOnly/modal.js
@@ -11,8 +11,7 @@ function editNav() {
 const modalbg = document.querySelector(".bground");
 const modalBtn = document.querySelectorAll(".modal-btn");
 const formData = document.querySelectorAll(".formData");
-const btnClose = document.querySelector("button.close");
-
+const closeButtons = document.querySelectorAll(".close-btn");
 // launch modal event
 modalBtn.forEach((btn) => btn.addEventListener("click", launchModal));
 
@@ -22,7 +21,7 @@ function launchModal() {
 }
 
 // Close modal event
-btnClose.addEventListener("click", closeModal);
+closeButtons.forEach((btn) => btn.addEventListener("click", closeModal));
 
 // Close modal form
 function closeModal() {
@@ -40,78 +39,72 @@ function validate(event) {
   let isError = false;
 
   if (firstName.length < 2) {
-    console.log("Erreur prénom doit être minimum 2 lettres");
-    firstNameError.innerHTML = "Veuillez entrer 2 caractères ou plus pour le champ du prénom.";
-    firstNameInput.classList.add('error-message-input');
+    firstNameError.innerHTML =
+      "Veuillez entrer 2 caractères ou plus pour le champ du prénom.";
+    firstNameInput.classList.add("error-message-input");
     isError = true;
   } else {
     firstNameError.innerHTML = "";
-    firstNameInput.classList.remove('error-message-input');
+    firstNameInput.classList.remove("error-message-input");
     isError = false;
   }
-  console.log("isError:", isError);
 
   // Last name validation
   const lastNameInput = document.getElementById("last");
   const lastNameError = document.getElementById("error-lastName");
   const lastName = lastNameInput.value;
   if (lastName.length < 2) {
-    console.log("Erreur nom doit être minimum 2 lettres");
-    lastNameError.innerHTML = "Veuillez entrer 2 caractères ou plus pour le champ du nom.";
-    lastNameInput.classList.add('error-message-input');
-    isError = true;
+    lastNameError.innerHTML =
+      "Veuillez entrer 2 caractères ou plus pour le champ du nom.";
+    lastNameInput.classList.add("error-message-input");
+    isError = isError && true;
   } else {
     lastNameError.innerHTML = "";
-    lastNameInput.classList.remove('error-message-input');
-    isError = true;
+    lastNameInput.classList.remove("error-message-input");
+    isError = isError && false;
   }
-  console.log("isError:", isError);
 
   // email validation
   const emailInput = document.getElementById("email");
   const emailError = document.getElementById("error-email");
   let email = emailInput.value;
   let emailRegExp = new RegExp("[a-z0-9._-]+@[a-z0-9._-]+.[a-z0-9._-]+");
   if (emailRegExp.test(email)) {
-    console.log("Email valide");
     emailError.innerHTML = "";
-    emailInput.classList.remove('error-message-input');
+    emailInput.classList.remove("error-message-input");
     isError = false;
   } else {
     emailError.innerHTML = "Veuillez entrer un email valide.";
-    emailInput.classList.add('error-message-input');
+    emailInput.classList.add("error-message-input");
     isError = true;
-    console.log("Erreur email non valide");
   }
   // error message of birth date
   const birthdateInput = document.getElementById("birthdate");
   const birthdateError = document.getElementById("birth-error");
   const birthdate = birthdateInput.value;
-  console.log(birthdate);
+
   if (!birthdate) {
-    console.log("erreur birthdate");
     birthdateError.innerHTML = "Veuillez entrer votre date de naissance.";
-    birthdateInput.classList.add('error-message-input');
-    isError = true;
+    birthdateInput.classList.add("error-message-input");
+    isError = isError && true;
   } else {
     birthdateError.innerHTML = "";
-    birthdateInput.classList.remove('error-message-input');
-    isError = false;
+    birthdateInput.classList.remove("error-message-input");
+    isError = isError && false;
   }
 
   // number of Competition validation
   const nbrCompetitions = document.getElementById("quantity");
   const errorNbr = document.getElementById("error-nbr");
   const nbr = nbrCompetitions.value;
   if (nbr < 0 || nbr > 99 || !nbr) {
-    console.log("Erreur nombre de compétition doit être compris entre 0 et 99");
     errorNbr.innerHTML =
       "Le nombre de compétition doit être compris entre 0 et 99.";
-      nbrCompetitions.classList.add('error-message-input');
+    nbrCompetitions.classList.add("error-message-input");
     isError = true;
   } else {
     errorNbr.innerHTML = "";
-    nbrCompetitions.classList.remove('error-message-input');
+    nbrCompetitions.classList.remove("error-message-input");
     isError = false;
   }
 
@@ -136,13 +129,12 @@ function validate(event) {
     }
   }
   if (locationChecked === false) {
-    console.log("Erreur vous devez choisir une localisation");
   }
 
   // general conditions box validation
   const generalConditions = document.getElementById("checkbox1");
   const checkboxError = document.getElementById("checkbox-error");
-  if (!checkbox1.checked) {
+  if (!generalConditions.checked) {
     checkboxError.innerHTML =
       "Vous devez accepter les conditions d'utilisation.";
     isError = true;
@@ -151,6 +143,14 @@ function validate(event) {
     isError = false;
   }
   if (generalConditions.checked === false) {
-    console.log("Erreur vous devez accepter les conditions générales");
+  }
+
+  // show the thank you message
+  if (!isError) {
+    const thankYouMessage = document.getElementById("thankYouMessage");
+    const form = document.querySelector("form");
+
+    form.classList.add("hidden");
+    thankYouMessage.classList.remove("hidden");
   }
 }