https://github.com/iroshanrathnayake/weather-webapp

A web application providing real time weather updates, forecasts, air quality, sunrise/sunset times, and interactive maps. Includes future enhancements like historical data and localized news.
https://github.com/iroshanrathnayake/weather-webapp

api javascript weather-api weather-forecast

Last synced: 8 days ago
JSON representation

A web application providing real time weather updates, forecasts, air quality, sunrise/sunset times, and interactive maps. Includes future enhancements like historical data and localized news.

• Host: GitHub
• URL: https://github.com/iroshanrathnayake/weather-webapp
• Owner: IroshanRathnayake
• Created: 2024-09-03T12:37:44.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-10-04T16:32:57.000Z (4 months ago)
• Last Synced: 2025-01-13T00:43:29.146Z (8 days ago)
• Topics: api, javascript, weather-api, weather-forecast
• Language: HTML
• Homepage: https://iroshanrathnayake.github.io/Weather-WebApp/
• Size: 5.29 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Weather Forecast Web App

## Overview

This project is a **Weather Forecast Web Application** that displays weather conditions for a selected location. The application provides daily and weekly weather forecasts, along with additional information such as air quality, sunrise/sunset times, and a temperature graph.

### Web App UI

![Weather Web App UI](/assets/images/homepage.png)

### Features

- **Search for Locations**: Enter any city to get real-time weather data.

- **Daily and Weekly Forecast**: Displays the temperature, humidity, wind speed, and weather conditions.

- **Interactive Map**: Shows the current location on the map.

- **Air Quality Index**: Provides air quality data for the selected location.

- **Sunrise and Sunset**: Displays daily sunrise and sunset times.

- **Temperature Graph**: Shows a graph of temperature trends over time.

### Technologies Used

- **HTML5 & CSS3**: For building the UI structure and styling.

- **JavaScript**: For handling data fetching and interactivity.

- **Bootstrap**: To ensure responsive design and layout.

- **WeatherAPI**: Provides weather and forecast data.

- **Google Maps API**: For the interactive map displaying the location.

### Future Enhancements

- **Historical Data**: Show past weather data for a given location.

- **User Accounts**: Save favorite locations for easier access.

- **Location News**: Display localized news updates relevant to the location.

### Weekly Forecast

![Weekly Forecast Screenshot](/assets/images/week-forecast.png)

### Today Forecast

![Today Forecast Screenshot](/assets/images/today-forecast.png)

## Installation and Setup

### Prerequisites

- An API key from [WeatherAPI](https://www.weatherapi.com/)

### Instructions

1. Clone the repository:

   ```bash

   git clone https://github.com/IroshanRathnayake/Weather-WebApp.git

   cd Weather-WebApp