calweb/gh-profile-card.js

## gh-profile-card.js
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
function Alite(XMLHttpRequest) {

  XMLHttpRequest = XMLHttpRequest || this.XMLHttpRequest;

  function response(req) {
    var isJson = req && req.responseText &&
        req.responseText[0] == '{' ||
        req.responseText[0] == '[';

    return {
      request: req,
      data: isJson ? JSON.parse(req.responseText) : req.responseText
    };
  }

  function ajax(httpMethod, url, params, requestHeaders) {
    return new Promise(function(resolve, reject) {
      var req = new XMLHttpRequest();

      req.onreadystatechange = function () {
        if (req.readyState == 4) {
          if (req.status >= 200 && req.status < 300) {
            resolve(response(req));
          } else {
            reject(response(req));
          }
        }
      }

      req.open(httpMethod, url);
      req.setRequestHeader('content-type', 'application/json');

      if (requestHeaders) {
        for (var name in requestHeaders) {
          req.setRequestHeader(name, requestHeaders[name]);
        }
      }

      req.send(params ? JSON.stringify(params) : undefined);
    });
  }

  return {
    get: function (url, requestHeaders) {
      return ajax('GET', url, undefined, requestHeaders);
    },

    'delete': function (url, requestHeaders) {
      return ajax('DELETE', url, undefined, requestHeaders);
    },

    post: function (url, data, requestHeaders) {
      return ajax('POST', url, data, requestHeaders);
    },

    put: function (url, data, requestHeaders) {
      return ajax('PUT', url, data, requestHeaders);
    },

    patch: function (url, data, requestHeaders) {
      return ajax('PATCH', url, data, requestHeaders);
    }
  };
}

(function (root, factory) {
  var define = root.define;

  if (define && define.amd) {
    define([], factory);
  } else if (typeof module !== 'undefined' && module.exports) {
    module.exports = factory();
  }
}(this, function () { return Alite; }));

},{}],2:[function(require,module,exports){
var ajax = require('alite/alite')();

var ghProfileCardProto = Object.create(HTMLElement.prototype);

// lifecycle event callback when element gets created
ghProfileCardProto.createdCallback = function () {

  var shadow = this.createShadowRoot();
  var img = document.createElement('img');
  var link = document.createElement('a');

  var attrs = {
      url: "https://api.github.com/users/",
      username: this.getAttribute('data-username')
  };

    ajax.get(attrs.url + attrs.username)
      .then(function (ghData) {
        img.alt = attrs.username;
        img.width = '150';
        img.height = '150';
        img.className = 'avatar-img';
        img.src = ghData.data.avatar_url;
        link.className = 'avatar-name';
        link.innerText = attrs.username;
        link.href = ghData.data.html_url;

    })
      .catch(function (err) {
        console.log(err);
      });

      shadow.appendChild(img);
      shadow.appendChild(link);
  };


var ghProfileCard = document.registerElement('gh-profile-card', {
  prototype: ghProfileCardProto
});

},{"alite/alite":1}]},{},[2]);

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>gh-profile-card</title>
  <style>
    body {
      background: #F7F7F7;
    }

    gh-profile-card {
      display: inline-block;
      float: left;
      margin: 0.5em;
      border-radius: 3px;
      background: #FFF;
      box-shadow: 0 1px 3px rgba(0,0,0,0.25);
      font-family: Helvetica, arial, sans-serif;
      -webkit-font-smoothing: antialiased;
    }

    gh-profile-card::shadow .avatar-img {
      cursor: pointer;
      background: #FFF;
      margin: 0.5em;
    }

    gh-profile-card::shadow .avatar-name {
      display: block;
      text-align: center;
      text-decoration: none;
      color: #08C;
      border-top: 1px solid #EEE;
      font-weight: bold;
      padding: 0.75em 0;
    }
    .logo {
      display:block;
      width: 250px;
      margin: 0 auto;
    }


  </style>
  <script src="gh-profile-card.js"></script>
</head>
<body>

  <img src="images/TIY-Logo-500px.png" alt="" class="logo">

    <gh-profile-card data-username="MeesterMeetch"></gh-profile-card>
    <gh-profile-card data-username="ClaytonKinder"></gh-profile-card>
    <gh-profile-card data-username="fbguillo"></gh-profile-card>
    <gh-profile-card data-username="datLucius"></gh-profile-card>
    <gh-profile-card data-username="Glasser88"></gh-profile-card>
    <gh-profile-card data-username="grocej"></gh-profile-card>
    <gh-profile-card data-username="jacksaintjack"></gh-profile-card>
    <gh-profile-card data-username="kpittner"></gh-profile-card>
    <gh-profile-card data-username="marktkimball"></gh-profile-card>
    <gh-profile-card data-username="nathanlodge"></gh-profile-card>
    <gh-profile-card data-username="samgrayson"></gh-profile-card>
    <gh-profile-card data-username="spsullivan1971"></gh-profile-card>
    <gh-profile-card data-username="tiffanyRossyRobinson"></gh-profile-card>
    <gh-profile-card data-username="tinaconway"></gh-profile-card>


</body>
</html>
	(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
	function Alite(XMLHttpRequest) {

	XMLHttpRequest = XMLHttpRequest \|\| this.XMLHttpRequest;

	function response(req) {
	var isJson = req && req.responseText &&
	req.responseText[0] == '{' \|\|
	req.responseText[0] == '[';

	return {
	request: req,
	data: isJson ? JSON.parse(req.responseText) : req.responseText
	};
	}

	function ajax(httpMethod, url, params, requestHeaders) {
	return new Promise(function(resolve, reject) {
	var req = new XMLHttpRequest();

	req.onreadystatechange = function () {
	if (req.readyState == 4) {
	if (req.status >= 200 && req.status < 300) {
	resolve(response(req));
	} else {
	reject(response(req));
	}
	}
	}

	req.open(httpMethod, url);
	req.setRequestHeader('content-type', 'application/json');

	if (requestHeaders) {
	for (var name in requestHeaders) {
	req.setRequestHeader(name, requestHeaders[name]);
	}
	}

	req.send(params ? JSON.stringify(params) : undefined);
	});
	}

	return {
	get: function (url, requestHeaders) {
	return ajax('GET', url, undefined, requestHeaders);
	},

	'delete': function (url, requestHeaders) {
	return ajax('DELETE', url, undefined, requestHeaders);
	},

	post: function (url, data, requestHeaders) {
	return ajax('POST', url, data, requestHeaders);
	},

	put: function (url, data, requestHeaders) {
	return ajax('PUT', url, data, requestHeaders);
	},

	patch: function (url, data, requestHeaders) {
	return ajax('PATCH', url, data, requestHeaders);
	}
	};
	}

	(function (root, factory) {
	var define = root.define;

	if (define && define.amd) {
	define([], factory);
	} else if (typeof module !== 'undefined' && module.exports) {
	module.exports = factory();
	}
	}(this, function () { return Alite; }));

	},{}],2:[function(require,module,exports){
	var ajax = require('alite/alite')();

	var ghProfileCardProto = Object.create(HTMLElement.prototype);

	// lifecycle event callback when element gets created
	ghProfileCardProto.createdCallback = function () {

	var shadow = this.createShadowRoot();
	var img = document.createElement('img');
	var link = document.createElement('a');

	var attrs = {
	url: "https://api.github.com/users/",
	username: this.getAttribute('data-username')
	};

	ajax.get(attrs.url + attrs.username)
	.then(function (ghData) {
	img.alt = attrs.username;
	img.width = '150';
	img.height = '150';
	img.className = 'avatar-img';
	img.src = ghData.data.avatar_url;
	link.className = 'avatar-name';
	link.innerText = attrs.username;
	link.href = ghData.data.html_url;

	})
	.catch(function (err) {
	console.log(err);
	});

	shadow.appendChild(img);
	shadow.appendChild(link);
	};


	var ghProfileCard = document.registerElement('gh-profile-card', {
	prototype: ghProfileCardProto
	});

	},{"alite/alite":1}]},{},[2]);
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>gh-profile-card</title>
	<style>
	body {
	background: #F7F7F7;
	}

	gh-profile-card {
	display: inline-block;
	float: left;
	margin: 0.5em;
	border-radius: 3px;
	background: #FFF;
	box-shadow: 0 1px 3px rgba(0,0,0,0.25);
	font-family: Helvetica, arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	}

	gh-profile-card::shadow .avatar-img {
	cursor: pointer;
	background: #FFF;
	margin: 0.5em;
	}

	gh-profile-card::shadow .avatar-name {
	display: block;
	text-align: center;
	text-decoration: none;
	color: #08C;
	border-top: 1px solid #EEE;
	font-weight: bold;
	padding: 0.75em 0;
	}
	.logo {
	display:block;
	width: 250px;
	margin: 0 auto;
	}


	</style>
	<script src="gh-profile-card.js"></script>
	</head>
	<body>

	<img src="images/TIY-Logo-500px.png" alt="" class="logo">

	<gh-profile-card data-username="MeesterMeetch"></gh-profile-card>
	<gh-profile-card data-username="ClaytonKinder"></gh-profile-card>
	<gh-profile-card data-username="fbguillo"></gh-profile-card>
	<gh-profile-card data-username="datLucius"></gh-profile-card>
	<gh-profile-card data-username="Glasser88"></gh-profile-card>
	<gh-profile-card data-username="grocej"></gh-profile-card>
	<gh-profile-card data-username="jacksaintjack"></gh-profile-card>
	<gh-profile-card data-username="kpittner"></gh-profile-card>
	<gh-profile-card data-username="marktkimball"></gh-profile-card>
	<gh-profile-card data-username="nathanlodge"></gh-profile-card>
	<gh-profile-card data-username="samgrayson"></gh-profile-card>
	<gh-profile-card data-username="spsullivan1971"></gh-profile-card>
	<gh-profile-card data-username="tiffanyRossyRobinson"></gh-profile-card>
	<gh-profile-card data-username="tinaconway"></gh-profile-card>


	</body>
	</html>