-
Notifications
You must be signed in to change notification settings - Fork 0
/
giphyapp.html
124 lines (95 loc) · 2.56 KB
/
giphyapp.html
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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" type="image/x-icon" href="https://production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" />
<link rel="mask-icon" type="" href="https://production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" />
<title>CodePen - Giphy cycler</title>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans'>
<style>
*{
font-family:'Open sans';
text-align:center;
margin:0 auto;
}
body{
margin-top:10px;
}
input {
display:block;
margin-bottom: 20px;
border: 2px dotted #aaaaff;
background: #eee;
color: #444;
border-radius: 4px;
font-size: 20px;
}
#next {
display: block;
background: #222255;
border-radius: 5px;
font-size: 18px;
height: 40px;
box-shadow: 2px 2px #555;
border: none;
color: #fff;
}
label{
font-size:30px;
color:#555;
}
p{
color:#555;
}
#tst{
}
#tst img{
transition: all 1s;
position:relative;
/* translate(-1px,0px); */
/* left:1000px; */
max-width:600px;
}
</style>
</head>
<body translate="no" >
<label>Search Giphy:</label>
<input type="text" id="searchTerm" oninput="rval()"></input>
<!--div id="st"></div-->
<br>
<div id="tst"><img src=""></img></div>
<button id="next" onclick="changeOffset()" style="display:none">Don't like it? Try another!</button>
<script>
var rv = document.getElementById("searchTerm");
var nb = document.getElementById("next").style;
var xmlhttp = new XMLHttpRequest();
var url;
var n = 0;
var tstdiv = document.getElementById("tst");
function changeOffset() {
if (n >= 6) n = 0;
else n++;
rval();
}
function doit(arr, o) {
if (nb.display == "none") nb.display = "block";
// document.querySelector("#tst img").style.right = "1000px";
tstdiv.innerHTML =
"<img src='" + arr[o].images.downsized.url + "' style='width:100%'/><br><p>Copy to embed:<input type='text' value='" + arr[o].bitly_gif_url + "'></input></p>";
document.querySelector("#tst img").style.right = "0";
}
function rval() {
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myArr = JSON.parse(this.responseText);
doit(myArr.data, n);
}
};
url = "http://api.giphy.com/v1/gifs/search?q=" + encodeURI(rv.value) + "+&api_key=dc6zaTOxFJmzC&limit=7&offset=0";
xmlhttp.open("GET", url, true);
xmlhttp.send();
// document.getElementById("st").innerHTML = rv.value;
}
</script>
</body>
</html>