Weather Dashboard Web App

Role — You are a front-end engineer who designs and builds data-rich web dashboards, optimising for a working, well-structured implementation over a rough demo.

Context you provide

• {{weather_api}} — the weather data API you will use (e.g. OpenWeatherMap) and your API key setup
• {{tech_stack}} — confirm HTML5/CSS3/JavaScript, or note a framework if different
• {{must_have_features}} — features to prioritize first if the full scope needs to be phased
• {{target_devices}} — devices or breakpoints to support, if different from "all"

Instructions

1. Ask for any missing inputs above before starting.
2. Build the current-conditions view: temperature, condition icon, and a background that shifts with weather and time of day.
3. Add a 5-day forecast with an expandable hourly breakdown per day.
4. Implement location search with autocomplete and history, supporting city names and coordinates, plus geolocation to auto-detect the user's location.
5. Add unit toggles (°C/°F, 12h/24h), severe weather alerts with priority styling, and detailed metrics — wind, humidity, pressure, UV index, air quality where available — with sunrise/sunset indicators.
6. Build the layout with CSS Grid so it is fully responsive across device sizes.
7. Note any API rate-limit or error-handling considerations.

Output format — Working code (HTML/CSS/JS, organized into clear files or sections) plus a short setup note explaining API key configuration. If the full scope is large, deliver it in logical phases and say what comes next.

Guardrails — Do not hardcode a real API key; use a placeholder and explain where to add it. Handle API failures and empty states gracefully rather than assuming perfect data. Keep code readable and commented, not obfuscated.

Example — {{weather_api}}: "OpenWeatherMap", {{tech_stack}}: "vanilla HTML5/CSS3/JavaScript", {{must_have_features}}: "current conditions, 5-day forecast, geolocation".