-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
122 lines (97 loc) · 4.28 KB
/
index.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
115
116
117
118
119
120
121
122
<!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"></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 = ["Dog", "Cat", "Bird"];
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);
}
}
//get input from user. Store input in a variable. create and on click function for the submit buttong to render new items into our array which need to be buttons.
$('#add-gif').on('click', function(event){
event.preventDefault();
userInput = $('#gif-input').val().trim();
console.log(userInput);
animals.push(userInput);
console.log(animals);
renderButtons();
})
$(document).on('click', ".animal", function(){
var x = $(this).data("name");
console.log(x);
// This is our info to point to our API databae
var queryURL = "https://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.replace(/^http:\/\//i, 'https://'));
animalImage.attr('data-still',response.data[i].images.fixed_height_still.url.replace(/^http:\/\//i, 'https://'));
animalImage.attr('data-animate',response.data[i].images.fixed_height.url.replace(/^http:\/\//i, 'https://'));
animalImage.attr('data-state',"still");
animalImage.addClass("gif");
animalDiv.append(p);
animalDiv.append(animalImage);
$('#gifs-go-here').prepend(animalDiv);
//here is our on click function to start and stop the gifs once loaded onto the page
} //end of the for loop
$(document).on("click", "img", 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");
}
})
})
})
renderButtons();
</script>
</body>
</html>