Skip to content

Instantly share code, notes, and snippets.

@dziku86
Forked from prof3ssorSt3v3/app.js
Created January 19, 2023 18:09
Show Gist options
  • Save dziku86/7eb096619cbcd0768b4bd9604b5eef6c to your computer and use it in GitHub Desktop.
Save dziku86/7eb096619cbcd0768b4bd9604b5eef6c to your computer and use it in GitHub Desktop.
Code from video about using Promise.finally and Spinners
function delay(time = 500) {
return new Promise((resolve, reject) => {
setTimeout(resolve, time);
});
}
let spinner = document.querySelector('.spinner');
spinner.classList.add('active');
fetch('./books.json')
.then((resp) => {
if (!resp.ok) throw new Error('Could not get the data');
return resp.json();
})
.then(async (books) => {
let ul = document.getElementById('list');
let arr = books.results;
let d = 2000 / arr.length;
// ul.innerHTML = arr
// .map((book) => {
// return `<li>${book.title}</li>`;
// })
// .join('');
for await (let book of arr) {
console.log(`Add <li> for ${book.title}`);
ul.innerHTML += `<li>${book.title}</li>`;
await delay(d);
}
})
.catch((err) => {
console.warn(err.message);
})
.finally(() => {
spinner.classList.remove('active');
});
{
"results": [
{ "id": 1, "title": "Lord of the Rings" },
{ "id": 2, "title": "The Hobbit" },
{ "id": 3, "title": "Good Omens" },
{ "id": 4, "title": "The Stand" },
{ "id": 5, "title": "The Sword of Shannara" },
{ "id": 16, "title": "Foundation and Empire" },
{ "id": 17, "title": "The Silmarillion" },
{ "id": 18, "title": "A Song of Ice and Fire" }
]
}
<!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>Document</title>
<link rel="stylesheet" href="./main.css" />
<script src="./app.js" type="module"></script>
</head>
<body>
<main>
<ul id="list">
<!-- books will be added here -->
</ul>
</main>
<div class="spinner active">
<p>Books <span>B</span> Loading</p>
</div>
</body>
</html>
* {
box-sizing: border-box;
}
html {
color-scheme: dark light;
font-size: 30px;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
'Helvetica Neue', sans-serif;
}
body {
min-height: 100vh;
}
.spinner {
display: none;
place-content: center;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: hsla(0, 0%, 0%, 0.8);
}
.spinner.active {
display: grid;
}
.spinner p {
font-size: 2rem;
text-align: center;
animation-name: pulse;
animation-duration: 1s;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-direction: alternate;
animation-iteration-count: infinite;
}
.spinner span {
display: inline-block;
transform: rotate(9deg);
}
@keyframes pulse {
0% {
opacity: 1;
transform: scale(1);
color: gold;
}
50% {
opacity: 0.2;
transform: scale(3);
color: rgb(128, 255, 0);
}
100% {
opacity: 0.8;
transform: scale(1);
color: gold;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment