index.html

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="style.css" rel="stylesheet">
    <title>Consulta CEP</title>
 <link href="https://fonts.googleapis.com/css2?family=Roboto:ital@1&display=swap" rel="stylesheet">
    
</head>
<body>
  
<style>


</style>

  
  <div class="centralizado">
  <h1>Consultar CEP</h1>
  <label>Digite o CEP a ser buscado</label>
  <input type="number" id="cep">
  <button onclick="consultaEndereco()"> Consultar </button>
  <div id="resultado">
       <p>Seu resultado aqui</p>
  </div>

<div id="bloco">
  <script>
    function consultaEndereco() {
      let cep = document.querySelector('#cep').value;

      if(cep.length !==8) {
          alert('cep inválido')
          return;
      }
      
      let url = `https://viacep.com.br/ws/${cep}/json/`;

      fetch(url).then(function(response) {
          response.json().then(function(data) {
            console.log(data)
            mostrarEndereco(data);
          });
      });
      
                  
    }
    function mostrarEndereco(dados) {
      let resultado = document.querySelector('#resultado');
       
       resultado.innerHTML = `<p>Endereço: ${dados.logradouro}</p>
                              <p>Complemento: Não específicado ${dados.complemento}</p>
                              <p>Bairro: ${dados.bairro}</p>
                              <p>Localidade: ${dados.localidade} - ${dados.uf}</p>`
       
      
    }
  </script>
  
  </div>
  </div>
</body>
</html>