/weather-api-widget

Primary LanguageJavaScript

Weather API Widget

![Weather API Widget]

Welcome to the Weather API Widget project! This web application provides real-time weather information based on a user's location. It uses a weather API to fetch live data and displays it in an easy-to-understand format. You can use this app to quickly check the weather in any city around the world.

Live Demo

Visit the live site here

Table of Contents

Features

  • Real-time Weather Updates: Get up-to-date weather information for any location.
  • Location-based Weather: Automatically detect your location to show local weather conditions.
  • Search Functionality: Allows users to search for weather data by entering the name of a city.
  • Responsive Design: Works well on both desktop and mobile devices.
  • Detailed Weather Information: Displays temperature, weather conditions, wind speed, humidity, and more.
  • Simple and Clean UI: Designed with user-friendliness in mind, making weather data easy to read and understand.

Technologies Used

  • HTML5: For creating the structure of the web pages.
  • CSS3: To style the app and ensure a responsive design.
  • JavaScript (ES6+): To handle dynamic behavior and interact with the weather API.
  • Weather API: Powered by OpenWeather API to fetch real-time weather data.

Installation

If you'd like to run this project locally or modify the source code, follow these steps:

  1. Clone the repository: git clone https://github.com/your-username/weather-api-widget.git cd weather-api-widget

  2. Install dependencies (if any):

This project is simple and does not require a package manager. All necessary libraries are included via CDN in the HTML file.

  1. Get an API key from OpenWeather API and replace the placeholder key in the JavaScript file.

  2. Run the project locally:

Open index.html in your preferred web browser:

open index.html

Usage

  1. Automatic Location Detection: Upon visiting the site, the app will prompt to access your location. If allowed, it will automatically fetch and display weather data for your current location.
  2. Search for a City: Use the search bar at the top of the page to enter any city name. The app will display the current weather for that city.
  3. Weather Information: The app provides detailed weather information, including temperature, wind speed, humidity, and a description of the current weather conditions.