OpenClassrooms-Student-Center#4

SarahHenriette · Jun 9, 2021 · f8ced61 · f8ced61
1 parent a1c4258
commit f8ced61
Show file tree

Hide file tree

Showing 3 changed files with 106 additions and 9 deletions.
diff --git a/starterOnly/form.js b/starterOnly/form.js
@@ -5,11 +5,13 @@ const quantity = document.querySelector('#quantity')
 const birthdate = document.querySelector('#birthdate')
 const checkbox = document.querySelectorAll('.checkbox-input[type="radio"]')
 const optionsCity = document.querySelector(".optionsCity")
-// const textControl = document.querySelectorAll('.text-control')
-
 const checkbox1 = document.querySelector("#checkbox1")
 const form = document.querySelector("form")
-var regexEmail = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
+const body = document.getElementById("body")
+const formulaire = document.querySelector(".bground");
+const textControl = document.querySelectorAll(".text-control")
+
+let regexEmail = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
 let regexMin = /^.{2,35}$/
 let checkedCheckbox = false
 
@@ -49,7 +51,7 @@ function error(element, messageError, smallError) {
         if(regexEmail.test(email.value)) {
             success(email, email.parentNode.childNodes[7])
         }else {
-            error(email, "Veuillez entrer 2 caractères ou plus pour le champ du nom.", email.parentNode.childNodes[7])
+            error(email, "Veuillez entrer une adresse mail valide.", email.parentNode.childNodes[7])
         }
     })
 
@@ -103,7 +105,44 @@ function validate(event) {
         checkedCheckbox == true &&
         checkbox1.checked == true
         ){
-            alert('cest ok')
+            event.preventDefault()
+            // alert('cest ok')
+            // console.log(body)
+            let validationMessage = document.createElement('div')
+            let validationMessageClose = document.createElement('span')
+            let validationMessageBtnClose = document.createElement('button')
+
+            validationMessage.classList.add('msg')
+            validationMessageClose.classList.add('close')
+            validationMessageBtnClose.classList.add('btnClose')
+
+            validationMessage.textContent = "Vos informations ont bien été enregistré"
+            validationMessageBtnClose.textContent = "Close"
+
+            body.appendChild(validationMessage)
+            validationMessage.appendChild(validationMessageClose)
+            validationMessage.appendChild(validationMessageBtnClose)
+
+
+            //fermeture 
+            validationMessageClose.addEventListener('click', function(){
+                validationMessage.style.display = "none"
+            })
+
+            validationMessageBtnClose.addEventListener('click', function(){
+                validationMessage.style.display = "none"
+            })
+
+            //suppression du formulaire
+            formulaire.style.display="none"
+
+            //reset le formulaire
+            form.reset()
+            textControl.forEach(element => {
+                console.log(element)
+                element.classList.remove("success")
+            });
+
     } else {
         //si tout n'est pas rempli je mets les messages d'erreurs
         event.preventDefault()

diff --git a/starterOnly/index.html b/starterOnly/index.html
@@ -12,7 +12,7 @@
       rel="stylesheet"
     />
   </head>
-  <body>
+  <body id="body">
     <div class="topnav" id="myTopnav">
       <div class="header-logo">
       <img alt="logo" src="Logo.png" width="auto" height="auto" />
@@ -90,7 +90,6 @@ <h1 class="hero-headline">
                 <label for="email">E-mail</label><br>
                 <input
                   class="text-control"
-                  type="email"
                   id="email"
                   name="email"
                 /><br>
@@ -110,7 +109,7 @@ <h1 class="hero-headline">
               <div
                 class="formData">
                 <label for="quantity">À combien de tournois GameOn avez-vous déjà participé ?</label><br>
-                <input class="text-control" id="quantity" name="quantity" min="0" max="99">
+                <input class="text-control" id="quantity" name="quantity">
                 <small class="errorMessage">Error</small>
               </div>
               <p class="text-label">Quelles villes ?</p>

diff --git a/starterOnly/modal.css b/starterOnly/modal.css
@@ -97,7 +97,7 @@ img {
   .topnav a.icon {
     float: right;
     display: block;
-    margin-top: -15px;
+    /* margin-top: -15px; */
   }
 } 
 
@@ -499,6 +499,44 @@ footer {
   border: green 2px solid;
 }
 
+/* message de validation  */
+.msg {
+  width: auto;
+  height: auto;
+  position: absolute;
+  top: 198px;
+  right: 250px;
+  padding: 110px 73px;
+  z-index: 700;
+  background-color: #278827;
+}
+
+.btnClose {
+  position: absolute;
+  bottom: 19px;
+  margin: auto;
+  left: 0;
+  right: 0;
+  padding: 9px 47px;
+  background-color: #fff;
+  border: none;
+}
+@media screen and (max-width: 1200px) {
+  .hero-headline {
+    font-size: 4.5rem;
+  }
+  .topnav {
+    display: flex;
+    flex-direction: column;
+  }
+  .topnav a {
+    font-size: 18px;
+  }
+  .main-navbar {
+    margin-top: 2rem;
+  }
+}
+
 @media screen and (max-width: 800px) {
   .hero-section {
     display: block;
@@ -538,6 +576,27 @@ footer {
   }
 }
 
+@media screen and (max-width: 770px) {
+  .topnav {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+  }
+  .main-navbar {
+    margin-top: 0;
+  }
+}
+@media screen and (max-width: 470px) {
+  .hero-headline {
+    font-size: 4rem;
+  }
+  .hero-content {
+    min-width: 0px;
+  }
+  .topnav {
+    margin: 6.5%;
+}
+}
 @keyframes modalopen {
   from {
     opacity: 0;