-
Notifications
You must be signed in to change notification settings - Fork 0
/
week-6-homework.html
114 lines (91 loc) · 3.89 KB
/
week-6-homework.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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html>
<head>
<title>GIFtastic!</title>
<!--Link for Bootstrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Rendered buttons will get dumped Here -->
<div id="buttons-view">
<button data-animal="cat">Cat</button>
<button data-animal="dog">Dog</button>
<button data-animal="bird">Bird</button>
</div>
<div class="panel-heading">
<form id="gif-add-input">
<label for="gif-input">Add an animal</label>
<input type="text" id="gif-input"><br>
<!-- Button triggers new animal button to be added -->
<input id="add-gif" type="submit" value="Add an animal">
</form>
</div>
<!-- Gifs will get dumped here -->
<div id="gifs-go-here"></div>
<script type="text/javascript">
var animals = ["Dogs", "Cats", "Birds"];
function renderButtons() {
// Deleting the gifs prior to adding new gifs
$("#buttons-view").empty();
// Looping through the array of animals
for (var i = 0; i < animals.length; i++) {
// Then dynamicaly generating buttons for each animal in the array
// This code $("<button>") is all jQuery needs to create the beginning and end tag. (<button></button>)
var a = $("<button>");
// Adding a class of animal to our button
a.addClass("animal");
// Adding a data-attribute
a.attr("data-name", animals[i]);
// Providing the initial button text
a.text(animals[i]);
// Adding the button to the buttons-view div
$("#buttons-view").append(a);
}
}
$('button').on('click',function(){
var x = $(this).data("animal");
console.log(x);
// This is our info to point to our API databae
var queryURL = "http://api.giphy.com/v1/gifs/search?q="+x+"&api_key=dc6zaTOxFJmzC&limit=10";
$.ajax({url:queryURL,method:"GET"})
.done(function(response){
console.log(response);
//run a for loop so you can run through all of the gif objects in the array.
for(var i=0; i<response.data.length;i++){
//creates a new div using jquery
var animalDiv = $('<div>');
//creates a new paragraph for the "rating" text. The text is in the response data.
var p = $('<p>').text("Rating: "+response.data[i].rating);
//creates the image tag for all of the gifs and sets different attributes for the different state
// of the gif. We'll need this later so we can pause the gif using the on click function.
var animalImage = $('<img>');
animalImage.attr('src',response.data[i].images.fixed_height_still.url);
animalImage.attr('data-still',response.data[i].images.fixed_height_still.url);
animalImage.attr('data-animate',response.data[i].images.fixed_height.url);
animalImage.attr('data-state',"still");
animalImage.addClass("gif");
animalDiv.append(p);
animalDiv.append(animalImage);
$('#gifs-go-here').append(animalDiv);
//here is our on click function to start and stop the gifs once loaded onto the page
} //end of the for loop
$("img").on("click", function() {
// The attr jQuery method allows us to get or set the value of any attribute on our HTML element
var state = $(this).attr("data-state");
// If the clicked image's state is still, update its src attribute to what its data-animate value is.
// Then, set the image's data-state to animate
// Else set src to the data-still value
if (state === "still") {
$(this).attr("src", $(this).attr("data-animate"));
$(this).attr("data-state", "animate");
} else {
$(this).attr("src", $(this).attr("data-still"));
$(this).attr("data-state", "still");
}
})
})
})
</script>
</body>
</html>