Requesting insecure content from secure context blocks request

[crianonim]

Your API urls have http as their protocol. This is fine when testing as localhost is also insecured http. However when you serve your content from https (like GitHub Pages) the browser will block it.

This makes pictures not to appear sometimes.

It affects you urls:

var kanyeGiphyCall =  "http://api.giphy.com/v1/gifs/search?api_key=yulIkLnLqFVIDmUCNqd8nYSbprM6tvN0&q=kanye";

var trumpGiphyCall = "http://api.giphy.com/v1/gifs/search?api_key=yulIkLnLqFVIDmUCNqd8nYSbprM6tvN0&q=trump";

If you just added s to http that should be enough (I checked that giphy can serve https content)

If you are curious about what is going on, please read:

https://developers.google.com/web/fundamentals/security/prevent-mixed-content/fixing-mixed-content

[jackbridger]

Fantastic issue, thank you for taking the time to share a solution and an explanation

[crianonim]

Always glad to help!