issue 2: ajouter confirmation quand envoi réussi OpenClassrooms-Stude…

…nt-Center#2

starterOnly/index.html

@@ -55,10 +55,10 @@ <h1 class="hero-headline">
           <span class="close"></span>
           <div class="modal-body">
             <form
+              id="inscription-form"
               name="reserve"
-              action="index.html"
+              action="#"
               method="get"
-              onsubmit="return validate();"
             >
               <div
                 class="formData">
@@ -204,6 +204,13 @@ <h1 class="hero-headline">
                 value="C'est parti"
               />
             </form>
+            <div class="thanks">
+              <div class="thanks-txt">
+                <p>Merci pour<br> votre inscription</p>
+              </div>
+              <div class="close-btn btn-submit">Fermer
+              </div>
+            </div>
           </div>
         </div>
       </div>

starterOnly/modal.css

@@ -72,6 +72,30 @@ img {
   display: none;
 }
 
+.thanks{
+  display: none;
+  height: 400px;
+}
+
+.thanks .close-btn{
+  padding: 8px 35px;
+  margin-right: 30%;
+  margin-left: 30%;
+  margin-top: 100px;
+  text-align: center;
+  border-radius: 7px;
+  font-size: 1rem;
+  background: #fe142f;
+}
+
+.thanks-txt{
+  margin-top: 250px;
+  margin-bottom: 250px;
+  text-align: center;
+  font-size: 36px;
+  font-weight: 300;
+}
+
 @media screen and (max-width: 768px) {
   .topnav a {display: none;}
   .topnav a.icon {

starterOnly/modal.js

@@ -11,13 +11,38 @@ function editNav() {
 const modalbg = document.querySelector(".bground");
 const modalBtn = document.querySelectorAll(".modal-btn");
 const formData = document.querySelectorAll(".formData");
+const btnSubmit = document.querySelector(".btn-submit");
+const btnClose = document.querySelector('.close-btn');
+const inscriptionForm = document.querySelector("#inscription-form");
+const thanksBlock = document.querySelector(".thanks");
 
 // launch modal event
 modalBtn.forEach((btn) => btn.addEventListener("click", launchModal));
 
+//validation du formulaire
+btnSubmit.addEventListener("click", validate);
+
+//fermeture remerciments via btn
+btnClose.addEventListener("click", closeModal);
+
 // launch modal form
 function launchModal() {
   modalbg.style.display = "block";
 }
 
+//close modal form
+function closeModal(){
+  thanksBlock.style.display = "none";
+  inscriptionForm.style.display = "block";
+  modalbg.style.display = "none";
+}
+//validation du formulaire, si valide affichage des remerciments
+function validate(e) {
+  launchThanks()
+}
 
+//affichage les remerciements
+function launchThanks(){
+  inscriptionForm.style.display = "none"
+  thanksBlock.style.display = "block";
+}