A beautiful, responsive weather dashboard that shows real-time weather information using the OpenWeatherMap API.
SkySense is a modern weather application that displays current weather conditions, forecasts, and air quality information for any location. Built with vanilla HTML, CSS, and JavaScript with a glassmorphism design aesthetic.
- Real-Time Weather Data: Current temperature, conditions, humidity, wind speed, pressure, visibility
- Weather Forecast: 6-hour weather forecast with icons and temperature predictions
- Air Quality Index (AQI): Air pollution data and air quality status
- Temperature Toggle: Switch between Celsius and Fahrenheit with animated toggle switch
- Responsive Design: Works seamlessly on desktop, tablet, and mobile devices
- Glassmorphism UI: Modern frosted glass effect design
- Location-Based: Automatically shows weather for Kolkata (customizable)
- Fallback Data: Shows mock data if API connection fails
- Clean Code: Well-organized, maintainable JavaScript with class-based architecture
CodeCanvas_WeatherApp/
├── index.html # Main HTML file with UI structure
├── style.css # All styling with CSS variables and animations
├── app.js # JavaScript logic and API integration
├── assets/ # Images and icons folder
│ └── images/ # Weather icons and background images
├── env/ # Environment configuration (SECRET - do not commit)
│ └── .env # API key stored here
├── README.md # Documentation File
└── .gitignore # Git configuration to hide env folder
- API: OpenWeatherMap (https://openweathermap.org/)
- Icons: Weather icons from assets/images/
- Design: Glassmorphism modern aesthetic
- Development: CodeCanvas Team
Last Updated: December 28, 2025
Version: 1.0.0
Status: Production Ready ✅