<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Luke and Tatooine</h1>
  </body>

</html>
async function getLukeAndTatooine() {
  const lukeResponse = await fetch('https://swapi.co/api/people/1');
  const luke = await lukeResponse.json();

  const tatooineResponse = await fetch('https://swapi.co/api/planets/1/');
  const tatooine = await tatooineResponse.json();
  
  return { luke, tatooine };
}

async function init() {
  try {
    const lukeAndTatooine = await getLukeAndTatooine();
    const pre = document.createElement('pre');
  
    pre.innerText = JSON.stringify(lukeAndTatooine, null, 2);
    document.body.appendChild(pre);
  } catch(error) {
    alert(error);
  }
}

init();

getLukeAndTatooine().then(console.info);
/* Styles go here */