🌦️ Advanced Weather Dashboard (MiniPro)

A modern, highly responsive weather dashboard built with Vanilla JavaScript, HTML5, and CSS3. This project features a clean "Bento-style" UI with immersive atmospheric effects and pro-level weather insights.

Light Mode Dark Mode

🚀 Key Features

• 📍 Precision Geolocation: Automatically detects your current location to show hyper-local weather instantly.
• 🌑 Light & Dark Mode: A sleek, high-contrast dark theme and a vibrant light theme with a smart toggle.
• 🌫️ Air Quality Index (AQI): Stay informed about your environment with real-time air quality metrics and health descriptors.
• 👚 Smart Clothing Advisor: Context-aware clothing recommendations based on temperature and current weather conditions (Rain/Snow).
• 🌧️ Immersive Backgrounds: Experience the weather visually with animated rain and snow effects that trigger dynamically.
• 📊 Detailed Forecasts: Full 24-hour hourly scroll and 7-day weekly outlook mapping actual live data.

🛠️ Tech Stack

• Core: HTML5, Vanilla JavaScript (ES6+)
• Styling: CSS3 (Custom Properties, Flexbox, CSS Grid)
• Typography: Plus Jakarta Sans
• Data Source: Visual Crossing Weather API

📱 Mobile Responsive

Optimized for all screen sizes:

• Desktop: 2-column bento grid layout.
• Mobile: Single-column stacked layout with smooth scroll lists.

⚙️ Setup

1. Clone the repository.
2. Open index.html in any modern web browser (use a Live Server extension for the best experience).
3. (Optional) Replace the weatherApiKey in script.js with your own key from Visual Crossing.

---

Created for the Advanced Agentic Coding Workshop.