API Giphy - Comment afficher une image à partir d'un résultat de recherche?

Question

Le lien GitHub vers l'API Giphy est ici: https://github.com/Giphy/GiphyAPI.

Mon problème: Depuis que je suis nouveau, je suis coincé en ce moment. Je reçois des gifs aléatoires de l'API giphy et non le résultat de recherche spécifique que l'utilisateur veut.

Comment puis-je obtenir le résultat de recherche spécifique que l'utilisateur souhaite au lieu de gifs aléatoires?

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

Answer 1

Dans votre js snippet vous demandez un résultat aléatoire au lieu de faire une recherche par texte. L'URL dans votre demande est (notez le mot-clé aléatoire)

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

au lieu de quelque chose comme (extrait de la documentation de giphy)

http://api.giphy.com/v1/gifs/search?q=funny+cat&api_key=dc6zaTOxFJmzC