Weather App

About the App

This Weather App provides users with real-time weather information based on their current location or a city name they input. It fetches data using the OpenWeatherMap API and dynamically updates the UI with relevant weather details, including temperature, humidity, wind speed, and a weather icon.

Features

• Current Location Weather: Automatically fetches and displays weather data based on the user's geolocation.
• City Search: Allows users to search for weather details of any city.
• Dynamic UI Updates: Displays weather-specific icons and updates the UI with data fetched from the API.
• Error Handling: Alerts users if an invalid location is entered.

How It Works

1. On page load, the app uses the browser's Geolocation API to fetch the user's latitude and longitude.
2. It queries the OpenWeatherMap API for weather data based on these coordinates.
3. Users can also input a city name to fetch weather data for a specific location.
4. The app updates the UI dynamically with the following details:
   • City name
   • Temperature (in Celsius)
   • Humidity
   • Wind speed
   • Weather condition with an appropriate icon

Technologies Used

• HTML5
• CSS3
• JavaScript (ES6)
• OpenWeatherMap API

File Structure

.
├── index.html         # Main HTML file
├── style.css          # Styling for the app
├── script.js          # JavaScript functionality
├── imgs/              # Folder for images (e.g., weather icons and screenshots)
│   ├── sunny.png
│   ├── rainy.png
│   ├── cloudy.png
│   ├── thunderstorm.png
│   ├── snow.png
│   └── SC.png         # Screenshot of the app
└── README.md          # Project documentation

How to Run

1. Clone the repository:

   git clone https://github.com/Ayman-Elfeky/Weather-app.git

2. Navigate to the project directory:

   cd weather-app

3. Open index.html in any modern web browser.

Demo

To see the app in action, simply:

• Allow location permissions when prompted.
• Enter a city name to fetch its weather data.

API Reference

This app uses the OpenWeatherMap API to fetch weather data.

Example API endpoints:

• By Coordinates: https://api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid={apiKey}&units=metric

• By City Name: https://api.openweathermap.org/data/2.5/weather?q={city}&appid={apiKey}&units=metric

Author

• Ayman Elfeky: Developer passionate about creating dynamic web applications.

---

Feel free to contribute to this project or report issues in the repository's issues section.