<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>
  <button class="api-btn">Load Next Post</button>
</article>

body {
  background: #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;
}

.api-post-content {
  border-bottom: 1px solid #ddd;
  margin-bottom: 30px;
}

.api-btn {
  padding: 1em;
  background: #DA2A32;
  border: 0;
  appearance: none;
  color: #fff;
  font-size: 1em;
  font-family: Open Sans;
}

.api-btn:before {
  content: "⬅︎ ";
}

.api-btn:hover,
.api-btn:focus {
  cursor: pointer;
  background-color: #DE4149;
}

// Setup
const endpoint  = 'https://12devsofxmas.co.uk/wp-json/wp/v2/posts?_embed',
      request   = new XMLHttpRequest(),
      titleEl   = document.querySelector( '.api-post-title' ),
      authorEl  = document.querySelector( '.api-post-meta__author' ),
      dateEl    = document.querySelector( '.api-post-meta__date' ),      
      contentEl = document.querySelector( '.api-post-content' ),
      buttonEl  = document.querySelector( '.api-btn' );      

// Make request
request.open( 'GET', endpoint, true );
request.onload = () => {
  if ( request.status >= 200 && request.status < 400 ) {
    loadPosts( JSON.parse( request.responseText ) );
  } else {
    console.log( 'Error', request.status, request.statusText );
  }
};
request.onerror = () => console.log( 'Error: Request could not be made' );
request.send();

function loadPosts( posts ) {
  
  // Posts counter
  let thisPost = 0;
  
  // Show first post on load
  populatePost( posts[thisPost], posts[++thisPost] );
  
  // Load next post when button is clicked
  buttonEl.addEventListener( 'click', () => {
    populatePost( posts[thisPost], posts[++thisPost] ) 
  } );
   
}

function populatePost( post, nextPost ) {
  
  // Format date
  const date = new Date( post.date );
  
  // Swap out post content
  titleEl.innerHTML   = post.title.rendered;
  authorEl.innerHTML  = post._embedded.author[0].name;
  dateEl.innerHTML    = date.toLocaleDateString();
  contentEl.innerHTML = post.content.rendered;
  
  // If there are more posts...
  if ( nextPost ) {
    // Set the title of the next post as the button text
    buttonEl.innerHTML = nextPost.title.rendered;
  } else {
    // Remove next button when we get to the end of the posts
    buttonEl.remove();
  }
  
  // Go back to top of page after loading
  window.scrollTo( 0,0 );
}