Weather App 🌤️

A modern, responsive weather application that provides real-time weather information for any location worldwide.

📋 Description

This weather app allows users to search for weather conditions in any city around the world. It displays current temperature, weather description, humidity levels, and wind speed with a clean, user-friendly interface.

✨ Features

• Real-time Weather Data: Get current weather information from OpenWeatherMap API
• Location Search: Search for weather by city name
• Responsive Design: Works seamlessly on desktop and mobile devices
• Weather Icons: Dynamic weather icons that change based on current conditions
• Error Handling: Displays friendly error message for invalid locations
• Smooth Animations: Fade-in animations for better user experience
• Modern UI: Clean, minimalist design with a professional color scheme

🛠️ Technologies Used

• HTML5 - Structure and markup
• CSS3 - Styling, animations, and responsive design
• JavaScript (ES6+) - Dynamic functionality and API integration
• OpenWeatherMap API - Weather data source
• Font Awesome - Icons for weather conditions and UI elements
• Google Fonts (Roboto) - Typography

🚀 Getting Started

Prerequisites

• A modern web browser
• Internet connection for API calls
• OpenWeatherMap API key (included in the project)

Installation

1. Clone the repository:

   git clone https://github.com/Theesamkos/Weather-app.git
   

2. Navigate to the project directory:

   cd Weather-app
   

3. Open index.html in your web browser or use a local server:

   # Using Python (if installed)
   python -m http.server 8000
   
   # Using Node.js (if installed)
   npx http-server
   

📱 How to Use

1. Search for a Location: Enter any city name in the search box
2. Click Search: Press the search button or hit Enter
3. View Weather: The app will display:
   • Current temperature in Celsius
   • Weather description
   • Humidity percentage
   • Wind speed in km/h
   • Weather icon representing current conditions

🎨 Design Features

• Dark Blue Theme: Professional color scheme with #06283D primary color
• Responsive Layout: Adapts to different screen sizes
• Smooth Transitions: 0.6s ease-out animations
• Interactive Elements: Hover effects on buttons
• Visual Feedback: Loading states and error messages

🌦️ Weather Conditions Supported

The app displays different icons for various weather conditions:

• ☀️ Clear skies
• 🌧️ Rain
• ❄️ Snow
• ☁️ Clouds
• 🌫️ Haze
• And more...

📁 Project Structure

Weather-app/
│
├── index.html          # Main HTML file
├── style.css           # CSS styles and animations
├── index.js            # JavaScript functionality
└── README.md           # Project documentation

🔧 API Configuration

The app uses OpenWeatherMap API for weather data. The API key is already configured in the project. If you need to use your own API key:

1. Sign up at OpenWeatherMap
2. Get your free API key
3. Replace the APIKey variable in index.js

🤝 Contributing

Contributions are welcome! If you'd like to contribute:

1. Fork the project
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📝 License

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

👨‍💻 Author

Theesamkos

• GitHub: @Theesamkos
• Email: samorthtech@gmail.com

🙏 Acknowledgments

• OpenWeatherMap for providing the weather API
• Font Awesome for the beautiful icons
• Google Fonts for the Roboto font family

---

⭐ If you found this project helpful, please give it a star on GitHub!