Weather app
Hello! So this is the second project I did for the Free Code Camp curriculum.
The assignment is to work with an API and output the geographic and weather information of the user. As I wanted to create something unique, I decided to browse through Codepen to get some inspiration.
After some reflection, the idea of designing a TV with the meteorological information came to mind. I created a CSS class for the TV itself, another for the screen and another one for the side (where the sound buttons would go — but in this case, it would be the buttons to toggle between Fahrenheit and Celsius degrees.
Then on the instructions we were advised to use the HTML5 geolocation and a weather API: openweathermap. There was a significant problem though: the geolocation feature in HTML5 only accepts connections over HTTPS, and the API is only served over HTTP. Therefore, I had to find an API that worked over HTTPS. Luckily, I found https://www.apixu.com/, which is a great choice since it gets the user’s location and the weather information based on that.
I used jQuery to make an AJAX call with the getJSON method, which was pretty straightforward.
Cool, so the next step was to output the JSON data that I was given (as well as the icon) on the screen. After that, I only had to ensure that it was web responsive, which I accomplished using media queries.
You can check out the final result here: https://codepen.io/javisp91/pen/yMdBWW
Fun things: designing the TV.
Challenging things: finding a good API which works over secure connections.
Thanks for reading!