1.6.02 – Reverse Engineering

I’ve copied my code below for those who may be interested in how each of us is attacking this problem. My solution, while it works, is about as far from elegant as things can get. I’m excited to dive in and keep honing some of these skills. I did all the things except the bonus, and sort of short-circuited the last one. I’d love comments and critiques—tell me how I couldn’t done it in fewer lines. I’ll walk through it in pseudo-code and then others can tweak it and tell me why it shouldn’t take 86 lines to solve these problems.

1. Display post title and content from JSON. This was the most straightforward. I parsed the JSON back into JSON and then for looped through the array of objects to access what I needed and append it into the appropriate nodes.

var primaryContainer = document.getElementsByClassName( 'primary' )[0];
    var pageTitle = document.getElementById( 'pageTitle' );
    var pageContent = document.getElementById( 'pageContent' );
    var postData = JSON.parse(jsonData);

/**
 * The main app object.
 *
 */
var vanillaPress = {

  init: function() {

    // Add any functions here you want
    // to run to start the application
    for ( var post in postData ) {

      // Create necessary post nodes
      var postTitleH2 = document.createElement( 'h2' );
      var postTitleText = postData[post].title;
      var postTitle = document.createTextNode(postTitleText);

      // Create anchor nodes
      var postAnchor = document.createElement( 'a' );
      postAnchor.href = "#" + postData[post].slug;

      // Join post and anchor nodes
      postTitleH2.appendChild(postTitle);
      postAnchor.appendChild( postTitleH2 );
      postAnchor.setAttribute( 'class', 'post-a' );
      pageContent.appendChild( postAnchor );

      // Putting Post Content on the Page
      var postContDiv = document.createElement( 'div' );
      postContDiv.setAttribute('class', 'post-div');
      postContDiv.innerHTML = postData[post].content;
      pageContent.appendChild( postContDiv );

    }

  }

};

vanillaPress.init(); 

2. Make post titles link to slug name was also done above, and involved a bit more nesting. You can see what I did from my comments. I’m already hoping there was a more elegant and efficient way to do it, so comment if you see something.

3. On clicking, display just one post title and content. This was the least efficient solution and involved a wonky use of a for loop with an if statement triggered by an global event handler when one of the anchor tags was clicked.

// Add your custom code starting here:
var postAnchors = document.getElementsByClassName( 'post-a' );
for (var i=0, len = postAnchors.length; i < len; i++) {
    postAnchors[i].addEventListener("click", displayPost, false);
    // var postTitle = postData[i].title;
    // var postContent = postData[i].content;
    // var postSlug = postData[i].slug;
    // console.log(postTitle, postContent, postSlug);
}

// var postContDiv = document.getElementsByClassName( 'post-div' )[0];

  function displayPost(e) {
      e.preventDefault();
       var rawSlug = this.getAttribute( 'href' );
       var slug = rawSlug.slice(1);
      primaryContainer.removeChild( pageContent );
      for ( var post in postData ) {
        // console.log(postData[post].slug);
        if (slug === postData[post].slug ){
          console.log("WAY TO GO!");
          var singlePostContent = document.createElement( 'div' );
          singlePostContent.setAttribute('id', 'single-post-content');
          var singlePostTitle = document.createElement( 'h2' );
          singlePostTitle.setAttribute('id', 'single-post-title');
          singlePostTitle.innerHTML = postData[post].title;
          singlePostContent.innerHTML = postData[post].content;
          primaryContainer.appendChild(singlePostTitle);
          primaryContainer.appendChild(singlePostContent);
          } else {
            console.log("FAILURE TO LAUNCH!");
          }
    }
}

Thanks for perusing if you have the time and I’d love to see more solutions to these problems up here. That was the best application of our skills thus far and was no longer me tinkering around in the console.