From 72c6b63380c76df11f7860095938e0747e754371 Mon Sep 17 00:00:00 2001
From: l0uise <louisepop14@gmail.com>
Date: Thu, 13 Jun 2024 15:49:33 +0200
Subject: [PATCH] =?UTF-8?q?issue=202:=20ajouter=20confirmation=20quand=20e?=
 =?UTF-8?q?nvoi=20r=C3=A9ussi=20#2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 starterOnly/index.html | 11 +++++++++--
 starterOnly/modal.css  | 24 ++++++++++++++++++++++++
 starterOnly/modal.js   | 25 +++++++++++++++++++++++++
 3 files changed, 58 insertions(+), 2 deletions(-)

diff --git a/starterOnly/index.html b/starterOnly/index.html
index fd1830e202..389ffb721a 100644
--- a/starterOnly/index.html
+++ b/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>
diff --git a/starterOnly/modal.css b/starterOnly/modal.css
index fc703a730d..e2d7723f78 100644
--- a/starterOnly/modal.css
+++ b/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 {
diff --git a/starterOnly/modal.js b/starterOnly/modal.js
index 694a848564..53e0bbf90c 100644
--- a/starterOnly/modal.js
+++ b/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";
+}