/weather-dashboard

Web app that allows users to search for weekly weather reports for inputted cities. Relies on data collected from a weather api.

Primary LanguageHTML

06 Server-Side APIs: Weather Dashboard

During this assignment I was made to retrieve a large sum of data from a third party api and then implemented that data into an application that shows the weather for a local area, both current in for the next five days.
The largest setback was the need for additional api's and data in order to fully implement the provided API. The use of coordinates instead of city names required me to use data given by another source, and through that was able to successfully capture the desired data. I then pushed that data into the HTML code that I built using both bootstrap and the layout shown in the provided application demo. It was through these major phases that I was able to complete the assignment presented to me.

Given: User Story

AS A traveler
I WANT to see the weather outlook for multiple cities
SO THAT I can plan a trip accordingly

Given: Acceptance Criteria

GIVEN a weather dashboard with form inputs
WHEN I search for a city
THEN I am presented with current and future conditions for that city and that city is added to the search history
WHEN I view current weather conditions for that city
THEN I am presented with the city name, the date, an icon representation of weather conditions, the temperature, the humidity, the wind speed, and the UV index
WHEN I view the UV index
THEN I am presented with a color that indicates whether the conditions are favorable, moderate, or severe
WHEN I view future weather conditions for that city
THEN I am presented with a 5-day forecast that displays the date, an icon representation of weather conditions, the temperature, the wind speed, and the humidity
WHEN I click on a city in the search history
THEN I am again presented with current and future conditions for that city

The following image demonstrates the application functionality:

weather dashboard demo

Review

Resources:

  • Moments.js
  • Bootstrap
  • Jquery
  • Open Weather: One Call API

Links:


© 2021 Trilogy Education Services, LLC, a 2U, Inc. brand. Confidential and Proprietary. All Rights Reserved.