GIPHY API and Axios

Asked by At

I'm having some issues returning a GIPHY image to the page. Our homework prompt is to return info from OMDb API along with a matching GIPHY. I'm using axios and I have the javascript returning the movie title and info. The GIPHY API is loading into my console and is referencing the selected movie title from the user input, but I can't quite figure out how to get the GIPHY loaded to my actual page. Any suggestions would be great! I'm thinking it's the way I'm trying to return the GIPHY that I'm not making the right call.

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Movie and GIPHY API</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>

<body>
  <div class="container">
    <h1>Giphy Movie Search</h1>
    <div id="movie-search"></div>
    <!-- This form will be where users input data about the movies -->
    <form class="movie-form">
      <label id="search">Search for a movie</label>
      <input type="text" id="movie-input">
      <!-- This button will trigger our Axios call -->
      <input class="movieBtn" type="submit" value="Search">
    </form>
  </div>
<div class="container-one">
    <p id="title">Movie Title:</p>
    <p id="year">Year Released:</p>
    <p id ="genre">Genre:</p>
    <p id="actors">Actors:</p>
    <img id="movie-giphy"></img>
</div>
  <script type="text/javascript" src="api.js">
  </script>
</body>

</html>
//global variables

//OMDb API set up
var apiMov = "http://www.omdbapi.com/?apikey=4aba871a&t=";

//Giphy API set up
var apiGiphy = "http://api.giphy.com/v1/gifs/search?&api_key=jhXRfz62s0WM7lE63bU7AidiTF6ROBnx&q=";
//here we are setting up our variables to associate with its designated ID 
var input = document.querySelector("#movie-input");
var movieTitle = document.querySelector("#title");
var movieYear = document.querySelector("#year");
var movieGenre = document.querySelector("#genre");
var movieActors = document.querySelector("#actors");
var movieGiphy = document.querySelector("#movie-giphy");

//Functions

//In this function we are getting the movie data from the OMDb API and returning each aspect of the movie to the page
//Each aspect of the movie will show in it's designated spot
      function getMovieData() {
          axios.get(apiMov + input.value + "&?plot=long")
          .then(function (movieResponse) {
              movieTitle.innerHTML = "Movie Title: " + movieResponse.data.Title;
              movieYear.innerHTML = "Year: " + movieResponse.data.Year;
              movieGenre.innerHTML = "Genre: " + movieResponse.data.Genre;
              movieActors.innerHTML = "Actors: " + movieResponse.data.Actors;
          })
          .catch(function (error) {
              movieTitle.innerHTML = "An error has occured.";
              console.log(error.message);
          });
      }
//Here, we are running the function to return the giphy for the movie that is searched
      function getMovieGiphy() {
          console.log(getMovieGiphy);
          axios.get (apiGiphy + input.value)
          .then(function (giphyResponse){
              console.log(giphyResponse);
              let gif = document.createElement("img");
                    gif.className = "gif";
                    gif.src = giphyResponse.data.data[0].images.original.url;
                    console.log(gif);
          })
          .catch(function(error){
            movieGiphy.innerHTML = "An error has occured.";
            console.log(error.message);
        });
      }

      var button = document.querySelector(".movieBtn");
      button.addEventListener("click", function(){
        // prevent default will keep the page from reloading so your data persists after the event
          event.preventDefault();
        // moved this function inside of another function call so that you could prevent the page from loading
        getMovieData();
        getMovieGiphy();
      });

0 Answers