blogclass.js

const BlogHandler = class {

  constructor(blogbutton, templatetext, url) {
    this.blogbutton = blogbutton;
    this.url = url;
    this.template = Handlebars.compile(templatetext);
    this.blogbutton.addEventListener("click", this.getJsonData.bind(this));
  }

  getJsonData(template) {
    var oReq = new XMLHttpRequest();
    var template = this.template;
    
    oReq.addEventListener("load", function() {
      var result = this.responseText;
      var data = JSON.parse(result);
      var text_box = document.querySelector("#my_position");

      text_box.innerHTML = text_box.innerHTML + template(data);

    });
    oReq.open("GET", this.url);
    oReq.send();
  }

}

document.addEventListener("DOMContentLoaded", function(event) {
  var blogbutton = document.querySelector(".blogbutton");
  var templatetext = document.querySelector("#listTemplate").innerHTML;
  var blogHandler = new BlogHandler(blogbutton, templatetext,"http://localhost:8000/data.json" );

});

tabclass.js

const Tab = class {
  constructor(id, selected, url) {
    this.id = id;
    this.selected = selected;
    this.url = url;
    this.addClickListener();
  }

  addClickListener() {
    var curElement = document.querySelector("#" + this.id);
    curElement.addEventListener("click", this.ajaxResponse.bind(this));
  }

  selectTab() {
    this.selected = true;
  }

  unselectTab() {
    this.selected = false;
  }

  ajaxResponse() {
    var text_box = document.querySelector("#my_position");

    var oReq = new XMLHttpRequest();
    oReq.addEventListener("load", function () {
      var result = this.responseText;
      var data = JSON.parse(result);
      console.log(data);
      handleTextBox(text_box, data);
    });

    console.log(this.url);
    oReq.open("GET", this.url);
    oReq.send();

  }

}

const TabHolder = class {
  constructor(tablist, elementId, func) {
    this.tablist = tablist;
    this.tabHolderDom = document.querySelector(elementId);
    // func function that is bound to tabHolderDom must call tabClicked(id);
    this.tabHolderDom.addEventListener("click", func.bind(this));
  }

  listTabs() {
    for(var i = 0; i < this.tablist.length; ++i) {
      console.log(this.tablist[i]);
    }
  }

  tabClicked(id) {
    for(var i = 0; i < this.tablist.length; ++i) {
      var cur = this.tablist[i];
      var tab = document.querySelector("#" + cur.id);
      if(cur.id != id) {
        cur.unselectTab;
        tab.classList.remove("selectedTab");
      } else {
        cur.selectTab;
        tab.classList.add("selectedTab");
        var text_box = document.querySelector("#my_position");
        cur.ajaxResponse(null, cur.url);
      }

    }
  }

}


function handleTextBox(text_box, data) {
  var title = data["title"];
  var body = data["body"];

  text_box.querySelector(".myName").innerHTML = title;
  text_box.querySelector(".myDesc").innerHTML = body;

}

function func(event) {
  if(event.target.nodeName === "SPAN") {
      event.target.parentElement.click();
      console.log("SPAN clicked");
      return;
  } else {
    this.tabClicked(event.target.id);
    event.stopPropagation();
  }

}


document.addEventListener("DOMContentLoaded", function(event) {

  var position = new Tab("position", true, "http://jsonplaceholder.typicode.com/posts/1");
  var friend = new Tab("friend", false, "http://jsonplaceholder.typicode.com/posts/2");
  var theme = new Tab("theme", false, "http://jsonplaceholder.typicode.com/posts/3");
  var news = new Tab("news", false, "http://jsonplaceholder.typicode.com/posts/4");

  var tabHolder = new TabHolder([position, friend, theme, news], "nav", func);

});