JSFiddle - React, Tailwind, and code Playground

by Rodrigo Portillo

HTML

<form>
		<label for="cep">CEP</label>
		<input id="cep" type="text" required/>
		<label for="logradouro">Logradouro</label>
		<input id="logradouro" type="text" required/>
		<label for="numero">Número</label>
		<input id="numero" type="text" />
		<label for="complemento">Complemento</label>
		<input id="complemento" type="text"/>
		<label for="bairro">Bairro</label>
		<input id="bairro" type="text" required/>
		<label for="uf">Estado</label>
		<select id="uf">
			<option value="AC">Acre</option>
			<option value="AL">Alagoas</option>
			<option value="AP">Amapá</option>
			<option value="AM">Amazonas</option>
			<option value="BA">Bahia</option>
			<option value="CE">Ceará</option>
			<option value="DF">Distrito Federal</option>
			<option value="ES">Espírito Santo</option>
			<option value="GO">Goiás</option>
			<option value="MA">Maranhão</option>
			<option value="MT">Mato Grosso</option>
			<option value="MS">Mato Grosso do Sul</option>
			<option value="MG">Minas Gerais</option>
			<option value="PA">Pará</option>
			<option value="PB">Paraíba</option>
			<option value="PR">Paraná</option>
			<option value="PE">Pernambuco</option>
			<option value="PI">Piauí</option>
			<option value="RJ">Rio de Janeiro</option>
			<option value="RN">Rio Grande do Norte</option>
			<option value="RS">Rio Grande do Sul</option>
			<option value="RO">Rondônia</option>
			<option value="RR">Roraima</option>
			<option value="SC">Santa Catarina</option>
			<option value="SP">São Paulo</option>
			<option value="SE">Sergipe</option>
			<option value="TO">Tocantins</option>
		</select>
	</form>

CSS

label{
  display:block;
}

JavaScript

document.querySelector("#cep").addEventListener("keyup", function(event){
	
  var cep = event.target.value.replace(/[^0-9]/g, "");
  
  if(cep.length != 8){
  	return false;
  }
  
	//Consumir
  var request = new XMLHttpRequest();
  request.open('GET', 'https://viacep.com.br/ws/' + cep + '/json/unicode/', true);

  request.onload = function() {
    if (this.status >= 200 && this.status < 400) {
     	//Sucesso
      //Sao os dados respondiso
      var data = JSON.parse(this.response);
      console.log(data); // Esses são os dados em um objeto JSON
      
      document.querySelector("#logradouro").value = data.logradouro;
      document.querySelector("#bairro").value = data.bairro;
      document.querySelector("#cidade").value = data.localidade;
      document.querySelector("#uf").value = data.uf;
    } else {
      //Erro
      alert("deu erro, mo fio!");
    }
  };

  request.onerror = function() {
    alert("Não conseguiu acecssar a URL");
  };

  request.send();


});