Skip to content

Instantly share code, notes, and snippets.

Created June 14, 2017 16:08
What would you like to do?
Fetch data from star wars api and display
<!DOCTYPE html>
<meta charset="utf-8">
<style media="screen">
.character {
display: flex;
width: 550px;
justify-content: space-between;
<div id="characters">
<script src="sw.js" charset="utf-8"></script>
function fetchPerson(id){
.then( function(response){
return response.json()
console.log("data", json)
if (!{
const name =;
const birth_year = json.birth_year;
/// If you were doing document.createElement
//const character = document.createElement('div');
//character.className = "character";
//character.textContent = name + ": " + birth_year;
const html = `
<div class="character">
<div class="name">
<a href="${json.url}">${name}</a>
<div class="year">${birth_year}</div>
document.querySelector("#characters").insertAdjacentHTML('afterbegin', html)
for (var i = 1; i <= 100; i++) {
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment