Javascript: Buscar endereço usando o CEP
Artigo escrito por Douglas Carlos Men para o iMasters
Se você está desenvolvendo uma aplicação web no Brasil, é bem provável que precise implementar uma funcionalidade para buscar o endereço completo a partir do CEP (Código de Endereçamento Postal). Este tutorial vai te mostrar passo a passo como criar uma tela para essa funcionalidade usando HTML, CSS e JavaScript, além de integrar a API ViaCEP, que oferece esse serviço de forma gratuita.
O que Você Vai Aprender
- Como estruturar o HTML para o formulário de busca de CEP.
- Como estilizar a página com CSS para uma melhor apresentação.
- Como usar JavaScript para consumir a API ViaCEP e exibir o endereço completo.
Passo 1: Estruturando o HTML
A primeira etapa é criar a estrutura HTML. Vamos criar um formulário com um campo de entrada para o CEP e botões para buscar e limpar os dados. Também adicionaremos campos de texto para exibir o endereço completo.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Busca de Endereço por CEP</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Buscar Endereço pelo CEP</h1>
<form id="cepForm">
<label for="cep">CEP:</label>
<input type="text" id="cep" name="cep" maxlength="8" required>
<button type="submit">Buscar</button>
<button type="button" id="clearBtn">Limpar</button>
</form>
<div id="address">
<p><strong>Rua:</strong> <span id="logradouro"></span></p>
<p><strong>Bairro:</strong> <span id="bairro"></span></p>
<p><strong>Cidade:</strong> <span id="localidade"></span></p>
<p><strong>Estado:</strong> <span id="uf"></span></p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>Passo 2: Estilizando com CSS
Agora, vamos adicionar alguns estilos para deixar a página mais agradável visualmente. O código CSS a seguir define a aparência básica do formulário e dos campos de exibição.
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}.container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
width: 300px;
}form {
display: flex;
flex-direction: column;
gap: 10px;
}input[type="text"] {
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
width: calc(100% - 22px);
}button {
padding: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
}button[type="submit"] {
background-color: #4CAF50;
color: white;
}button[type="button"] {
background-color: #f44336;
color: white;
}#address p {
margin: 5px 0;
}
Passo 3: Implementando a Lógica com JavaScript
Por fim, vamos implementar a lógica para buscar o CEP na API ViaCEP usando JavaScript. O script abaixo faz a requisição, processa a resposta e atualiza o DOM com os dados do endereço.
document.getElementById('cepForm').addEventListener('submit', function(event) {
event.preventDefault();
const cep = document.getElementById('cep').value;if (cep.length !== 8) {
alert('O CEP deve conter 8 dígitos.');
return;
} fetch(`https://viacep.com.br/ws/${cep}/json/`)
.then(response => response.json())
.then(data => {
if (data.erro) {
alert('CEP não encontrado.');
return;
}
document.getElementById('logradouro').textContent = data.logradouro;
document.getElementById('bairro').textContent = data.bairro;
document.getElementById('localidade').textContent = data.localidade;
document.getElementById('uf').textContent = data.uf;
})
.catch(error => {
alert('Erro ao buscar o CEP.');
console.error('Erro:', error);
});
});document.getElementById('clearBtn').addEventListener('click', function() {
document.getElementById('cep').value = '';
document.getElementById('logradouro').textContent = '';
document.getElementById('bairro').textContent = '';
document.getElementById('localidade').textContent = '';
document.getElementById('uf').textContent = '';
});
Vídeo
Clique aqui para assistir ao vídeo deste tutorial
Conclusão
Com este tutorial, você aprendeu como criar uma tela para buscar endereços completos usando o CEP, integrando a API ViaCEP em uma aplicação web. Este é um exemplo prático e útil, especialmente para sites e sistemas que precisam validar e completar endereços no Brasil.
Para mais tutoriais e dicas sobre desenvolvimento web, continue acompanhando nosso blog. Se você tiver dúvidas ou sugestões, deixe um comentário abaixo!
E não se esqueça de aproveitar a oferta limitada para se inscrever no meu curso de desenvolvimento web para iniciantes! Saiba mais clicando aqui!
LEIA TAMBÉM
