GiphyTV

Date of creation: June 01, 2021
Client-side Programming Language: JavaScript

About

Get up to 5 random gifs from Giphy, changing every 10 seconds.
Made for the Week 2 assignment of the JavaScript online course offered by One Month.

GiphyTV

JavaScript Code

function callGiphy(count) {
    var url = "https://tv.giphy.com/v1/gifs/tv?api_key=CW27AW0nlp5u0&tag=giphytv";
    // AJAX Request
    var GiphyAJAXCall = new XMLHttpRequest();
    GiphyAJAXCall.open( 'GET', url );
    GiphyAJAXCall.send();

    GiphyAJAXCall.addEventListener('load',function(e){
        var data = e.target.response;
        pushToDOM(data, count);
    });
}

function pushToDOM(input, count) {
    count--;
    var container = document.querySelector("#sub-content");
    container.innerHTML = "";
    var response = JSON.parse(input);
    var image = response.data;
    console.log(image);
    var src = image.images.original.url;
    var title = image.title;
    var alt = "gif image of " + title;
    container.innerHTML = "<img src=\"" + src + "\" class=\"giphy-image\" title=\"" + title + "\" alt=\"" + alt + "\">";
    if (count > 0) {
        setTimeout(function(){ callGiphy(count); }, 10000);
    }
}

document.addEventListener('DOMContentLoaded', () => {
    callGiphy(5);
})

Credits and Attributions