Local Weather Application Retrospective


The local weather project was my first project where I used an AJAX call to fetch data from an API. I used the Open Weather API. It has since been broken in Chrome due to that browser now requiring https for anything that needs geolocation of a user.

The page calls the open weather API and fetches the current weather. The image at the bottom changes based on the current temperature. If it is above 40 degrees Fahrenheit, a very happy man riding a penny farthing is displayed. If it is colder than 40 degrees, a sad man on a bus is shown. I used this app for a while to determine if it was warm enough for me to bike to work.

Code Review

Reviewing the code I wrote for this project, I see a few things that were improving from earlier projects. One is that I used Google Fonts for the first time. I found it much simpler than managing my own font files like I did with the Random Quote Generator.

I continued to use responsive Bootstrap columns. There are lots more of those col-xs-x classes.

The animated temperature toggle switch I found on a blog post. I didn't (and still don't) have a firm grasp on CSS animations.

Looking at the JavaScript, I used $.getJSON() to make my API call. It even looks like I did a little bit of creative time logic to show am or pm based on the time. Overall, this JavaScript looks simple and clean to me. I'd just remove jQuery since it isn't necessary here.

Future Improvements

It's not likely that I spend time updating this app due to it not working in Chrome at all. It would be a nice, simple way to learn how to test API calls in Angular using Jasmine, though. Some areas that could be improved:

  • Remove Bootstrap and use flexbox, since I am only using the grid for layout here
  • Remove jQuery dependency since I'm not doing anything sufficiently difficult to call for it
  • I could get an https certificate if I wanted to learn how to do that in order to get this app to work properly in Chrome
  • I would remove the borrowed animated switch and roll my own as that is something I am capable of now.