A stylish and responsive Weather Web Application that shows real-time weather information for any city in the world. Built with HTML, CSS, and JavaScript, the app features smooth animations, glassmorphism design, and dynamic theme switching.
✨ Features 🌍 Search weather by city name
🌡️ Real-time temperature in Celsius
💧 Humidity level display
☁️ Weather condition with live icon
🎨 Multiple background themes
⌨️ Press Enter key to search instantly
💎 Modern Glassmorphism UI
📱 Fully responsive (Mobile + Desktop)
🎨 Theme Options Users can switch between beautiful gradient themes:
Ocean
Sunset
Midnight
Neon
Mint
🛠️ Technologies Used HTML5 – Structure
CSS3 – Styling, animations, glass effect
JavaScript (Fetch API) – API requests and dynamic updates
WeatherAPI – Live weather data source
🔑 API Information This project uses the WeatherAPI service to fetch live weather data.
If you want to use your own API key:
Go to: https://www.weatherapi.com/
Create a free account
Replace the API key inside the JavaScript code:
const apiKey = "YOUR_API_KEY_HERE"; 📸 Preview The app displays:
City & Country
Weather Icon
Temperature
Humidity
Weather Description
All inside a modern animated weather card.
📱 Responsive Design The layout adapts smoothly to:
✔ Mobile phones ✔ Tablets ✔ Laptops & Desktops
💡 Learning Highlights This project demonstrates:
Working with real-time APIs
Using async/await with Fetch
DOM manipulation
CSS animations and glassmorphism effects
Responsive UI design
📄 License This project is open-source and free to use for learning purposes.