A simple weather application built with JavaScript and Tailwind CSS. It fetches weather data from the WeatherAPI and dynamically updates the UI.
- 📌 Table of Contents
- ✨ Features
- 🛠️ Tech Stack
- 🚀 Installation
- 💻 Usage
- 📂 Project Structure
- 🤝 Contributing
- 📜 License
- 🔗 Important Links
- 📝 Footer
- 🔍 City Search: Allows users to enter a city name to retrieve weather information.
- 🌡️ Real-time Weather Data: Fetches current weather conditions, including temperature, condition, humidity, and wind speed.
- 🎨 Dynamic Background: Changes the background based on the current weather condition (e.g., sunny, cloudy, rainy).
- 💨 Air Quality Index (AQI): Displays the Air Quality Index based on US EPA standards.
- 📱 Responsive Design: Built with Tailwind CSS for a responsive and visually appealing user interface.
- ⏳ Loading Indicator: Shows a loading animation while fetching weather data.
- 🚫 Error Handling: Displays user-friendly error messages when the city is not found or there's an issue with the API.
- Languages: JavaScript
- Frameworks: Tailwind CSS
- Clone the repository:
git clone https://github.com/26Vishal/Weather-app.git
- Open
index.htmlin your browser. No additional installation steps are required as the project uses CDN for Tailwind CSS and does not have any server-side components or dependencies.
- Enter a city name in the input field.
- Click the search button (magnifying glass icon).
- View the current weather information for the specified city.
Real-World Use Case:
This weather app can be used to quickly check the current weather conditions in any city around the world. It's useful for planning your day, travel, or any outdoor activities.
Example:
- Enter
New Delhiin the city input field. - Click the search button.
- The app will display the current weather information for New Delhi, including temperature, weather condition, humidity, wind speed, and AQI.
Weather-app/
├── index.html # Main HTML file containing the UI structure
├── script.js # JavaScript file containing the application logic
└── styles.css # CSS file for custom styling
Contributions are welcome! Here are the steps to contribute:
- Fork the repository.
- Create a new branch with a descriptive name.
- Make your changes and commit them with clear commit messages.
- Push your changes to your fork.
- Submit a pull request.
No license provided.
- Repository URL: https://github.com/26Vishal/Weather-app
- Repository Name: Weather-app
- Repository URL: https://github.com/26Vishal/Weather-app
- Author: 26Vishal
- Contact: (No contact information provided in the repository, consider adding your contact info)
⭐️ Like this project? Give it a star on GitHub!
Help improve this project by forking it and submitting pull requests, or by reporting issues.