Untitled

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <form id='search'>
      <input id='query' type='text'/>
    </form>
    <div id='search-results'></div>
    <script src='http://code.jquery.com/jquery-2.2.0.min.js'></script>
    <script>
    $("#search").submit(function(event) {
      event.preventDefault();
      var userInput = $("#query").val();
      getRequest(userInput);
    });

    function getRequest(userInput){
      $.ajax({
        url: "http://www.giantbomb.com/api/search",
        type: "GET",
        data: {
          resources: "game",
          query: userInput,
          api_key: "YOUR_API_KEY_HERE",
          format: "jsonp",
          crossDomain: true,
          limit: 15,
          field_list: "platforms,name,image,original_release_date,site_detail_url",
          json_callback: 'showResults'
        },
        dataType: "jsonp"
      }).done(function(data) {
        showResults(data.results);
        console.log(data);
      });
    }

    function showResults(result) {

      var html = "";
      $.each(result.results, function(index, value) {
        var gameName = value.name;
        var boxArt = value.image ? value.image.icon_url : '';
        var releaseDate = value.original_release_date;
        var platform = value.platforms.name;
        var site_detail = value.site_detail_url;
        html += "<li><p>" + gameName + "</p></li>" + "<img src=" +boxArt + ">" + "<p>" + releaseDate + "</p>" + platform + "</p>" + "<a href='" + site_detail + "'><p>Click here for more information</p></a>";
      });

      $("#search-results").html(html);

    }
    </script>
  </body>
</html>