CODEWITHSUNDEEP
javascriptjqueryhtmljsongiphy-api
spidey677
spidey677

Reputation: 419

GIPHY API - How do I search for Giphs?

My problem: Looks like my code is incorrect somewhere. Searching isn't working. I'm new to working with API's.

How can I get the specific search result that the user searches for?

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

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.open('GET', 'http://api.giphy.com/v1/gifs/search?q=funny+cat&api_key=dc6zaTOxFJmzC');


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();
});

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>

Upvotes: 0

Views: 7800

Answers (2)

Tommy Thompson
Tommy Thompson

Reputation: 101

Once the user input is extracted, you can put in into a variable...

Your API Link (copied here) is just searching for "funny cat". request.open('GET', 'http://api.giphy.com/v1/gifs/search?q=funny+cat&api_key=dc6zaTOxFJmzC');

You can fix this by doing something like this...

var searchTerm = prompt('Add your search term here'); searchTerm = searchTerm.trim().replace(/ /g, "+"); // adds a + wherever a space is request.open('GET', 'http://api.giphy.com/v1/gifs/search?q=' + searchTerm + '&api_key=dc6zaTOxFJmzC');

Since, I'm not sure if you pasted all of the all the code you are using, I only demoed how you can substitute a phrase like funny+cat into a variable called searchTerm.

In order to pull the user's input out of the <input> field, you use jQuery and then pass it into your search term variable.

Oddly enough, I've done a project with the Giphy API.

Upvotes: 1

Tommy Thompson
Tommy Thompson

Reputation: 101

Here is a solution with jQuery. For more info please refer to their docs... http://api.jquery.com/

Also note that the Giphy API replies back with a URL to an image, not an image itself. Hence, the <img> tag replaced the <p> you originally used. Use src attribute to render an image with the url.

Check your browser's console log to see how the API response looks.

Below is the full HTML, note that jQuery must always be linked in above your code.

<!DOCTYPE html>
<html>
<head>
  <title>Giphy App</title>
</head>
<body>
  <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" id="reset_button" value="Reset">
      </form>
      <div class="rando_facts animated bounceIn">
        <img id="here_is_gif" src=""/>
      </div>
  </div>

  <!-- Link in jQuery from CDN -->
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

  <!-- My JavaScript -->
  <script type="text/javascript">

    // This waits for the page to load before calling our jQuery
    $( document ).ready(function(){

      // Part 1 - Collect User Input Using jQuery Click Listener note we use the class (.) of search_button
      $('.search_button').on('click', function(){

        // Collect user by grabbing the input form's value via id (#)
        var userInput = $('#form-value').val().trim();
        
        // Change the input to suit the API (ie change spaces to +)
        userInput = userInput.replace(/ /g, "+");

        // Create the Giphy API URL
        var queryURL = 'http://api.giphy.com/v1/gifs/search?q=' + userInput + '&api_key=dc6zaTOxFJmzC';

        // Part 2 - Use AJAX to call GIPHY API (note that the .done() function waits for the API to respond)
        $.ajax({url: queryURL, method: 'GET'}).done(function(response){

          // This is the API response data. It's a JSON object of 25 gifs
          console.log(response.data);

          // For simplicity, we will take the first gif (ie. at postion 0)
          var giphyURL = response.data[0].images.fixed_height.url;
          console.log(giphyURL)

          // Now you can pass that into your "here_is_gif" <img> tag using its id (#)
          $('#here_is_gif').attr('src', giphyURL);

        });

        // Part 3 - Clear the Gif using the reset_button id (#)
        $('#reset_button').on('click', function(){
          // Grab the img using the id and change the src to empty to remove the image
          $('#here_is_gif').attr("src",'');
        })


        // If using a jQuery click listner on a Submit button, you need to return false to prevent the default page refresh
        return false;
      })
      

    });

  </script>

</body>
</html>

Upvotes: 2

Related Questions