🌦️ Weather App

Welcome to the Weather App! This elegantly designed weather application provides you with real-time weather information for any city 🌍. Simply enter a location, and the app will display the current weather conditions, including temperature, humidity, and wind speed 💨.

🌦️ Try the Weather App here: Weather App

📋 Table of Contents

• 🌦️ Weather App
  • 📋 Table of Contents
  • ✨ Features
  • 💻 Tech Stack
  • 🚀 Installation and Setup
  • 🛠️ Usage
  • 📸 Screenshots
    • Home Page
    • Weather Information
  • 🌐 API Used
  • 🤝 Contributing
  • 📜 License

✨ Features

• 🌡️ Temperature Display: Shows the current temperature in Celsius.
• 🌥️ Weather Description: Provides a descriptive summary of the weather (e.g., sunny, cloudy).
• 💦 Humidity Percentage: Displays the current humidity level.
• 💨 Wind Speed: Shows the wind speed in km/h.
• 🔎 User-Friendly Search: Easy-to-use search functionality for entering locations.
• 🎨 Beautiful UI: Designed with custom icons and smooth animations for an enhanced user experience.

💻 Tech Stack

This app uses the following technologies:

• HTML5: Structure of the web page 📄
• CSS3: Styling to create an attractive and responsive layout 🎨
• JavaScript (ES6): Data fetching and adding interactivity ✨
• OpenWeatherMap API: Provides real-time weather information 🌐

🚀 Installation and Setup

To set up and run the Weather App on your local machine, follow these steps:

1. Clone the Repository 📂:

   git clone https://github.com/HashimThePassionate/weather-app.git

2. Navigate to the Project Directory 🚪:

   cd weather-app

3. Open index.html in Your Browser 🌐:

   open index.html
   

You should now see the Weather App interface, ready to provide weather details 🗺️.

🛠️ Usage

1. Enter Your City: Input your desired location in the text box labeled "Enter your location" 🌆.
2. Search for Weather Information: Click on the search button 🔍 to retrieve the weather details.
3. The app will display:
   • 🌡️ Temperature: Current temperature in Celsius.
   • 🌥️ Weather Description: For example, "broken clouds" or "rain".
   • 💦 Humidity: Humidity percentage.
   • 💨 Wind Speed: Wind speed in km/h.

If an invalid location is entered, an alert will prompt you to enter a valid city name 🚨.

📸 Screenshots

Home Page

Weather Information

🌐 API Used

The OpenWeatherMap API is used to fetch real-time weather data based on the entered city name 🗺️. The API provides data such as temperature, humidity, wind speed, and a brief weather description.

To use the app, you need an API key from OpenWeatherMap. Once you have your key, replace the APIKey variable in index.js 🔑.

🤝 Contributing

We welcome all contributions to make this project even better! ✨ Here's how you can get involved:

1. Fork the Repository 🍴
2. Create a New Branch for Your Feature or Bug Fix 🌿:

   git checkout -b feature-branch

3. Make Changes and Commit 📝:

   git commit -m "Add a new amazing feature"

4. Push to Your Branch 🚀:

   git push origin feature-branch

5. Open a Pull Request 📬

We appreciate all improvements, from fixing a typo to suggesting an entirely new feature! 😊

📜 License

This project is licensed under the MIT License 📄. You are free to use, modify, and distribute this software as per the terms of the license.