A simple and interactive Weather Application built using HTML, CSS, and JavaScript that allows users to check real-time weather conditions and a 5-day forecast for any city.
🌍 Search weather by city name
🌡️ Displays temperature, condition, humidity, and wind speed
📅 5-day weather forecast
🎥 Animated video background
⏳ Loader animation while fetching data
❌ Error handling for invalid city names
📱 Responsive and clean UI
HTML5 – Structure
CSS3 – Styling & layout
JavaScript (ES6) – Logic & API handling
WeatherAPI – Real-time weather data
📂 Project Structure
weather-app/ │ ├── index.html ├── style.css ├── script.js ├── images/ │ ├── background.jpeg │ ├── background2.jpeg │ ├── backgroundVideo.mp4 │ └── cloud.jpeg └── README.md
⚙️ How to Run the Project
Clone the repository:
git clone https://github.com/usama247550/weather-app-js.git
Open the project folder
Open index.html in your browser
✅ No additional setup required
🏙️ Default City
The app loads weather data for Faisalabad by default:
let defaultCity = "faisalabad";
You can change it in script.js.
🌙 Dark / Light mode
📍 Auto-detect user location
🔐 Secure API key handling
📊 Hourly forecast
🤝 Contributing
Usama MERN Stack Developer
GitHub: https://github.com/usama247550
LinkedIn: https://www.linkedin.com/in/usama-javed-112186320
If you like this project, give it a ⭐ on GitHub!