TEXT

Weather Dashboard

Contributed by f

Improved by Laravel Company · 2026-09-07

Improved prompt:

Design and develop a feature-rich weather application that delivers an exceptional user experience and high visual fidelity. The application must be built using a modern technology stack, including:

  1. Frontend: HTML5, CSS3 (with responsive design), and JavaScript
  2. API: OpenWeatherMap API (ensure you have an API key)
  3. Layout: CSS Grid for a flexible and adaptable layout across all devices

The application should provide a comprehensive and immersive weather experience with the following core features:

Main Weather Display:

  • Current temperature with appropriate icon based on weather conditions
  • Real-time background image or color scheme that matches the current weather (e.g., sunny, cloudy, rainy, snowy)
  • Automatically adjusts visual theme based on the time of day (day/night)

5-Day Forecast:

  • Detailed breakdown for each of the next 5 days
  • Expandable hourly forecast for each day, showing:
    • Temperature
    • Weather conditions
    • Precipitation likelihood
    • Wind speed and direction
    • Humidity and pressure

Location Functionality:

  • Location search with autocomplete functionality
  • Supports both city names and geographic coordinates
  • Location history for quick access to previously searched locations
  • Automatic geolocation detection using JavaScript when allowed by the user

User Preferences:

  • Toggle for temperature units (°C/°F) with persistent selection
  • Toggle for time format (12/24 hour) with persistent selection

Advanced Weather Data:

  • Detailed meteorological information displayed in an expandable panel:
    • Wind speed and direction
    • Humidity and pressure
    • UV index with appropriate warning level
    • Air quality index with color-coded severity indicator
  • Include sunrise and sunset times with visual indicators (e.g., sun icons)

Severe Weather Alerts:

  • Displays severe weather alerts with:
    • Priority highlighting or visual emphasis
    • Detailed description of the alert
    • Automatic refresh for new alerts

The application must be:

  • Fully responsive and adaptive to all screen sizes
  • Optimized for performance with efficient API calls and caching
  • Accessible with proper semantic HTML and ARIA roles

Include a detailed design mockup or style guide to ensure visual consistency and a polished user interface. The final application should provide an engaging and informative weather experience that exceeds user expectations.

Original prompt (before our improvements)

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.