Weather Forecasting App is a responsive web application that displays real-time weather data for any location worldwide using the OpenWeatherMap API. Users can search for any city and instantly view current conditions and a 5-day forecast — with seamless °C / °F unit conversion at a click.
- 🌡️ Live temperature readings with min/max range
- 💨 Wind speed, cloud cover, rain probability & humidity
- 📅 5-day extended forecast for better trip planning
- 🔄 Instant Celsius ↔ Fahrenheit toggle
Landing Page
Current Weather
5-Day Forecast
| Feature | Details |
|---|---|
| 🔍 City Search | Search real-time weather for any city worldwide |
| 🌡️ Temperature | Current, min & max temperature display |
| 💧 Humidity | Live humidity percentage |
| 💨 Wind Speed | Current wind speed readings |
| ☁️ Cloud Cover | Cloud percentage and rain possibility |
| 🔄 Unit Toggle | Switch between Celsius and Fahrenheit instantly |
| 📅 5-Day Forecast | Extended forecast for better planning |
| 📱 Responsive Design | Works seamlessly across all devices |
| Technology | Purpose |
|---|---|
| HTML5 | Markup & structure |
| CSS3 | Styling & responsive layout |
| JavaScript (ES6+) | Core logic & API integration |
| Bootstrap | UI components & responsiveness |
| NPM | Package management |
| Webpack | Module bundling |
| OpenWeatherMap API | Real-time weather data |
| GitHub Actions | CI/CD pipeline |
👉 Visit weather-forecasting-app-pied.vercel.app and start searching!
- A modern, up-to-date browser 💪
- Node.js & npm installed
- A free OpenWeatherMap API key → Get one here
# 1. Clone the repository
git clone https://github.com/MsParadox/Weather-Forecasting-App.git
# 2. Navigate into the project folder
cd Weather-Forecasting-App
# 3. Install dependencies
npm install
# 4. Add your API key
# Create a .env file or update the config file with your OpenWeatherMap API key
echo "API_KEY=your_openweathermap_api_key_here" > .env
# 5. Build and start the app
npm startThen open http://localhost:8080 in your browser. 🎉
- Hourly forecast breakdown
- Geolocation-based auto-detection
- Weather alerts and notifications
- Dark / Light theme toggle
- Favourite cities list
- Interactive weather maps
Contributions, issues, and feature requests are always welcome!
- Fork the repository
- Create your feature branch:
git checkout -b feature/amazing-feature - Commit your changes:
git commit -m 'Add some amazing feature' - Push to the branch:
git push origin feature/amazing-feature - Open a Pull Request
This project is licensed under the MIT License.
⭐ Found this project useful? Drop a star — it means a lot! ⭐