G

weather_update

public
Guest Oct 01, 2024 Never 41
Clone
Plaintext index.html
Plaintext README.md
Plaintext script.js
Plaintext style.css
Plaintext index.html 29 lines (26 loc) | 976 Bytes
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="styles.css">
8
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
9
</head>
10
<body>
11
<div class="weather-container">
12
<div class="weather-content">
13
<h1>Weather Update Today</h1>
14
<p>Enter a city:</p>
15
<input type="text" id="cityInput" placeholder="Enter city name">
16
<button onclick="getWeather()">Get Weather</button>
17
<button onclick="getWeatherByLocation()">Get Weather By Location</button>
18
19
<div class="weather-data" id="weatherData">
20
</div>
21
</div>
22
23
<div id="map"></div>
24
</div>
25
26
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
27
<script src="script.js"></script>
28
</body>
29
</html>
Plaintext README.md 76 lines (63 loc) | 3.64 KB
1
Weather Update Application
2
This is a simple weather application that allows users to get current weather information and a 3-hour weather forecast for any city. The application uses the OpenWeatherMap API to fetch weather data and forecast details. It also includes the functionality to get weather data for the user’s current location using geolocation.
3
4
Features - City-based Weather Search: Users can input the name of a city to get the current weather and forecast.
5
Location-based Weather Search: Users can retrieve weather information based on their current geolocation.
6
3-Hour Forecast: Displays the forecast for the next 5 time intervals with temperature, humidity, wind speed, and weather descriptions.
7
Weather Icons: Weather conditions are displayed along with corresponding icons from OpenWeatherMap.
8
Responsive Design: The app is responsive and adjusts based on screen size.
9
10
Modifications
11
1. index.html [Updated]
12
Added: A search input for city-based weather queries.
13
Added: Buttons to fetch weather either by entering a city name or using the user's geolocation.
14
15
Integrated: The necessary script.js file to handle weather fetching and forecast display.
16
<div class="weather-container">
17
<h1>Weather Update Today</h1>
18
<p>Enter a city:</p>
19
<input type="text" id="cityInput" placeholder="Enter city name">
20
<button onclick="getWeather()">Get Weather</button>
21
<button onclick="getWeatherByLocation()">Get Weather By Location</button>
22
23
<div class="weather-data" id="weatherData">
24
</div>
25
</div>
26
27
2. script.js [Updated]
28
Functionality: The script fetches weather data from the OpenWeatherMap API using both city input and geolocation.
29
Forecast: Fetches a 3-hour forecast for the next 5 periods and displays weather icons, temperatures, humidity, and wind speed.
30
Error Handling: Improved error handling for cases where the city is not found or location cannot be retrieved.
31
32
Key Functions:
33
getWeather(): Fetches weather by city.
34
getWeatherByLocation(): Fetches weather using geolocation.
35
fetchWeather(): Handles current weather fetching and passes the forecast URL to the forecast function.
36
fetchForecast(): Displays a 3-hour forecast for the next 5 time intervals, including icons and weather details.
37
38
function getWeather() {
39
const city = document.getElementById('cityInput').value;
40
const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;
41
const forecastUrl = `https://api.openweathermap.org/data/2.5/forecast?q=${city}&appid=${apiKey}&units=metric`;
42
fetchWeather(url, forecastUrl);
43
}
44
45
3. styles.css [Updated]
46
Styling: Added styles for the weather container and forecast display.
47
Scrollbar: The weather container includes a maximum height with a vertical scrollbar when the content exceeds the container’s height.
48
Flexbox Layout: Flexbox is used to display the forecast items in a horizontal row, with a responsive design for smaller screens.
49
50
Key Changes:
51
Weather container styling with auto-scroll for longer content:
52
53
.weather-container {
54
background-color: rgb(56, 128, 223);
55
padding: 30px;
56
border-radius: 15px;
57
width: 90%;
58
max-height: 700px;
59
overflow-y: auto;
60
}
61
62
Flex container for forecast items:
63
.forecast-container {
64
display: flex;
65
justify-content: space-between;
66
padding-top: 20px;
67
overflow-x: auto;
68
}
69
70
How to Run:
71
Clone or download the repository.
72
Open index.html in a browser.
73
Enter a city name and click "Get Weather", or click "Get Weather By Location" for geolocation-based weather data.
74
75
Dependencies:
76
OpenWeatherMap API: Make sure to use your own API key by replacing the placeholder in script.js.
Plaintext script.js 124 lines (105 loc) | 5.05 KB
1
const apiKey = '300b02d251ab98b3c1a3cb5fd9aba801';
2
3
4
function setBackgroundImage() {
5
const imageUrl = 'https://images.pexels.com/photos/258149/pexels-photo-258149.jpeg?auto=compress&cs=tinysrgb&w=600';
6
document.body.style.backgroundImage = `url('${imageUrl}')`;
7
document.body.style.backgroundSize = 'cover';
8
document.body.style.backgroundPosition = 'center';
9
document.body.style.backgroundRepeat = 'no-repeat';
10
}
11
12
document.addEventListener("DOMContentLoaded", setBackgroundImage);
13
14
function getWeather() {
15
const city = document.getElementById('cityInput').value;
16
if (city === '') {
17
alert('Please enter a city name');
18
return;
19
}
20
21
const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;
22
const forecastUrl = `https://api.openweathermap.org/data/2.5/forecast?q=${city}&appid=${apiKey}&units=metric`;
23
24
fetchWeather(url, forecastUrl);
25
}
26
27
function getWeatherByLocation() {
28
if (navigator.geolocation) {
29
navigator.geolocation.getCurrentPosition(position => {
30
const lat = position.coords.latitude;
31
const lon = position.coords.longitude;
32
33
const url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${apiKey}&units=metric`;
34
const forecastUrl = `https://api.openweathermap.org/data/2.5/forecast?lat=${lat}&lon=${lon}&appid=${apiKey}&units=metric`;
35
36
fetchWeather(url, forecastUrl);
37
}, () => {
38
alert("Unable to retrieve location.");
39
});
40
} else {
41
alert("Geolocation is not supported by this browser.");
42
}
43
}
44
45
function fetchWeather(url, forecastUrl) {
46
fetch(url)
47
.then(response => response.json())
48
.then(data => {
49
if (data.cod === '404') {
50
document.getElementById('weatherData').innerHTML = `<p>City not found!</p>`;
51
} else {
52
const cityName = data.name;
53
const countryCode = data.sys.country;
54
const temp = data.main.temp;
55
const humidity = data.main.humidity;
56
const windSpeed = data.wind.speed;
57
const description = data.weather[0].description;
58
const icon = data.weather[0].icon;
59
const iconUrl = `http://openweathermap.org/img/wn/${icon}@2x.png`;
60
61
document.getElementById('weatherData').innerHTML = `
62
<h2>${cityName}<sup>${countryCode}</sup></h2>
63
<img src="${iconUrl}" alt="${description} icon" />
64
<p>Temperature: ${temp} °C</p>
65
<p>Weather: ${description}</p>
66
<p>Humidity: ${humidity}%</p>
67
<p>Wind Speed: ${windSpeed} m/s</p>
68
<hr class="separator"/>
69
`;
70
71
fetchForecast(forecastUrl);
72
}
73
})
74
.catch(error => {
75
console.error('Error fetching weather data:', error);
76
document.getElementById('weatherData').innerHTML = `<p>There was an error fetching the data</p>`;
77
});
78
}
79
80
81
function fetchForecast(forecastUrl) {
82
fetch(forecastUrl)
83
.then(response => response.json())
84
.then(data => {
85
let forecastHtml = '<h2>3 hour forecast</h2><div class="forecast-container">';
86
data.list.slice(0, 5).forEach(forecast => {
87
const time = forecast.dt_txt;
88
const temp = forecast.main.temp;
89
const humidity = forecast.main.humidity;
90
const windSpeed = forecast.wind.speed;
91
const description = forecast.weather.map(item => item.description).join(", ");
92
const forecastIcon = forecast.weather[0].icon;
93
const forecastIconUrl = `http://openweathermap.org/img/wn/${forecastIcon}@2x.png`;
94
95
forecastHtml += `
96
<div class="forecast-item">
97
<img src="${forecastIconUrl}" alt="Forecast icon" />
98
<p>${time}</p>
99
<p>${temp}°C</p>
100
<p>${description}</p>
101
<p>Humidity: ${humidity}%</p>
102
<p>Wind Speed: ${windSpeed} m/s</p>
103
</div>
104
`;
105
});
106
forecastHtml += '</div>';
107
108
document.getElementById('weatherData').innerHTML += forecastHtml;
109
})
110
.catch(error => {
111
console.error('Error fetching forecast data:', error);
112
});
113
}
114
115
const map = L.map('map').setView([13.41, 122.56], 6);
116
117
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
118
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
119
}).addTo(map);
120
121
const weatherLayer = L.tileLayer(`https://tile.openweathermap.org/map/temp_new/{z}/{x}/{y}.png?appid=${apiKey}`, {
122
maxZoom: 2,
123
attribution: '&copy; <a href="https://openweathermap.org">OpenWeatherMap</a>'
124
}).addTo(map);
125
126
Plaintext style.css 159 lines (136 loc) | 3.01 KB
1
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');
2
3
body {
4
background-image: skyblue;
5
background-size: 100%;
6
font-family: 'Poppins', sans-serif;
7
text-align: center;
8
margin: 0;
9
padding: 0;
10
height: 100vh;
11
display: flex;
12
justify-content: center;
13
align-items: center;
14
15
16
}
17
18
.weather-container {
19
display: flex;
20
justify-content: space-around;
21
background-image: rgb(54, 80, 90);
22
padding: 30px;
23
border-radius: 30px;
24
box-shadow: 0px 6px 25px rgba(0, 0, 0, 0.5);
25
width: 150%;
26
max-width: 1300px;
27
margin: auto;
28
height: 1000px;
29
}
30
.weather-content {
31
width: 45%;
32
max-height: 100%;
33
overflow-y: auto;
34
padding-right: 20px;
35
display: flex;
36
flex-direction: column;
37
justify-content: flex-start;
38
align-items: center;
39
}
40
41
.weather-content::-webkit-scrollbar {
42
width: 10px;
43
}
44
45
.weather-content::-webkit-scrollbar-thumb {
46
background-color: #024463;
47
border-radius: 5px;
48
border: 2px solid #ffffff;
49
}
50
51
.weather-content::-webkit-scrollbar-track {
52
background-color: black;
53
}
54
55
.weather-data {
56
font-size: 18px;
57
text-align: center;
58
margin-top: 20px;
59
color: black;
60
}
61
62
.weather-data img {
63
display: block;
64
margin: 0 auto;
65
}
66
67
.weather-content input {
68
width: 76%;
69
padding: 10px;
70
border-radius: 5px;
71
border: none;
72
font-size: 20px;
73
margin-bottom: 15px;
74
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
75
background-color: #e9f5fb;
76
color: #333;
77
}
78
79
.weather-content button {
80
padding: 10px 15px;
81
font-size: 20px;
82
background-color: whitesmoke;
83
color: #1E81B0;
84
border: none;
85
border-radius: 5px;
86
cursor: pointer;
87
transition: background-color 0.3s ease;
88
margin-bottom: 10px;
89
width: 80%;
90
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
91
}
92
93
.weather-content button:hover {
94
background-color: black;
95
}
96
97
.separator {
98
border: none;
99
border-top: 2px solid black;
100
margin: 20px 0;
101
width: 100%;
102
}
103
104
.forecast-container {
105
display: flex;
106
justify-content: space-between;
107
padding-top: 20px;
108
flex-wrap: wrap;
109
width: 100%;
110
height: auto;
111
}
112
113
.forecast-item {
114
display: flex;
115
flex-direction: column;
116
align-items: center;
117
text-align: center;
118
flex: 1 1 20%;
119
margin-right: 20px;
120
min-width: 120px;
121
}
122
123
.forecast-item img {
124
margin-bottom: 10px;
125
}
126
127
.forecast-item p {
128
margin: 5px 0;
129
font-size: 16px;
130
color: black;
131
}
132
133
134
#map {
135
width: 80vw;
136
height: 100vh;
137
max-width: 650px;
138
max-height: 1000px;
139
border-radius: 20px;
140
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
141
}
142
143
144
@media screen and (max-width: 600px) {
145
.weather-container {
146
padding: 20px;
147
width: 100%;
148
max-height: 500px;
149
}
150
151
.forecast-item {
152
min-width: 100px;
153
}
154
155
#map {
156
width: 200%;
157
height: 900px;
158
}
159
}