Weather Forecast Dashboard Web App

Most free weather dashboards either drown the user in raw meteorological fields or show a single temperature number with no context. Students, commuters and event planners need the practical middle ground: what the next few hours look like, how the week trends, and whether the air is breathable — in one glance. This project builds exactly that as a single-page web application with a modern dark-theme interface: a current-conditions hero with feels-like temperature, a 10-hour forecast strip, a canvas-drawn 7-day temperature trend chart, station readings for the last 6 hours, AQI panels with health badges, and a regional snapshot table covering six major Indian cities. The front end is honest about its data: every figure on screen is bound to a structured forecast dataset, so the app behaves like a real product instead of a mockup with random numbers.

1. The dashboard loads a structured forecast dataset (current, hourly, daily, station and AQI objects per city).
2. The Today view renders the hero card, hourly strip and AQI panel from the active city's data.
3. Canvas helpers draw the 7-day high/low temperature lines and the hourly bars from the same series.
4. Switching city via search or chips updates one shared state object, and all three views re-render consistently.
5. The 7-Day view shows the trend chart plus extended rows with rain-probability intensity bars.
6. The Regional view renders station readings and the six-city snapshot table for comparison.

Tech stack:

• HTML5, CSS3, vanilla JavaScript (ES6)
• Canvas 2D API for temperature charts (no chart library)
• Single-page tab navigation with shared state object
• Responsive card-based dark theme
• Static deployment (no server or database)

• [Current conditions hero] City, timestamp, condition, big temperature readout with feels-like, sunrise/sunset, humidity, wind, pressure and UV index in one card.
• [Hourly forecast strip] Next 10 hours with temperatures, condition labels and proportional bars, rendered from the hourly series.
• [7-day temperature trend chart] High/low lines drawn on canvas with day labels and value callouts — no chart library needed.
• [Extended forecast rows] Seven daily rows with condition text, high/low ranges and intensity bars scaled by rain probability.
• [Air quality and alerts] AQI value with health badge, PM2.5/PM10/O3 figures and a severe-weather alert banner.
• [City search and quick-switch] Search box plus one-tap chips for Mumbai, Delhi, Bengaluru, Chennai, Hyderabad and Kolkata sharing one state object.
• [Station and regional tables] Six-hour station readings and a regional snapshot table so every view stays consistent.

• Complete source code (single-file dashboard app with all three views)
• Realistic multi-city forecast dataset in structured JS objects
• Canvas chart helpers (temperature lines, hourly bars)
• Setup guide (hosting, swapping in a live weather API)
• Project report PDF (data model, rendering approach, methodology)
• PPT presentation for final review
• Viva Q&A preparation document (dashboards, canvas charts, state management)

• Ships with a demo dataset, not live data — wiring a real forecast API is a documented extension, not included by default.
• City list is fixed at six cities in the demo; adding cities means extending the dataset.
• Charts are drawn for the demo data ranges; extreme values may need axis rescaling.
• No user accounts, saved preferences or push alerts in this build.
• The app is front-end only; there is no backend caching or rate-limit handling.