is this fullcode for this search gif? 1

is this fullcode for this search gif?

const img = document.querySelector('img');
const btn = document.querySelector('button');
const form = document.querySelector('.form');
const search = document.getElementById('search');

btn.addEventListener('click', loadGIF);
form.addEventListener('submit', loadGIF);

function loadGIF(e) {
  e.preventDefault();
  fetch(
      'https://api.giphy.com/v1/gifs/translate?api_key=g3TEgnU2pGODGJrcvHcn36HwOhK3E8l9&s=random', {
        mode: 'cors'
      }
    )
    .then(function(response) {
      return response.json();
    })
    .then(function(json) {
      img.src = json.data.images.fixed_height.url;
    })
    .catch(function(err) {
      console.log(err);
    });
}

document.addEventListener('DOMContentLoaded', loadGIF);

Here is what the above code is Doing:
1. We’re selecting the img, button, and form elements from the DOM.
2. We’re adding an event listener to the button and form elements.
3. We’re creating a function called loadGIF that will be called when the button or form is clicked.
4. We’re using the fetch API to make a request to the Giphy API.
5. We’re using the .then() method to parse the response as JSON.
6. We’re using the .then() method to set the src attribute of the img element to the url of the GIF.
7. We’re using the .catch() method to log any errors to the console.
8. We’re calling the loadGIF function when the DOM content has loaded.

Similar Posts