Weather app

Javi Planelles
Aug 23, 2017 · 2 min read

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!

)
Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade