🚀 A sleek, responsive, and data-rich weather platform built with HTML, CSS, and JavaScript — crafted for the CodeSpark – 72 Hour Build Challenge.
WeatherSphere is a professional-grade weather web application that goes beyond basic forecasts.
Designed for clarity, responsiveness, and engagement, it integrates real-time APIs with polished UI/UX to deliver accurate, visually appealing weather information.
| Technology | Purpose |
|---|---|
| HTML5 | Semantic structure & accessibility |
| CSS3 | Responsive design, animations, theming |
| JavaScript (Vanilla) | API integration, dynamic updates |
| OpenWeatherMap API | Real-time weather, forecast, air quality |
| GeoDB Cities API | Autocomplete city search |
| Leaflet.js | Interactive map display |
| Netlify | Hosting & deployment |
| GitHub | Version control & documentation |
- Current weather display
- Temperature with °C/°F toggle
- Weather description & icon
- Humidity, wind speed, pressure
- UV index with visual indicator
- Rainfall measurements
- Sunrise & sunset times
- Geolocation detection
- City search with autocomplete
- Map click location selection
- Popular cities quick access
- Interactive map with weather overlay
- Dark/light mode support for map
- 24-hour weather predictions
- Temperature trends
- Weather conditions per hour
- 6-day weather outlook
- Daily temperature
- Responsive design with sidebar & main content
- Mobile-friendly layout
- Light/dark mode toggle
- Dynamic weather tints
- Smooth transitions & animations
- Air Quality Index (AQI) with health advice
- UV index with protection recommendations
- Visual meters for AQI & UV levels
- Loading overlays & progressive data loading
- Error handling with friendly messages
- Unit conversion: °C/°F, km/h, hPa
- Persistent preferences: theme, last location, temperature units
- Dynamic weather icons
- Font Awesome integration
- APIs: OpenWeatherMap, GeoDB Cities API
- Mapping: Leaflet.js
- Hosting: Netlify
- Challenge: Unstop CodeSpark – 72 Hour Build Challenge