A simple and interactive weather application built with React. Get real-time weather updates for any city and enjoy dynamic backgrounds that change based on weather conditions.
- React
- OpenWeatherMap API
- CSS Flexbox
- JavaScript (ES6+)
- 🔍 City Search: Search for any city and get the current weather.
- 📈 Forecast Display: View multi-day weather forecast.
- 🌄 Dynamic Backgrounds: Background images change based on the current weather (e.g., clear, rain, clouds).
- 🔄 Card Flip UI: Click the card to toggle between current weather and forecast.
- 📍 Location Display: See the current location and local time.
| Weather | Background Image |
|---|---|
| Clear | /image/clear.jpg |
| Clouds | /image/clouds.jpg |
| Rain | /image/rain.jpg |
| Snow | /image/snow.jpg |
| Mist/Fog | /image/mist.jpg |
| Default | /image/default.jpg |
git clone https://github.com/X1nQing/weather.git
cd weather
npm install
npm run dev- Dont Forget to Put Your API Key Inside .env file
Created by X1nQing@Steve