Skip to main content
Prompts Comprehensive OpenWeatherMap Weather Dashboard Builder

developer coding user risk: low

Comprehensive OpenWeatherMap Weather Dashboard Builder

Build a comprehensive weather dashboard using HTML5, CSS3, JavaScript, and the OpenWeatherMap API, featuring current weather with icons and dynamic backgrounds, 5-day forecast with…

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.

EXPECTED OUTPUT

Format
html

SUCCESS CRITERIA

  • Use HTML5, CSS3, JavaScript and OpenWeatherMap API.
  • Create visually appealing current weather display with icons and dynamic backgrounds.
  • Display 5-day forecast with expandable hourly breakdown.
  • Implement location search with autocomplete and history for cities and coordinates.
  • Add geolocation for automatic user location detection.
  • Include toggles for temperature units and time formats.
  • Display severe weather alerts with priority highlighting.
  • Show detailed data including wind, humidity, pressure, UV index, air quality.
  • Include sunrise/sunset times with visual indicators.
  • Create fully responsive CSS Grid layout for all devices.

FAILURE MODES

  • Overly detailed feature list may lead to incomplete implementations.
  • API integration issues due to unspecified endpoints or key handling.
  • Responsive design may not adapt perfectly across all devices.
  • Complex features like expandable forecasts or autocomplete may be oversimplified.

CAVEATS

Dependencies
  • OpenWeatherMap API key
  • Knowledge of OpenWeatherMap API endpoints
Missing context
  • OpenWeatherMap API key acquisition and secure handling.
  • Specific API endpoints for features like alerts, air quality, UV index.
  • Icon library or fallback for weather icons.
  • Error handling and loading states.
Ambiguities
  • 'Visually appealing' and 'appropriate information density' are subjective.
  • 'Time formats' not explicitly defined (e.g., 12h/24h).
  • Source of severe weather alerts not specified (OpenWeatherMap support unclear).

QUALITY

OVERALL
0.70
CLARITY
0.90
SPECIFICITY
0.85
REUSABILITY
0.30
COMPLETENESS
0.80

IMPROVEMENT SUGGESTIONS

  • Add 'Include instructions for obtaining and securely using an OpenWeatherMap API key.'
  • Specify 'Use OpenWeatherMap endpoints: current weather (weather), 5-day forecast (forecast), air pollution (air_pollution), etc.'
  • Define 'time formats' as '12-hour/24-hour toggle'.
  • Add 'Provide complete, standalone HTML file with embedded CSS/JS for easy testing.'

USAGE

Copy the prompt above and paste it into your AI of choice — Claude, ChatGPT, Gemini, or anywhere else you're working. Replace any placeholder sections with your own context, then ask for the output.

MORE FOR DEVELOPER