JSFiddle - React, Tailwind, and code Playground

Gravatar API

by lchau

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-md5/1.1.1/js/md5.js"></script>
<table>
  <thead>
    <th>e-mail address</th>
    <th>hash</th>
    <th>gravatar</th>
  </thead>
  <tbody id="content"></tbody>
</table>

CSS

body {
  font-family: sans-serif;
  font-size: 12px;
}

table {
  border-collapse: collapse;
  border: 1px solid #ccc;
}

table td,
table th {
  border: 1px solid #ccc;
  padding: 5px 10px;
}

img {
  height: 32px;
  width: 32px;
  margin: auto 25px;
}

Babel + JSX

function getEmailAddresses() {
  //  https://gist.github.com/paulmillr/2657075/
  return [
    "[email protected]",
    "[email protected]",
    "[email protected]",
    "[email protected]",
    "[email protected]",
    "[email protected]",
    "[email protected]",
    "[email protected]",
    "[email protected]",
    "[email protected]"
  ];
}

function getGravatar(email_address) {
  email_address = email_address || '';
  const hash = md5(email_address.trim().toLowerCase());
  return {
    hash,
    url: `http://gravatar.com/avatar/${hash}`
  };
}

function createCell(content) {
  const $td = document.createElement('td');
  if (typeof content === 'string') {
    $td.innerHTML = content;
  } else if (content instanceof Element) {
    $td.appendChild(content);
  }
  return $td;
}

function createImage(src) {
  const $img = document.createElement('img');
  $img.src = src;
  return $img;
}

function createRow(email_address) {
  const $tr = document.createElement('tr');
  const gravatar = getGravatar(email_address);

  $tr.appendChild(createCell(email_address));
  $tr.appendChild(createCell(gravatar.hash));

  const image = createImage(gravatar.url);
  $tr.appendChild(createCell(image));
  return $tr;
}

const $table = document.querySelector('#content');
getEmailAddresses().forEach(email_address => $table.appendChild(createRow(email_address)));