Editorial search with links

Example of searching using the Getty Images API

HTML

<input style="width:50%" type="text" id="apikey" placeholder="Api-Key" value="3e63vcvnkc2pznf5xgb6afcj">
<input style="width:50%" type="text" id="phrase" placeholder="Phrase" value="election">
<button onclick="performQuery()">Search</button>
<br><br><br>
<div id="output"></div>

JavaScript

//Search for images with an api key and show the output


var performQuery = function () {
    var apiKey = $("#apikey").val()
    var phrase = $("#phrase").val()

    $.ajax({
        type:'GET',
    url:"https://api.gettyimages.com/v3/search/images?fields=id%2Cpreview%2Creferral_destinations%2Ctitle&phrase=" + encodeURIComponent(phrase) + "&sort_order=most_popular",
        beforeSend: function (request)
        {
            request.setRequestHeader("Api-Key", apiKey);
        }
    }).done(function(data){
            console.log("Success with data", data)
            $("#output").empty();
            for(var i = 0;i<data.images.length;i++)
            {
            	var link = data.images[i].referral_destinations[0].uri;
              var image = data.images[i].display_sizes[0].uri;
              var title = data.images[i].title;
            	 $("#output").append("<article>");
               $("#output").append("<a target=\"_blank\" href=\"" + link + "\"><img src=\"" + image + "\"/></a>");
               $("#output").append("<footer>" + title + "</footer>")
               $("#output").append("<article>");
            }  
    }).fail(function(data){
            alert(JSON.stringify(data,2))
        });
}