Skip to content

26Vishal/Weather-app

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 

Repository files navigation

☀️ Cool Weather App ☀️

JavaScript Tailwind CSS

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

  • 🔍 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.

🛠️ Tech Stack

  • Languages: JavaScript
  • Frameworks: Tailwind CSS

🚀 Installation

  1. Clone the repository:
    git clone https://github.com/26Vishal/Weather-app.git
  2. Open index.html in 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.

💻 Usage

  1. Enter a city name in the input field.
  2. Click the search button (magnifying glass icon).
  3. 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:

  1. Enter New Delhi in the city input field.
  2. Click the search button.
  3. The app will display the current weather information for New Delhi, including temperature, weather condition, humidity, wind speed, and AQI.

📂 Project Structure

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

🤝 Contributing

Contributions are welcome! Here are the steps to contribute:

  1. Fork the repository.
  2. Create a new branch with a descriptive name.
  3. Make your changes and commit them with clear commit messages.
  4. Push your changes to your fork.
  5. Submit a pull request.

📜 License

No license provided.

🔗 Important Links

📝 Footer

  • 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.

About

A mini project to demonstrate API handling using HTML,CSS,JavaScript

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors