Merge pull request #2 from beseb/beseb/issue2

issue OpenClassrooms-Student-Center#3 & OpenClassrooms-Student-Center#4 : error message & confirmation screen ok !
ThisIsB3SS · Apr 17, 2024 · 9c33dcb · 9c33dcb
2 parents 54e3537 + f995280
commit 9c33dcb
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 30 deletions.
diff --git a/index.html b/index.html
@@ -218,14 +218,13 @@ <h1 class="hero-headline">
                 value="C'est parti"
               />
             </form>
+            <div class="successModal" >
+              <h2>Merci pour votre inscription !</h2>
+              <button class="btn-successModal"  aria-label="close modal">Fermer</button>
+            </div>
           </div>
         </div>
       </div>
-          <div class="successModal">
-          <span class="close"></span>
-          <span class="successMessage">Merci pour votre inscription</span>
-          <button class="button close">Fermer</button>
-        </div>
     </main>
     <footer>
       <p class="copyrights">

diff --git a/scripts/app.js b/scripts/app.js
@@ -1,5 +1,5 @@
 import { checkInputValue, checkIfLocationSelected, checkIfTermsAccepted, checkIfUserIsOver18, errorMessage, regexName, regexEmail, regexQuantity} from './function.js';
-import { closeModal } from './modal.js';
+import { closeModal, showSuccessModal } from './modal.js';
 
 // Get the form
 const form = document.getElementById('form');
@@ -49,9 +49,8 @@ function validate(e){
 
     // Validate form
     if(isFirstNameValid && isLastNameValid && isEmailValid && isQuantityValid && isBirthdateValid && isLocationValid && isTermsValid){
-    successModal.style.display = "block";
     form.reset();
-    closeModal();  
+    showSuccessModal();  
     }
 
 }

diff --git a/scripts/function.js b/scripts/function.js
@@ -47,8 +47,6 @@ export function checkIfUserIsOver18(element, message){
     diff = new Date(diff);
 
     const userAge = Math.abs(diff.getUTCFullYear() - 1970);
-    console.log(userAge);
-    console.log(birthdate);
     // Check if birthYear is realistic...
     const currentYear = new Date().getFullYear();
     const birthYear = birthdate.getFullYear();

diff --git a/scripts/modal.js b/scripts/modal.js
@@ -11,12 +11,17 @@ function editNav() {
 const modalbg = document.querySelector(".bground");
 const modalBtn = document.querySelectorAll(".modal-btn");
 const closeBtn = document.querySelector(".close");
+const closeBtnSuccessModal = document.querySelector(".btn-successModal");
 const content = document.querySelector(".content");
+const successModal = document.querySelector('.successModal');
+const form = document.getElementById('form');
+
 
 // launch modal event
 modalBtn.forEach((btn) => btn.addEventListener("click", launchModal));
 // close modal event
 closeBtn.addEventListener("click", closeModal);
+closeBtnSuccessModal.addEventListener('click', closeModal);
 
 // Launch modal form
 export function launchModal() {
@@ -25,9 +30,14 @@ export function launchModal() {
 // Close modal form
 export function closeModal() {
   content.classList.toggle("--hidden");
+  successModal.classList.toggle("--hidden");
   setTimeout(function() {
     modalbg.style.display = "none";
   }, 500); 
 }
-
+// On validation success, display success modal
+export function showSuccessModal() {
+  form.style.display = "none";
+  successModal.style.display = "flex";
+}
 
diff --git a/styles/modal.css b/styles/modal.css
@@ -139,7 +139,7 @@ main {
 
 /* Modal form */
 
-.button {
+.button, .btn-successModal {
   background: #fe142f;
   margin-top: 0.5em;
   padding: 1em;
@@ -149,29 +149,14 @@ main {
   font-size: 16px;
 }
 
-.button:hover {
+.button:hover, .btn-successModal:hover {
   background: #3876ac;
 }
 
 .smFont {
   font-size: 16px;
 }
-// Modal Success
-.successModal {
-  display: none;
-  position: fixed;
-  z-index: 1;
-  left: 0;
-  top: 0;
-  height: 100%;
-  width: 100%;
-  overflow: auto;
-  background-color: rgba(26, 39, 156, 0.4);
-}
-.successMessage{
-  font-size: 1.5rem;
-  color: white;
-}
+
 .bground {
   display: none;
   position: fixed;
@@ -184,7 +169,7 @@ main {
   background-color: rgba(26, 39, 156, 0.4);
 }
 
-.content {
+.content, .successModal {
   margin: 5% auto;
   width: 100%;
   max-width: 500px;
@@ -197,6 +182,20 @@ main {
   color: #fff;
   padding-top: 10px;
 }
+.successModal {
+  display: none;
+  color: #000;
+  min-height: 600px ;
+  text-wrap: pretty;
+  text-spacing: 1em;
+  padding: 1em;
+  color: white;
+  flex-direction: column;
+  justify-content: space-evenly;
+  align-items: center;
+
+  gap: 2em;
+}
 /*  Custom style for modal closed */
 .--hidden{
   animation-name: modalclose;
@@ -341,6 +340,7 @@ input[data-error]::after {
 .close:after {
   transform: rotate(-45deg);
 }
+.btn-successModal,
 .btn-submit,
 .btn-signup {
   background: #fe142f;