Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ammad-ashraf/weather-dashboard

This project is a Weather Dashboard application that utilizes the OpenWeatherMap API to provide users with real-time weather information and forecasts for various cities.It also has a built-in chatbot using GEMINI API that allows users to interact with the application by asking for weather information or general queries.
https://github.com/ammad-ashraf/weather-dashboard

ajax api apiintegration css fetch-api html5 javascript jquery

Last synced: 2 days ago
JSON representation

Host: GitHub
URL: https://github.com/ammad-ashraf/weather-dashboard
Owner: Ammad-Ashraf
License: mit
Created: 2024-10-17T14:45:04.000Z (20 days ago)
Default Branch: main
Last Pushed: 2024-10-17T17:05:27.000Z (20 days ago)
Last Synced: 2024-10-19T21:57:57.324Z (18 days ago)
Topics: ajax, api, apiintegration, css, fetch-api, html5, javascript, jquery
Language: JavaScript
Homepage: https://ammad-ashraf.github.io/Weather-Dashboard/
Size: 25.4 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# Weather Dashboard

Welcome to the Weather Dashboard project! This application provides real-time weather information and forecasts for various cities using the OpenWeatherMap API. It features interactive charts, a forecast table, and a chatbot for user interaction.

## Features

- **Current Weather Display**: View the current weather conditions, including temperature and description, for a specified city.
- **5-Day Weather Forecast**: Access a detailed 5-day weather forecast with temperature and weather descriptions.
- **Interactive Charts**: Visualize weather data through bar, doughnut, and line charts.
- **Pagination**: Navigate through forecast data using pagination controls.
- **Chatbot Functionality**: Interact with a chatbot to get weather information or ask general queries.
- **Filter Options**: Sort and filter forecast data by temperature and weather conditions.

## Technologies Used

- HTML, CSS, JavaScript
- jQuery for DOM manipulation
- Chart.js for data visualization
- OpenWeatherMap API for weather data
- Google Fonts for typography

## Getting Started

To view the Weather Dashboard, visit the [GitHub Pages deployment](https://ammad-ashraf.github.io/Weather-Dashboard/).

### Prerequisites

- A modern web browser with JavaScript enabled.

### Installation

1. Clone the repository:
```bash
git clone https://github.com/ammad-ashraf/Weather-Dashboard.git
2. Navigate to the project directory:
```bash
cd Weather-Dashboard
3. Open index.html in your web browser to view the application locally.

### Usage
1. Enter a city name in the search bar and click "Search" to view the current weather and forecast.
2. Use the filter options in the forecast table to sort or filter the data.
3. Interact with the chatbot by clicking the chatbot toggle button and typing your queries.

### Limitations
- **The chatbot using GEMINI API can extract city only if city is follow up by word "in"**
- Prompts example : *What's the weather in London?*

### License
This project is licensed under the MIT License.

### Acknowledgments
OpenWeatherMap for providing the weather data API.
Chart.js for the charting library.
jQuery for simplifying JavaScript operations.
GEMINI API for handling user prompts.

*Feel free to contribute to this project by submitting issues or pull requests. Enjoy exploring the Weather Dashboard!*