☂️ 06 Server-Side APIs: Weather Dashboard 🌂
Description
Developers are often tasked with retrieving data from another application's API and using it in the context of their own. Third-party APIs allow developers to access their data and functionality by making requests with specific parameters to a URL. Your challenge is to build a weather dashboard that will run in the browser and feature dynamically updated HTML and CSS.
Table of Contents
User Story
AS A traveler
I WANT to see the weather outlook for multiple cities
SO THAT I can plan a trip accordingly
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, 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
WHEN I open the weather dashboard
THEN I am presented with the last searched city forecast
Instructions
In localhost, right click on the index.html file and open in browser. Once the Dasboard-Weather app is rendered in the browser, enter a city name in the search box. The current temperature of the city is displayed in the upper container with temperture, humidity, wind speed and UV IndexSteps. If the UVIndex is less than 3, then there is green button, next to the index reading. If less than 7, then Yellow, which is a warning; if greater then Red, which is dangerous. In the bottom contain the forcast for the next 5 days will also be displayed. Open the Inspect and then go to Application, click on local Storage, then open the dropdown. In the preview window you should be able to see the save entries you entered of each City. To clear the Local Storage area, select the clear all icon which is a small circle with a line through it
To view the Deployed App, you can either clicked on Deployed which will open the App in Github. Once the Dasboard-Weather app is rendered in the browser, enter a city name in the search box. The current temperature of the city is displayed in the upper container with temperture, humidity, wind speed and UV IndexSteps. If the UVIndex is less than 3, then there is green button, next to the index reading. If less than 7, then Yellow, which is a warning; if greater then Red, which is dangerous. In the bottom contain the forcast for the next 5 days will also be displayed.
Check out the ScreenShot of what the App looks like.
License
This project is licensed under the MIT license.
Contributing
All contributions are Welcomed!!
Usage
Users can use the repo, but please do not delete any code.
Links
-
Github Repository: Repository
-
Github Deployed: Deployed
Questions
If you have any questions about the repo, open an issue or contact me directly at wpah@comcast.net. You can find more of my work at whintzen.