Busca Endereço pelo CEP

   08/05/2024
Busca Logradouro pelo CEP
Tempo de leitura: 3 minutos

Busca Endereço pelo CEP: Encontre informações de endereços a partir do CEP informado. Nosso serviço online permite buscar detalhes como logradouro, bairro e localidade.

Ahhh, detalhe. Utilize o CEP sem o traço, por exemplo: 01001000.

Experimente agora mesmo!

E além do nosso serviço de buscar informações de logradouro pelo CEP, você que é desenvolvedor pode estudar o código fonte utilizado para o desenvolvimento desta pequena aplicação web e os conceitos utilizados para tal.

Confira o código fonte seguido da explicação:

<style>
    #tr-div-cep,
    #tr-div-cep input {
        width: 100%;
        margin-bottom: 25px;
    }

    table {
        margin-top: 25px;
        width: 100%;
    }

    table, th, tr, td {
        border: 1px solid #000;
        text-align: center;
        padding: 15px;
    }
</style>

<div id="tr-div-cep">
    <input  type="number" 
            id="tr-cep" 
            placeholder="CEP"
            onkeypress="return apenasNumero(event)"            
    >
    <button onclick="buscaLogradouro()">BUSCA ENDEREÇO</button>
    <button onclick="limpaBusca()">LIMPAR BUSCA</button>
</div>

<div id="tr-cep-div-table"></div>

<script>
    function apenasNumeros(e) {
        let tecla = (window.event) ? event.keyCode : e.which;
        if ((tecla > 47 && tecla < 58)) 
            return true;
        else
            return false;
    }

    function buscaLogradouro() {
        let cep = document.getElementById('tr-cep').value;
        if (cep === '') {
            alert('Nenhum CEP foi informado!');
            limpaInput();
        } else if (cep.length < 8 || cep.length > 8) {
            alert('Favor informar um CEP válido');
            limpaInput();
        } else {            
            let url = 'https://viacep.com.br/ws/'+cep+'/json/';
            fetch(url)
                .then(response => response.json())
                .then(data => {
                    if (data.cep == undefined) {
                        alert('CEP não encontrado ou não existe. Faça uma nova busca!');
                    } else {
                        //criando o elemento tabela, cabeçalho e corpo 
                        let table = document.createElement('table');                        
                        let thead = document.createElement('thead');
                        let tbody = document.createElement('tbody');

                        //criando cabeçalho da tabela
                        table.appendChild(thead);                    
                        let row_1 = document.createElement('tr');
                        let heading_1 = document.createElement('th');
                        heading_1.innerHTML = 'CEP';
                        let heading_2 = document.createElement('th');
                        heading_2.innerHTML = 'DDD';
                        let heading_3 = document.createElement('th');
                        heading_3.innerHTML = 'Logradouro';
                        let heading_4 = document.createElement('th');
                        heading_4.innerHTML = 'Bairro';
                        let heading_5 = document.createElement('th');
                        heading_5.innerHTML = 'Localidade';
                        let heading_6 = document.createElement('th');
                        heading_6.innerHTML = 'UF';

                        row_1.appendChild(heading_1);
                        row_1.appendChild(heading_2);
                        row_1.appendChild(heading_3);
                        row_1.appendChild(heading_4);
                        row_1.appendChild(heading_5);
                        row_1.appendChild(heading_6);
                        thead.appendChild(row_1);

                        //Populando dados obtidos pela requisição AJAX no corpo da tabela
                        table.appendChild(tbody);
                        let row_2 = document.createElement('tr');
                        let row_2_data_1 = document.createElement('td');
                        row_2_data_1.innerHTML = data.cep;
                        let row_2_data_2 = document.createElement('td');
                        row_2_data_2.innerHTML = data.ddd;
                        let row_2_data_3 = document.createElement('td');
                        row_2_data_3.innerHTML = data.logradouro;
                        let row_2_data_4 = document.createElement('td');
                        row_2_data_4.innerHTML = data.bairro;
                        let row_2_data_5 = document.createElement('td');
                        row_2_data_5.innerHTML = data.localidade;
                        let row_2_data_6 = document.createElement('td');
                        row_2_data_6.innerHTML = data.uf;

                        row_2.appendChild(row_2_data_1);
                        row_2.appendChild(row_2_data_2);
                        row_2.appendChild(row_2_data_3);
                        row_2.appendChild(row_2_data_4);
                        row_2.appendChild(row_2_data_5);
                        row_2.appendChild(row_2_data_6);
                        tbody.appendChild(row_2);

                        document.getElementById('tr-cep-div-table').appendChild(table);
                        limpaInput();
                    }
                })
                .catch(err => console.log(err));
        }
    }

    function limpaInput() {
        document.getElementById('tr-cep').value = '';
    }

    function limpaBusca() {
        let tables = document.querySelectorAll('table');
        tables.forEach(table => table.remove());
        limpaInput();
    }
</script>

Busca Endereço pelo CEP explicado:

Temos aqui uma aplicação web que permite aos usuários buscar informações de endereços a partir de um CEP informado. Vou explicar o que cada parte faz:

  1. Estilos CSS:
    • Define estilos para os elementos HTML.
    • #tr-div-cep e #tr-div-cep input têm largura de 100% e margem inferior de 25px.
    • A tabela e suas células (table, th, tr, td) têm bordas de 1px, alinhamento central e espaçamento interno de 15px.
  2. HTML:
    • Cria um campo de entrada para o usuário digitar o CEP (<input>).
    • Dois botões:
      • “BUSCA ENDEREÇO”: Quando clicado, aciona a função buscaLogradouro(), que faz a busca das informações do logradouro segundo o CEP informado;
      • “LIMPAR BUSCA”: Quando clicado, aciona a função limpaBusca(), que apaga da tela todas as tabelas criadas e ainda limpa o campo de entrada do CEP;
  3. JavaScript:
    • A função apenasNumeros(e) permite apenas a digitação de números no campo de entrada.
    • A função buscaLogradouro() é acionada quando o usuário clica no botão “BUSCA ENDEREÇO”:
      • Verifica se o CEP foi informado e tem 8 dígitos.
      • Se sim, faz uma requisição AJAX para o serviço ViaCEP (URL construída com o CEP informado).
      • Se o CEP não for encontrado, exibe um alerta.
      • Caso contrário, cria uma tabela com os dados retornados (CEP, DDD, logradouro, bairro, localidade e UF).
  4. Tabela de Resultados:
    • A tabela é criada dinamicamente no JavaScript.
    • O cabeçalho contém as colunas: “CEP”, “DDD”, “Logradouro”, “Bairro”, “Localidade” e “UF”.
    • Os dados obtidos da requisição são preenchidos nas células correspondentes.

Conclusão

Neste serviço, que está a sua disposição para buscar informações de logradouros com base no CEP informado, é possível não apenas ter acesso a essas informações para usar no seu dia-a-dia, quanto também estudar o código fonte e entender como ele funciona!

Caso você seja iniciante no mundo do desenvolvimento, não deixe de acessar nossas trilhas de estudo, para que você comece do jeito sua carreira de desenvolvedor! Clique e conheça nossas trilhas de aprendizagem:

E para que você continue estudando e evoluindo nada melhor do que um computador com os melhores preços, marcas renomadas e confiança na entrega que só a Amazon oferece. Clique aqui é veja as melhores promoções das melhores marcas de notebooks e com a melhor entrega do mercado!!!

E para você que já adquiriu seu novo notebook para estudar, precisará validar seus códigos, e para isso você precisará de uma plataforma de host completa. Clique aqui e conheça a Hostinger, a hospedagem de sites com potência de verdade!!!