jwo/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>

    <style media="screen">
      .character {
        display: flex;
        width: 550px;
        justify-content: space-between;
      }
    </style>
  </head>
  <body>

    <div id="characters">

    </div>

    <script src="sw.js" charset="utf-8"></script>
  </body>
</html>

## sw.js
function fetchPerson(id){

  fetch(`http://swapi.co/api/people/${id}`)
    .then( function(response){
      return response.json()
    })
    .then(function(json){
      console.log("data", json)

      if (!json.name){
        return;
      }

      const name = json.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;
      //document.querySelector("#characters").appendChild(character)

      const html = `
        <div class="character">
          <div class="name">
            <a href="${json.url}">${name}</a>
          </div>
          <div class="year">${birth_year}</div>
        </div>

      document.querySelector("#characters").insertAdjacentHTML('afterbegin', html)

    })
}

for (var i = 1; i <= 100; i++) {
  fetchPerson(i)
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title></title>

	<style media="screen">
	.character {
	display: flex;
	width: 550px;
	justify-content: space-between;
	}
	</style>
	</head>
	<body>

	<div id="characters">

	</div>

	<script src="sw.js" charset="utf-8"></script>
	</body>
	</html>
	function fetchPerson(id){

	fetch(`http://swapi.co/api/people/${id}`)
	.then( function(response){
	return response.json()
	})
	.then(function(json){
	console.log("data", json)

	if (!json.name){
	return;
	}

	const name = json.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;
	//document.querySelector("#characters").appendChild(character)

	const html = `
	<div class="character">
	<div class="name">
	<a href="${json.url}">${name}</a>
	</div>
	<div class="year">${birth_year}</div>
	</div>

	document.querySelector("#characters").insertAdjacentHTML('afterbegin', html)

	})
	}

	for (var i = 1; i <= 100; i++) {
	fetchPerson(i)
	}