Searching for a gif in my Giphy api and pulling the trend list

JavaScript
#1

I want to search the Giphy API and successfully get a return result and after that, I want to be able to pull the trending list via <input class="btn" type="button" value="Trending">. I am unable to run the search. Not sure why.

Here is the codepen project i am working on.

#2

ok…just change the gif api url protocol to https instead of http.

This is because codepen uses https protocol and therefore all your apis used in codepen needs to be https as well.

#3

Doing that worked in codepen but i took out the form element and made it a div before hand. Why would the form interfere?

#4

That is because when you submit a form in html the page gets automatically reloaded by default. You can change this default behavior by using the code below.

document.querySelector("form").addEventListener("submit", function(event){
    event.preventDefault()
});

This JS code listens for form submit event and prevents the default auto loading of the page.

#5