Weather Dashboard

Baut ein responsives Wetter-Dashboard mit Vorhersage, Standortsuche, Warnungen und Detaildaten via OpenWeatherMap-API.

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

So nutzt du es

Den Prompt-Text kopieren (Button oben) und als System-Prompt bzw. erste Nachricht in ChatGPT, Claude oder einem lokalen Modell einfügen. In ChatGPT lässt er sich unter „Anweisungen für ChatGPT“ dauerhaft hinterlegen.

Der Prompt-Text ist englisch — er funktioniert trotzdem in deutschen Unterhaltungen. Für deutsche Antworten einfach am Ende ergänzen: „Antworte auf Deutsch.“

Im Detail

Dieser Prompt liefert eine ausführliche Spezifikation für ein Wetter-Dashboard mit HTML5, CSS3, JavaScript und der OpenWeatherMap-API: aktuelle Bedingungen mit passenden Icons und Hintergründen, ausklappbare 5-Tage-Vorhersage mit Stundenwerten, Standortsuche mit Autovervollständigung und Verlauf, Geolocation, Einheiten-Umschaltung, Unwetterwarnungen sowie Detaildaten wie Wind, Luftfeuchtigkeit, UV-Index und Luftqualität – alles responsiv per CSS-Grid. Ideal als Bauplan für Entwickler, die schnell ein vollständiges Wetter-Frontend generieren lassen wollen, statt Anforderungen selbst auszuformulieren.

Praxis-Tipp

Fügen Sie Ihren eigenen OpenWeatherMap-API-Key als Platzhalter im generierten Code ein und lassen Sie sich bei Bedarf zusätzlich eine Vorschlag für die Ordnerstruktur (HTML/CSS/JS getrennt) mitgeben.

Lizenz & Quelle

• Lizenz: CC0-1.0 (Public Domain)
• Quelle: awesome-chatgpt-prompts (GitHub)

Lade …