Javascript: Buscar endereço usando o CEP

Rafael Chinaglia
TOTVS Developers
Published in
3 min readJun 19, 2024

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

--

--

Rafael Chinaglia
TOTVS Developers

Jornalista/ Editor do iMasters, Gestor de projetos e produtor de conteúdo para TOTVS Developers.