<article class="api-post-container">
  <h1 class="api-post-title">Placeholder Title</h1>
  <p class="api-post-meta">By <span class="api-post-meta__author">J Bloggs</span> | Posted on <span class="api-post-meta__date">01/01/2017</span></p>
  <div class="api-post-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Modo etiam paulum ad dexteram de via declinavi, ut ad Pericli sepulcrum accederem. Hoc est non modo cor non habere, sed ne palatum quidem. Utilitatis causa amicitia est quaesita. Quae hic rei publicae vulnera inponebat, eadem ille sanabat.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Modo etiam paulum ad dexteram de via declinavi, ut ad Pericli sepulcrum accederem. Hoc est non modo cor non habere, sed ne palatum quidem. Utilitatis causa amicitia est quaesita. Quae hic rei publicae vulnera inponebat, eadem ille sanabat.</p>
  </div>
</article>

body {
  background-color: #fafafa;
  color: #333;
  font: 1.2em/1.5 Open Sans, sans-serif;
}

.api-post-container {
  padding: 1em;
  max-width: 40em;
  margin: 0 auto;
}

.api-post-meta {
  font-size: 0.8em;
  border-bottom: 1px solid #eee;
  padding-bottom: 1em;
}

// WordPress endpoint to request
const endpoint = 'https://12devsofxmas.co.uk/wp-json/wp/v2/posts?_embed';

// Make HTTP request to WordPress using jQuery
$.getJSON( endpoint, function( data ) {

  // Grab the most recent post
  const post = data[0];
  
  // Format date
  const date = new Date( post.date );
  
  // Swap out the placeholder content with the post content
  $( '.api-post-title' ).html( post.title.rendered );
  $( '.api-post-meta__author' ).html( post._embedded.author[0].name );
  $( '.api-post-meta__date' ).html( date.toLocaleDateString() );
  $( '.api-post-content' ).html( post.content.rendered );
  
});