9/4/2017 - 5:03 PM

Dynamic Elements

Dynamic Elements

<!DOCTYPE html>
<html lang="en">

  <meta charset="utf-8">
  <title>Animal Buttons</title>

  <button data-animal="cat">meow</button>
  <button data-animal="dog">woof</button>
  <button data-animal="bird">chirp</button>
  <div id="gifs-appear-here">
  <script src=""></script>
  <script type="text/javascript">
    // Adding click event listen listener to all buttons
    $("button").on("click", function() {
      // Grabbing and storing the data-animal property value from the button
      var animal = $(this).attr("data-animal");

      // Constructing a queryURL using the animal name
      var queryURL = "" +
        animal + "&api_key=dc6zaTOxFJmzC&limit=10";

      // Performing an AJAX request with the queryURL
          url: queryURL,
          method: "GET"
        // After data comes back from the request
        .done(function(response) {

          // storing the data from the AJAX request in the results variable
          var results =;

          // Looping through each result item
          for (var i = 0; i < results.length; i++) {

            // Creating and storing a div tag
            var animalDiv = $("<div>");

            // Creating a paragraph tag with the result item's rating
            var p = $("<p>").text("Rating: " + results[i].rating);

            // Creating and storing an image tag
            var animalImage = $("<img>");
            // Setting the src attribute of the image to a property pulled off the result item
            animalImage.attr("src", results[i].images.fixed_height.url);

            // Appending the paragraph and image tag to the animalDiv

            // Prependng the animalDiv to the HTML page in the "#gifs-appear-here" div