BuildTools преди 3 години
родител
ревизия
610bb3e02a
променени са 3 файла, в които са добавени 208 реда и са изтрити 120 реда
  1. 75 47
      index.html
  2. 47 43
      script.js
  3. 86 30
      style.css

+ 75 - 47
index.html

@@ -12,57 +12,85 @@
 </head>
 
 <body>
+    <header>
+        <p> itau </p>
+    </header>
     <div class="container">
-        <h2 style="text-align: center;padding-top:15px;"> cadastre-se no banco </h2>
+        <h1 style="text-align: center;padding-top:15px;"> Formulario de cadastro </h1>
         <form>
-
-            <label for="name"><b>Nome</b></label>
-            <input type="nome" placeholder="Digite seu nome" name="nome" required class="required">
-
-            <label for="cpf"><b>Cpf</b> <span>cpf invalido</span></label>
-            <input type="cpf" placeholder="Digite seu cpf" name="cpf" id="cpf" class="required" required maxlength="11">
-
-            <label for="rg"><b>RG</b></label>
-            <input type="nome" placeholder="Digite seu RG" name="rg">
-
-            <label for="sexo"><b>Sexo</b></label>
-            <select id="sexo">
-                <option selected>Escolha seu sexo</option>
-                <option value="feminino">feminino</option>
-                <option value="masculino">masculino</option>
-                <option value="outro">outro</option>
-            </select>
-
-            <label for="cep"><b>CEP</b></label>
-            <input type="text" placeholder="Digite seu CEP" name="cep" onblur="pesquisacep(this.value)">
-
-            <label for="endereco"><b>Endereco</b></label>
-            <input type="text" placeholder="Digite seu endereco" name="endereco" class="required" required
-                id="endereco">
-
-            <label for="numero"><b>Numero</b></label>
-            <input type="nome" placeholder="Digite o numero" name="numero" class="required" required>
-
-            <label for="bairro"><b>Bairro</b></label>
-            <input type="nome" placeholder="Digite seu bairro" name="bairro" id="bairro">
-
-            <label for="cidade"><b>Cidade</b></label>
-            <input type="nome" placeholder="Digite sua cidade" name="cidade" id="cidade">
-
-            <label for="estado"><b>Estado</b></label>
-            <input type="text" placeholder="Confirme seu estado" name="estado" id="estado">
-
-
-            <label for="fixo"><b>Telefone fixo</b></label>
-            <input type="number" placeholder="Digite seu telefone fixo" name="fixo">
-
-            <label for="celular"><b>Telefone celular</b></label>
-            <input type="number" placeholder="Digite seu telefone celular" name="celular" class="required" required>
-
-            <button onclick="return validacao()" type="submit" class="signupbtn">Cadastre-se</button>
-
+            <table>
+                <tr>
+                    <td colspan="3"> 
+                        <label for="name"><b>Nome</b></label>
+                        <input type="nome" placeholder="Digite seu nome" name="nome" required class="required">
+                    </td>
+                </tr>
+                <tr>
+                    <td> 
+                        <label for="cpf"><b>CPF</b> <span>cpf invalido</span></label>
+                        <input type="cpf" placeholder="Digite seu cpf" name="cpf" id="cpf" class="required" required maxlength="11">
+                    </td>
+                    <td>
+                        <label for="rg"><b>RG</b></label>
+                        <input type="nome" placeholder="Digite seu RG" name="rg">
+                    </td>
+                    <td>
+                        <label for="sexo"><b>Sexo</b></label>
+                        <select id="sexo" class="w100">
+                            <option selected>Escolha seu sexo</option>
+                            <option value="feminino">feminino</option>
+                            <option value="masculino">masculino</option>
+                            <option value="outro">outro</option>
+                        </select>
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <label for="cep"><b>CEP</b></label>
+                        <input type="text" placeholder="Digite seu CEP" name="cep" onblur="pesquisacep(this.value)">
+                    </td>
+                    <td>
+                        <label for="endereco"><b>Endereco</b></label>
+                        <input type="text" placeholder="Digite seu endereco" name="endereco" class="required" required id="endereco">
+                    </td>
+                    <td>
+                        <label for="numero"><b>Numero</b></label>
+                        <input type="nome" placeholder="Digite o numero" name="numero" class="required w100" required>
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <label for="bairro"><b>Bairro</b></label>
+                        <input type="nome" placeholder="Digite seu bairro" name="bairro" id="bairro">
+                    </td>
+                    <td>
+                        <label for="cidade"><b>Cidade</b></label>
+                        <input type="nome" placeholder="Digite sua cidade" name="cidade" id="cidade">
+                    </td>
+                    <td>
+                        <label for="estado"><b>Estado</b></label>
+                        <input type="text" placeholder="Confirme seu estado" name="estado" id="estado" class="w100">
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <label for="fixo"><b>Telefone fixo</b></label>
+                        <input type="number" placeholder="Digite seu telefone fixo" name="fixo">
+                    </td>
+                    <td>    
+                        <label for="celular"><b>Telefone celular</b></label>
+                        <input type="number" placeholder="Digite seu telefone celular" name="celular" class="required" required>
+                    </td>
+                    <td> 
+                        <button onclick="return validacao()" type="submit" class="signupbtn">Cadastre-se</button> 
+                    </td>
+                </tr>
+            </table>
         </form>
     </div>
+    <footer>
+        <p>Direitos reservados a Gabriel Fontineli</p>
+    </footer>
     <script type="text/javascript" src="script.js"></script>
 </body>
 

+ 47 - 43
script.js

@@ -24,26 +24,30 @@ const validarCpf = (cpf) => {
 
         resultado = soma % 11 < 2 ? 0 : 11 - (soma % 11);
 
-        if (resultado != digitos.charAt(1)){
+        if (resultado != digitos.charAt(1)) {
             return false;
-        }else return true;
+        } else return true;
     }
 }
 function validacao() {
-   
+
 
     var cpf = document.getElementById("cpf").value
     var validInputs = document.querySelectorAll(".required")
     var resultadoValidacao = validarCpf(cpf)
     for (i = 0; i < validInputs.length; i++) {
+        if (validInputs[i].value === undefined || validInputs[i].value === "") validInputs[i].style["border"] = "1px solid red"
+    }
+    for (i = 0; i < validInputs.length; i++) {
         if (validInputs[i].value === undefined || validInputs[i].value === "") {
             resultadoValidacao = false;
-            validInputs[i].style["border"] = "1px solid red"
-            
+            break
         } else {
             resultadoValidacao = true
             validInputs[1].style["border"] = "none"
             validInputs[i].style["border"] = "none"
+            document.querySelector("span").style["display"] = "none"
+
         }
     }
 
@@ -52,7 +56,7 @@ function validacao() {
         window.alert("Parabens!! voce foi cadastrado com sucesso");
 
         return true
-    }else if(!validarCpf(cpf)){
+    } else if (!validarCpf(cpf)) {
         window.alert("Opss! Aconteceu um erro no seu cadastro, verifique se voce preencheu todos espacos necessarios")
         validInputs[1].style["border"] = "1px solid red"
         document.querySelector("span").style["display"] = "inline"
@@ -65,58 +69,58 @@ function validacao() {
 }
 function limpa_formulário_cep() {
     //Limpa valores do formulário de cep.
-    document.getElementById('endereco').value=("");
-    document.getElementById('bairro').value=("");
-    document.getElementById('cidade').value=("");
-    document.getElementById('estado').value=("");
+    document.getElementById('endereco').value = ("");
+    document.getElementById('bairro').value = ("");
+    document.getElementById('cidade').value = ("");
+    document.getElementById('estado').value = ("");
 }
 
 function meu_callback(conteudo) {
-if (!("erro" in conteudo)) {
-    //Atualiza os campos com os valores.
-    document.getElementById('endereco').value=(conteudo.logradouro);
-    document.getElementById('bairro').value=(conteudo.bairro);
-    document.getElementById('cidade').value=(conteudo.localidade);
-    document.getElementById('estado').value=(conteudo.uf);
-} 
-else {
-    //CEP não Encontrado.
-    limpa_formulário_cep();
-    alert("CEP não encontrado.");
-}
+    if (!("erro" in conteudo)) {
+        //Atualiza os campos com os valores.
+        document.getElementById('endereco').value = (conteudo.logradouro);
+        document.getElementById('bairro').value = (conteudo.bairro);
+        document.getElementById('cidade').value = (conteudo.localidade);
+        document.getElementById('estado').value = (conteudo.uf);
+    }
+    else {
+        //CEP não Encontrado.
+        limpa_formulário_cep();
+        alert("CEP não encontrado.");
+    }
 }
 
 function pesquisacep(valor) {
 
-//Nova variável "cep" somente com dígitos.
-var cep = valor.replace(/\D/g, '');
+    //Nova variável "cep" somente com dígitos.
+    var cep = valor.replace(/\D/g, '');
 
-//Verifica se campo cep possui valor informado.
-if (cep != "") {
+    //Verifica se campo cep possui valor informado.
+    if (cep != "") {
 
-    //Expressão regular para validar o CEP.
-    var validacep = /^[0-9]{8}$/;
+        //Expressão regular para validar o CEP.
+        var validacep = /^[0-9]{8}$/;
 
-    //Valida o formato do CEP.
-    if(validacep.test(cep)) {
-        //Cria um elemento javascript.
-        var script = document.createElement('script');
+        //Valida o formato do CEP.
+        if (validacep.test(cep)) {
+            //Cria um elemento javascript.
+            var script = document.createElement('script');
 
-        //Sincroniza com o callback.
-        script.src = 'https://viacep.com.br/ws/'+ cep + '/json/?callback=meu_callback';
+            //Sincroniza com o callback.
+            script.src = 'https://viacep.com.br/ws/' + cep + '/json/?callback=meu_callback';
 
-        //Insere script no documento e carrega o conteúdo.
-        document.body.appendChild(script);
+            //Insere script no documento e carrega o conteúdo.
+            document.body.appendChild(script);
 
+        } //end if.
+        else {
+            //cep é inválido.
+            limpa_formulário_cep();
+            alert("Formato de CEP inválido.");
+        }
     } //end if.
     else {
-        //cep é inválido.
+        //cep sem valor, limpa formulário.
         limpa_formulário_cep();
-        alert("Formato de CEP inválido.");
     }
-} //end if.
-else {
-    //cep sem valor, limpa formulário.
-    limpa_formulário_cep();
-}
 };

+ 86 - 30
style.css

@@ -3,53 +3,109 @@
     padding:0px;
     font-family: 'Signika', sans-serif;
     box-sizing: border-box;
-    color:gray;
-
-
+    color:#1a2b40;
 }
-body{
+
+body {
     background-image: linear-gradient(180deg, #ff9051, #ff6737);
     background-color:#ff6737;
     background-repeat: no-repeat;
     padding: 0;
-    
+    position: relative;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
 }
-form{
+
+header {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    background-color: #004990;
+    height: 50px;
+}
+
+header p {
+    color: #ffe512;
     
-    padding: 15px 25px 15px 25px;
+    font-size: 34px;
 }
-input, select {
 
+form {
+    margin: auto;
+    display: flex;
+    justify-content: center;
+    padding: 15px 0;
+}
+
+table {
+    width: 90%;
+}
+
+tr:nth-of-type(1) input:nth-of-type(1) {
     width: 100%;
-    display: inline-block;
-    border:none;
-    padding:15px;
-    background-color:#f1f1f1;
-    margin:5px 0 22px 0;
-    
 }
-input:focus, select:focus{
-    outline:none;
+
+.w100 {
+    width: 100%;
 }
-.container{
+
+input, select {
+    border: 0px solid black;
+    width: 95%;
+    display: inline-block;
+    padding: 15px;
+    background-color: #f1f1f1;
+    margin: 5px 0 22px 0;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+}
+
+.container {
     background-color:white;
-    width: 35%;
+    width: 65%;
     height: 55%;
-    margin:10% auto 30% auto;
-    border-radius:15px;
-    border: solid 2px;
+    margin: 4.4rem auto;
+    border-radius: 15px;
 }
-button{
-    background-color:#ff6737;
-    color:white;
-    padding:14px 20px;
-    border:none;
-    cursor:pointer;
+
+button {
+    background-color: #ff6737;
+    color: white;
+    padding: 15.5px 14px;
+    border: none;
+    cursor: pointer;
     width: 100%;
+    margin-top: 3px;
 }
-span{
-    display:none;
+
+span {
+    display: none;
     position: absolute;
-    margin-left: 330px;
+    margin-left: 167px;
     color: red;
 }
+
+footer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    width: 100%;
+    bottom: 0;
+    background-color: #004990;
+    height: 40px;
+}
+
+footer p {
+    color: white;
+    font-size: 15px;
+    vertical-align: middle;
+}
+select:focus{
+    outline: 0;
+    border: 0;
+    overflow:hidden;
+}