Weather Forecast App 🌤️

A modern, responsive weather forecasting application built with HTML, JavaScript, and Tailwind CSS. Get real-time weather updates, forecasts, and detailed weather metrics with a beautiful, wave-animated interface.

🌟 Features

• Real-time Weather Data: Get current weather conditions for any location
• 7-Day Forecast: View detailed weather predictions for the upcoming week
• Geolocation Support: Automatically detect user's location
• Temperature Unit Conversion: Toggle between Celsius and Fahrenheit
• Responsive Design: Optimized for all screen sizes (mobile-first approach)
• Recent Searches: Quick access to your previously searched locations
• Detailed Weather Metrics:
  • Temperature & "Feels Like" readings
  • Humidity levels
  • Wind speed
  • Cloud coverage
  • UV index
  • Atmospheric pressure
  • Sunrise & sunset times

🛠️ Technologies Used

• HTML5
• JavaScript (ES6+)
• Tailwind CSS
• Font Awesome Icons
• WeatherAPI.com
• Local Storage API
• Geolocation API

🚀 Live Demo

Visit the live application: Weather Forecast App

📥 Installation

1. Clone the repository:

git clone https://github.com/PYTHON09-ux/Weather-forecast-app-Tailwind-.git

2. Navigate to the project directory:

cd Weather-forecast-app-Tailwind-

3. Open index.html in your preferred browser

💻 Usage

1. Enter a city name in the search bar
2. Click the search icon or press Enter
3. View detailed weather information and forecast
4. Use the temperature unit converter to switch between °C and °F
5. Click the location icon to use your current location
6. Access your recent searches from the dropdown menu

🎨 UI Features

• Animated wave background
• Responsive grid layout
• Interactive hover effects
• Clean and modern design
• Intuitive navigation
• Error handling with user feedback
• Loading states for better UX

📱 Responsive Breakpoints

• iPhone SE (375px)
• iPad Mini (768px)
• Standard breakpoints:
  • sm: 640px
  • md: 768px
  • lg: 1024px
  • xl: 1280px

🔑 API Integration

This app uses the WeatherAPI.com API. To run the app locally:

1. Sign up at WeatherAPI.com
2. Get your API key
3. Replace the API key in script.js

🤝 Contributing

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

📧 Contact

Pavan - itispavan24@gmail.com

Project Link: https://github.com/PYTHON09-ux/Weather-forecast-app-Tailwind-

🙏 Acknowledgments

• Tailwind CSS
• Font Awesome
• WeatherAPI.com