Skip to content

Latest commit

 

History

History
116 lines (74 loc) · 4.3 KB

README.md

File metadata and controls

116 lines (74 loc) · 4.3 KB

🌤️ Weather App 🌤️

HTML5 CSS3 JavaScript Font Awesome OpenWeatherMap API License: MIT

Weather App is a dynamic and user-friendly web application designed to provide real-time weather information, including temperature, humidity, wind speed, and more. Utilizing the OpenWeatherMap API, this app allows users to search for weather details by city and supports both metric (Celsius) and imperial (Fahrenheit) units to cater to a global audience.

✨ Features

  • 🔍 City Search: Easily search for any city to get current weather information.
  • 🌡️ Temperature Units: Switch between Celsius (°C) and Fahrenheit (°F) units.
  • 🌦️ Weather Details: View detailed weather information, including real feel, humidity, wind speed, and atmospheric pressure.
  • 📱 Responsive Design: Crafted to provide an optimal viewing experience across a wide range of devices.

🎥 Demo Video

Watch the demo video to see the Weather App in action:

🖼️ Screenshots

Weather App in action

Screenshot 2024-06-03 191453

Screenshot 2024-06-03 191516

Screenshot 2024-06-03 191543

Farenheight Convertion

Screenshot 2024-06-03 191603

🛠️ Tech Stack

  • Frontend: HTML5
  • Styling: CSS3
  • Scripting: JavaScript
  • Icons: Font Awesome
  • API: OpenWeatherMap

🚀 Getting Started

📋 Prerequisites

Make sure you have the following installed on your local machine:

  • A modern web browser capable of running HTML5, CSS3, and JavaScript.
  • An API key from OpenWeatherMap.

🔧 Installation

  1. Clone the repository:

    git clone https://github.com/KDvs123/weather-app.git
cd weather-app

  2. Setup API Key:

    • Open app.js and replace "your_api_key" with your actual OpenWeatherMap API key: 
      const API_KEY = "your_api_key";

  3. Run the application:

    • Open index.html in your web browser to run the app.

📝 Usage

  1. Search for a city: Enter a city name in the search box and press enter or click the magnifying glass icon.
  2. View Weather Information: The app will display current weather information for the specified city.
  3. Toggle Temperature Units: Click on the °C or °F buttons to toggle between Celsius and Fahrenheit units.

📂 Project Structure

weather-app/
│
├── index.html
├── style.css
└── app.js

🤝 Contributing

Contributions are welcome! Please follow these steps to contribute:

  1. Fork the repository.
  2. Create a new branch (git checkout -b feature-branch).
  3. Make your changes.
  4. Commit your changes (git commit -m 'Add new feature').
  5. Push to the branch (git push origin feature-branch).
  6. Open a Pull Request.

📜 License

This project is licensed under the MIT License - see the LICENSE file for details.

📬 Contact

For any questions or suggestions, feel free to reach out:

Enjoy using the Weather App! 🌤️😊