Skip to content

Instantly share code, notes, and snippets.

@prof3ssorSt3v3
Created September 9, 2021 19:06
Show Gist options
  • Save prof3ssorSt3v3/489afbd7c8373ce4bd57e9d73d13aaf8 to your computer and use it in GitHub Desktop.
Save prof3ssorSt3v3/489afbd7c8373ce4bd57e9d73d13aaf8 to your computer and use it in GitHub Desktop.
Code from the Star Wars API video
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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment