💻 Coding & Development

Weather Dashboard

📁 Coding & Development 👤 Contributed by @f 🗓️ Updated 2026-04-19

The 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.

0 copies

🚀 Open in ChatGPT ✨ Open in Claude 💎 Open in Gemini

Example outputs

Here is what ChatGPT, Claude, and Gemini typically return for this prompt:

🚀 ChatGPT

I'll help you create a comprehensive weather dashboard! Here's a complete implementation featuring a modern gradient interface that shifts from dawn blues to sunset oranges based on local time. The dashboard includes a search bar with autocomplete powered by OpenWeatherMap's geocoding API, localStorage for search history, and geolocation detection. The 5-day forecast uses collapsible cards with hourly data displayed in a scrollable timeline. I've implemented Celsius/Fahrenheit toggle buttons, real-time weather icons, and a detailed metrics panel showing wind rose diagrams, humidity gauges, and UV index bars—all fully responsive using CSS Grid with breakpoints at 768px and 1024px.

✨ Claude

I can provide you with the code structure for this weather dashboard, though I should note that you'll need to obtain your own API key from OpenWeatherMap (they offer a free tier). The implementation I'm sharing uses a modular JavaScript architecture with separate functions for API calls, UI updates, and state management. One thing to be aware of: the air quality endpoint is a premium feature in OpenWeatherMap's API, so you may need to handle cases where that data isn't available. The responsive design uses CSS custom properties for consistent theming and smooth transitions between weather states.

💎 Gemini

Here's a complete weather dashboard implementation using the OpenWeatherMap Current Weather, 5 Day Forecast, and Air Pollution APIs. The interface uses a CSS Grid layout with a main weather card, forecast section, and details panel that reorganizes from 3 columns to single column on mobile. Background gradients transition based on weather conditions (clear, cloudy, rainy, snowy) and time of day using the sunrise/sunset timestamps. The autocomplete feature uses OpenWeatherMap's Geocoding API, and localStorage maintains the last 5 searched locations. Temperature conversion and 12/24-hour time formatting are handled through utility functions.

How to use this prompt

Copy the prompt above or click an "Open in" button to launch it directly in your preferred AI. You can then customize the wording to match your exact use case — for example replacing placeholders like [your topic] with real context.

Which AI model works best

Claude Opus 4 and Sonnet 4.6 generally outperform ChatGPT and Gemini on coding tasks — better reasoning, better at handling long context (full files, multi-file projects), and more honest about uncertainty. ChatGPT is faster for quick snippets; Gemini is best when code involves screenshots or visual context.

How to customize this prompt

Swap the language mentioned in the prompt (Python, JavaScript, etc.) for whichever stack you're on. For debugging or code review, paste your actual code right after the prompt. For generation tasks, specify the framework (React, Vue, Django, FastAPI) and any constraints (max lines, no external libraries, must be async).

Common use cases

Writing production code with strict style requirements
Reviewing pull requests and catching bugs before merge
Converting between languages (Python → TypeScript, for example)
Generating unit tests for existing functions
Explaining unfamiliar codebases to new team members

Variations

Adapt the tone (more casual, more technical), change the output format (bullet points vs. paragraphs), or add constraints (word limits, target audience).