Skip to content

LauraCole1900/apiWeatherDashboard

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

35 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Weather Dashboard

Table of Contents

Description

This is a weather dashboard using the third-party API from OpenWeather. The user will search a city using the provided text-box. They will then be presented with the name of the city, current date and time for that city, a five-day forecast, and the current conditions for that city. The name of the city will also appear in a button to the left of the forecast, under "History," which the user can click on to repeat the search of that city. Upon searching for a new city, the forecast and date/time will change to the new city; the newest search will display at the top of the current conditions, with previous searches moving down; and a button with the new city will appear in the "history" section. At any time, the user may revisit the forecast for a previous search by clicking on the name of that city in the "current conditions" portion of the page or the "history" portion pf the page. Upon reloading the page, the user's most recent search will appear in the "forecast" portion of the page and their search history will load as clickable buttons in the "history" portion of the page.

Forecast conditions include date, weather, high and low temperatures in Fahrenheit, relative humidity, and wind speed in mph. Current conditions include current weather, temperature in Fahrenheit, relative humidity, wind in mph, and UV index with risk level indicated by color.

Links

Weather Dashboard

Screenshots

Blank dashboard: Dashboard

Dashboard with cities entered: Dashboard with search history

User input form: User input form

Clickable buttons to repeat a search:

City buttons

Dashboard with a search repeated from clicking one of the city buttons: Dashboard history search

Dashboard upon reload: Dashboard on reload

Installation Instructions

If you want to run a copy of this app on your local machine, first clone the repository:

HTTPS:

$ git clone https://github.com/LauraCole1900/apiWeatherDashboard.git

SSH:

$ git clone git@github.com:LauraCole1900/apiWeatherDashboard.git

Then cd into the directory into which you cloned, right-click on index.html, and choose "Open in default browser."

Usage

This project is intended to be used to allow the user to see forecast and current weather conditions in cities around the globe.

Technologies Used

HTML5 CSS3 jQuery Bootstrap Day.js OpenWeather API Local Storage

Tests

npm run test

Credits

Weather icons in the header created by Joey Yakimowich-Payne, licensed under Creative Commons (http://creativecommons.org/licenses/by/3.0/)

OpenWeather's products and services licensed under Creative Commons Attribution-ShareAlike 4.0 International licence (https://creativecommons.org/licenses/by-sa/4.0/), and the data and database are licensed under the Open Data Commons Open Database License (https://opendatacommons.org/licenses/odbl/).

Bootstrap, jQuery, and Dayjs are licensed under MIT.

Contributing

N/A

Questions

If you have further questions, you can reach me at lauracole1900@comcast.net. For more of my work, see my GitHub.

Badges

License badge