A weather dashboard that displays current weather information and a 5-day forecast for a specified location. The dashboard uses the OpenWeatherMap API to fetch weather data and supports fetching weather details of the user's current location by default using the Geolocation API.
- Fetch and display current weather data including temperature, description, humidity, and wind speed.
- Fetch and display a 5-day weather forecast.
- Automatically fetch and display weather data for the user's current location on page load.
- Search for weather data by entering a location name.
- Animated cloud background to enhance visual appeal.
- A modern web browser with JavaScript enabled.
- An OpenWeatherMap API key. You can get one by signing up at OpenWeatherMap.
- Clone the repository:
git clone https://github.com/your-username/weather-dashboard.git
cd weather-dashboard
- In your script.js file add your OpenWeatherMap API key:
API_KEY=your_openweathermap_api_key
Open index.html in your web browser.
Open index.html in your web browser. The dashboard will automatically fetch and display the weather data for your current location. To search for weather data for a specific location, enter the location name in the search box and click the "Search" button.
HTML
The HTML file (index.html) contains the structure of the weather dashboard, including input fields for searching locations and placeholders for displaying weather data. CSS
The CSS file (styles.css) contains styles for the weather dashboard, including the animated cloud background. JavaScript
The JavaScript file (script.js) contains the logic for fetching and displaying weather data. Key functions include:
- fetchWeatherData(location): Fetches weather data for the specified location.
- updateCurrentWeather(data): Updates the current weather section with fetched data.
- updateForecast(data): Updates the forecast section with fetched data.
- getLocation(): Uses the Geolocation API to get the user's current location and fetch weather data for it.
Below is a basic example of how to use the weather dashboard:
Open the index.html file in your browser. By default, it will display weather information for your current location. To search for another location, enter the city name and click "Search".
Contributions are welcome! Please open an issue or submit a pull request if you have any improvements or bug fixes. License
This project is licensed under the MIT License - see the LICENSE file for details.
OpenWeatherMap for providing the weather data API.