A modern, feature-rich weather forecasting web application that provides comprehensive weather information with an intuitive and beautiful user interface.
- Real-time Weather Data - Current weather conditions for any location worldwide
- 5-Day Forecast - Detailed weather predictions for the next 5 days
- 24-Hour Forecast - Hourly weather breakdown with precipitation probability
- Location Detection - Automatic geolocation with permission request
- City Search - Smart autocomplete search for cities worldwide
- Capital Cities Dropdown - Quick access to all world capital cities
- UV Index Monitoring - Real-time UV index with safety recommendations
- Air Quality Index (AQI) - Air pollution levels with health advisories
- Interactive Map - Leaflet.js powered location map with weather overlay
- Weather Insights - AI-powered analysis and recommendations
- Moon Phase Tracker - Current moon phase information
- Sunrise/Sunset Times - Daily solar event times
- Weather Alerts - Extreme weather warnings and notifications
- Activity Recommendations - Suggested activities based on weather conditions
- Temperature Trend Chart - 24-hour temperature visualization
- Humidity Chart - Humidity levels over time
- Wind Speed Chart - Wind patterns and trends
- Precipitation Bars - Rain probability visualization
- Wind Compass - Visual wind direction indicator
- Pressure Trend - Atmospheric pressure monitoring
- 5 Theme Options - Light, Dark, Blue, Pink, and Orange themes
- Saved Locations - Save up to 10 favorite locations
- Unit Customization - Toggle between Celsius/Fahrenheit/Kelvin, km/h/mph/m/s, and pressure units
- Responsive Design - Optimized for desktop, tablet, and mobile devices
- Smooth Animations - Polished transitions and loading states
- Browser Compatibility - Works on all modern browsers including Opera GX
View Live Demo (Add your deployment URL here)
- HTML5 - Semantic markup structure
- CSS3 - Modern styling with CSS variables and animations
- JavaScript (ES6+) - Core functionality and API integration
- Firebase - Backend services and data storage
- OpenWeatherMap API - Weather data provider
- Chart.js - Data visualization library
- Leaflet.js - Interactive mapping library
- Font Awesome - Icon library
- Google Fonts (Poppins) - Typography
- Modern web browser (Chrome, Firefox, Safari, Edge, Opera GX)
- Internet connection for API calls
- OpenWeatherMap API key (free tier available)
-
Clone the repository
git clone https://github.com/AverageTaaf/weatherify.git cd weatherify -
Get your API key
- Visit OpenWeatherMap
- Sign up for a free account
- Generate an API key
-
Configure the API key
- Open
script.js - Replace the API key on line 28:
const API_KEY = "your_api_key_here";
- Open
-
Launch the application
-
Open
index.htmlin your web browser -
Or use a local server:
# Using Python python -m http.server 8000 # Using Node.js npx http-server
-
-
Access the app
- Navigate to
http://localhost:8000in your browser
- Navigate to
- By City Name: Type a city name in the search bar
- Autocomplete: Select from suggested cities as you type
- Capital Cities: Use the dropdown to select any world capital
- Current Location: Click the location icon to use your GPS coordinates
- Search for a location
- Click the "+" button in the Saved Locations bar
- Access saved locations by clicking on them
- Remove locations using the "×" button
- Click the settings icon (⚙️)
- Choose your preferred units:
- Temperature: Celsius, Fahrenheit, or Kelvin
- Wind Speed: km/h, mph, or m/s
- Pressure: hPa, inHg, or mmHg
- Enable weather alerts (requires browser notification permission)
- Click any theme icon in the header:
- ☀️ Light Theme
- 🌙 Dark Theme
- 💧 Blue Theme
- ❤️ Pink Theme
- 🔥 Orange Theme
- Current Weather API - Real-time weather data
- 5-Day Forecast API - Weather predictions
- Geocoding API - Location search and coordinates
- UV Index API - UV radiation levels
- Air Pollution API - Air quality data
// Current Weather
https://api.openweathermap.org/data/2.5/weather?q={city}&appid={API_KEY}
// 5-Day Forecast
https://api.openweathermap.org/data/2.5/forecast?q={city}&appid={API_KEY}
// UV Index
https://api.openweathermap.org/data/2.5/uvi?lat={lat}&lon={lon}&appid={API_KEY}
// Air Quality
https://api.openweathermap.org/data/2.5/air_pollution?lat={lat}&lon={lon}&appid={API_KEY}Edit the CSS variables in styles.css:
body[data-theme="your-theme"] {
--primary-color: #your-color;
--secondary-color: #your-color;
--accent-color: #your-color;
--text-color: #your-color;
--bg-color: #your-color;
--card-bg: #your-color;
}Edit the displayWeatherInsights() function in script.js to add custom insights.
- Map may take a few seconds to load on slower connections
- Some browsers may block geolocation on non-HTTPS sites
- API rate limits apply (60 calls/minute for free tier)
- Weather radar overlay
- Historical weather data
- Weather comparison between cities
- Export weather reports as PDF
- Multi-language support
- Weather widgets for embedding
- Progressive Web App (PWA) support
- Offline mode with cached data
Contributions are welcome! Please follow these steps:
- Fork the repository
- Create a feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
See CONTRIBUTING.md for detailed guidelines.
This project is licensed under the MIT License - see the LICENSE file for details.
Taafeef Bin Montaquim
- Email: montaquim.tbm@gmail.com
- GitHub: @AverageTaaf
- Portfolio: [Your Portfolio URL]
- OpenWeatherMap for weather data API
- Chart.js for beautiful charts
- Leaflet.js for interactive maps
- Font Awesome for icons
- Google Fonts for Poppins font
If you encounter any issues or have questions:
- Open an issue on GitHub Issues
- Email: montaquim.tbm@gmail.com
Give a ⭐️ if this project helped you!
Other Projects by Taafeef Bin Montaquim:
- Type Master Pro - Advanced typing practice application
- Task Schedule Pro - Professional task management tool
Made with ❤️ by Taafeef Bin Montaquim