rominirani/index.html

## index.html
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>India Pincodes</title>
	<link rel="stylesheet" href="jquery.mobile-1.3.1.min.css" />
	<script src="jquery-1.7.1.min.js"></script>
	<script src="jquery.mobile-1.3.1.min.js"></script>
	<script>
		$(document).ready(function(){
          //Invoke Pincode Search API
		  $("#btnSearch").click(function(){
		    pincode = $("#searchCriteria").val();
		    var xhr = new XMLHttpRequest({mozSystem: true});
			xhr.open("GET", "http://pin-codes.in/api/pincode/" + pincode, true);
			xhr.onreadystatechange = function() {
			  if (xhr.readyState == 4) {
				obj = JSON.parse(xhr.responseText);
				result = "<li>Post Office: " + obj.PostOffice + "</li>";
				result += "<li>District: " + obj.District + "</li>";
				result += "<li>State: " + obj.State + "</li>";
				console.log(result);
				$("#searchResults").html(result);
				$('#searchResults').listview('refresh');
			  }
			}
			xhr.send();

		  });
		  });

	</script>
</head>

<body>

<!-- Start of first page: #home -->
<div data-role="page" id="home">

	<div data-role="header" data-position="fixed">
	    <h3>India Pincodes</h3>
	</div><!-- /header -->

	<div data-role="content">
        <input type="search" id="searchCriteria" value="" placeholder="Enter Pincode" autofocus/>
        <a href="#" id="btnSearch" data-role="button">Search</a>
		<div id="linebreak">&nbsp;</div>
		<ul data-role="listview" id="searchResults">

		</ul>

	</div><!-- /content -->
</div><!-- /page home -->
</body>
</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>India Pincodes</title>
	<link rel="stylesheet" href="jquery.mobile-1.3.1.min.css" />
	<script src="jquery-1.7.1.min.js"></script>
	<script src="jquery.mobile-1.3.1.min.js"></script>
	<script>
	$(document).ready(function(){
	//Invoke Pincode Search API
	$("#btnSearch").click(function(){
	pincode = $("#searchCriteria").val();
	var xhr = new XMLHttpRequest({mozSystem: true});
	xhr.open("GET", "http://pin-codes.in/api/pincode/" + pincode, true);
	xhr.onreadystatechange = function() {
	if (xhr.readyState == 4) {
	obj = JSON.parse(xhr.responseText);
	result = "<li>Post Office: " + obj.PostOffice + "</li>";
	result += "<li>District: " + obj.District + "</li>";
	result += "<li>State: " + obj.State + "</li>";
	console.log(result);
	$("#searchResults").html(result);
	$('#searchResults').listview('refresh');
	}
	}
	xhr.send();

	});
	});

	</script>
	</head>

	<body>

	<!-- Start of first page: #home -->
	<div data-role="page" id="home">

	<div data-role="header" data-position="fixed">
	<h3>India Pincodes</h3>
	</div><!-- /header -->

	<div data-role="content">
	<input type="search" id="searchCriteria" value="" placeholder="Enter Pincode" autofocus/>
	<a href="#" id="btnSearch" data-role="button">Search</a>
	<div id="linebreak"> </div>
	<ul data-role="listview" id="searchResults">

	</ul>

	</div><!-- /content -->
	</div><!-- /page home -->
	</body>
	</html>