-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
93 lines (90 loc) · 3.66 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<title>Go-GIFY</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="img/icon.png" type="image/icon type">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- My script file -->
<script type="text/javascript" src="js/index.js"></script>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- My stylesheet -->
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<div id="main-div">
<!-- navigation bar -->
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper white">
<a href="index.html" class="brand-logo center"><img src="img/logo.png" /></a>
</div>
</nav>
</div>
<!-- search section -->
<div id="search-div">
<nav>
<div class="nav-wrapper light-blue darken-2">
<form onsubmit="searchGif(); return false;">
<div class="input-field white">
<input id="query" type="search" placeholder="search" required>
<label class="label-icon" for="search"><i class="material-icons">search</i></label>
<i class="material-icons">close</i>
</div>
</form>
</div>
</nav>
</div>
<!-- play pause section -->
<div class="center" id="pause-play">
<span>
<a class="waves-effect waves-light btn black" onclick="pausePlay(0)"><i class="material-icons left">play_circle_filled</i>Play</a>
</span>
<span>
<a class="waves-effect waves-light btn black" onclick="pausePlay(1)"><i class="material-icons left">pause_circle_filled</i>Pause</a>
</span>
</div>
<!-- section to display the GIFs -->
<div id="content-div" class="row ">
<script type="">
const app = document.getElementById('content-div');
const trendingUrl = "https://api.giphy.com/v1/gifs/trending?&api_key=6gB95G4VQIE6zjRlryyFgXjTpxfRzCnf&limit=6";
var request = new XMLHttpRequest();
request.open('GET',trendingUrl,true);
request.onload = function(){
var dataFetched = JSON.parse(this.response);
if(request.status>=200 && request.status<=400){
document.getElementById("content-div").innerHTML = "";
for(var i=0;i<6;i++){
const gifDiv = document.createElement('div');
gifDiv.setAttribute('class','col s12 m4 l3 gif-div');
app.appendChild(gifDiv);
const newgif = document.createElement('img');
newgif.setAttribute('src', dataFetched.data[i].images.original.url);
gifDiv.appendChild(newgif);
}
}
else{
console.log("error"); //to be edited
}
}
request.send();
</script>
</div>
</div>
<!-- pagination div -->
<ul class="pagination center" id="paginate">
<li class="disabled"><a href="#!"><i class="material-icons">chevron_left</i></a></li>
<li class="active black" id="1"><a onclick="display(1)">1</a></li>
<li class="waves-effect" id="2"><a onclick="display(2)">2</a></li>
<li class="waves-effect" id="3"><a onclick="display(3)">3</a></li>
<li class="waves-effect" id="4"><a onclick="display(4)">4</a></li>
<li class="waves-effect" id="5"><a onclick="display(5)">5</a></li>
<li class="disabled"><a href="#!"><i class="material-icons">chevron_right</i></a></li>
</ul>
<!-- Compiled and minified JavaScript at the end of body for optimized loading-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>