WeatherPodcast 🌤️

A beautiful and responsive weather application that provides real-time weather information for any city worldwide. Built with HTML, CSS, and JavaScript, this app features a modern glass-morphism design and smooth animations.

🌟 Features

• Real-time Weather Data: Get current weather information using the OpenWeatherMap API
• Search by City: Simply enter any city name to get instant weather updates
• Responsive Design: Works seamlessly on desktop and mobile devices
• Beautiful UI: Modern glass-morphism design with smooth transitions
• Weather Details:
  • Temperature in Celsius
  • Weather Description
  • Humidity Percentage
  • Wind Speed
• Dynamic Weather Icons: Different icons for various weather conditions
• Error Handling: User-friendly error messages for invalid city names

🛠️ Technologies Used

• HTML5
• CSS3
• JavaScript (ES6+)
• OpenWeatherMap API
• Boxicons for icons
• Google Fonts (Poppins)

📸 Screenshots

💻 Getting Started

Prerequisites

• A modern web browser
• OpenWeatherMap API key (free tier)

Installation

1. Clone the repository

   git clone https://github.com/[your-username]/WeatherPodcast.git

2. Navigate to the project directory

   cd WeatherPodcast

3. Open script.js and replace the API key with your own

   const APIKey = 'your-api-key-here';

4. Open index.html in your web browser

📁 Project Structure

WeatherPodcast/
│
├── index.html          # Main HTML file
├── style.css          # Styles and animations
├── script.js          # JavaScript functionality
├── README.md          # Project documentation
│
├── images/            # Weather icons and background
│   ├── clear.png
│   ├── rain.png
│   ├── snow.png
│   ├── cloud.png
│   ├── mist.png
│   ├── 404.png
│   └── background.jpg

🎨 Features in Detail

1. Search Functionality

   • Real-time city search
   • Enter key support for search
   • Error handling for invalid cities

2. Weather Display

   • Dynamic temperature display
   • Weather condition icons
   • Humidity and wind speed information

3. UI/UX Features

   • Glass-morphism design
   • Smooth transitions
   • Responsive layout
   • Loading states
   • Error states with custom 404 image

🤝 Contributing

Contributions are welcome! Feel free to open issues and submit pull requests.

1. Fork the repository
2. Create your 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 licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Weather data provided by OpenWeatherMap
• Icons by Boxicons
• Font by Google Fonts

📧 Contact

Your Name - yeshwanthatmakuri@gmail.com

Project Link: https://github.com/YEsh-DEV/WeatherPodcast