Weather Web Application

Weather Web Application

3456 5184 Graeme Elliott

No web development course is complete without a project collecting some data from an API, and for this mini project, the data type is the weather. The aim is to build a weather web app that locates the visitor and is then able to get the local weather data for that location. The weather API I used was Weather Underground because it provided a comprehensive amount of weather data, including live weather data as well as weekly forecasts. The graphics provided by Weather Underground were also very aesthetically pleasing (especially during the sunny weather!). Another criterion to meet in this project was to enable visitors to choose between degrees Fahrenheit and degrees Celsius. I decided to use a switch button so that I could practice editing a rather complex button layout.

In this project I learned:

  • Using AJAX to connect to an API and gain data: AJAX, in a nutshell, makes asynchronous requests with the use of the XMLHttpRequest object to communicate with servers. It can send and receive information in various formats, including JSON, XML, HTML, and text files. The most important characteristic of “asynchronous” requests is that it can communicate with the server, exchange the data, and update the page without having to refresh the page.
  • Using a button to change values: One of the key objectives of this project was to enable the user to switch between different temperature scales. I learned how to make this button work, and then use JavaScript and jQuery to make it interactive with the data on the page.
  • CSS Gradients: I also experimented with CSS gradients to give the background of my web app a cool blue sky feel.

Languages, frameworks, packages and toolkits used in this project:

  • HTML
  • CSS
  • JavaScript
  • jQuery
  • Bootstrap

(Due to the frequent use of my Wunderground API key (and having no private environment for which to mask my key) I have taken it out of my code. If you wish to see this project working, then please sign up to the Wundergound Developer site to get access to their API and then put your API key into my code)

To view this project please visit:
https://jsfiddle.net/graemeelliott/8kfd9zts/

Leave a Reply