Complete AI Training
Start for Free

Your job's AI kit

Get your AI kit

Tell us who you are and what you do. We show you your kit right away and email you the link: skills, prompts, AI agents, MCP servers and courses for your job.

500+ jobs ready, and we make a kit for any other job. No payment needed to look.

Share

Prompt

Weather Dashboard Web App

Use this when you need a detailed technical brief for building a full-featured, responsive weather dashboard web app.

CodingAdvancedIT & Software Development

How to use it

  1. Copy the prompt and paste it into ChatGPT, Claude, Gemini or any other AI.
  2. Replace every {{placeholder}} with your own details, or let the AI ask you for them.
  3. Use the follow-ups below to go deeper.
Prompt

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