⛅ Live Weather Website 🌍 A clean and responsive live weather web app that shows real-time weather data for any city in the world using the OpenWeatherMap API. Enter a location and instantly get details like temperature, weather condition, humidity, wind speed, and more — beautifully presented with dynamic icons and background visuals.
🌟 Features 🔍 Search by City Name
🌡️ Real-Time Temperature & Weather Info
💨 Wind Speed & 💧 Humidity
🌄 Weather Icons & Backgrounds Based on Conditions
📱 Fully Responsive Design
⚡ API Powered by OpenWeatherMap
📸 Demo Try searching cities like London, Delhi, or Tokyo and watch real-time data appear instantly.
🛠️ Tech Stack Technology Usage HTML/CSS Structure and Styling JavaScript API Fetching & Logic OpenWeatherMap API Real-time weather data
🧪 How It Works User inputs a city name
App fetches weather data from OpenWeatherMap API
Parses and displays key metrics (temperature, condition, etc.)
Background and icons change dynamically based on the weather
📂 Project Structure pgsql Copy Edit 📁 live-weather-app ├── index.html ├── style.css ├── script.js ├── assets/ │ ├── demo-screenshot.png │ └── demo.gif └── README.md 🚀 Getting Started Clone the repository
bash Copy Edit git clone https://github.com/your-username/live-weather-app.git cd live-weather-app Get your API key from OpenWeatherMap
Visit https://openweathermap.org/api
Sign up and get a free API key
Insert your API key in script.js:
js Copy Edit const apiKey = 'YOUR_API_KEY_HERE'; Open index.html in your browser or run with Live Server.
📦 Dependencies None! Everything is vanilla HTML/CSS/JavaScript.
📝 TODO / Improvements 🌍 Auto-detect user’s location with geolocation
🎨 Add dark/light mode toggle
💾 Store recent searches
🗓️ 5-day weather forecast
🤝 Contributing Found a bug or want to add a new feature? Pull requests are welcome!
📄 License MIT License. Feel free to fork, use, and modify the project.
👨💻 Author Mukul Bassi 🌐 mukuldev.infy.uk 📧 beingbassi007@gmail.com