Skip to content

Commit 945281e

Browse files
NitkarshChourasiaNitkarshChourasia
authored
Merge pull request #1151 from chiragmetaliya/master
WeatherApp-chiragmetaliya
2 parents 02b96d0 + 6d5636f commit 945281e

File tree

7 files changed

+168
-0
lines changed

7 files changed

+168
-0
lines changed

‎WeatherApp/chiragmetaliya/images/background.jpg

39.8 KB
Loading

‎WeatherApp/chiragmetaliya/images/cloudy.jpg

66.7 KB
Loading

‎WeatherApp/chiragmetaliya/images/rainy.jpg

157 KB
Loading

‎WeatherApp/chiragmetaliya/images/sunny.jpg

187 KB
Loading

‎WeatherApp/chiragmetaliya/index.html

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
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 href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
8+
<link rel="stylesheet" href="style.css">
9+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.10/css/weather-icons.min.css">
10+
</head>
11+
<body>
12+
<div class="weather-app">
13+
<h1>Weather App</h1>
14+
<input type="text" id="city-input" placeholder="Enter city name">
15+
<button id="search-btn">Search</button>
16+
<div id="weather-info">
17+
<!-- Weather information will be displayed here -->
18+
</div>
19+
</div>
20+
<script src="script.js"></script>
21+
</body>
22+
</html>

‎WeatherApp/chiragmetaliya/script.js

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
const apiKey = '11b99e1fc528f63c99423edeae4f422c';
2+
3+
document.getElementById('search-btn').addEventListener('click', function() {
4+
const city = document.getElementById('city-input').value;
5+
const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;
6+
7+
fetch(apiUrl)
8+
.then(response => response.json())
9+
.then(data => {
10+
displayWeather(data);
11+
})
12+
.catch(error => {
13+
console.error('Error fetching the weather data:', error);
14+
});
15+
});
16+
17+
function displayWeather(data) {
18+
const weatherInfo = document.getElementById('weather-info');
19+
const body = document.body;
20+
21+
if (data.cod === 200) {
22+
const { temp } = data.main;
23+
const { description, icon } = data.weather[0];
24+
const { humidity } = data.main;
25+
const { speed } = data.wind;
26+
27+
let background = 'background.jpg'; // Default background
28+
if (description.includes('rain')) {
29+
background = 'rainy.jpg';
30+
} else if (description.includes('cloud')) {
31+
background = 'cloudy.jpg';
32+
} else if (description.includes('sun')) {
33+
background = 'sunny.jpg';
34+
}
35+
36+
body.style.backgroundImage = `url('images/${background}')`;
37+
38+
weatherInfo.innerHTML = `
39+
<div class="weather-item"><strong>Temperature:</strong> ${temp} °C</div>
40+
<div class="weather-item">
41+
<strong>Condition:</strong> ${description}
42+
<img src="http://openweathermap.org/img/wn/${icon}@2x.png" alt="Weather Icon">
43+
</div>
44+
<div class="weather-item"><strong>Humidity:</strong> ${humidity}%</div>
45+
<div class="weather-item"><strong>Wind Speed:</strong> ${speed} m/s</div>
46+
`;
47+
48+
weatherInfo.classList.add('show');
49+
} else {
50+
weatherInfo.innerHTML = `<div class="weather-item">City not found</div>`;
51+
weatherInfo.classList.remove('show');
52+
}
53+
}

‎WeatherApp/chiragmetaliya/style.css

+93
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
/* General Styles */
2+
body {
3+
font-family: 'Roboto', sans-serif;
4+
background: url('images/background.jpg') no-repeat center center fixed;
5+
background-size: cover;
6+
display: flex;
7+
justify-content: center;
8+
align-items: center;
9+
height: 100vh;
10+
margin: 0;
11+
transition: background 0.5s ease-in-out;
12+
}
13+
14+
.weather-app {
15+
text-align: center;
16+
background: rgba(255, 255, 255, 0.9);
17+
padding: 30px 40px;
18+
border-radius: 10px;
19+
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
20+
width: 300px;
21+
max-width: 90%;
22+
}
23+
24+
h1 {
25+
color: #333;
26+
margin-bottom: 20px;
27+
font-size: 24px;
28+
}
29+
30+
#city-input {
31+
padding: 10px;
32+
width: 100%;
33+
border: 1px solid #ddd;
34+
border-radius: 5px;
35+
margin-bottom: 10px;
36+
font-size: 16px;
37+
}
38+
39+
#search-btn {
40+
padding: 10px 25px;
41+
background: #007BFF;
42+
color: #fff;
43+
border: none;
44+
border-radius: 5px;
45+
cursor: pointer;
46+
font-size: 16px;
47+
transition: background 0.3s;
48+
width: 100%;
49+
}
50+
51+
#search-btn:hover {
52+
background: #0056b3;
53+
}
54+
55+
#weather-info {
56+
margin-top: 25px;
57+
opacity: 0;
58+
transition: opacity 0.5s ease-in-out;
59+
}
60+
61+
#weather-info.show {
62+
opacity: 1;
63+
}
64+
65+
.weather-item {
66+
margin: 10px 0;
67+
font-size: 18px;
68+
color: #333;
69+
}
70+
71+
.weather-item strong {
72+
color: #555;
73+
}
74+
75+
.weather-item img {
76+
vertical-align: middle;
77+
margin-left: 10px;
78+
}
79+
80+
@media (max-width: 600px) {
81+
.weather-app {
82+
padding: 20px;
83+
width: 90%;
84+
}
85+
86+
h1 {
87+
font-size: 20px;
88+
}
89+
90+
.weather-item {
91+
font-size: 16px;
92+
}
93+
}

0 commit comments

Comments
 (0)