JSFiddle - React, Tailwind, and code Playground

by Rapha Souza

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<form action="#">
    <h1>Enter your zip code</h1>
    <div class="form-group">
        <label for="zip">Zip Code</label>
        <input type="text" id="zip">
    </div>
    <div class="button-holder">
        <button class="btn btn-primary" onclick="callREST();">Next</button>
    </div>
</form>

<script>

  var jsonResponse='{"Agents":{"@ZipCode": "33176","Agent": [{"AgencyID": "21","Name": "Anakarina Callejas","Phone": "305-515-5613","CityName": "KENDALL","Address": "10471 N Kendall Dr. #101. Miami, FL 33176","Reviews-Rating": "5","Reviews-Count": "74","image": "/images/agents/21.png"},{"AgencyID": "116","Name": "Tamara Mourino","Phone": "305-256-0616","CityName": "PINECREST","Address": "12745 South Dixie Highway. #101. Pinecrest, FL 33156","Reviews-Rating": "5","Reviews-Count": "70","image": "/images/agents/116.png"}]}}';

function callREST() {

   event.preventDefault();//for demo to prevent form submit.
   var inputZip=document.getElementById("zip").value;
   var responseData =JSON.parse(jsonResponse);
   var zipCode= responseData.Agents['@CityName'];
   //console.log(inputZip,zipCode);
	 alert("ZipCode" + zipCode);
   if(zipCode==inputZip){
   //   alert("ZipCode" + zipCode);
   }else{
  //   alert("ZipCode not matched.");
   }
}
</script>

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}