In this tutorial, we are going to build a weather query system using OpenWeatherMap's API.

Here's a great video on getting started with the OpenWeatherMap
Once you're done watching the video, you should have a basic understanding of running these queries. Now, let's set them up.
Get yourself an API key from the following url
We're going to build our Weather query system by creating some HTML form fields, have the user click a button to run the query based on the data from the field, and then return that data back to the screen.
Let's go ahead and create the HTML for the code.

Note: There are Bootstrap classes present in the HTML, but they aren't necessary for functionality.

<div class="row">
    <div class="col-lg-8 col-lg-offset-2 text-center">
        <input type="text" placeholder="City"><button type="button" class="query_btn btn btn-default btn-sm">Search</button><br>
        <input type="text" placeholder="Zip Code"><button type="button" class="query_btn btn btn-default btn-sm">Search</button><br>
    </div>
</div>

<div class="row">
    <div class="col-lg-8 col-lg-offset-2 text-center">
        <h2>City: <span id="city"></span></h2>
        <h2>Main Weather: <span id="main_weather"></span></h2>
        <h2>Description: <span id="description_weather"></span></h2>
        <img id="weather_image" src="">
        <h2>Temperature: <span id="temperature"></span></h2>
        <h2>Pressure: <span id="pressure"></span></h2>
        <h2>Humidity: <span id="humidity"></span></h2>
    </div>
</div>

Before we add the code, be sure that you have jQuery installed.
Next, we're going to add some code so that when a user clicks on one of the 3 buttons, the data from the respective field is taken.

$( document ).ready(function() {
    var appID = "PUT YOUR API KEY HERE";

    $(".query_btn").click(function(){
        var query_param = $(this).prev().val();
    })
});

OK, so now let's go ahead and build the functionality for querying the weather map API. We'll start by creating 3 if/else statements to check which input is being transmitted to the API. We can then set a variable called "weather" to store our url with the appropriate parameters.

$( document ).ready(function() {
    var appID = "PUT YOUR API KEY HERE";

    $(".query_btn").click(function(){

        var query_param = $(this).prev().val();

        if ($(this).prev().attr("placeholder") == "City") {
            var weather = "http://api.openweathermap.org/data/2.5/weather?q=" + query_param + "&APPID=" + appID;
        } else if ($(this).prev().attr("placeholder") == "Zip Code") {
            var weather = "http://api.openweathermap.org/data/2.5/weather?zip=" + query_param + "&APPID=" + appID;
        }
    })
});

Using the weather variable, we can now query the data from the API and insert it into our HTML.

$( document ).ready(function() {
    var appID = "PUT YOUR API KEY HERE";

    $(".query_btn").click(function(){

        var query_param = $(this).prev().val();

        if ($(this).prev().attr("placeholder") == "City") {
            var weather = "http://api.openweathermap.org/data/2.5/weather?q=" + query_param + "&APPID=" + appID;
        } else if ($(this).prev().attr("placeholder") == "Zip Code") {
            var weather = "http://api.openweathermap.org/data/2.5/weather?zip=" + query_param + "&APPID=" + appID;
        }

        $.getJSON(weather,function(json){
            $("#city").html(json.name);
            $("#main_weather").html(json.weather[0].main);
            $("#description_weather").html(json.weather[0].description);
            $("#weather_image").attr("src", "http://openweathermap.org/img/w/" + json.weather[0].icon + ".png");
            $("#temperature").html(json.main.temp);
            $("#pressure").html(json.main.pressure);
            $("#humidity").html(json.main.humidity);
        });
    })

    // Optional Code for temperature conversion
    var fahrenheit = true;

    $("#convertToCelsius").click(function() {
        if (fahrenheit) {
            $("#temperature").text(((($("#temperature").text() - 32) * 5) / 9));
        }
        fahrenheit = false;
    });

    $("#convertToFahrenheit").click(function() {
        if (fahrenheit == false) {
            $("#temperature").text((($("#temperature").text() * (9/5)) + 32));
        }
        fahrenheit = true;
    });
});

Using a Weather API

In this tutorial, we are going to build a weather query system using OpenWeatherMap's API.

Go ahead, try it out!

Note that this will not work if the url is set to "https". Simply change the url to "http" in the browser and it should work.

City:

Main Weather:

Description:

Temperature:

Pressure:

Humidity: