Created
January 19, 2016 16:17
-
-
Save anonymous/5ca30470a40699bf78ad to your computer and use it in GitHub Desktop.
JS Bin // source http://jsbin.com/pajabu
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="http://jashkenas.github.io/underscore/underscore-min.js"></script> | |
| <script src="https://code.jquery.com/jquery-2.1.4.js"></script> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| .button { | |
| display: inline-block; | |
| margin-right: 30px; | |
| padding: 10px 20px; | |
| border: 1px solid black; | |
| cursor: pointer; | |
| } | |
| .button:hover { | |
| background: black; | |
| color: white; | |
| } | |
| .gifs-container { | |
| margin-top: 20px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>I want gifs of...</h1> | |
| <div class="button" id="cats-button">cats</div> | |
| <div class="button" id="kittens-button">kittens</div> | |
| <div class="button" id="dinosaurs-button">dinosaurs</div> | |
| <div class="gifs-container"> | |
| Img tags will go here | |
| </div> | |
| <script id="jsbin-javascript"> | |
| // I need to... | |
| // Get the correct data from the API | |
| // Find out where I can find a link to the gif | |
| // Make an IMG tag from that link | |
| // add img tag to our .gifs-container. | |
| var makeAPICall = function(query) { | |
| $.ajax({ | |
| url: "http://api.giphy.com/v1/gifs/search", | |
| data: { | |
| q: query, | |
| api_key: "dc6zaTOxFJmzC" | |
| }, | |
| success: function(data) { | |
| $(".gifs-container").html(""); | |
| _.each(data.data, function(gif) { | |
| $(".gifs-container").append($("<img>").attr("src", gif.images.fixed_height.url)); | |
| }); | |
| } | |
| }); | |
| }; | |
| $("#cats-button").click(function() { | |
| makeAPICall("cats"); | |
| }); | |
| $("#kittens-button").click(function(){ | |
| makeAPICall("kittens"); | |
| }); | |
| $("#dinosaurs-button").click(function() { | |
| makeAPICall("dinosaurs"); | |
| }); | |
| </script> | |
| <script id="jsbin-source-html" type="text/html"><!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="//jashkenas.github.io/underscore/underscore-min.js"><\/script> | |
| <script src="https://code.jquery.com/jquery-2.1.4.js"><\/script> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| </head> | |
| <body> | |
| <h1>I want gifs of...</h1> | |
| <div class="button" id="cats-button">cats</div> | |
| <div class="button" id="kittens-button">kittens</div> | |
| <div class="button" id="dinosaurs-button">dinosaurs</div> | |
| <div class="gifs-container"> | |
| Img tags will go here | |
| </div> | |
| </body> | |
| </html></script> | |
| <script id="jsbin-source-css" type="text/css">.button { | |
| display: inline-block; | |
| margin-right: 30px; | |
| padding: 10px 20px; | |
| border: 1px solid black; | |
| cursor: pointer; | |
| } | |
| .button:hover { | |
| background: black; | |
| color: white; | |
| } | |
| .gifs-container { | |
| margin-top: 20px; | |
| }</script> | |
| <script id="jsbin-source-javascript" type="text/javascript">// I need to... | |
| // Get the correct data from the API | |
| // Find out where I can find a link to the gif | |
| // Make an IMG tag from that link | |
| // add img tag to our .gifs-container. | |
| var makeAPICall = function(query) { | |
| $.ajax({ | |
| url: "http://api.giphy.com/v1/gifs/search", | |
| data: { | |
| q: query, | |
| api_key: "dc6zaTOxFJmzC" | |
| }, | |
| success: function(data) { | |
| $(".gifs-container").html(""); | |
| _.each(data.data, function(gif) { | |
| $(".gifs-container").append($("<img>").attr("src", gif.images.fixed_height.url)); | |
| }); | |
| } | |
| }); | |
| }; | |
| $("#cats-button").click(function() { | |
| makeAPICall("cats"); | |
| }); | |
| $("#kittens-button").click(function(){ | |
| makeAPICall("kittens"); | |
| }); | |
| $("#dinosaurs-button").click(function() { | |
| makeAPICall("dinosaurs"); | |
| }); | |
| </script></body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .button { | |
| display: inline-block; | |
| margin-right: 30px; | |
| padding: 10px 20px; | |
| border: 1px solid black; | |
| cursor: pointer; | |
| } | |
| .button:hover { | |
| background: black; | |
| color: white; | |
| } | |
| .gifs-container { | |
| margin-top: 20px; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // I need to... | |
| // Get the correct data from the API | |
| // Find out where I can find a link to the gif | |
| // Make an IMG tag from that link | |
| // add img tag to our .gifs-container. | |
| var makeAPICall = function(query) { | |
| $.ajax({ | |
| url: "http://api.giphy.com/v1/gifs/search", | |
| data: { | |
| q: query, | |
| api_key: "dc6zaTOxFJmzC" | |
| }, | |
| success: function(data) { | |
| $(".gifs-container").html(""); | |
| _.each(data.data, function(gif) { | |
| $(".gifs-container").append($("<img>").attr("src", gif.images.fixed_height.url)); | |
| }); | |
| } | |
| }); | |
| }; | |
| $("#cats-button").click(function() { | |
| makeAPICall("cats"); | |
| }); | |
| $("#kittens-button").click(function(){ | |
| makeAPICall("kittens"); | |
| }); | |
| $("#dinosaurs-button").click(function() { | |
| makeAPICall("dinosaurs"); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment