WeatherApp 🌦️

A modern, accessible weather application designed specifically for Indian cities with real-time temperature display and dynamic visual effects. Built with HTML, CSS, and JavaScript.

Features

• 🌡️ Temperature-based backgrounds (Cold/Cool/Warm/Hot)
• 🌙 Day/Night mode (automatically adjusts based on time)
• ⚡ Lightning flash effect during thunderstorms
• 🔍 City search with autocomplete (India-only cities)
• 📍 Auto-location detection using geolocation
• ♿ Accessibility optimized (ARIA labels, keyboard navigation)
• 📱 Fully responsive design
• 🎨 Clean, modern UI with smooth transitions

Live Demo

View Live Demo

Tech Stack

• HTML5 (semantic markup)
• CSS3 (flexbox, animations, custom properties)
• Vanilla JavaScript (ES6+)
• Open-Meteo API (weather data)
• Geocoding API (city coordinates)

Project Structure

weather-app/
├── index.html          # Main HTML file
├── style.css          # All styles and animations
├── script.js          # Weather logic and API calls
└── README.md          # This file

How to Use

1. Search for an Indian city using the search bar
2. Click suggestions or type the full city name
3. Press "Check" or hit Enter
4. View real-time weather data including:
   • Current temperature
   • Humidity percentage
   • Wind speed
   • Dynamic background based on temperature

Additional Features

• Auto-location: On first load, the app will ask for your location permission to show local weather
• Day/Night Mode: Automatically switches based on your local time
• Thunderstorm Effects: Lightning animation appears during stormy weather

UI/UX Highlights

• Dynamic Backgrounds: Changes color based on temperature (blue for cold, red for hot)
• Smooth Animations: All transitions are fluid and pleasing
• Mobile Responsive: Works perfectly on all screen sizes
• High Contrast: Designed with accessibility in mind

Setup & Development

To run locally:

# Clone the repository
git clone https://github.com/priyabariya83/WeatherApp.git

# Navigate to project directory
cd WeatherApp

# Open index.html in your browser
# No build process required - it's pure HTML/CSS/JS!

Browser Support

Browser	Support
Chrome	✅ Full
Firefox	✅ Full
Safari	✅ Full
Edge	✅ Full

Contributing

Contributions are welcome! Feel free to:

1. Fork the repository
2. Create a feature branch
3. Submit a Pull Request

License

This project is open source and available under the MIT License.

Acknowledgments

• Weather data provided by Open-Meteo
• Icons and emojis from Unicode
• Inspired by modern weather applications

---

⭐ If you like this project, give it a star! ⭐

Made with ❤️ by Priya Bariya