Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
JS Bin// source https://jsbin.com/yememi
<!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=55';
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=55';
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>
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);
}
'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=55';
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));
});
@leodotng

This comment has been minimized.

Copy link
Owner Author

@leodotng leodotng commented Aug 31, 2017

FETCH REQUEST API CALL

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment