Created
June 28, 2017 23:06
-
-
Save arbianchi/d4e16e09cc84be20074840b73c0075a8 to your computer and use it in GitHub Desktop.
Giphy Homework Feedback
This file contains 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
$(document).ready(function(){ | |
//Declare topics | |
var topics = ["Spongebob", "Patrick", "Rick and Morty", "Peter Griffin", "Stewie Griffin", "Quagmire"]; | |
//Make initial buttons | |
for (i=0; i<topics.length; i++) { | |
makeButton(topics[i]); | |
} | |
//Make form for new button | |
$("#addGif").click(function() { | |
// ADINA: Do you mean to set this as a global variable? You probably want 'var text' | |
text = $("input").val(); | |
// In javascript, an empty string is falsey and a non-empty string is truthy, therefore you can simply use if (text)... | |
if (text !== "") { | |
$("input").val(""); | |
makeButton(text); | |
} | |
}); | |
}); | |
function makeButton(text) { | |
var button = $("<button>"); | |
button.html(text); | |
button.addClass("btn btn-primary gif-button"); | |
button.click(function(){ | |
getGif($(this).text()); | |
}) | |
$("#buttons").append(button); | |
} | |
function getGif(search) { | |
var apiKey = "78fec19e2d8242fbae167723b8736325"; | |
var queryURL = "https://api.giphy.com/v1/gifs/search?q=" + search + "&api_key=" + apiKey + "&limit=10"; | |
$.ajax({ | |
url: queryURL, | |
method: "GET" | |
}).done(function(response) { | |
console.log(response); | |
var gifs = response.data; | |
for (i=0; i<gifs.length; i++) { | |
//Make container | |
var container = $("<div>").addClass("img text-center"); | |
//Append Gif and rating | |
var gif = $("<img>").attr("src", gifs[i]["images"]["downsized_still"]["url"]); | |
gif.attr("data-state", "still"); | |
gif.attr("data-still", gifs[i]["images"]["downsized_still"]["url"]); | |
gif.attr("data-animate", gifs[i]["images"]["downsized"]["url"]); | |
gif.click(function() { | |
var state = $(this).attr("data-state"); | |
console.log($(this)); | |
if (state === "still") { | |
$(this).attr("src", $(this).attr("data-animate")); | |
$(this).attr("data-state", "animated"); | |
} else if (state !== "still") { | |
$(this).attr("src", $(this).attr("data-still")); | |
$(this).attr("data-state", "still"); | |
} | |
}); | |
container.append("Rating: " + gifs[i]["rating"]) | |
container.append(gif); | |
$("#gifs").prepend(container); | |
} | |
}) | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment