Javascript: buscar endereço usando o CEP

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!

Powered by: