Fixed Issue 2, 3, 4 OpenClassrooms-Student-Center#2 OpenClassrooms-St…

…udent-Center#3 OpenClassrooms-Student-Center#4
metalfeanor · Apr 8, 2021 · 93bb451 · 93bb451
1 parent 7d6df89
commit 93bb451
Show file tree

Hide file tree

Showing 3 changed files with 151 additions and 31 deletions.
diff --git a/starterOnly/index.html b/starterOnly/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="fr">
   <head>
     <meta charset="utf-8" />
     <title>Reservation</title>
@@ -41,26 +41,35 @@ <h1 class="hero-headline">
             Vous aimez jouer ? Notre prochain évènement gaming est ouvert aux
             réservations... Places limitées !
           </p>
-          <button class="btn-signup modal-btn">je m'inscris</button>
+          <button type="button" class="btn-signup modal-btn">
+            je m'inscris
+          </button>
         </div>
         <div class="hero-img">
           <img src="./bg_img.jpg" alt="img" />
         </div>
-        <button class="btn-signup modal-btn">je m'inscris</button>
+        <button type="button" class="btn-signup modal-btn">je m'inscris</button>
       </div>
 
       <div class="bground">
         <div class="content">
           <span class="close"></span>
+          <div id="confirmation">
+            <h2>
+              Merci ! Les informations nécessaires pour votre réservation nous
+              ont bien été transmises.
+            </h2>
+            <button type="button" class="btn-close">Fermer</button>
+          </div>
           <div class="modal-body">
             <form
               name="reserve"
-              action="index.html"
-              method="get"
-              onsubmit="return validate();"
+              method="GET"
+              onsubmit="return validate(event);"
+              id="form"
             >
               <div class="formData">
-                <label>Prénom</label><br />
+                <label for="first">Prénom</label><br />
                 <input
                   class="text-control"
                   type="text"
@@ -71,17 +80,18 @@ <h1 class="hero-headline">
                 /><br />
               </div>
               <div class="formData">
-                <label>Nom</label><br />
+                <label for="last">Nom</label><br />
                 <input
                   class="text-control"
                   type="text"
                   id="last"
                   name="last"
+                  minlength="2"
                   required
                 /><br />
               </div>
               <div class="formData">
-                <label>E-mail</label><br />
+                <label for="email">E-mail</label><br />
                 <input
                   class="text-control"
                   type="email"
@@ -91,7 +101,7 @@ <h1 class="hero-headline">
                 /><br />
               </div>
               <div class="formData">
-                <label>Date de naissance</label><br />
+                <label for="birthdate">Date de naissance</label><br />
                 <input
                   class="text-control"
                   type="date"
@@ -101,7 +111,7 @@ <h1 class="hero-headline">
                 /><br />
               </div>
               <div class="formData">
-                <label
+                <label for="quantity"
                   >À combien de tournois GameOn avez-vous déjà participé
                   ?</label
                 ><br />
@@ -112,9 +122,10 @@ <h1 class="hero-headline">
                   name="quantity"
                   min="0"
                   max="99"
+                  required
                 />
               </div>
-              <p class="text-label">Quelles villes ?</p>
+              <p class="text-label">Quelle ville ?</p>
               <div class="formData">
                 <input
                   class="checkbox-input"
@@ -182,31 +193,38 @@ <h1 class="hero-headline">
                   <span class="checkbox-icon"></span>
                   Portland</label
                 >
+                <div class="radio-error error"></div>
               </div>
 
               <div class="formData">
                 <input
                   class="checkbox-input"
                   type="checkbox"
                   id="checkbox1"
+                  name="checkbox1"
                   checked
                 />
-                <label class="checkbox2-label" for="checkbox1" required>
+                <label class="checkbox2-label" for="checkbox1">
                   <span class="checkbox-icon"></span>
                   J'ai lu et accepté les conditions d'utilisation.
                 </label>
                 <br />
-                <input class="checkbox-input" type="checkbox" id="checkbox2" />
+                <input
+                  class="checkbox-input"
+                  type="checkbox"
+                  id="checkbox2"
+                  name="checkbox2"
+                />
                 <label class="checkbox2-label" for="checkbox2">
                   <span class="checkbox-icon"></span>
                   Je souhaite être prévenu des prochains évènements.
                 </label>
                 <br />
+                <div class="checkbox-error error"></div>
               </div>
               <input
-                class="btn-submit"
+                class="btn-submit button"
                 type="submit"
-                class="button"
                 value="C'est parti"
               />
             </form>

diff --git a/starterOnly/modal.css b/starterOnly/modal.css
@@ -14,7 +14,7 @@ body {
   margin: 0;
   display: flex;
   flex-direction: column;
-  background-image: url("background.png");
+  /*background-image: url("background.png");*/
   font-family: var(--font-default);
   font-size: 18px;
   max-width: 1300px;
@@ -35,10 +35,10 @@ img {
   margin: 3.5%;
 }
 .header-logo {
-    float: left;
+  float: left;
 }
 .main-navbar {
-    float: right;
+  float: right;
 }
 .topnav a {
   float: left;
@@ -69,15 +69,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;
@@ -90,16 +94,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%;
@@ -111,8 +115,6 @@ main {
   margin: 1px 20px 15px;
   border-radius: 2rem;
   text-align: justify;
-
-
 }
 
 .modal-btn {
@@ -200,6 +202,7 @@ input {
   border: 0.8px solid #ccc;
   outline: none;
 }
+
 .text-control {
   margin: 0;
   padding: 8px;
@@ -232,6 +235,27 @@ input[data-error]::after {
     font-size: 0.4em;
     color: red;
 } */
+
+#confirmation {
+  display: none;
+  flex-flow: wrap;
+  align-items: center;
+  padding: 20%;
+  height: 96vh;
+}
+
+/* Error Message */
+.error {
+  font-size: 16px;
+  color: #f00;
+  text-align: center;
+}
+.border-error {
+  border: 2px solid red;
+  border-radius: 0.2em;
+  padding-right: 5px;
+}
+
 .checkbox-label,
 .checkbox2-label {
   position: relative;
@@ -333,6 +357,18 @@ input[data-error]::after {
   cursor: pointer;
   border: 0;
 }
+.btn-close {
+  display: none;
+  background: #fe142f;
+  margin: 0 auto;
+  border-radius: 7px;
+  font-size: 1rem;
+  padding: 12px 82px;
+  color: #fff;
+  cursor: pointer;
+  border: 0;
+  align-self: flex-end;
+}
 /* custom select styles */
 .custom-select {
   position: relative;
@@ -526,4 +562,3 @@ footer {
     opacity: 1;
   }
 }
-
diff --git a/starterOnly/modal.js b/starterOnly/modal.js
@@ -9,16 +9,21 @@ function editNav() {
 
 // DOM Elements
 const modalbg = document.querySelector(".bground");
+const modalBody = document.querySelector(".modal-body");
 const modalBtn = document.querySelectorAll(".modal-btn");
 const modalCloseBtn = document.querySelectorAll(".close");
-const formData = document.querySelectorAll(".formData");
+const dataSendCloseBtn = document.querySelector(".btn-close");
+//const formData = document.querySelectorAll(".formData");
 const copyright = document.querySelector(".copyrights");
+const form = document.getElementById("form");
+const formTransmitted = document.getElementById("confirmation");
+const locationInputData = document.getElementsByName("location");
 
 // launch modal event
 modalBtn.forEach((btn) => btn.addEventListener("click", launchModal));
 // close modal event
 modalCloseBtn.forEach((e) => e.addEventListener("click", closeModal));
-
+dataSendCloseBtn.addEventListener("click", closeModal);
 // launch modal form
 function launchModal() {
   modalbg.style.display = "block";
@@ -31,3 +36,65 @@ function closeModal() {
 //insert copyright with automatically good actual year
 const year = new Date().getFullYear();
 copyright.textContent = "Copyright 2014 - " + year + ", GameOn Inc.";
+
+//checking inputs
+function checkInputs() {
+  const formData = new FormData(form);
+  const entries = formData.entries();
+  const data = Object.fromEntries(entries);
+  console.log(data);
+
+  //DOM element for error message
+  const radioError = document.querySelector(".radio-error");
+  const checkboxError = document.querySelector(".checkbox-error");
+
+  //select parent element to radio input
+  const parentRadioElt = document.getElementById("location1").parentElement;
+
+  //select parent element to checkbox input
+  const parentCheckboxElt = document.getElementById("checkbox1").parentElement;
+
+  if (!data.location) {
+    parentRadioElt.classList.add("border-error");
+    //error message
+    radioError.innerHTML = "Merci de bien vouloir sélectionner une ville !";
+  }
+  if (data.location) {
+    if (parentRadioElt.classList.contains("border-error")) {
+      //remove radiobox class
+      parentRadioElt.classList.remove("border-error");
+      //remove error message
+      radioError.innerHTML = "";
+    }
+  }
+  if (!data.checkbox1) {
+    parentCheckboxElt.classList.add("border-error");
+    //error message
+    checkboxError.innerHTML = "Merci d'accepter les conditions d'utilisation !";
+  }
+  if (data.checkbox1) {
+    if (parentCheckboxElt.classList.contains("border-error")) {
+      //remove radiobox class
+      parentCheckboxElt.classList.remove("border-error");
+      //remove error message
+      checkboxError.innerHTML = "";
+    }
+  }
+
+  if (data.hasOwnProperty("location") && data.hasOwnProperty("checkbox1")) {
+    return JSON.stringify(data);
+  }
+}
+
+function validate(e) {
+  e.preventDefault();
+  checkInputs();
+  if (checkInputs()) {
+    modalBody.style.display = "none";
+    dataSendCloseBtn.style.display = "block";
+    formTransmitted.style.display = "flex";
+    return true;
+  } else {
+    return false;
+  }
+}