🌦️ Weather Blast - Weather App with Air Pollution Insights 🌫️

Leaderboard

Issue No.	Title	Author	Level	Points
2	Adding a dark mode toggle	raunak-iiitian	2	7
7	Adding a footer	raunak-iiitian	3	10
8	Add a “Back to Top” Button for Smoother Navigation	tanush-space	1	3
5	Add toggle to switch between Celsius and Fahrenheit	milan-deori	2	7
14	Enhance Card UI: Add Hover Animation to .card Card	tanush-space	2	7
1	adding hover effect to the search button and enhancing the "Use Current Location	RAJVEER42	2	7
22	Add mit license file to the project	Tanyasharma71	1	3
27	Persist Dark Mode Preference Using localStorage	infinitepush	2	7
29	Add Share Button to Share Weather Info via Web Share API	infinitepush	3	10
23	Enhance icons for weather description	Ayushii-uniyal	2	7
33	Title: Add Health Suggestions Based on AQI Level	infinitepush	2	7
42	Feature: Add marker to map when a location is searched	DivyanshGarg380	3	10
30	Add Line Chart to Show 7-Day Temperature Trend	SarvaniBalivada	3	10
25	Feature: Add fun notes for specific weather type	Ayushii-uniyal	2	7
52	Feature : Auto-scroll to Weather Info Section After Search	DivyanshGarg380	2	7
50	Add recent searches and reset history button feature	ananya-asa	3	10
56	Feature : Add Weather Alert Notification UI	DivyanshGarg380	3	10
46	Improve responsiveness of graph section	Ayushii-uniyal	2	7
62	Bug : Upon changing from °C to °F and Vice Versa , the values in the 7 Day Forecast dont change !	DivyanshGarg380	3	10
68	Mismatch in Card Background Color	Shreyaraut12	2	7
69	Bug: Poor UX When Searching Without Entering a Location	DivyanshGarg380	2	7
51	🌍 Feature Request: Weather & AQI Overview of Nearby Cities	abinayagoudjandhyala	3	10
81	Feature : Animate the Temperature values when inputs varies ( up/down )	DivyanshGarg380	2	7
64	Improve footer section	heenasaini	2	7
84	UI Styling Inconsistency – "Recent Searches" Box	infinitepush	2	7
31	Add Multi-Language Support for Weather-Blast	Devi128	3	10
19	Add Nav Bar	Bikram020	3	10
86	Adding UV Index Info	Sameeralam9	2	7
77	Add a loading indicator while fetching weather data	aniket0807	2	7
94	Marker Not Showing & Auto-Scroll Broken After Recent Changes	DivyanshGarg380	2	7
78	Add the Refresh Button	lohi-cell	2	7
102	Improve the Footer Design and Accessibility	diyakotru	2	7

🚀 Live Demo: Weather Blast

This project is a comprehensive weather application built with HTML, CSS, and JavaScript. It fetches real-time weather data and air quality information, enhancing users' awareness of both weather and pollution conditions.

🎯 About GSSoC

This project is part of GirlScript Summer of Code (GSSoC) 2025! We welcome contributions from developers of all skill levels. Whether you're a beginner looking to make your first open source contribution or an experienced developer, there's something for everyone.

📋 Rules for Pull Requests

Before contributing, please follow these guidelines:

⭐ Getting Started

1. Star this repository ⭐ (it shows your appreciation for the project)
2. Fork this repository to your GitHub account
3. Clone your forked repository to your local machine
4. Create a new branch for your feature/fix

📝 Pull Request Guidelines

1. Describe the issue properly - Provide a clear and detailed description of what the PR addresses
2. Reference the issue number - Link your PR to the relevant issue using Fixes #issue_number
3. Follow the existing code style - Maintain consistency with the current codebase
4. Test your changes - Ensure your code works as expected before submitting
5. Add meaningful commit messages - Use descriptive commit messages that explain what changes were made
6. Update documentation - If you add new features, update the README accordingly
7. One feature per PR - Keep your pull requests focused on a single feature or bug fix
8. Be respectful - Follow our Code of Conduct and be respectful to other contributors

🚫 What NOT to do

• Don't submit PRs without linking them to an issue
• Don't make changes unrelated to the issue you're solving
• Don't submit duplicate PRs
• Don't spam or create low-quality PRs just for the sake of contributing

🤝 How to Contribute

For Beginners

If you're new to open source, start with these types of contributions:

• 📚 Improve documentation
• 🐛 Report bugs
• 🎨 Enhance UI/UX
• ✅ Add input validation
• 🧪 Write tests

For Experienced Developers

• 🚀 Add new features
• ⚡ Optimize performance
• 🔒 Improve security
• 📱 Make the app responsive
• 🌐 Add internationalization

🌐 Features

• 🌍 Search by City Name: Users can enter a city name to retrieve current weather and air quality for that location
• 📍 Geolocation Support: Fetch weather and pollution details based on the user's location using the browser's geolocation
• 🔄 Fallback to GeoApify: Uses GeoApify's geocoding service for latitude and longitude if the city name is not found on OpenWeatherMap
• 🌞 Weather Details: Get real-time data on temperature, weather conditions, humidity, pressure, visibility, wind speed, sunrise, and sunset times
• 🌫️ Air Pollution Data: Stay informed about air quality with pollution level indicators (such as PM2.5, PM10, and AQI)

🛠️ Technologies Used

• HTML: For structuring the application
• CSS: Basic styling
• JavaScript: Logic to fetch and display data
• OpenWeatherMap API: For retrieving weather and air pollution data based on city name or geographic coordinates
• GeoApify API: Used as a fallback to fetch latitude and longitude if the city isn't found in OpenWeatherMap

🚀 Getting Started

Prerequisites

1. API Keys:
   • OpenWeatherMap API: For weather and air quality data
   • GeoApify API: For geocoding services

Installation Steps

1. Fork and Clone

   git clone https://github.com/RAJIV81205/Weather-Blast.git
   cd Weather-Blast

2. Add your API keys to the script.js file:

   const apiKey = 'your_openweathermap_api_key'; // OpenWeatherMap API key
   const geoAPI = 'your_geoapify_api_key'; // GeoApify API key

3. Open index.html in your browser to run the application locally

📂 File Structure

Weather-Blast/
│
├── index.html       # Main HTML structure
├── style.css        # Styling for the application
├── script.js        # JavaScript for fetching and displaying data
├── README.md        # Project documentation
├── LICENSE          # MIT License file
└── CONTRIBUTING.md  # Contribution guidelines (to be added)

🔧 Key JavaScript Functions

• getWeatherByCity(): Fetches weather and air pollution data for a given city
• getWeatherByLocation(): Gets the user's geolocation for weather and air quality data
• fetchLatLon(): Fetches coordinates from GeoApify if the city isn't found
• fetchWeatherByCoordinates(): Fetches weather data using latitude and longitude
• fetchAirQuality(): Retrieves air quality data based on geographic coordinates
• displayWeather(): Displays weather information
• displayAirQuality(): Shows air pollution details like AQI, PM2.5, and PM10 levels

🧰 Error Handling

• GeoApify Fallback: If OpenWeatherMap does not recognize the city name, GeoApify fetches latitude and longitude
• Geolocation Access Denied: Notifies users if location access is restricted

🏆 Contributors

We appreciate all the contributors who have helped make this project better!

📊 Project Stats

🤝 Code of Conduct

Please note that this project is released with a Code of Conduct. By participating in this project you agree to abide by its terms.

💬 Community & Support

• Questions? Open an issue with the question label
• Bug Reports: Use the bug label when creating issues
• Feature Requests: Use the enhancement label
• Discussion: Join our community discussions in the Issues section

📜 License

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

🌟 Show your support

Give a ⭐ if you found this project helpful!

Happy Contributing! 🎉

Made with ❤️ for GSSoC 2025