WEATHER-API/API code at main · SID-132006/WEATHER-API · GitHub

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html>
<head>
<title>Weather App</title>
<style>
body{
font-family: Arial;
text-align:center;
background:#87CEEB;
}

.container{
margin-top:100px;
background:white;
padding:30px;
border-radius:10px;
width:300px;
margin:auto;
}

input{
padding:10px;
width:70%;
}

button{
padding:10px;
}

</style>
</head>

<body>

<div class="container">

<h2>Weather App</h2>

<input type="text" id="city" placeholder="Enter City">

<button onclick="getWeather()">Search</button>

<h3 id="cityName"></h3>
<p id="temp"></p>
<p id="humidity"></p>
<p id="weather"></p>

</div>

<script>

const apiKey = "14b8b9b7ad3b6956a5ee0ed3d319581d";

function getWeather(){

let city = document.getElementById("city").value;

let url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;

fetch(url)

.then(response => response.json())

.then(data => {

document.getElementById("cityName").innerHTML = data.name;

document.getElementById("temp").innerHTML =
"Temperature : " + data.main.temp + " °C";

document.getElementById("humidity").innerHTML =
"Humidity : " + data.main.humidity + " %";

document.getElementById("weather").innerHTML =
"Condition : " + data.weather[0].description;

})

.catch(error => {
alert("City not found");
});

}

</script>

</body>
</html>