🌦️ WeatherLens — Real-Time Weather Dashboard

A beautifully designed weather dashboard built with HTML, CSS & JavaScript using OpenWeatherMap API.

🔗 Live Demo: https://shreejee1210.github.io/Weather_Dashboard/

---

📸 Preview

---

✨ Features

• 🌍 Search any city worldwide
• 🌡️ Real-time temperature with °C / °F toggle
• 💨 Wind speed, direction, humidity, pressure & visibility
• 🌅 Sunrise & Sunset timings (city local time)
• 📅 5-Day Forecast with min/max temperatures
• ⏰ Hourly weather strip for the next 24 hours
• ☁️ Cloud cover percentage
• ⚡ Quick search buttons for popular cities
• 📱 Fully Responsive — works on mobile & desktop

---

🛠️ Tech Stack

Technology	Usage
HTML5	Structure & Markup
CSS3	Styling, Animations, Responsive Design
JavaScript (Vanilla)	Logic, API calls, DOM manipulation
OpenWeatherMap API	Real-time weather data
Google Fonts	Space Grotesk + DM Mono
Font Awesome	Icons

---

📁 Project Structure

weather-dashboard/
│
├── index.html      # Main HTML structure
├── style.css       # All styling & animations
├── script.js       # JavaScript logic & API integration
├── preview.png     # Dashboard screenshot (preview image)
└── README.md       # Project documentation

---

🚀 How to Run Locally

1. Clone the repository

   git clone https://github.com/shreejee1210/Weather_Dashboard.git

2. Open the project folder

   cd Weather_Dashboard

3. Open index.html in your browser

   # Simply double-click index.html
   # OR use Live Server in VS Code

4. Search any city and get live weather! 🌤️

---

🌐 API Used

• OpenWeatherMap — https://openweathermap.org/api
  • Current Weather Data API
  • 5-Day / 3-Hour Forecast API

---

📌 Project Info

Internship	Pinnacle Labs — Web Development
Batch	June 2026
Type	Intermediate Level Project
Live Link	shreejee1210.github.io/Weather_Dashboard

---

👨‍💻 Developer

Shreejee

• GitHub: @shreejee1210

---

⭐ If you like this project, give it a star on GitHub!