onigetoc/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
body {
  background: #f5f5f5;
}
body h1 {
  text-align: center;
  font-family: arial;
  color: #5a5a5a;
}
body ul {
  display: flex;
  list-style: none;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  flex-basis: 80%;
}
body ul li {
  flex-basis: 20%;
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  align-items: center;
}
body ul li span {
  font-family: arial;
  font-size: 14px;
  color: #5a5a5a;
  text-align: center;
}
body ul li img {
  margin: 5px;
  border-radius: 3px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
  <h1>Authors</h1>
  <ul id="authors"></ul>
<script id="jsbin-javascript">
'use strict';

function createNode(element) {
  return document.createElement(element);
}

function append(parent, el) {
  return parent.appendChild(el);
}

var ul = document.getElementById('authors');
var url = 'https://randomuser.me/api/?results=10';
fetch(url).then(function (resp) {
  return resp.json();
}).then(function (data) {
  var authors = data.results;
  return authors.map(function (author) {
    var li = createNode('li'),
        img = createNode('img'),
        span = createNode('span');
    img.src = author.picture.medium;
    span.innerHTML = author.name.first + ' ' + author.name.last;
    append(li, img);
    append(li, span);
    append(ul, li);
  });
})['catch'](function (error) {
  console.log(JSON.stringify(error));
});
</script>


<script id="jsbin-source-css" type="text/css">body {
  background: #f5f5f5;

  h1 {
    text-align: center;
    font-family: arial;
    color: #5a5a5a;
  }

  ul {
    display: flex;
    list-style:none;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content:center;
    flex-basis: 80%;

    li {
      flex-basis: 20%;
      display:flex;
      flex-direction: column;
      margin-bottom: 20px;
      align-items:center;

      span {
        font-family: arial;
        font-size: 14px;
        color: #5a5a5a;
        text-align: center;
      }

      img {
        margin: 5px;
        border-radius: 3px;
        box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
      }
    }
  }

}</script>

<script id="jsbin-source-javascript" type="text/javascript">  function createNode(element) {
      return document.createElement(element);
  }

  function append(parent, el) {
    return parent.appendChild(el);
  }

  const ul = document.getElementById('authors');
  const url = 'https://randomuser.me/api/?results=10';
  fetch(url)
  .then((resp) => resp.json())
  .then(function(data) {
    let authors = data.results;
    return authors.map(function(author) {
      let li = createNode('li'),
          img = createNode('img'),
          span = createNode('span');
      img.src = author.picture.medium;
      span.innerHTML = `${author.name.first} ${author.name.last}`;
      append(li, img);
      append(li, span);
      append(ul, li);
    })
  })
  .catch(function(error) {
    console.log(JSON.stringify(error));
  });
</script></body>
</html>

## jsbin.zarakid.css
body {
  background: #f5f5f5;
}
body h1 {
  text-align: center;
  font-family: arial;
  color: #5a5a5a;
}
body ul {
  display: flex;
  list-style: none;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  flex-basis: 80%;
}
body ul li {
  flex-basis: 20%;
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  align-items: center;
}
body ul li span {
  font-family: arial;
  font-size: 14px;
  color: #5a5a5a;
  text-align: center;
}
body ul li img {
  margin: 5px;
  border-radius: 3px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

## jsbin.zarakid.js
'use strict';

function createNode(element) {
  return document.createElement(element);
}

function append(parent, el) {
  return parent.appendChild(el);
}

var ul = document.getElementById('authors');
var url = 'https://randomuser.me/api/?results=10';
fetch(url).then(function (resp) {
  return resp.json();
}).then(function (data) {
  var authors = data.results;
  return authors.map(function (author) {
    var li = createNode('li'),
        img = createNode('img'),
        span = createNode('span');
    img.src = author.picture.medium;
    span.innerHTML = author.name.first + ' ' + author.name.last;
    append(li, img);
    append(li, span);
    append(ul, li);
  });
})['catch'](function (error) {
  console.log(JSON.stringify(error));
});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<style id="jsbin-css">
	body {
	background: #f5f5f5;
	}
	body h1 {
	text-align: center;
	font-family: arial;
	color: #5a5a5a;
	}
	body ul {
	display: flex;
	list-style: none;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
	flex-basis: 80%;
	}
	body ul li {
	flex-basis: 20%;
	display: flex;
	flex-direction: column;
	margin-bottom: 20px;
	align-items: center;
	}
	body ul li span {
	font-family: arial;
	font-size: 14px;
	color: #5a5a5a;
	text-align: center;
	}
	body ul li img {
	margin: 5px;
	border-radius: 3px;
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
	}
	</style>
	</head>
	<body>
	<h1>Authors</h1>
	<ul id="authors"></ul>
	<script id="jsbin-javascript">
	'use strict';

	function createNode(element) {
	return document.createElement(element);
	}

	function append(parent, el) {
	return parent.appendChild(el);
	}

	var ul = document.getElementById('authors');
	var url = 'https://randomuser.me/api/?results=10';
	fetch(url).then(function (resp) {
	return resp.json();
	}).then(function (data) {
	var authors = data.results;
	return authors.map(function (author) {
	var li = createNode('li'),
	img = createNode('img'),
	span = createNode('span');
	img.src = author.picture.medium;
	span.innerHTML = author.name.first + ' ' + author.name.last;
	append(li, img);
	append(li, span);
	append(ul, li);
	});
	})['catch'](function (error) {
	console.log(JSON.stringify(error));
	});
	</script>


	<script id="jsbin-source-css" type="text/css">body {
	background: #f5f5f5;

	h1 {
	text-align: center;
	font-family: arial;
	color: #5a5a5a;
	}

	ul {
	display: flex;
	list-style:none;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content:center;
	flex-basis: 80%;

	li {
	flex-basis: 20%;
	display:flex;
	flex-direction: column;
	margin-bottom: 20px;
	align-items:center;

	span {
	font-family: arial;
	font-size: 14px;
	color: #5a5a5a;
	text-align: center;
	}

	img {
	margin: 5px;
	border-radius: 3px;
	box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
	}
	}
	}

	}</script>

	<script id="jsbin-source-javascript" type="text/javascript"> function createNode(element) {
	return document.createElement(element);
	}

	function append(parent, el) {
	return parent.appendChild(el);
	}

	const ul = document.getElementById('authors');
	const url = 'https://randomuser.me/api/?results=10';
	fetch(url)
	.then((resp) => resp.json())
	.then(function(data) {
	let authors = data.results;
	return authors.map(function(author) {
	let li = createNode('li'),
	img = createNode('img'),
	span = createNode('span');
	img.src = author.picture.medium;
	span.innerHTML = `${author.name.first} ${author.name.last}`;
	append(li, img);
	append(li, span);
	append(ul, li);
	})
	})
	.catch(function(error) {
	console.log(JSON.stringify(error));
	});
	</script></body>
	</html>