Skip to content

Commit f84e5dc

Browse files
PBJIPBJI
authored
Merge pull request #898 from heeba-khan/heeba
Added an interactive weather app using weather app API
2 parents 014b646 + d8850ef commit f84e5dc

File tree

12 files changed

+204
-0
lines changed

12 files changed

+204
-0
lines changed

‎WeatherApp/heeba-khan/app.js

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
const apiKey="41bef1d1ddc74b3a74a8bc031d21e70d";
2+
const apiUrl="https://api.openweathermap.org/data/2.5/weather?units=metric&q=";
3+
4+
const searchBox=document.querySelector(".search input");
5+
const searchBtn=document.querySelector(".search button");
6+
const weathericon=document.querySelector(".weather-icon");
7+
8+
async function checkWeather(city){
9+
const response=await fetch(apiUrl+city+`&appid=${apiKey}`);
10+
11+
if(response.status==404){
12+
document.querySelector(".error").style.display="block";
13+
document.querySelector(".weather").style.display="none";
14+
}
15+
else{
16+
var data=await response.json();
17+
18+
// console.log(data);
19+
20+
document.querySelector(".city").innerHTML=data.name;
21+
document.querySelector(".temp").innerHTML=Math.round(data.main.temp)+"°c";
22+
document.querySelector(".humidity").innerHTML=data.main.humidity+"%";
23+
document.querySelector(".wind").innerHTML=data.wind.speed+" km/h ";
24+
25+
if(data.weather[0].main=="Clouds"){
26+
weathericon.src="images/images/clouds.png";
27+
}
28+
else if(data.weather[0].main=="Clear"){
29+
weathericon.src="images/images/clear.png"
30+
}
31+
else if(data.weather[0].main=="Rain"){
32+
weathericon.src="images/images/rain.png"
33+
}
34+
else if(data.weather[0].main=="Drizzle"){
35+
weathericon.src="images/images/drizzle.png"
36+
}
37+
38+
else if(data.weather[0].main=="Mist"){
39+
weathericon.src="images/images/mist.png"
40+
}
41+
42+
document.querySelector(".weather").style.display="block";
43+
document.querySelector(".error").style.display="none";
44+
}
45+
}
46+
47+
48+
49+
searchBtn.addEventListener("click",()=>{
50+
checkWeather(searchBox.value);
51+
})

‎WeatherApp/heeba-khan/images/images/clear.png

6.43 KB
Loading

‎WeatherApp/heeba-khan/images/images/clouds.png

12.4 KB
Loading

‎WeatherApp/heeba-khan/images/images/drizzle.png

10.1 KB
Loading

‎WeatherApp/heeba-khan/images/images/humidity.png

1.59 KB
Loading

‎WeatherApp/heeba-khan/images/images/mist.png

11.9 KB
Loading

‎WeatherApp/heeba-khan/images/images/rain.png

5.7 KB
Loading

‎WeatherApp/heeba-khan/images/images/search.png

1.52 KB
Loading

‎WeatherApp/heeba-khan/images/images/snow.png

10.8 KB
Loading

‎WeatherApp/heeba-khan/images/images/wind.png

2.15 KB
Loading

‎WeatherApp/heeba-khan/index.html

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Weather-app</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="card">
11+
<div class="search">
12+
<input type="text" placeholder="Enter city name" spellcheck="false">
13+
<button><img src="images/images/search.png"></button>
14+
</div>
15+
<div class="error">
16+
<p>Invalid city name</p>
17+
</div>
18+
<div class="weather">
19+
<img src="images/images/rain.png" class="weather-icon">
20+
<h1 class="temp">22°c</h1>
21+
<h2 class="city">New York</h2>
22+
23+
<div class="details">
24+
<div class="col">
25+
<img src="images/images/humidity.png" alt="">
26+
<div>
27+
<p class="humidity">50%</p>
28+
<p>Humidity</p>
29+
</div>
30+
</div>
31+
<div class="col">
32+
<img src="images/images/wind.png" alt="">
33+
<div>
34+
<p class="wind">15 km/h</p>
35+
<p>Wind Speed</p>
36+
</div>
37+
</div>
38+
</div>
39+
</div>
40+
</div>
41+
42+
<script src="app.js"></script>
43+
44+
</body>
45+
</html>

‎WeatherApp/heeba-khan/style.css

+108
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
font-family: 'Poppins',sans-serif;
5+
box-sizing: border-box;
6+
}
7+
8+
body{
9+
background: #222;
10+
}
11+
12+
.card{
13+
width: 90%;
14+
max-width: 470px;
15+
background: linear-gradient(135deg,#00feba,#5b548a);
16+
color: #fff;
17+
margin: 100px auto 0;
18+
border-radius: 20px;
19+
padding: 40px 35px;
20+
text-align: center;
21+
}
22+
23+
.search{
24+
/* background-color: black; */
25+
width: 100%;
26+
display: flex;
27+
align-items: center;
28+
justify-content: space-between;
29+
}
30+
31+
.search input{
32+
border: 0;
33+
outline: 0;
34+
background: #ebfffc ;
35+
color: #555;
36+
padding: 10px 25px;
37+
height: 60px;
38+
border-radius: 30px;
39+
flex: 1;
40+
margin-right: 16px;
41+
font-size: 18px;
42+
}
43+
44+
.search button{
45+
border: 0;
46+
outline: 0;
47+
background: #ebfffc ;
48+
border-radius: 50%;
49+
width: 60px;
50+
height: 60px;
51+
cursor: pointer;
52+
}
53+
54+
.search button img{
55+
width: 20px;
56+
}
57+
58+
.weather-icon{
59+
width: 170px;
60+
margin-top: 30px;
61+
}
62+
63+
.weather h1{
64+
font-size: 80px;
65+
font-weight: 500;
66+
}
67+
.weather h2{
68+
font-size: 45px;
69+
font-weight: 400;
70+
margin-top: -10px;
71+
}
72+
73+
.details{
74+
display: flex;
75+
align-items: center;
76+
justify-content: space-between;
77+
padding: 0 20px;
78+
margin-top: 50px;
79+
}
80+
81+
.col{
82+
display: flex;
83+
align-items: center;
84+
text-align: left;
85+
86+
}
87+
88+
.col img{
89+
width: 40px;
90+
margin-right: 10px;
91+
}
92+
93+
.humidity, .wind{
94+
font-size: 28px;
95+
margin-top: -6px;
96+
}
97+
98+
.weather{
99+
display: none;
100+
}
101+
102+
.error{
103+
text-align: left;
104+
margin-left: 10px;
105+
font-size: 14px;
106+
margin-top: 10px;
107+
display: none;
108+
}

0 commit comments

Comments
 (0)