🚀 Live Demo: 🔗 Live Demo
🚀 A modern and responsive weather application that shows real-time weather data based on live location or searched city. Built to practice API integration, geo-location, and dynamic UI updates.
- 🧱 HTML5
- 🎨 CSS3
- ⚙️ JavaScript
- 🌐 Weather API (OpenWeather)
- 📍 Live location weather detection
- 🔍 Search weather by city name
- 🌡 Real-time temperature, humidity, wind & pressure
- 🕒 Live time + last updated time display
- 🌧 Dynamic weather UI (sun / cloud / rain / night)
- 🎨 Animated background effects
- ⚡ Fast API-based data fetching
- 📱 Fully responsive design
- 💾 Last searched city saved (localStorage)
- ❌ Invalid city error handling
- 📍 Geo-location Support – Detects user’s current location
- 🌦 Dynamic UI – Changes background based on weather
- ⏱ Live Clock – Shows real-time + API update time
- 🎨 Modern UI – Glass-morphism + smooth animations
- 🔌 API Integration – Async/await + Fetch API
- 💾 LocalStorage – Saves last searched city
- 🧠 Clean Code – Structured & beginner-friendly
Follow these steps to run the project locally:
# 1. Clone the repository
git clone - https://github.com/webdev-desktop/Weather_Website.git
# 2. Go into the project folder
cd Weather_Website
# 3. Open index.html in your browser- Allow location access 📍 (for live weather)
- Or search any city 🔍
- View temperature, humidity, wind & pressure
- See dynamic UI based on weather 🌦
- Check live time ⏱ + last updated time
- Enjoy smooth animations 🚀
- 🌙 Dark / Light mode toggle
- 📅 5-day weather forecast
- 📊 Weather charts (temperature trends)
- 🔔 Weather alerts system
- 🌐 Multi-language support
- 📍 Multiple saved locations
Contributions are welcome!
# Fork the repo
# Create a new branch
git checkout -b feature/your-feature
# Commit changes
git commit -m "Add your feature"
# Push to branch
git push origin feature/your-featureThen open a Pull Request 🚀
Apurv
This project is licensed under the MIT License.
If you like this project, don’t forget to star ⭐ the repo and share it!