Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ytasheva/5-days-weather-forecast
A weather dashboard with form inputs that will run in the browser and feature five day forecast.
https://github.com/ytasheva/5-days-weather-forecast
Last synced: 14 days ago
JSON representation
A weather dashboard with form inputs that will run in the browser and feature five day forecast.
- Host: GitHub
- URL: https://github.com/ytasheva/5-days-weather-forecast
- Owner: YTasheva
- License: mit
- Created: 2023-12-15T19:08:57.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-21T16:56:21.000Z (4 months ago)
- Last Synced: 2024-11-24T17:11:44.344Z (2 months ago)
- Language: JavaScript
- Size: 217 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 5 Days Weather Forecast
## Table of contents
- [Overview](#overview)
- [The Challenge](#the-challenge)
- [Acceptance Criteria](#acceptance-criteria)
- [Screenshot](#screenshot)
- [Links](#links)
- [Built With](#built-with)
- [Installation](#installation)
- [Licence](#licence)
- [Author](#author)
## Overview
- A weather dashboard with form inputs that will run in the browser and feature a five-day forecast and dynamically updated HTML and CSS. - The base URL for your API calls should look like the following: `https://api.openweathermap.org/data/2.5/forecast?lat={lat}&lon={lon}&appid={API key}`.
### The Challenge
- Build a Weather Dashboard using the [5 Day Weather Forecast](https://openweathermap.org/forecast5), you'll need to pass in coordinates instead of just a city name. Using the OpenWeatherMap APIs, retrieve geographical coordinates given a city name.
- Use `localStorage` to store any persistent data. For more information on how to work with the OpenWeather API, refer to the [Full-Stack Blog on how to use API keys](https://coding-boot-camp.github.io/full-stack/apis/how-to-use-api-keys).
### Acceptance Criteria
* Create a weather dashboard with form inputs.
* When a user searches for a city they are presented with current and future conditions for that city and that city is added to the search history
* When a user views the current weather conditions for that city they are presented with:
* The city name
* The date
* An icon representation of weather conditions
* The temperature
* The humidity
* The wind speed
* When a user views future weather conditions for that city they are presented with a 5-day forecast that displays:
* The date
* An icon representation of weather conditions
* The temperature
* The humidity
* When a user clicks on a city in the search history they are again presented with current and future conditions for that city
* The following mock-up demonstrates the application functionality (the weather app includes a search option, a list of cities, and a five-day forecast and current weather conditions for London.):
### Screenshot
### Links
- [Deployed Application](https://ytasheva.github.io/Weather-Forecast-Dashboard/)
- [GitHub Repo](https://github.com/YTasheva/Weather-Forecast-Dashboard)
### Built With
- JavaScript, HTML, CSS, Bootstrap, jQuery,Server-Side API - OpenWeather API
## Installation
* Download or clone the repository.
* Open the `.HTML` file through your web browser to view.
* Use Visual Studio Code or similar source-code editor to run the code.
## Licence
## Author
- GitHub - [Yuliya Tasheva](https://github.com/YTasheva)
> [YTasheva.com](#) ·
> LinkedIn [@YTasheva](https://github.com/YTasheva) ·
> Email [[email protected]](#) ·