gifs/main.js at main · venkateshjamge/gifs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
        /* 1. Grab the input value */

        var js = document.querySelector(".js-go");

        js.addEventListener('click', function() {
            var input = document.querySelector("input").value;
            var query = input.split(' ').join('+');
            javaS(query);
        });

        var js_userinput = document.querySelector(".js-userinput");

        js_userinput.addEventListener('keyup', function(e) {

            if (e.key == "Enter") {
                var input = document.querySelector("input").value;
                var query = (input.split(' ')).join('+');
                javaS(query);

            }
        });


        /* 2. do the data stuff with the API */
        function javaS(url2) {
            var url1 = "https://api.giphy.com/v1/gifs/search?q=";

            var url3 = "&api_key=SDEsWMHoj4DO7LFMxWFHlVJVkElcDm8h";

            var url = url1 + url2 + url3;
            // AJAX Request
            var GiphyAJAXCall = new XMLHttpRequest();
            GiphyAJAXCall.open('GET', url);
            GiphyAJAXCall.send();

            GiphyAJAXCall.addEventListener('load', function(e) {

                var data = e.target.response;
                //console.log(data);
                fun(data);
                //console.log(data);
                //var v = document.querySelector(".js-container");
                //v.innerHTML = data;
            });
        }


        /* 3. Show me the GIFs */

        function fun(input) {


            var collectedData = JSON.parse(input);
            console.log(collectedData);
            var v = document.querySelector(".js-container");
            v.innerHTML = "";
            //console.log(collectedData.data.length)
            var imageURL = collectedData.data;
            imageURL.forEach(element => {
                //console.log(element.images.fixed_height.url);
                var img = element.images.fixed_height.url;

                v.innerHTML += "<img src=\"" + img + "\" class=\"container-img\"> ";
            });


            var js = document.querySelector(".js-go");

            js.addEventListener('click', function() {

                var input = document.querySelector("input").value;
                javaS(input);
            });

            var js_userinput = document.querySelector(".js-userinput");

            js_userinput.addEventListener('keyup', function(e) {
                if (e.key == "Enter") {
                    var input = document.querySelector("input").value;

                    javaS(input);

                }
            });


            //console.log(imageURL);
            //v.innerHTML = "<img src=\"" + imageURL + "\" > ";
        } //console.log(imageURL);
        //v.innerHTML = "<img src=\"" + imageURL + "\" > ";