Skip to content

Instantly share code, notes, and snippets.

@ijunaid8989

ijunaid8989/index.html

Created February 11, 2016 12:23
Show Gist options
  • Save ijunaid8989/610574bc2b94dbf9b593 to your computer and use it in GitHub Desktop.
Save ijunaid8989/610574bc2b94dbf9b593 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>WEATHER API</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- <link rel="stylesheet" href="css/bootstrap.min.css"> -->
</head>
<body>
<!-- Modal -->
<div id="add-action" class="modal fade">
<div class="vertical-alignment-helper">
<div class="modal-dialog vertical-align-center" style="width:95%;">
<div class="modal-content">
<div class="modal-header">
<div class="caption"><h2>Weather</h2></div>
</div>
<div class="modal-body">
<h3 class="city"></h3>
<h4 class="country"></h4>
<h4 class="temprature"></h4>
</div>
<fieldset>
<div class="modal-footer">
<button type="button" id="close-dialog" class="btn btn-default pull-right btn-space" data-dismiss="modal">Cancel</button>
</div>
</fieldset>
</div>
</div>
</div>
</div>
<!-- model end -->
<form id="searcher">
<label for="search"><span>Weather forcast </span></label>
<input id="search" type="search" value="" placeholder="Search by Zip/Address"/>
</form>
<div>
<button id="OK">Check weather</button>
</div>
<script src="jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script>
(function(){
$('#OK').on('click', function(){
console.log("clicked");
$.ajax({
url:"http://api.openweathermap.org/data/2.5/weather?zip=38000,PK&APPID=bb1804c0a316a1fbfb1c52231879c19d",
success: function(result){
$('h3.city').text(result.name);
$('h4.country').text(result['sys'].country);
$('h4.temprature').text(result['main'].temp);
$('#add-action').modal('show');
}
});
});
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment