title: Giphy API - How do I display image from search result?
body: <p>GitHub link to the Giphy API is here: <a href="https://github.com/Giphy/GiphyAPI" rel="nofollow noreferrer">https://github.com/Giphy/GiphyAPI</a>.</p>
  
  <p>My problem: Since I'm new, I'm kinda stuck right now. I'm getting random gif's from the giphy API and not the specific search result the user wants.</p>
  
  <p>How can I get the specific search result that the user wants instead of random gifs? </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;h1&gt; Let's Search Some Gifs! &lt;/h1&gt;
  &lt;div class="info"&gt;
      &lt;p&gt; Search below to the wonderful world of Gifs! &lt;/p&gt;
          &lt;form class="gif-form"&gt;
              &lt;input type="text" id="form-value" class="search-input-rounded"&gt;
              &lt;button type="submit" class="search_button"&gt; Search for GIFs &lt;/button&gt;
              &lt;input type="reset" value="Reset"&gt;
          &lt;/form&gt;
          &lt;div class="rando_facts animated bounceIn"&gt;
              &lt;p id="here_is_gif"&gt; &lt;/p&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>document.addEventListener('DOMContentLoaded', function () {
  
  q = "+=";
  
  request = new XMLHttpRequest;
  request.open('GET', 'http://api.giphy.com/v1/gifs/random?api_key=dc6zaTOxFJmzC&amp;tag='+q, true);
  
  request.onload = function() {
      if (request.status &gt;= 200 &amp;&amp; request.status &lt; 400){
          data = JSON.parse(request.responseText).data.image_url;
          console.log(data);
          document.getElementById("here_is_gif").innerHTML = '&lt;center&gt;&lt;img src = "'+data+'"  title="GIF via Giphy"&gt;&lt;/center&gt;';
      } else {
          console.log('reached giphy, but API returned an error');
       }
  };
  
  request.onerror = function() {
      console.log('connection error');
  };
  
  request.send();
  });
  </code></pre>