-
-
Save dziku86/7eb096619cbcd0768b4bd9604b5eef6c to your computer and use it in GitHub Desktop.
Code from video about using Promise.finally and Spinners
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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'); | |
| }); | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "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" } | |
| ] | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| 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