🌦️ Weather Dashboard

A simple and responsive Weather Dashboard built using HTML, CSS, and JavaScript that fetches real-time weather data from the OpenWeatherMap API. Users can search for any city or allow location access to automatically display current weather conditions.

🚀 Features

🔍 Search weather by city name

📍 Auto-detect weather using browser geolocation

🌡️ Displays temperature (°C), humidity, wind speed, and weather description

🖼️ Dynamic weather icons based on conditions

⏳ Loading indicator while fetching data

❌ Error handling for invalid locations

🎨 Clean and responsive UI with hover animations

🛠️ Technologies Used

HTML5

CSS3

JavaScript (ES6)

OpenWeatherMap API

Boxicons

📂 Project Structure weather-dashboard/ │ ├── index.html ├── images/ │ ├── clear.png │ ├── cloud.png │ ├── rain.png │ ├── mist.png │ ├── snow.png │ ├── overcast.png │ ├── 404.png │ └── bg.jpg └── README.md

⚙️ How It Works

On page load, the app requests your location.

Weather data is fetched using latitude and longitude.

You can also search weather manually by entering a city name.

Weather details and icons update dynamically based on API response.

🔑 API Setup

This project uses the OpenWeatherMap API.

Sign up at OpenWeatherMap

Generate your API key

Replace the API key in the JavaScript file:

const api_key = "YOUR_API_KEY_HERE";

🖥️ How to Run the Project

Clone this repository:

git clone https://github.com/your-username/weather-dashboard.git

Open index.html in your browser

Allow location access (optional)

Search for any city 🌍

📸 Preview

Add screenshots or a GIF here to showcase your project UI.

❗ Notes

Internet connection is required to fetch weather data

Geolocation must be enabled for automatic location weather

Make sure all images are placed inside the images folder

📄 License

This project is open-source and free to use for learning and personal projects.

🙌 Acknowledgements

OpenWeatherMap API

Boxicons# Weather detection