jQueryAJAX.js

(function() {
  'use strict';
  var counter = 0; // count number of posts received
  var jsonURL = 'https://credentials-api.generalassemb.ly/explorer/posts';

  $('#load-more').click(function() {
    var $loadButton = $(this);
    $loadButton.prop('disabled', true);
    $loadButton.html('Exploring the archive...');
    var $spinner = $('<i>', {
      class: 'fa fa-circle-o-notch fa-spin'
    }).insertAfter($loadButton);

    $.getJSON(jsonURL + '?offset=' + counter, { // query endpoint with offset, i.e. counter
      })
      .done(function(data) {
        if (data.posts.length > 0) {
          $.each(data.posts, function(i, post) { // for each post create new article
            var $article = $('<article>').prependTo('#article-list');
            var $i = $('<i>', {
              class: 'fa ' + post.category
            }).prependTo($article);
            var $h2 = $('<h2>').html('From the Archive').insertAfter($i);
            var $h1 = $('<h1>').html(post.title).insertAfter($h2);
            var $h3 = $('<h3>').html(post.date).insertAfter($h1);
            var $p = $('<p>').html(post.blurb).insertAfter($h3);
          });
          counter += data.posts.length; // increment counter
          $loadButton.prop('disabled', false);
          $loadButton.html('LOAD MORE');
          $loadButton.removeClass('fa fa-circle-o-notch fa-spin');
        } else {
          $loadButton.prop('disabled', true);
          $loadButton.removeClass('fa fa-circle-o-notch fa-spin');
          var $message = $('<p>').html('End of Archive');
          $loadButton.replaceWith($message);
        }
      })
      .fail(function(data) {
        $loadButton.prop('disabled', true);
        var $message = $('<p>').html('Something Went Wrong');
        $loadButton.replaceWith($message);
        $('<i>', {
          class: 'fa fa-exclamation-triangle'
        }).insertAfter($message);
      })
      .always(function(data) {
        $spinner.remove(); // always remove spinner
      });
  });
})();