WeatherBuddy is a clean, visually stunning weather application that delivers real-time weather conditions and 5-day forecasts right in your browser. Featuring smooth animations, a dark/light theme toggle, and location-based search — it's your go-to weather companion.
Search any city. Get the weather. Switch the vibe. 🌙☀️
| Feature | Description |
|---|---|
| 🌡️ Current Conditions | Live temperature, humidity, wind speed & weather state |
| 📅 5-Day Forecast | Extended forecast with daily highs & lows |
| 🔍 Location Search | Search weather for any city worldwide |
| 🌙 Dark / Light Theme | Toggle between themes with smooth transitions |
| 📱 Fully Responsive | Optimized for mobile, tablet & desktop |
| ✨ Smooth Animations | CSS & JS-powered micro-interactions |
| Layer | Technology |
|---|---|
| Markup | HTML5 |
| Styling | CSS3 (Modular — main, animations, responsive) |
| Logic | Vanilla JavaScript (ES6+) |
| Backend | Python (server.py) |
| Weather Data | OpenWeatherMap API (or equivalent) |
| Deployment | Netlify |
# For frontend-only usage
A modern browser is all you need!
# For running the Python server
python >= 3.8# 1. Clone the repository
git clone https://github.com/JayeshJadhav28/WeatherBuddy.git
# 2. Navigate into the project
cd WeatherBuddy
# 3. Install Python dependencies (if using server)
pip install -r requirements.txt
# 4. Set up your API key (see Configuration below)
cp config.example.js config.js
# Then edit config.js and add your API key
# 5a. Open directly in browser (static)
open index.html
# 5b. OR run the Python server
python server.pyWeatherBuddy/
├── assets/
│ └── icons.svg # Weather icon set
├── styles/
│ ├── main.css # Core styles
│ ├── animations.css # Animation styles
│ └── responsive.css # Media queries
├── scripts/
│ ├── main.js # App entry point
│ ├── weather.js # API calls & data handling
│ └── animations.js # UI animation logic
├── config.example.js
├── index.html # Main HTML entry
├── server.py # Python backend server
├── requirements.txt # Python dependencies
├── netlify.toml # Netlify deployment config
└── package.json # Project metadata
WeatherBuddy is deployed on Netlify.
Set your API key as a Netlify environment variable (recommended):
- Go to Netlify Dashboard → Site Settings → Environment Variables
- Add
WEATHER_API_KEY= your actual key - Update
config.jsto read from the environment
git checkout -b feature/your-feature-name
git commit -m "feat: add your feature"
git push origin feature/your-feature-name
# Open a Pull Request 🚀Jayesh Jadhav
⭐ Found WeatherBuddy useful? Drop a star! ⭐
Made with ❤️ and Vanilla JS