JSFiddle - React, Tailwind, and code Playground

by Matt Hopkins

HTML

<div id="blogWrapper">

</div>

JavaScript

function formatDate(date) {
  var year = date.getFullYear();

  var month = (1 + date.getMonth()).toString();
  month = month.length > 1 ? month : '0' + month;

  var day = date.getDate().toString();
  day = day.length > 1 ? day : '0' + day;
  
  return month + '/' + day + '/' + year;
}

$(function(){

	$.ajax({
    dataType: "json",
    url: 'https://public-api.wordpress.com/rest/v1.1/sites/naturalsubsistence.com/posts/',
    //data: 'data',
    success: function(data) {
    	for (i = 0; i < data.posts.length; i++) {
      	var post = $('<div id="' + data.posts[i].slug + '" class="post" />');
        $(post).append('<a href="?p=' + data.posts[i].slug + '"><h3>' + data.posts[i].title + '</h3></a>');
        var postDate = new Date(data.posts[i].date);
				$(post).append('<span class="date">' + formatDate(postDate) + '</span>');
        $(post).append(data.posts[i].excerpt);
        $(post).append('<a href="?p=' + data.posts[i].slug + '" class="readMoreBtn">Read More</a>');
      	$('div#blogWrapper').append(post);
      }
    }
  });

});