The Assignment: Weather Dashboard
*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
This assignment was meant to incorporate the weather API and display it's data on the page based on a search of a particular city. The city search is based on longitude and latitude when a city is typed into the search bar it uses the data in the weather API to apply the longitude and latitude of that city to the current weather conditions. The weather API has all the data stored in it that is needed for the above criteria what was necessary in this assignment was to access that data and display it to the page. Temp, humidity, wind speed, UV index, and the 5 day forecast for that city was required as outlined above. The 5 day forecast needed to display icons of the future condition as well as the date for the next 5 days starting with the date of tommorrow. This was the challenging part of the assignment and thus took the most amount of time to complete.
Lessons:
The biggest lesson I took away from this assignment was the data that an API can store it can hold so much information that can very easily be used to make simple webpages very complex. The initial look of this page when opening it is a search bar and a text area to type the city into all of the other components are built with the Javascript. This assignment incorporated dates as well as the weather so this was also a lesson on how to access the correct data that needed to be diplayed to the webpage. Accessing the information was the key takeaway from this assignment there is so much data stored on the API it was just a matter of accessing it and diplaying it to the page.
Takeaways:
I can take so much from this assignment because it was so challenging it made me learn to read documentation much better since if I could compose the URL correctly then I would not have been able to even access the iformation that the API was able to offer. At first this was my issue because I had left out a simple appid= on the URL so I kept getting back a error of app key not found which after reading multiple documentations I figured out the URL was not composed correctly and it would not access the weather API. Another key takeaway from this assignment was again like the last assignment using the local storage to keep data and utilize it at a later time. I feel this is good practice and it is quite useful when building a functional and useful webpage. This assignment like all was very difficult but as I have stated before the difficulty allows us as students to learn and grow in our coding ability.
Screenshots:
More screen shots available in weather-dashboard-week-6/screenshots
Deployment URL:
https://anthonydominguez86.github.io/weather-dashboard-week-6/