Interactive Weather App

jQuery & API in JSON

Product: Interactive Weather App
Discipline: Web Development
Tools Used: jQuery, JSON API, Bootstrap


This is my first interactive online application. I was learning with Free Code Camp for a while and noticed the weather app project in their Intermediate Front-End Development Project section. I took courses at BCIT on JSON and jQuery, and decided to build this web app for my Portfolio project.

The User Story on the project was to build an application that grabs the browser’s geolocation and to output the weather data for that location. While I was creating the function that calls for the ip address and location, I noticed that Chrome browsers didn’t support geolocation over HTTP. I realized that asking for geolocation in order to display the weather data may not be the best choice for this project.

In the end, I decided instead to create an option select box with cities already listed. Plus it’s more interactive for users to click and browse through various cities for their current weather data. From there, I grabbed the city IDs, and used JSON to output data from those cities. For a fun touch, I created an additional function to change the page background image based on the weather type.

Final Product

Below is a screenshot of my interactive weather app. You can also view and try it out yourself!

Interactive Weather App

Interactive Weather App