Weather API

Create a form

Write code for a basic form:

<form>
  <label>Enter a U.S. city</label>
  <input id="weatherInput" type="text"></input><br/>
  <input id="weatherSubmit" type="submit" value="Submit"></input>
</form>

JavaScript

We will write JavaScript and JQuery inside the script.js file. Notice how this file is loaded from index.html. To get our code to execute after the page loads, we wrap it in the ready event.

$(document).ready(function() {
});

Write a submit handler

To get the weather for a city, you need to create an event handler that is called whenever the Submit button is pressed. Inside the script.js file, add the following event handler:

    $("#weatherSubmit").click(function(e) {
	e.preventDefault();
	var value = $("#weatherInput").val();
        console.log(value);
    });

Here, we are using JQuery to find the #weatherSubmit element, then attach a click event handler. In this event handler we first suppress the default event handler, which prevents the page from reloading. We then get the value of the input field and print it to the console to demonstrate that the event handler works.

Call the Weather API

OpenWeatherMap has written a simple API for the weather. You can see documentation of this API by visiting this link. To use the API, you will need to create an account and follow the instructions to get an API key.

Once you have an API key, you can call the API, using the JQuery ajax() method. You will need to supply your own API key where it says APIKEY.

	var myurl= "http://api.openweathermap.org/data/2.5/weather?q=" + value + ",US&units=imperial" + "&APPID=APIKEY";
	$.ajax({
	    url : myurl,
	    dataType : "json",
	    success : function(json) {
		console.log(json);
	    }
	});

This uses JQuery to visit the given URL. On success, JQuery will call the function listed in the success element of the supplied object. We have a statement to print to the console so you can inspect the results. You will find that the API returns a JSON object. Take a look at what it contains.

Note that our URL adds text to the query to make this a city in the US, and also adds a setting so that returned values are in Imperial units. The API key is added to the end of the query.

You could also supply a function to call in case of an error.

Format the Results

To format the results, you simply need to understand the JSON data that is returned. This is described in the documentation. I did this:

		var results = "";
		results += '<h2>Weather in ' + json.name + "</h2>";
		for (var i=0; i<json.weather.length; i++) {
		    results += '<img src="http://openweathermap.org/img/w/' + json.weather[i].icon + '.png"/>';
		}
		results += '<h2>' + json.main.temp + " &deg;F</h2>"
		results += "<p>"
		for (var i=0; i<json.weather.length; i++) {
		    results += json.weather[i].description
		    if (i !== json.weather.length - 1)
			results += ", "
		}
		results += "</p>";
		$("#weatherResults").html(results);

We first list the name of the city. Then we loop through the current weather and add an image for each of the icons used to display the current weather. We add the current temperature. We finally loop through the current weather again and add the text description of the weather.

The last thing we do is use JQuery to set the #weatherResults div to contain this list.