Ajustes em eventos

css/eventos.css

@@ -27,12 +27,13 @@
     background-color: #fff;  
   }
 
-  button {
+  .btn-send, .btn-modal {
     font-size: 16px;
     font-weight: bold;
     width: 120px;
     height: 40px;
-    margin-block: 15px;
+    margin-bottom: 10px;
+    margin-top: 15px;
     border-radius: 5px;
     cursor: pointer;
     background-color: #734bd1;
@@ -40,6 +41,10 @@
     border: none;
     transition-duration: 0.4s;
   }
+
+  .btn-modal {
+    margin-top: 50px;
+  }
   
   button:hover {
     background-color: #9466ff;
@@ -64,15 +69,17 @@
     bottom: 0;
   }
 
-  .form {
+  .form-container {
     display: none;
+    flex-direction: column;
+    justify-content: center;
     position: absolute;    
-    top: 30vh;
+    top: 20vh;
     z-index: 2;
     background-color: #fff;
     border-radius: 10px;
     border: 4px solid #734bd1;
-    min-height: 0;
+    min-height: 320px;
     width: 500px;
   }
 
@@ -96,6 +103,13 @@
     transform: rotate(45deg);    
   }
 
+  .send-message {
+    display: none;
+    text-align: center;
+    font-size: 30px;
+    font-weight: bold;
+  }
+
   form {
     padding-left: 10px;
   }
@@ -107,7 +121,7 @@
     width: 320px;
     border-color: #996dff;
     padding-left: 10px; 
-    font-size: 20PX;
+    font-size: 18PX;
   }
 
   select {
@@ -118,3 +132,14 @@
     height: 40px;
     font-size: 18px;
   }
+
+
+  @media (max-width: 550px) {
+    .form-container {
+      width: 90vw;      
+    }   
+    input, select {
+      width: calc(80vw - 120px);
+    }
+
+  }

paginas/eventos.html

@@ -40,17 +40,19 @@
 
     <div class="modal-content" ></div>
 
-    <div class="form">
+    <div class="form-container">
+
+      <div class="send-message"><a>Enviando...</a></div>
 
       <div class="head-form">
 
         <a class="form-title">Cadastrar evento</a>
 
-        <a class="close" onclick="openCloseModal('none')" >+</a>  
+        <a class="close" onclick="openClose('modal-content', 'form-container', 'none')" >+</a>  
 
       </div>
 
-      <form onsubmit="return sendData(this)"   >
+      <form class="form" onsubmit="return sendData(this)"   >
         <table>
             <tr>
                 <td>Título:</td>
@@ -80,13 +82,13 @@
             </tr>    
         </table>
          
-        <button>Enviar</button>
+        <button class="btn-send">Enviar</button>
       </form> 
           
     </div>
 
 
-    <button onclick="openCloseModal('block')" >Formulário</button>
+    <button class="btn-modal" onclick="openClose('modal-content', 'form-container', 'flex')" >Formulário</button>
 
 
     <footer>Copyright © 2023 Extinções Company - Todos os direitos reservados</footer>

script/eventos.js

@@ -27,6 +27,9 @@ const sendData = (form) => {
         return false
     }
 
+    openClose('form', 'head-form', 'none');
+    document.getElementsByClassName('send-message')[0].style.display = 'block'    
+
     const request = new XMLHttpRequest();
 
     request.onreadystatechange = function() {
@@ -48,8 +51,7 @@ const sendData = (form) => {
         categoria: parseInt(formData.get("categoria"))
     }
 
-    const url = 'http://hcbarros.bootcamp.dev.netuno.org:20190/services/evento-salvar'
-    request.open('POST', url)
+    request.open('POST', 'http://hcbarros.bootcamp.dev.netuno.org:20190/services/evento-salvar')
     request.setRequestHeader('Content-Type', 'application/json')
 			
     request.send(JSON.stringify(objeto));
@@ -65,11 +67,6 @@ const validator = (formData) => {
         alert('O título deve possuir ao menos 5 caracteres!')
         return false
     }
-    
-    if(formData.get("capacidade").length === 0) {
-        alert('Informe a capacidade do evento!')
-        return false
-    }
 
     const date = new Date(formData.get("data"))
     if(isNaN(date.getTime())) {
@@ -83,29 +80,33 @@ const validator = (formData) => {
 
 
 const finish = (text) => {
-    openCloseModal('none') 
-    alert(text)    
-    window.location.reload()
+    openClose('modal-content', 'form-container', 'none')
+    setTimeout(() => {
+        alert(text)    
+        window.location.reload() 
+    }, 100)
 }
 
 
 
-const openCloseModal = (acao) => {
-    document.getElementsByClassName('modal-content')[0].style.display = acao
-    document.getElementsByClassName('form')[0].style.display = acao
+const openClose = (classe1, classe2, acao) => {
+    document.getElementsByClassName(classe1)[0].style.display = acao
+    document.getElementsByClassName(classe2)[0].style.display = acao
 }
 
 
 
-const numberMask = (element) => {
-    element.value = element.value.replace(/\D/g,'')             
+const numberMask = (e) => {
+    let v = e.value.replace(/\D/g,'')      
+    v = v.length === 0 ? '0' : v
+    e.value = v.length > 1 && v.charAt(0) == '0' ? v.substring(1) : v
 }
 
 
 
-const currencyMask = (element) => {
-    var v = element.value.replace(/\D/g,'')
+const currencyMask = (e) => {
+    let v = e.value.replace(/\D/g,'')
     v = (v/100).toFixed(2) + ''
     v = v.replace(".", ",").replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.')
-    element.value = v
+    e.value = v
 }