JSFiddle - React, Tailwind, and code Playground

by Yamini Sontakke

HTML

<input type="button" value="Loadmore"/>
<div class="loading">Loading...</div>
<div class="app-wrapper"></div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

JavaScript

var myApp = function(){};
  myApp.prototype = {
    iterator: 1,
    masonryTimeoutClear: "",

    init: function(request, callback) {
      var self = this;

      self.iterator++;

      request = encodeURIComponent(request.trim());
      this.callAjax(request, callback);

      jQuery(".wrapper").html("").hide();
      jQuery(".loading").show();
    },

    callAjax: function(request, callback) {
      var self = this;

      var ajaxRequest = $.ajax({
        url: "https://pixabay.com/api/?username=mjweaver01&key=1631539-db8210cabd2636c6df59812df&q=" + request + "&image_type=photo",
        success: function(response) {
          self.parseResponse(response);
        },
        error: function(response) {
          console.log(response);
        }
      })

      ajaxRequest.then(function() {
        if(callback) {
          callback();
        }
      })
    },
      parseResponse: function(response) {
      var self = this;

      //console.log(response.hits);
      jQuery.each(response.hits, function(index, value) {
        jQuery(".app-wrapper").prepend("<div class='image image" + index + "' style='width:" + value.webformatWidth + "px; height:" + value.webformatHeight + "px; background: url(" + value.webformatURL + ");'><a href='" + value.pageURL + "' target='_blank'><div class='overlay'></div></a><div class='hidden'></div></div>");
      });
		jQuery(".loading").hide();
    }
   }
  //----------------------------------

  var myAppIns = new myApp();

  jQuery(function() {
    // dogs is the request parameter username mjweaver01 this is the sample username u need to create ur own username and api key once create . Hope it makes sense
    myAppIns.init("dogs");
  })