Fetch Example with Stapi : The Star wars api

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>

JavaScript

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)
}