Current Meow Click

MeowClick.js

window.onload = function() {
  console.log("OH SNAP, Kittens!!!!");
  let searchButton = document.getElementById("searchButton");
  let searchInput = document.getElementById("searchInput");
  let meowImage = document.getElementById("randomGliphImage");

  searchButton.addEventListener("click", fetchGiphy);

  function fetchGiphy() {
    //Go get the kitten stuff meow!!
    let xhr = new XMLHttpRequest();

    //open seasme
    xhr.open(
      "GET",
      "https://api.giphy.com/v1/gifs/random?api_key=dc6zaTOxFJmzC&tag=kittens"
    );

    //what to do when you return?
    xhr.onload = function() {
      if (xhr.status === 200 && xhr.readyState === 4) {
        let payload = JSON.parse(xhr.response);
        //we just want the image_url from data!
        console.log(payload.data.image_url);
        updateMeowImage(payload.data.image_url);
      }
    };

    function updateMeowImage(imageURL) {
      //does what with it?
      //set the attribute of our image tag to that imageURL string!
      //we need access to that image element on the page!!!!
      meowImage.src = imageURL;
    }

    //go get it already
    xhr.send();
  }
};