Weather App 🌦️

Get real-time weather updates for your location or any city around the world with the Weather Web App. This application provides comprehensive weather details, including temperature, wind speed, humidity, and cloudiness, presented in an intuitive and visually appealing interface.

---

🚀 Deployment

The Weather Web App is deployed and accessible online.
Explore the live application here: Weather App Live Demo.

---

✨ Features

• Real-Time Weather Updates: Fetch weather data for your current location or any searched city.
• Location-Based Weather: Grant location access to instantly get weather information for your area.
• City Search: Enter any city name to view its weather details.
• Dynamic UI: Smooth animations and a responsive design for seamless user experience across all devices.
• Error Handling: Alerts for invalid city names or API issues.
• Weather Details: Displays:
  • Temperature
  • Weather condition
  • Wind speed
  • Humidity
  • Cloudiness

---

🛠️ Technology Used

• Frontend:
  • HTML5, CSS3 (Responsive Design)
  • JavaScript (ES6)
• API Integration:
  • OpenWeatherMap API
• Styling Framework:
  • CSS Custom Variables & Keyframes for animations
• Icons and Images:
  • Lazy-loaded for better performance.

---

🧩 How It Works

1. Grant Location Access:

   • Upon granting location access, the app fetches your geographical coordinates using the browser's Geolocation API.
   • The coordinates are sent to the OpenWeatherMap API to retrieve real-time weather data for your current location.

2. Search by City:

   • Enter the city name in the search bar and submit.
   • The app fetches weather details for the provided city name via the OpenWeatherMap API.

3. Dynamic Tab Switching:

   • Switch between "Your Weather" and "Search Weather" tabs for respective functionalities.

4. Error Handling:

   • If an invalid city name is entered or the API call fails, an error message is displayed.

---

🛠️ Installation and Setup

Follow these steps to set up the Weather Web App locally:

1. Clone the Repository

   git clone https://github.com/shivlalsharma/PRODIGY_WD_05.git

2. Navigate to the Project Directory
   Change to the project directory:

   cd PRODIGY_WD_05

3. Open in Browser
   Open the index.html file in your web browser:

   open index.html

   Alternatively, you can right-click the file and select "Open With" > "Browser."

License

This project is licensed under the MIT License. See the LICENSE file for details.

Author

Created and deployed by Shivlal Sharma.

• GitHub: GitHub Profile
• LinkedIn: Shivlal Sharma