A beautiful, responsive weather application with real-time data and intelligent outfit recommendations. Built with vanilla JavaScript, featuring smooth animations and dynamic weather-based backgrounds.
- Real-time Weather Data - Powered by OpenWeatherMap API
- Current Temperature - Accurate temperature readings in Celsius
- Weather Conditions - Detailed weather descriptions with appropriate icons
- Location Display - City name and country information
- Additional Metrics - Humidity, wind speed, and "feels like" temperature
- Dynamic Backgrounds - Background colors change based on weather conditions
- Weather Animations - Realistic rain, snow, and cloud animations
- Smooth Transitions - GPU-accelerated animations with no performance lag
- Responsive Design - Works perfectly on desktop, tablet, and mobile devices
- Modern UI - Clean, minimalist design with glassmorphism effects
- Temperature-Based Suggestions - Intelligent clothing recommendations based on current temperature
- Weather-Aware Advice - Specific suggestions for rain, snow, sun, and other conditions
- Accessory Recommendations - Umbrella, sunglasses, jackets, and seasonal gear suggestions
- Color Guidance - Color recommendations based on weather and temperature
- Visual Icons - Easy-to-understand clothing icons and emojis
Clean, modern interface with real-time clock and search functionality
Search for any city worldwide with instant results
Background changes based on weather conditions with matching animations
Smart clothing suggestions based on weather and temperature
Perfect experience across all device sizes
- Modern web browser (Chrome, Firefox, Safari, Edge)
- Internet connection for weather data
- OpenWeatherMap API key
-
Clone the repository
git clone https://github.com/thisispit/Drizzzle.git cd Drizzzle -
Get your API key
- Visit OpenWeatherMap
- Sign up for a free account
- Generate your API key
-
Configure the API key
- Open
script.js - Replace the API key on line 19:
const apiKey = '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 serve .
- Open
- HTML5 - Semantic markup structure
- CSS3 - Modern styling with flexbox, animations, and responsive design
- Vanilla JavaScript - No frameworks, pure JavaScript for performance
- OpenWeatherMap API - Real-time weather data
- Geolocation API - Optional location detection
- Glassmorphism - Modern frosted glass effects
- JetBrains Mono Font - Clean, professional typography
- CSS Animations - Smooth, hardware-accelerated transitions
- Responsive Grid - Mobile-first responsive design
| Browser | Version | Status |
|---|---|---|
| Chrome | 60+ | ✅ Fully Supported |
| Firefox | 55+ | ✅ Fully Supported |
| Safari | 12+ | ✅ Fully Supported |
| Edge | 79+ | ✅ Fully Supported |
| Opera | 47+ | ✅ Fully Supported |
- ☀️ Clear Sky - Sunny backgrounds with gentle cloud animations
- ☁️ Cloudy - Overcast backgrounds with moving clouds
- 🌧️ Rain/Drizzle - Rain animations with appropriate color schemes
- ⛈️ Thunderstorm - Dramatic stormy backgrounds with rain effects
- ❄️ Snow - Winter theme with falling snow animation
- 🌫️ Fog/Mist - Subtle, mysterious atmospheric effects
-
Temperature Ranges:
- 30°C+: Light, breathable clothing
- 25-30°C: Summer attire
- 20-25°C: Comfortable spring/fall wear
- 15-20°C: Light layers recommended
- 10-15°C: Warm clothing needed
- 0-10°C: Winter gear required
- Below 0°C: Heavy winter protection
-
Weather-Specific Accessories:
- Rain: Umbrella, raincoat
- Snow: Winter boots, warm socks
- Sun: Sunglasses, sun hat
- Wind: Windbreaker, secure accessories
Edit the CSS variables in style.css:
:root {
--primary-color: #ffffff;
--background-dark: #1e1e1e;
--accent-color: #ff6b35;
}- Add new weather icons in
getWeatherIcon()function - Add corresponding background colors in weather-based CSS classes
- Update outfit recommendations in
getOutfitRecommendation()function
All animations use CSS keyframes and can be customized in the CSS file:
- Adjust duration, easing, or effects
- Add new animation types
- Modify existing transitions
Weather data not loading
- Check your internet connection
- Verify your API key is correct and active
- Ensure city name is spelled correctly
Animations not smooth
- Update to a modern browser
- Check if hardware acceleration is enabled
- Verify your device meets minimum requirements
Layout issues on mobile
- Clear browser cache
- Check viewport meta tag is present
- Ensure responsive breakpoints are working
We welcome contributions! Here's how you can help:
- Fork the repository
- Create a feature branch
git checkout -b feature/amazing-feature
- Commit your changes
git commit -m 'Add amazing feature' - Push to the branch
git push origin feature/amazing-feature
- Open a Pull Request
- Follow existing code style and conventions
- Test on multiple devices and browsers
- Ensure accessibility standards are met
- Keep animations lightweight and performant
- Document any new features or changes
This project is licensed under the MIT License - see the LICENSE file for details.
- OpenWeatherMap - For providing reliable weather data API
- Google Fonts - For the beautiful JetBrains Mono font
- Contributors - Thank you to everyone who has contributed to this project
If you encounter any issues or have questions:
- Check the Issues page
- Create a new issue with detailed information
- Provide browser version, device info, and steps to reproduce
Made with ❤️ by thisispit
🚀 Live App | ⭐ Star this repo | 🐛 Report Bug | 💡 Request Feature