Skip to content

Commit

Permalink
atualização viacep
Browse files Browse the repository at this point in the history
  • Loading branch information
@eduhernandes
eduhernandes committed Mar 25, 2024
1 parent 395c299 commit 7adc0a0
Show file tree
Hide file tree
Showing 4 changed files with 305 additions and 0 deletions.
59 changes: 59 additions & 0 deletions viaCEP/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Cadastro</title>
</head>
<body>
<main class="container">
<h1 class="title">Cadastro</h1>
<div class="row">
<div class="inputbox">
<input type="text" id="nome" required>
<label for="nome">Nome</label>
</div>
<div class="inputbox">
<input type="text" id="email" required>
<label for="email">Email</label>
</div>
</div>
<div class="row">
<div class="inputbox">
<input type="text" id="cep" required>
<label for="cep">CEP</label>
</div>
<div class="inputbox">
<input type="text" id="endereco" required>
<label for="endereco">Endereço</label>
</div>
<div class="inputbox">
<input type="text" id="numero" required>
<label for="numero">Número</label>
</div>
</div>
<div class="row">
<div class="inputbox">
<input type="text" id="bairro" required>
<label for="bairro">Bairro</label>
</div>
<div class="inputbox">
<input type="text" id="cidade" required>
<label for="cidade">Cidade</label>
</div>
<div class="inputbox">
<input type="text" id="estado" required>
<label for="estado">Estado</label>
</div>
</div>
<div class="row">
<button>Salvar</button>
</div>
</main>
<footer>
Prof. Fernando Leonid &#169 2021
</footer>
<script src="main.js"></script>
</body>
</html>
43 changes: 43 additions & 0 deletions viaCEP/main.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
'use strict';

const limparFormulario = (endereco) =>{
document.getElementById('endereco').value = '';
document.getElementById('bairro').value = '';
document.getElementById('cidade').value = '';
document.getElementById('estado').value = '';
}


const preencherFormulario = (endereco) =>{
document.getElementById('endereco').value = endereco.logradouro;
document.getElementById('bairro').value = endereco.bairro;
document.getElementById('cidade').value = endereco.localidade;
document.getElementById('estado').value = endereco.uf;
}


const eNumero = (numero) => /^[0-9]+$/.test(numero);

const cepValido = (cep) => cep.length == 8 && eNumero(cep);

const pesquisarCep = async() => {
limparFormulario();

const cep = document.getElementById('cep').value;
const url = `https://viacep.com.br/ws/${cep}/json/`;
if (cepValido(cep)){
const dados = await fetch(url);
const endereco = await dados.json();
if (endereco.hasOwnProperty('erro')){
document.getElementById('endereco').value = 'CEP não encontrado!';
}else {
preencherFormulario(endereco);
}
}else{
document.getElementById('endereco').value = 'CEP incorreto!';
}

}

document.getElementById('cep')
.addEventListener('focusout',pesquisarCep);
104 changes: 104 additions & 0 deletions viaCEP/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}

:root {
--bg-color: #000;
--primary-color: #EBCE07;
}

body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: var(--bg-color) ;
}

.container {
flex-grow: 3;
display: flex;
flex-direction: column;
justify-content: center;
width: 80%;
padding: 20px;
gap: 40px;
}

.title {
font-size: 40px;
text-align: center;
user-select: none;
color: var(--primary-color);
}

.row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 40px;
}
.inputbox {
position: relative;
display: flex;
flex-direction: column-reverse;
height: 40px;
}

.inputbox label {
position: relative;
top:0;
left: 10px;
font-size: 20px;
color: var(--primary-color);
transition: .5s;
cursor: text;
}

.inputbox input {
position: absolute;
background-color: var(--primary-color);
width: 100%;
height: 4px;
bottom: 0;
box-shadow: none;
border: none;
outline: none;
border-radius: 2px;
transition: .5s;
font-size: 20px;
font-weight: bold;
padding: 0 10px;
}

.inputbox input:focus,
.inputbox input:valid {
height: 100%;
}

.inputbox input:focus + label,
.inputbox input:valid + label {
top: -40px;
left: 0;
}

.container button {
justify-self: center;
width: 200px;
height: 50px;
border:none;
outline: none;
cursor: pointer;
background-color: var(--primary-color);
font-size: 20px;
font-weight: bold;
border-radius: 2px;
}

footer {
color: var(--primary-color);
}
99 changes: 99 additions & 0 deletions viacep-simples/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
<html>
<head>
<title>ViaCEP Webservice</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!-- Adicionando Javascript -->
<script>

function limpa_formulário_cep() {
//Limpa valores do formulário de cep.
document.getElementById('rua').value=("");
document.getElementById('bairro').value=("");
document.getElementById('cidade').value=("");
document.getElementById('uf').value=("");
document.getElementById('ibge').value=("");
}

function meu_callback(conteudo) {
if (!("erro" in conteudo)) {
//Atualiza os campos com os valores.
document.getElementById('rua').value=(conteudo.logradouro);
document.getElementById('bairro').value=(conteudo.bairro);
document.getElementById('cidade').value=(conteudo.localidade);
document.getElementById('uf').value=(conteudo.uf);
document.getElementById('ibge').value=(conteudo.ibge);
} //end if.
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, '');

//Verifica se campo cep possui valor informado.
if (cep != "") {

//Expressão regular para validar o CEP.
var validacep = /^[0-9]{8}$/;

//Valida o formato do CEP.
if(validacep.test(cep)) {

//Preenche os campos com "..." enquanto consulta webservice.
document.getElementById('rua').value="...";
document.getElementById('bairro').value="...";
document.getElementById('cidade').value="...";
document.getElementById('uf').value="...";
document.getElementById('ibge').value="...";

//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';

//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 sem valor, limpa formulário.
limpa_formulário_cep();
}
};

</script>
</head>

<body>
<!-- Inicio do formulario -->
<form method="get" action=".">
<label>Cep:
<input name="cep" type="text" id="cep" value="" size="10" maxlength="9"
onblur="pesquisacep(this.value);" /></label><br />
<label>Rua:
<input name="rua" type="text" id="rua" size="60" /></label><br />
<label>Bairro:
<input name="bairro" type="text" id="bairro" size="40" /></label><br />
<label>Cidade:
<input name="cidade" type="text" id="cidade" size="40" /></label><br />
<label>Estado:
<input name="uf" type="text" id="uf" size="2" /></label><br />
<label>IBGE:
<input name="ibge" type="text" id="ibge" size="8" /></label><br />
</form>
</body>

</html>

0 comments on commit 7adc0a0

Please sign in to comment.