weather_update
public
Oct 01, 2024
Never
68
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 }