-
Notifications
You must be signed in to change notification settings - Fork 0
/
TOUPLOAD.html
37 lines (37 loc) · 1.33 KB
/
TOUPLOAD.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
<head>
<title>API CALL FOR WEATHER REPORT</title>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
<label><b>Enter a city name:</b></label>
<input type="text" name="city" id="city"><br><br>
<input type="submit" value="Submit" id="submit" onclick="find()"><br><br>
<div id='temp'>
</div>
<script>
function find(){
$('#temp').html('<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i><span class="sr-only">Loading...</span>');
var api='http://api.openweathermap.org/data/2.5/weather?q=';
var city=document.getElementById("city").value;
var units='&units=metric';
var appid='&appid=XXXXXXXXXX';
setTimeout(function (){
$.ajax({
url: api+city+units+appid,
type: 'GET',
success: function(data){
console.log(data);
$('#temp').html("Temperature in "+city+" is : "+data.main.temp +"<br>"+"Pressure in "+city+" is : "+data.main.pressure+"<br>"+"Humidity in "+city+" is : "+data.main.humidity+"<br>"+"Climate in "+city+" is : "+data.weather[0].description);
},
error: function(data){
$('#temp').html("Please enter correct city names!");
}
});
},3000);
}
</script>
</body>
</html>