🌤️ Weather Forecast Application

A modern, responsive weather dashboard that provides real-time weather information based on user search or current geographic location. Built using purely Vanilla JavaScript and styled with Tailwind CSS and Flowbite components.

---

✨ Features

• Real-time Weather Data: Fetches live updates including temperature, weather conditions, and location names using the WeatherAPI.
• Automatic Geolocation: Automatically detects the user's current coordinates (Latitude & Longitude) on startup to show local weather.
• Manual Search: Users can manually search for weather details of any city worldwide.
• Dynamic UI: A sleek, dark-themed glassmorphism-inspired design with responsive cards and user message boxes.
• Modern Tech Stack: Uses modern JavaScript fetch API and template literals for seamless DOM manipulation.

---

🔑 How to Get Your API Key

To run this project, you need a free API key from WeatherAPI.com. Follow these steps:

1. Go to WeatherAPI.com and click on Signup.
2. Create a free account using your email.
3. Once logged in, go to your Dashboard.
4. Copy your unique API Key.
5. Open app.js in your project and replace the apiKey variable value with your copied key:

   let apiKey = "YOUR_API_KEY_HERE";

🛠️ Technology Stack

• Frontend: HTML5, Tailwind CSS (via Flowbite CDN).
• Scripting: Vanilla JavaScript (ES6+).
• API: WeatherAPI for current weather data.
• Icons/UI: Flowbite Component Library.

---

📁 Project Structure

• index.html: Contains the navigation bar, search interface, and the root container for dynamic content.
• app.js: Handles API calls, geolocation logic, and dynamic HTML rendering.
• images/: Local directory for project assets like logos and user avatars.

---

---

🎨 GUI Preview

The interface features a professional navigation bar and a weather card that displays:

• Weather Condition Icon and Text
• Country and City Name
• Current Temperature in Celsius
• Local Time of the searched location

---