<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<title>Fetch basic example</title>
<link rel="stylesheet" href="">
</head>
<body>
<h1>Authors</h1>
<ul id="authors"></ul>
</body>
<script>
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');
let img = createNode('img');
let 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(error);
});
</script>
</html>