Weatho! 🌤️

A sleek and interactive weather application that provides real-time weather information for cities around the globe.

✨ Features

• Real-time Weather Data: Fetches current weather conditions using the OpenWeatherMap API
• Comprehensive Information: Displays temperature, feels-like temperature, weather description, humidity, wind speed, atmospheric pressure, and visibility
• Dynamic Weather Icons: Shows context-aware weather icons based on current conditions
• Search Functionality: Search for any city worldwide with instant results
• Responsive Design: Fully optimized for desktop, tablet, and mobile devices
• Modern UI/UX: Features a beautiful gradient background with glass morphism effects and smooth animations
• Interactive Elements: Hover effects, floating animations, and smooth transitions enhance user experience

🛠️ Technologies Used

• HTML5: Semantic structure and accessibility
• CSS3: Advanced styling with gradients, animations, and glass morphism
• JavaScript (ES6): Asynchronous API calls, DOM manipulation, and event handling
• OpenWeatherMap API: Real-time weather data integration
• Google Fonts: Custom typography (Poppins & Pacifico)

🎨 Design Highlights

• Dark blue gradient background for better readability
• Colorful accent cards with unique colors for each weather metric
• Glass morphism effect with backdrop blur for modern aesthetics
• Responsive grid layout adapting from 4 columns to single column on mobile
• Smooth hover animations and transitions throughout

🚀 Setup Instructions

1. Clone this repository:

   git clone https://github.com/yourusername/weatho-weather-app.git

2. Get a free API key from OpenWeatherMap:

   • Sign up for a free account
   • Navigate to API keys section
   • Generate a new API key

3. Create a config.js file in the project root:

   const config = {
       apiKey: 'YOUR_API_KEY_HERE'
   };

4. Open weather.html in your browser

📁 Project Structure

weatho-weather-app/
│
├── weather.html        # Main HTML file
├── style.css           # CSS styles and animations
├── script.js           # JavaScript functionality
├── logo.png            # App logo
├── config.js           # API configuration (not tracked by git)
├── config.example.js   # Example config file
└── README.md           # Project documentation

💡 Key Skills Demonstrated

• RESTful API integration and asynchronous JavaScript (fetch, async/await)
• Responsive web design using CSS Grid and Flexbox
• DOM manipulation and event handling
• Error handling and user feedback
• Modern CSS techniques (gradients, animations, glass morphism)
• Clean, maintainable code structure

📝 License

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

👤 Author

Taher Ayadi

• LinkedIn: https://www.linkedin.com/in/taher-ayadi/
• GitHub: https://github.com/taherx7

🙏 Acknowledgments

• Weather data provided by OpenWeatherMap API
• Icons: Weather icons from OpenWeatherMap
• Fonts: Google Fonts (Poppins & Pacifico)

---

⭐ If you found this project helpful, please consider giving it a star!

Weather Project — client-side setup

Quick client-side steps to keep API keys out of your public repo:

• Copy config.example.js to config.js and replace the placeholder with your OpenWeather API key:

  copy config.example.js config.js
  # then edit config.js and replace YOUR_API_KEY_HERE with your real key