🌦️ Modern Weather Dashboard

A sleek, animated weather dashboard with dynamic backgrounds and real-time data visualization. Built with pure HTML, CSS, and JavaScript.

✨ Features

• Dynamic Weather Animations (rain, snow, sunshine, clouds)
• Responsive Design that works on all devices
• Beautiful UI with glassmorphism effects
• Mock Data System that simulates seasonal weather patterns
• Location Detection (with graceful fallback)
• Real-time Updates with refresh capability

🛠️ Technology Stack

🚀 Quick Start

Clone the Repository

git clone https://github.com/iyoramu/modern-weather-dashboard-v1.git
cd modern-weather-dashboard-v1

Usage

1. For Local Development:

   • Simply open index.html in your browser
   • No build step required (pure HTML/CSS/JS)

2. For Production:

   • Deploy the entire folder to any static hosting (GitHub Pages, Netlify, Vercel, etc.)

3. Using the App:

   • Allow location access when prompted for real weather data
   • If location is blocked, enjoy simulated weather data
   • Click the refresh button (↻) to update weather

🌈 Weather Conditions Supported

• Sunny ☀️
• Rainy 🌧️
• Cloudy ☁️
• Snowy ❄️
• Night 🌙
• Thunderstorms ⚡
• Mist 🌫️

🔧 Connect to Real Weather API (Optional)

1. Get a free API key from OpenWeatherMap
2. Replace the mock data function in the script with:

async function getRealWeatherData(lat, lon) {
    const API_KEY = 'your_api_key_here';
    const response = await fetch(
        `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY}&units=metric`
    );
    return await response.json();
}

📜 License

MIT License

Copyright (c) 2025 IRUTABYOSE Yoramu

---

Made with ❤️ by IRUTABYOSE Yoramu