Build Simple RSS Feed reader jQuery

We built a neat little RSS reader for https://code.base64.co.za which involves reading the RSS feed from https://base64.co.za/rss and displaying the retrieved info in a stylish Owl Carousel.

Let's start with the jQuery:

custom.js

$(document).ready(function () {


  //Initialise owl carousel
  $(".owl-carousel").owlCarousel({
  });

  $.get("https://base64.co.za/rss", function(data) {

      var $xml = $(data);
      $xml.find("item").each(function() {
          var $this = $(this),
              item = {
                  title: $this.find("title").text(),
                  link: $this.find("link").text(),
                  description: jQuery.trim($this.find("description").text()).substring(0, 70).split(" ").slice(0, -1).join(" ") + "...",
                  pubDate: $this.find("pubDate").text(),
                  creator: $this.find("creator").text()
          }
          
          post = "<div class='testimonial-item text-gray-2'><blockquote><p><a href='"+item.link+"'>"+item.title+"</a></p>"+item.description+"<small>"+item.creator+"</small></blockquote></div>";

          $("#techPosts").trigger('add.owl.carousel', post);
          $("#techPosts").trigger('refresh.owl.carousel');
      });
  });

  $("#techPosts").trigger('play.owl.carousel');

});


$('.owl-carousel').owlCarousel({
    loop:false,
    margin:10,
    responsiveClass:true,
    responsive:{
        0:{
            items:1,
        },
        600:{
            items:2,
        },
        1000:{
            items:3,

        }
    }
})

The first thing to note is the initialsation of the Owl Carousel using:

$(".owl-carousel").owlCarousel({});

The next step simply makes an Ajax call and gets the all of the posts in the Base 64 RSS feed. We then iterate through the retrieved posts and grab the following item attributes:

  • title
  • link
  • description
  • pubDate
  • creator

An HTML string is then compiled using this information and the post is inserted into the 'techPosts' div. The 'techPosts' div looks as follows:

<div id="techPosts" class="owl-carousel" data-autoplay="true" data-autoplay-hover-pause="true" data-items="3"></div>

Each time a post is added to the 'techPosts' div the OwlCarousel is refreshed so as to reload the latest posts with the following line:

$("#techPosts").trigger('refresh.owl.carousel');