Interactive Weather Dashboard with OpenWeatherMap API
Description
Full-Featured Weather Dashboard
This prompt helps create an interactive weather dashboard using HTML5, CSS3, JavaScript, and OpenWeatherMap API. The interface automatically changes its appearance based on weather conditions and time of day.
Who It's For
- Frontend developers learning API integration
- Students building portfolio projects
- Developers interested in UX/UI design
Key Features
- Detailed Forecast: 5-day forecast with hourly breakdown
- Advanced Search: autocomplete, search history, coordinates support
- Geolocation: automatic user location detection
- Meteorological Data: wind, humidity, pressure, UV index, air quality
- Responsive Design: CSS Grid for all screen sizes
>_ Prompt
Build a comprehensive weather dashboard using HTML5, CSS3, JavaScript and the OpenWeatherMap API. Create a visually appealing interface showing current weather conditions with appropriate icons and background changes based on weather/time of day. Display a detailed 5-day forecast with expandable hourly breakdown for each day. Implement location search with autocomplete and history, supporting both city names and coordinates. Add geolocation support to automatically detect user's location. Include toggles for temperature units (°C/°F) and time formats. Display severe weather alerts with priority highlighting. Show detailed meteorological data including wind speed/direction, humidity, pressure, UV index, and air quality when available. Include sunrise/sunset times with visual indicators. Create a fully responsive layout using CSS Grid that adapts to all device sizes with appropriate information density.