Created
February 15, 2019 16:11
-
-
Save zachowdhury/9ac8fc075e475ce6681c569a424fb3f2 to your computer and use it in GitHub Desktop.
JS Bin // source https://jsbin.com/povecaz
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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="auth"></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('auth'); | |
| 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('auth'); | |
| 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 'use strict'; | |
| function createNode(element) { | |
| return document.createElement(element); | |
| } | |
| function append(parent, el) { | |
| return parent.appendChild(el); | |
| } | |
| var ul = document.getElementById('auth'); | |
| 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)); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment