add success screen on form submit OpenClassrooms-Student-Center#4

index.html

@@ -204,6 +204,14 @@ <h1 class="hero-headline">
                 value="C'est parti"
               />
             </form>
+            <div id="success-screen">
+              <h2>Merci pour votre inscription</h2>
+              <input
+                class="btn-submit button btn-close"
+                type="button"
+                value="Fermer"
+              />
+            </div>
           </div>
         </div>
       </div>

modal.css

@@ -178,6 +178,7 @@ main {
   margin: 5% auto;
   width: 100%;
   max-width: 500px;
+  height: 767px;
   animation-name: modalopen;
   animation-duration: var(--modal-duration);
   background: #232323;
@@ -191,6 +192,7 @@ main {
 .modal-body {
   padding: 15px 8%;
   margin: 15px auto;
+  height: 100%;
 }
 
 label {
@@ -213,6 +215,23 @@ input {
   font-size: 20px;
   height: 48px;
 }
+
+#success-screen {
+  display: none;
+  flex-direction: column;
+  height: 100%;
+  padding: 30px 0;
+  background-color: #232323;
+}
+
+#success-screen h2 {
+  font-size: 36px;
+  font-weight: 400;
+  margin: auto;
+  padding: 0 73px;
+  text-align: center;
+}
+
 .formData[data-error]::after {
   content: attr(data-error);
   font-size: 0.4em;

modal.js

@@ -13,12 +13,14 @@ const modalShowBtn = document.querySelectorAll(".modal-btn");
 const form = document.getElementsByTagName("form")[0];
 const formData = document.querySelectorAll(".formData");
 const modalHideBtn = document.getElementsByClassName("close")[0];
+const successScreenHideBtn = document.querySelector("#success-screen .btn-close");
 
 // Register event listeners
 //
 // show/hide modal
 modalShowBtn.forEach((btn) => btn.addEventListener("click", launchModal));
 modalHideBtn?.addEventListener("click", hideModal);
+successScreenHideBtn?.addEventListener("click", hideModal);
 // form submit event
 form.addEventListener("submit", validate);
 
@@ -30,6 +32,7 @@ function launchModal() {
 // hide the modal
 function hideModal() {
   modalbg.style.display = "none";
+  hideSuccessScreen();
 }
 
 
@@ -73,7 +76,6 @@ function validate(e) {
 
   // birthday validation
   let birthday = formData[3].getElementsByTagName("input")[0].value;
-  console.log(birthday);
   if (birthday === "") {
     showValidationError(formData[3], "Veuillez sélectionner une date");
   } else {
@@ -111,7 +113,7 @@ function validate(e) {
   // submit the form if there are no validation errors
   let visibleErrors = document.querySelectorAll("[data-error-visible=true]");
   if (visibleErrors.length === 0) {
-    form.submit();
+    submitForm(form);
   }
 }
 
@@ -133,3 +135,40 @@ function showValidationError(element, errorMessage) {
 function hideValidationError(element) {
   element.setAttribute("data-error-visible", false);
 }
+
+// submit the form
+async function submitForm(form) {
+  const data = new FormData(form);
+  const url = ""; // to be updated
+
+  try {
+    const response = await fetch(url, {
+      method: "POST",
+      body: data
+    });
+
+    // The following code should be re-enabled once we have a proper endpoint to receive the POST request
+
+    // if (!response.ok) {
+    //   throw new Error("Fetch error");
+    // } else {
+    showSuccessScreen();
+    // }
+
+  } catch (error) {
+    console.error(error.message);
+  }
+}
+
+
+// show success screen
+function showSuccessScreen() {
+  form.style.display = "none";
+  document.getElementById("success-screen").style.display = "flex";
+}
+
+//hide success screen
+function hideSuccessScreen() {
+  form.style.display = "block";
+  document.getElementById("success-screen").style.display = "none";
+}