JSFiddle - React, Tailwind, and code Playground

by Mark Pitman

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<body>
<script>
function search() {
var apiKey = 'd8zycayn6vjuk9hbfwd8hyt4';
var item = $(".item");
  $.ajax({
    type: 'GET',
    url: "https://api.gettyimages.com/v3/search/images/creative?phrase=item.value",
    beforeSend: function(request) {
      request.setRequestHeader("Api-Key", apiKey);
    }
  })
  .done(function(data) {
    console.log("Success with data")
    for (var i = 0; i < data.images.length; i++) {
      $("#item").append("<img src='" + data.images[i].display_sizes[0].uri + "'/>");
    }
  })
  .fail(function(data) {
    alert(JSON.stringify(data, 2))
  });
  return false;
}
</script>
  <form class="form-inline" action="" method="post" onsubmit="search(); return false;">
    <div class="form-group">
      <input type="text" class="form-control " id="item" name="item" placeholder="Search for an Image">
    </div>
    <input class="btn btn-default" type="button" value="Submit" onClick="search();">
    <br>
    <br>
  </form>
</body>