prof3ssorSt3v3/app.js

## app.js
const APP = {
  //call the APP.urls.base to see the contents of APP.urls
  urls: {
    base: 'https://swapi.dev/api/',
    people: 'people/',
    planets: 'planets/',
    films: 'films/',
    species: 'species/',
    vehicles: 'vehicles/',
    starships: 'starships/',
  },
  init: () => {
    APP.addListeners();
    APP.buildNav();
  },
  addListeners: () => {
    let nav = document.getElementById('nav');
    nav.addEventListener('click', APP.getData);
    footer.addEventListener('click', APP.getData);
  },
  buildNav: () => {
    let df = new DocumentFragment();
    for (let nm in APP.urls) {
      if (nm != 'base') {
        let link = document.createElement('a');
        link.href = `${APP.urls.base}${APP.urls[nm]}`;
        link.textContent = nm;
        link.setAttribute('data-link', `${APP.urls.base}${APP.urls[nm]}`);
        df.append(link);
      }
    }
    document.getElementById('nav').append(df);
  },
  getData: (ev) => {
    if (ev) ev.preventDefault();
    //show overlay / loader
    document.querySelector('.overlay').classList.add('active');
    //get the url
    let link = ev.target;
    let url = link.getAttribute('data-link');
    //fetch the data
    fetch(url)
      .then((resp) => {
        if (!resp.ok) throw new Error(resp.statusText);
        return resp.json();
      })
      .then(APP.buildList)
      .catch((err) => {
        console.error(err);
        document.querySelector('.overlay').classList.remove('active');
      });
    //call the build function
  },
  buildList: (data) => {
    let m = document.getElementById('main');
    console.log(data);
    //hide the overlay / loader

    document.querySelector('.overlay').classList.remove('active');
    //add the data
    m.innerHTML = data.results
      .map((item) => {
        let nm = item.name || item.title;
        return `<p>${nm}</p>`;
      })
      .join(' ');
    //add the prev/next navigation
    let footer = document.getElementById('footer');
    footer.innerHTML = '';

    if (data.previous) {
      //previous link
      let prev = document.createElement('a');
      prev.href = data.previous;
      let url = new URL(data.previous);
      let labels = url.pathname.split('/');
      let label = labels[labels.length - 2];
      prev.textContent = `<< Previous ${label}`;
      prev.setAttribute('data-link', data.previous);
      footer.append(prev);
    }
    if (data.next) {
      //next link
      let next = document.createElement('a');
      next.href = data.next;
      let url = new URL(data.next);
      let labels = url.pathname.split('/');
      let label = labels[labels.length - 2];
      next.textContent = `Next ${label} >>`;
      next.setAttribute('data-link', data.next);
      footer.append(next);
    }
  },
};

document.addEventListener('DOMContentLoaded', APP.init);

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SWAPI Demo</title>
    <link rel="stylesheet" href="css/main.css" />
  </head>
  <body>
    <header>
      <h1>Star Wars API</h1>
    </header>
    <nav id="nav"></nav>
    <main id="main"></main>
    <footer id="footer"></footer>
    <div class="overlay"><div class="loading">loading</div></div>
    <script src="js/app.js" defer></script>
  </body>
</html>

## main.css
*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html {
  font-size: 20px;
  font-weight: 300;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  line-height: 1.5;
}
body {
  min-height: 100vh;
  background-color: #333;
  color: #eee;
}
header,
main,
footer {
  width: 80vw;
  padding: 1rem 1rem;
  margin: 0 auto;
}
header h1 {
  color: orange;
}
header h2 {
  color: orangered;
}
p {
  line-height: 1.7;
  margin: 1.5rem 0;
}
#nav,
#footer {
  display: flex;
  flex-direction: row;
}
#nav a,
#footer a {
  color: orangered;
  padding: 0.25rem 1rem;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: hsla(0, 0%, 0%, 0.8);
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.overlay.active {
  display: flex;
  cursor: wait;
}
.loading {
  font-size: 5rem;
  color: #fff;
  text-transform: uppercase;
  animation-name: pulse;
  animation-duration: 1s;
  animation-direction: normal;
  animation-iteration-count: infinite;
}
@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.1;
  }
  100% {
    opacity: 1;
  }
}
	const APP = {
	//call the APP.urls.base to see the contents of APP.urls
	urls: {
	base: 'https://swapi.dev/api/',
	people: 'people/',
	planets: 'planets/',
	films: 'films/',
	species: 'species/',
	vehicles: 'vehicles/',
	starships: 'starships/',
	},
	init: () => {
	APP.addListeners();
	APP.buildNav();
	},
	addListeners: () => {
	let nav = document.getElementById('nav');
	nav.addEventListener('click', APP.getData);
	footer.addEventListener('click', APP.getData);
	},
	buildNav: () => {
	let df = new DocumentFragment();
	for (let nm in APP.urls) {
	if (nm != 'base') {
	let link = document.createElement('a');
	link.href = `${APP.urls.base}${APP.urls[nm]}`;
	link.textContent = nm;
	link.setAttribute('data-link', `${APP.urls.base}${APP.urls[nm]}`);
	df.append(link);
	}
	}
	document.getElementById('nav').append(df);
	},
	getData: (ev) => {
	if (ev) ev.preventDefault();
	//show overlay / loader
	document.querySelector('.overlay').classList.add('active');
	//get the url
	let link = ev.target;
	let url = link.getAttribute('data-link');
	//fetch the data
	fetch(url)
	.then((resp) => {
	if (!resp.ok) throw new Error(resp.statusText);
	return resp.json();
	})
	.then(APP.buildList)
	.catch((err) => {
	console.error(err);
	document.querySelector('.overlay').classList.remove('active');
	});
	//call the build function
	},
	buildList: (data) => {
	let m = document.getElementById('main');
	console.log(data);
	//hide the overlay / loader

	document.querySelector('.overlay').classList.remove('active');
	//add the data
	m.innerHTML = data.results
	.map((item) => {
	let nm = item.name \|\| item.title;
	return `<p>${nm}</p>`;
	})
	.join(' ');
	//add the prev/next navigation
	let footer = document.getElementById('footer');
	footer.innerHTML = '';

	if (data.previous) {
	//previous link
	let prev = document.createElement('a');
	prev.href = data.previous;
	let url = new URL(data.previous);
	let labels = url.pathname.split('/');
	let label = labels[labels.length - 2];
	prev.textContent = `<< Previous ${label}`;
	prev.setAttribute('data-link', data.previous);
	footer.append(prev);
	}
	if (data.next) {
	//next link
	let next = document.createElement('a');
	next.href = data.next;
	let url = new URL(data.next);
	let labels = url.pathname.split('/');
	let label = labels[labels.length - 2];
	next.textContent = `Next ${label} >>`;
	next.setAttribute('data-link', data.next);
	footer.append(next);
	}
	},
	};

	document.addEventListener('DOMContentLoaded', APP.init);
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>SWAPI Demo</title>
	<link rel="stylesheet" href="css/main.css" />
	</head>
	<body>
	<header>
	<h1>Star Wars API</h1>
	</header>
	<nav id="nav"></nav>
	<main id="main"></main>
	<footer id="footer"></footer>
	<div class="overlay"><div class="loading">loading</div></div>
	<script src="js/app.js" defer></script>
	</body>
	</html>
	*,
	*::before,
	*::after {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	}
	html {
	font-size: 20px;
	font-weight: 300;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
	Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	line-height: 1.5;
	}
	body {
	min-height: 100vh;
	background-color: #333;
	color: #eee;
	}
	header,
	main,
	footer {
	width: 80vw;
	padding: 1rem 1rem;
	margin: 0 auto;
	}
	header h1 {
	color: orange;
	}
	header h2 {
	color: orangered;
	}
	p {
	line-height: 1.7;
	margin: 1.5rem 0;
	}
	#nav,
	#footer {
	display: flex;
	flex-direction: row;
	}
	#nav a,
	#footer a {
	color: orangered;
	padding: 0.25rem 1rem;
	}
	.overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: hsla(0, 0%, 0%, 0.8);
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	}
	.overlay.active {
	display: flex;
	cursor: wait;
	}
	.loading {
	font-size: 5rem;
	color: #fff;
	text-transform: uppercase;
	animation-name: pulse;
	animation-duration: 1s;
	animation-direction: normal;
	animation-iteration-count: infinite;
	}
	@keyframes pulse {
	0% {
	opacity: 1;
	}
	50% {
	opacity: 0.1;
	}
	100% {
	opacity: 1;
	}
	}