Build a Weather Widget Using Javascript
AJAX requests with JQuery
The internet handles tons of data, constantly sending information back and forth. A typical website architecture involves a server — the source of data — and a client that presents the information to the user.
Let’s take Twitter as an example.
Once you log in on their website, your profile data is retrieved from their database and sent back to your browser together with the webpage.
However, when loading the timeline a different approach is required. With hundreds of new tweets every minute, it will be inefficient for the server to query the database, retrieve all tweets then display the home webpage. If this is to be done all at once, the website would take quite a long time to load.
This is where AJAX comes in.
Asynchronous Javascript and XML (AJAX) is a technique of loading data from a server onto a webpage. The term asynchronous in programming can be simplified to “happening in the background”.
AJAX enables webpages to retrieve and send data in the background from a server.
The server first sends a static site to the user. Once the HTML and CSS renders, the static site sends a request — using Javascript — to the server to retrieve the data to display on the page. This greatly increases the page load speeds which in turn improves user experience.
To better understand how this works, let’s create a simple weather widget which displays the current temperature and weather condition.
We shall make use of JQuery to make a GET request to the OpenWeatherMap API.
What you will require:
- An API key which you can get here for free.
- Any code editor of your choice.
First, we define our structure using HTML. Initially, our widget will display a default temperature of 0° celsius and the weather condition as unknown. This will be replaced with data from the API after the request is complete.
Instead of having the user input their location, we can fetch their current geographical coordinates using their inbuilt device GPS.
Before trying to request for their location, we need to check if their browser supports Geolocation.
If their browser is compatible, we call the function getCurrentPosition() provided by the navigator.geolocation object.
This function takes in a callback which is called with the geographical coordinates once the location is retrieved from the GPS.
A callback is a function that is called once a certain task is completed. In our case, the function getWeather() is our callback and it will be called once the user’s GPS coordinates are returned.
The request to OpenWeatherMap API requires 3 parameters:
- Latitude
- Longitude
- API Key
Let’s define our getWeather() function which will receive the geographical coordinates from the GPS. We then assign the latitude and longitude to variables.
We shall concatenate these parameters to the API’s current weather request endpoint:
http://api.openweathermap.org/data/2.5/onecall?Javascript ES6 provides us with an elegant way of concatenating variables to strings using template literals — defined using backticks (`).
To send an AJAX request, we can use JQuery’s HTTP GET function:
$.get(url,callback)First is the URL you’d like to retrieve data from, then a callback. The callback is called once the data is retrieved from the URL. This happens in the background and you wouldn’t notice it unless you check the browser’s dev tools.
Inside the getWeather() function, we retrieve the data from the API (our server in this case), by sending HTTP GET request. And you can easily guess that a GET request, GET’s data from a server.
The temperature is in kelvin — that's why we have to subtract 273 from it to convert it to celsius.
For increased user experience, you can include a spinner or a prompt to the user notifying them that data is being fetched from the server.
Now it’s time to display the response from the server on the webpage.
We first select the elements where we want to display our data.
JQuery provides a cleaner way of selecting DOM elements using class names or id’s compared to Vanilla Javascript.
After selecting the elements, we can alter their contents using the html() function by passing in the value to display.
Here is the final structure of our main.js file.
Lastly, we add some CSS to our widget.
And here is the result of our hard work. We can now tell the current weather condition without looking outside!
Welcome to the future.
Recap
AJAX is a technique used to load data from a server(API) onto a webpage. It enhances the user experience and increases page load speeds.
However, it does have its drawbacks.
If you load all the information on a webpage using AJAX, search engines won’t be able to index your website. To counter this, you can load vital information together with the webpage, for instance, a post title, then the media can be loaded via AJAX.
A few improvements can be done to our widget:
- Adding a refresh button to reload the weather without refreshing the page.
- Displaying other weather information from the API.
Go ahead. Tweak the code and create something beautiful.
Resources
Happy Coding!
