Nexus Spring of Code 2026

This project is part of Nexus Spring of Code (NSoC) 2026.

Contributors can work on open issues and submit pull requests following the contribution guidelines.

Make sure your PR includes the tag NSoC'26 so it can be tracked in the program leaderboard.

🌦️ Weather App

A simple and responsive weather application that provides real-time weather updates for any city in the world.

---

📌 Overview

The Weather App is a lightweight web application that allows users to search for any city and get live weather data including temperature, humidity, wind speed, and weather conditions.

It uses the OpenWeatherMap API to fetch real-time data and displays it with dynamic UI elements.

---

✨ Features

🔍 City Search

• Search weather by entering any city name

🌡️ Real-Time Data

• Temperature
• Humidity
• Wind Speed
• Weather Conditions

🌥️ Dynamic Weather Icons

• Icons update based on current weather (Cloudy, Rainy, Clear, etc.)

⚠️ Error Handling

• Displays proper messages for invalid cities

🎨 Clean UI

• Simple, minimal, and user-friendly interface

🌙 Dark Mode

• Toggle between light and dark themes for better night usability

🌡️ Unit Converter (°C ↔ °F)

• Switch temperature units instantly without extra API calls

---

🛠️ Tech Stack

Technology	Usage
HTML	Structure
CSS	Styling
JavaScript	Logic & API handling
Weatherapi.com API	Weather Data
Git	Version Control

---

📂 Project Structure

📁 weather
┣ 📄 index.html
┣ 📄 style.css
┣ 📄 script.js
┣ 📄 config.example.js
┣ 📄 .gitignore
┣ 📄 README.md

⚙️ Installation & Setup

Follow these steps to run the project locally:

1️⃣ Clone the Repository

git clone https://github.com/aditya-ai00/weather.git

2️⃣ Navigate to Project Folder

cd weather

3️⃣ Open in Browser

open index.html

Or simply double-click the file.

---

🔑 API Setup

This project uses the Weatherapi.com API.

Steps:

1. Go to 👉 https://www.weatherapi.com/api-explorer.aspx
2. Create an account
3. Generate your API key
4. Copy API Key
5. Create a config.js file (Refer config.example.js)
6. Paste API Key in your config.js file:

config.js 

const config = {
  WEATHER_API_KEY: "PASTE_YOUR_KEY_HERE",
};

---

🚀 Usage

1. Open the app "https://weather-pink-psi-97.vercel.app/" in your browser
2. Enter a city name
3. Press Enter or click search
4. View real-time weather details instantly
5. Click the 🌙 Dark Mode button to switch theme
6. Use the Unit Toggle button to switch between °C and °F

---

📸 Demo

For Deployed Version :
https://weather-pink-psi-97.vercel.app/

For Local Run :
http://127.0.0.1:3000/index.html

---

🤝 Contributing

Contributions are welcome! 🚀

Steps to contribute:

1. Fork the repository

2. Create a new branch

   git checkout -b feature-name
   

3. Make your changes

4. Commit your changes

   git commit -m "Add feature"
   

5. Push to your branch

   git push origin feature-name
   

6. Open a Pull Request

7. Get Your Pull Request Reviewed & Accepted ✅

8. Congrats ! 👏 Your Contribution Was Successful

---

🐛 Issues

If you find any bugs or issues, feel free to open an issue.

---

🔮 Future Improvements

• 📅 7-Day Weather Forecast
• 📱 Fully Responsive Design
• 📊 Advanced Weather Analytics

---

📄 License

This project is licensed under the Apache-2.0 License.

---

📬 Contact

📧 Email: adityanyo39@gmail.com
🔗 LinkedIn: https://www.linkedin.com/in/aditya-kumar23/
💻 GitHub: https://github.com/aditya-ai00

---

⭐ Support

If you like this project:

👉 Give it a star ⭐ 👉 Share it with others

---

💡 Inspiration

Built to practice API integration, frontend development, and real-world project building.

---

⚡ Author

Aditya GitHub: https://github.com/aditya-ai00

---

🆕 Recent Updates

• 🌙 Added Dark Mode with toggle and persistent settings
• 🌡️ Added Temperature Unit Converter (°C ↔ °F)