Skip to content

Instantly share code, notes, and snippets.

/index.html

Created July 30, 2015 14:46
Show Gist options
  • Save anonymous/d4f456a628ccd52b8f09 to your computer and use it in GitHub Desktop.
Save anonymous/d4f456a628ccd52b8f09 to your computer and use it in GitHub Desktop.
Download ZIP
Giphy API FTW! // source http://jsbin.com/bixeyu
Raw
index.html
<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<title>Giphy API FTW!</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style id="jsbin-css">
html,body{
padding:0;
margin:0;
text-align:center;
background:#ddd;
}
#query{
}
#gifs{
position:relative;
height:100%;
width:100%;
margin-left:30px;
}
#search{
margin:5px;
}
iframe{
width:75%;
height:75%;
}
h1{
font-size:20px;
font-family:helvetica,arial;
padding:0;
margin:5px;
}
.mask{
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
opacity:0.6;
filter:alpha(opacity=60);
}
</style>
</head>
<body>
<h1>GIPHWATCH</h1>
<form id="search_giphy">
<input id="query" placeholder="Choose a gif theme" /><br/>
<input type="submit" id="search"/>
<button type="button">Return</button>
</form>
<div id="gifs">
</div>
<script id="jsbin-javascript">
$(document).ready(function(e){
$("button").hide();
$("#search").click(function(){
$("#search").hide();
$("h1").hide();
$("#query").hide();
$("button").show();
$("#gifs").show();
});
$("button").click(function(){
$("#search").show();
$("h1").show();
$("#query").show();
$("button").hide();
$("#gifs").hide();
});
$("#search_giphy").submit(function(e){
e.preventDefault();
var rand = Math.floor(Math.random()*15);
var q = encodeURIComponent($("#query").val());
var xhr = $.get("http://api.giphy.com/v1/gifs/search?api_key=dc6zaTOxFJmzC&limit=3&q="+q);
xhr.done(function(data) {
$("#gifs").empty();
$.each(data.data,function(i,obj){
//if(rand ==i){
$("#gifs").append("<div class='container'><div class='mask'></div><iframe src="+obj.embed_url+"/></div>");
});
});
});
});
</script>
<script id="jsbin-source-css" type="text/css">html,body{
padding:0;
margin:0;
text-align:center;
background:#ddd;
}
#query{
}
#gifs{
position:relative;
height:100%;
width:100%;
margin-left:30px;
}
#search{
margin:5px;
}
iframe{
width:75%;
height:75%;
}
h1{
font-size:20px;
font-family:helvetica,arial;
padding:0;
margin:5px;
}
.mask{
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
opacity:0.6;
filter:alpha(opacity=60);
}</script>
<script id="jsbin-source-javascript" type="text/javascript">
$(document).ready(function(e){
$("button").hide();
$("#search").click(function(){
$("#search").hide();
$("h1").hide();
$("#query").hide();
$("button").show();
$("#gifs").show();
});
$("button").click(function(){
$("#search").show();
$("h1").show();
$("#query").show();
$("button").hide();
$("#gifs").hide();
});
$("#search_giphy").submit(function(e){
e.preventDefault();
var rand = Math.floor(Math.random()*15);
var q = encodeURIComponent($("#query").val());
var xhr = $.get("http://api.giphy.com/v1/gifs/search?api_key=dc6zaTOxFJmzC&limit=3&q="+q);
xhr.done(function(data) {
$("#gifs").empty();
$.each(data.data,function(i,obj){
//if(rand ==i){
$("#gifs").append("<div class='container'><div class='mask'></div><iframe src="+obj.embed_url+"/></div>");
});
});
});
});</script></body>
</html>
Raw
jsbin.bixeyu.css
html,body{
padding:0;
margin:0;
text-align:center;
background:#ddd;
}
#query{
}
#gifs{
position:relative;
height:100%;
width:100%;
margin-left:30px;
}
#search{
margin:5px;
}
iframe{
width:75%;
height:75%;
}
h1{
font-size:20px;
font-family:helvetica,arial;
padding:0;
margin:5px;
}
.mask{
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
opacity:0.6;
filter:alpha(opacity=60);
}
Raw
jsbin.bixeyu.js
$(document).ready(function(e){
$("button").hide();
$("#search").click(function(){
$("#search").hide();
$("h1").hide();
$("#query").hide();
$("button").show();
$("#gifs").show();
});
$("button").click(function(){
$("#search").show();
$("h1").show();
$("#query").show();
$("button").hide();
$("#gifs").hide();
});
$("#search_giphy").submit(function(e){
e.preventDefault();
var rand = Math.floor(Math.random()*15);
var q = encodeURIComponent($("#query").val());
var xhr = $.get("http://api.giphy.com/v1/gifs/search?api_key=dc6zaTOxFJmzC&limit=3&q="+q);
xhr.done(function(data) {
$("#gifs").empty();
$.each(data.data,function(i,obj){
//if(rand ==i){
$("#gifs").append("<div class='container'><div class='mask'></div><iframe src="+obj.embed_url+"/></div>");
});
});
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment