Fixed OpenClassrooms-Student-Center#4

GuillaumeP04 · Jun 7, 2021 · ed858f0 · ed858f0
1 parent 768a1cb
commit ed858f0
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 10 deletions.
diff --git a/starterOnly/modal.css → starterOnly/css/modal.css b/starterOnly/modal.css → starterOnly/css/modal.css
diff --git a/starterOnly/Logo.png → starterOnly/images/Logo.png b/starterOnly/Logo.png → starterOnly/images/Logo.png
diff --git a/starterOnly/bg_img.jpg → starterOnly/images/bg_img.jpg b/starterOnly/bg_img.jpg → starterOnly/images/bg_img.jpg
diff --git a/starterOnly/index.html b/starterOnly/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <title>Reservation</title>
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <link rel="stylesheet" href="modal.css" />
+    <link rel="stylesheet" href="./css/modal.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link
       href="https://fonts.googleapis.com/css?family=DM+Sans"
@@ -14,7 +14,7 @@
   <body>
     <div class="topnav" id="myTopnav">
       <div class="header-logo">
-      <img alt="logo" src="Logo.png" width="auto" height="auto" />
+      <img alt="logo" src="./images/Logo.png" width="auto" height="auto" />
     </div>
     <div class="main-navbar">
 
@@ -45,7 +45,7 @@ <h1 class="hero-headline">
           </button>
         </div>
         <div class="hero-img">
-          <img src="./bg_img.jpg" alt="img" />
+          <img src="./images/bg_img.jpg" alt="img" />
         </div>
         <button class="btn-signup modal-btn">
           je m'inscris
@@ -217,6 +217,6 @@ <h1 class="hero-headline">
         Copyright 2014 - 2020, GameOn Inc.
       </p>
     </footer>
-    <script src="modal.js"></script>
+    <script src="./javascript/modal.js"></script>
   </body>
 </html>
diff --git a/starterOnly/modal.js → starterOnly/javascript/modal.js b/starterOnly/modal.js → starterOnly/javascript/modal.js
@@ -1,4 +1,5 @@
 // DOM Elements
+let modalBody = document.querySelector(".modal-body");
 let modalbg = document.querySelector(".bground");
 let modalBtn = document.querySelectorAll(".modal-btn");
 let closeModal = document.getElementsByClassName("close")[0];
@@ -15,9 +16,10 @@ let conditionsCheckboxes = document.querySelector("input[name='conditions']");
 modalFormLaunch();
 modalFormClose();
 disableSubmitBtn();
-// form validation listener
+
+// event listener
 document.querySelector('form').addEventListener('change', isFormValid);
-// document.querySelector('form').addEventListener('submit', submitForm);
+document.querySelector('form').addEventListener('submit', submitForm);
 firstName.addEventListener('input', isFirstNameValid);
 lastName.addEventListener('input', isLastNameValid);
 email.addEventListener('input', isEmailValid); 
@@ -29,7 +31,7 @@ for (checkbox of locationCheckboxes) {
 conditionsCheckboxes.addEventListener('change', isConditionsValid);
 
 
-// form validation
+// functions
 function isFirstNameValid () {
   let parent = firstName.closest('div');
   showError(parent);
@@ -143,9 +145,31 @@ function isFormValid() {
 
 }
 
-// function submitForm(e) {
-//   e.preventDefault();
-// }
+function submitForm(e) {
+  console.log(e);
+  e.preventDefault();
+  document.querySelector('.modal-body').innerHTML = " ";
+  thankyouMessage();
+  closeBtn();
+}
+
+function thankyouMessage() {
+  let para = document.createElement("P");
+  para.innerText = 'Merci ! Votre réservation a été reçue.';              
+  document.querySelector('.modal-body').appendChild(para);
+  para.style.marginTop = "50px"
+}
+
+function closeBtn() {
+  let btn = document.createElement("BUTTON");     
+  btn.innerHTML = "Fermer";                   
+  document.querySelector('.modal-body').appendChild(btn);
+  btn.className = "btn-submit";
+  btn.style.marginTop = "50px"
+  btn.onclick = function() {
+    modalbg.style.display = "none";
+    };
+}
 
 function showError(el) {
   el.setAttribute('data-error-visible', true);