weather_update

public

Guest Oct 01, 2024 Never 72

Clone

Plaintext index.html

Plaintext README.md

Plaintext script.js

Plaintext style.css

Plaintext index.html 29 lines (26 loc) | 976 Bytes

Raw

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

Raw

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

Raw

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

Raw

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 }

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>

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.

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: '© <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: '© <a href="https://openweathermap.org">OpenWeatherMap</a>'
124	}).addTo(map);
125
126

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	}