Click for more information
About this Project
Finding an appropriate bootstrap template was a good starting point for me. This would allow me to focus primarily on the
implementation of features and offer me more time to find a fitting API. I wanted a template that didn’t go overboard on the design aspects
and would show the information first and foremost.
Speaking of the API, I began by looking over how to use the one suggested in the project documentation, openweathermap.org, but found myself
not liking it, so I began in search of another API and I landed upon using https://darksky.net/ which is another widely used weather API.
I began to look at the documentation and online resources on how to use Dark Sky and how to begin implementation. I began coding and after a couple
hours realized that I would need to streamline the process of making the API calls as Dark Sky requires, for each call a set of latitude and longitude
coordinates corresponding to the city you want shown. So, I created a function with several parameters named “createCall” that would be used in my main
HTML file to pass in the required info that I wanted displayed. (this can be found in js/app.js)
For the extended forecasts section that was to be created, I put together another JavaScript function for displaying the extended forecast for the cities
by displaying hourly and daily data for the city selected. For the design of these I knew I had to figure out a way to nicely display the data as there would
be a lot of data coming in and I would need to parse through it. My solution for this was to place the information into HTML tables, giving them a simple readable
format. But I also wanted to not make it look like a basic HTML table as I’ve taken design classes in college and have learned about the importance of design so I
designed it to look aesthetically pleasing to the eye as well as providing readable data.
Some problems I ran into revolved around JQuery. To dynamically show the extended forecast, I used the JQuery function replaceWith() and replacing the div
containing the cities and display the selected city's extended forecast, but ultimately decided to implement a back button and use multiple pages to display
the extended forecast. Another issue that presented itself was the fact that the API presented dates/times as a Unix timestamp and not a standard date/time number.
I’ve never run into Unix time stamps before so I had to find a way to convert to a readable time. After some research, I was able to find some references on how to
convert the Unix time into a 24-hour format to have it at least somewhat readable to the end user. I also attempted to implement some icons that would go along with
the current conditions to illustrate more but unfortunately the API does not come with imbeded icons that correspond with the weather conditions given. After trying for
some time to implement some recommended icons I ultimately left them out. I then found that Dark Sky provides widgets that show the current temperature with a animated icon. In
the end I did not include this either as it lead to another page that was not one I created and I fealt as if that would not be good to include in this dev test that is supposed to show
my abilitity to implement items.
In conclusion I found this project good to do as it further increased my skills in using an API and parsing the data into a readable format for a end user, and had me solve many issues
along the way that had me think about what to do next. Some things I would have done differently is find some way of using JQuery to dynamically show data without having to go
to another page or reload the page. Also would have started with php files as to be able to do include files for all the redundant HTML lines that exist between all of my pages.
Thank you for giving me this opportunity to showcase my skills!