Começando com fetch no Javascript

    <div class="container col-md-5">
      <form>
        <div class="form-group font-weight-bold">
          <label>CEP</label>
          <input type="text" id="cep" pattern= "\d{5}-?\d{3}" class="form-control" required placeholder="Insira o seu CEP">
        </div>
        <div class="form-group font-weight-bold">
          <label>Rua</label>
          <input type="text" class="form-control" id="rua" placeholder="...">
        </div>
        <div class="form-group font-weight-bold">
          <label>Complemento</label>
          <input type="text" class="form-control" id="complemento" placeholder="...">
        </div>
        <div class="form-group font-weight-bold">
          <label>Bairro</label>
          <input type="text" class="form-control" id="bairro" placeholder="...">
        </div>
        <div class="form-group font-weight-bold">
          <label>Cidade</label>
          <input type="text" class="form-control" id="cidade" placeholder="...">
        </div>
        <div class="form-group font-weight-bold">
          <label>Estado</label>
          <input type="text" class="form-control" id="estado" placeholder="...">
        </div>
        <button type="submit" id="btnPesquisar" class="btn btn-primary">Pesquisa</button>
        <button type="button" id="btnLimpar" class="btn btn-danger">Limpar</button>
      </form>
  </div>

const btnPesquisarCEP = document.querySelector("#btnPesquisar");

btnPesquisarCEP.addEventListener("click", event =>{}

btnPesquisarCEP.addEventListener("click", event =>{
    event.PreventDefault();
}

const inputDoCep = document.querySelector("#cep");
const valorDoCep = inputDoCep.value;

const inputDoCep = document.querySelector("#cep");
const valorDoCep = inputDoCep.value;
const url = `https://viacep.com.br/ws/${valorDoCep}/json/`;
fetch(url)

const inputDoCep = document.querySelector("#cep");
const valorDoCep = inputDoCep.value;
const url = `https://viacep.com.br/ws/${valorDoCep}/json/`;
fetch(url).then(response =>{
  return response.json();
    }).then(data =>
    {
})

function atribuirCampos(data)
{
const rua = document.querySelector("#rua");
const complemento = document.querySelector("#complemento");
const bairro = document.querySelector("#bairro");
const cidade = document.querySelector("#cidade");
const estado = document.querySelector("#estado");
rua.value = data.logradouro;
complemento.value = data.complemento;
bairro.value = data.bairro;
cidade.value = data.localidade;
estado.value = data.uf;
}

const inputDoCep = document.querySelector("#cep");
const valorDoCep = inputDoCep.value;
const url = `https://viacep.com.br/ws/${valorDoCep}/json/`;
fetch(url).then(response =>{
return response.json();
    })
.then(data =>{
      atribuirCampos(data);
})

 .then(data =>
 {
 if(data.erro)
 {
 alert("O CEP DIGITADO ESTÁ INVÁLIDO");
 return ;
 }
 atribuirCampos(data);
})