Skip to content

Instantly share code, notes, and snippets.

@asa-masterson
Last active Feb 18, 2020
Embed
What would you like to do?
Random Gif Generator w/ Giphy API
#gif-wrap
#gif-logo
img(src="https://storage.googleapis.com/chydlx/codepen/random-gif-generator/giphy-logo.gif")
button#new-gif New Gif
$(document).ready(function() {
// Initiate gifLoop for set interval
var refresh;
// Duration count in seconds
const duration = 1000 * 10;
// Giphy API defaults
const giphy = {
baseURL: "https://api.giphy.com/v1/gifs/",
apiKey: "7IfGSmZdSFRLfxQaPcLtpQamsqj1ySOa",
tag: "",
// TAG EG. funny
type: "random",
rating: ""
// RATING EG. pg-13
};
// Target gif-wrap container
const $gif_wrap = $("#gif-wrap");
// Giphy API URL
let giphyURL = encodeURI(
giphy.baseURL +
giphy.type +
"?api_key=" +
giphy.apiKey +
"&tag=" +
giphy.tag +
"&rating=" +
giphy.rating
);
// Call Giphy API and render data
var newGif = () => $.getJSON(giphyURL, json => renderGif(json.data));
// Display Gif in gif wrap container
var renderGif = _giphy => {
console.log(_giphy);
// Set gif as bg image
$gif_wrap.css({
"background-image": 'url("' + _giphy.image_original_url + '")'
});
// Start duration countdown
// refreshRate();
};
// Call for new gif after duration
// var refreshRate = () => {
// // Reset set intervals
// clearInterval(refresh);
// refresh = setInterval(function() {
// // Call Giphy API for new gif
// newGif();
// }, duration);
// };
// Call Giphy API for new gif
newGif();
const newGifButton = $('#new-gif');
newGifButton.click(newGif)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
body {position: relative; height: 100vh; width: 100%;}
#gif-wrap {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background-color: #000;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
z-index: -1;
}
#gif-logo {
position: fixed;
top: .5rem;
right: .5rem;
border-radius: 30px;
padding: 0 1rem;
background: #000;
img {
max-width: 150px;
}
}
#new-gif {
padding: .75rem 2.5rem;
font-weight: 600;
background: #424242;
z-index: 10;
color: #fff;
border-radius: 30px;
border: 0;
font-size: 14px;
position: fixed;
top: .5rem;
left: .5rem;
transition: background .15s ease;
cursor: pointer;
&:hover {
background: #626262;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment