0

GitHub link to the Giphy API is here: https://github.com/Giphy/GiphyAPI.

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.

How can I get the specific search result that the user wants instead of random gifs?

HTML

<h1> Let's Search Some Gifs! </h1>
<div class="info">
    <p> Search below to the wonderful world of Gifs! </p>
        <form class="gif-form">
            <input type="text" id="form-value" class="search-input-rounded">
            <button type="submit" class="search_button"> Search for GIFs </button>
            <input type="reset" value="Reset">
        </form>
        <div class="rando_facts animated bounceIn">
            <p id="here_is_gif"> </p>
        </div>
</div>

JS

document.addEventListener('DOMContentLoaded', function () {

q = "+=";

request = new XMLHttpRequest;
request.open('GET', 'http://api.giphy.com/v1/gifs/random?api_key=dc6zaTOxFJmzC&tag='+q, true);

request.onload = function() {
    if (request.status >= 200 && request.status < 400){
        data = JSON.parse(request.responseText).data.image_url;
        console.log(data);
        document.getElementById("here_is_gif").innerHTML = '<center><img src = "'+data+'"  title="GIF via Giphy"></center>';
    } else {
        console.log('reached giphy, but API returned an error');
     }
};

request.onerror = function() {
    console.log('connection error');
};

request.send();
});
spidey677
  • 317
  • 1
  • 10
  • 27

1 Answers1

0

In your js snippet you are requesting a random result instead of doing a search by text. The url in your request is (notice the random keyword)

http://api.giphy.com/v1/gifs/random?api_key=dc6zaTOxFJmzC&tag=

instead of something like (taken from the giphy docs)

http://api.giphy.com/v1/gifs/search?q=funny+cat&api_key=dc6zaTOxFJmzC
Gnomo
  • 407
  • 4
  • 13
  • Hey, wrote my snippet of code like this: request.open('GET', 'http://api.giphy.com/v1/gifs/search?q=funny+cat&api_key=dc6zaTOxFJmzC'); doesn't work. – spidey677 Jan 12 '17 at 18:27
  • request.open('GET', 'http://api.giphy.com/v1/gifs/search?q=funny+cat&api_key=dc6zaTOxFJmzC'); doesn't work – spidey677 Jan 12 '17 at 18:35
  • What do you mean with "It doesn't work"? That you still get random pictures? – Gnomo Jan 13 '17 at 08:47