var url = 'https://api.github.com/users/',
      doc = document.currentScript.ownerDocument,
      XgithubProto = Object.create(HTMLElement.prototype);

  XgithubProto.getUser = function getJSON() {
    var that = this,
        xhr = new XMLHttpRequest();

    xhr.open('GET', url + this.getAttribute('user'));
    xhr.onreadystatechange = function () {
      if (xhr.readyState === xhr.DONE) {
        status = xhr.status;

        if ((status >= 200 && status < 300) || status === 304 || status === 0) {
          response = JSON.parse(xhr.response || xhr.responseText);
          that.fillUser(response);
        }
      }
    };

    xhr.send();};

  XgithubProto.fillUser = function fillUser(user) {
    var usr = this.shadow;

    usr.querySelector('.user-account').textContent = this.getAttribute('user');

    usr.querySelector('.user-name').textContent = user.name;
    usr.querySelector('.user-avatar img').src = user.avatar_url;
    usr.querySelector('.user-repos').textContent = user.public_repos;
    usr.querySelector('.user-followers').textContent = user.followers;

    usr.querySelector('.user').classList.remove('spinner');
    usr.querySelector('.user-data').removeAttribute('hidden');
    usr.querySelector('.user-stats').removeAttribute('hidden');

    usr.querySelector('.user-github-url').href = user.html_url;
    usr.querySelector('.user-repos-url').href = user.html_url.concat('?tab=repositories');
    usr.querySelector('.user-followers-url').href = user.html_url.concat('/followers');
  };

  XgithubProto.createdCallback = function() {
    var template = doc.querySelector("#github-template"),
        usr = template.content.cloneNode(true);
    this.shadow = this.createShadowRoot();
    this.shadow.appendChild(usr);
  };

  XgithubProto.attachedCallback = function() {
    this.getUser();
  };

  var Xgithub = doc.registerElement('github-card', {'prototype': XgithubProto});

$("#enterYours").on("change", function() {
  $("#yours").attr("user", this.value)[0].getUser();
})