homework #9 - Async & Fetch.

MastersAcademy · Dec 13, 2023 · 654ac5a · 654ac5a
1 parent 5b33bb1
commit 654ac5a
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 19 deletions.
diff --git a/homeworks/sasha.demidenko_SashaDemi/GamesProject/games.html b/homeworks/sasha.demidenko_SashaDemi/GamesProject/games.html
@@ -4,7 +4,6 @@
         <meta charset="UTF-8">
         <title>Games</title>
         <link rel="stylesheet" href="css/games.css">
-        <link rel="stylesheet" href="css/spinner.css">
     </head>
     <body class="games_body">
         <header class="games_header--main">

diff --git a/homeworks/sasha.demidenko_SashaDemi/GamesProject/scripts/games.js b/homeworks/sasha.demidenko_SashaDemi/GamesProject/scripts/games.js
@@ -1,3 +1,9 @@
+const newCheckbox = document.getElementById('new');
+const oldCheckbox = document.getElementById('old');
+const newCardSelector = document.querySelector('[data-type="cards-container"]');
+const loadingContainer = document.getElementById('loading-spinner');
+const container = document.querySelector('.cards_wrapper[data-type=\'cards-container\']');
+let games = [];
 function createCardElement(game) {
     const elementTemplate = document.querySelector('[data-type="card-template"]');
     const elementCopy = elementTemplate.content.cloneNode(true);
@@ -55,7 +61,7 @@ function filterOldGames(allGames) {
     return oldGames;
 }
 
-function displayCards(container, gamesList, isNewChecked, isOldChecked) {
+function displayCards(cont, gamesList, isNewChecked, isOldChecked) {
     // None of check-boxes is selected.
     let filteredGames = gamesList;
     // Only new selected.
@@ -80,11 +86,7 @@ function displayCards(container, gamesList, isNewChecked, isOldChecked) {
     container.appendChild(fragment);
 }
 
-let games = [];
-
-const loadingContainer = document.getElementById('loading-spinner');
-const container = document.querySelector('.cards_wrapper[data-type=\'cards-container\']');
-async function fethcCards() {
+async function fetchCards() {
     try {
         // show spinner loading
         loadingContainer.style.display = 'flex';
@@ -98,30 +100,24 @@ async function fethcCards() {
             },
         });
         // converting to json
-        games = await response.json();
+        const json = await response.json();
+        games = json.slice(0, 50);
         loadingContainer.style.display = 'none';
-        displayCards(container, games.slice(0, 50));
         // Errors block
     } catch (err) {
         console.log('Error data:', err);
         container.innerHTML = 'Error loading data';
-    }
+    } return games;
 }
 
 function filterAndRenderCards() {
-    const newCheckbox = document.getElementById('new');
-    const oldCheckbox = document.getElementById('old');
-    const newCardSelector = document.querySelector('[data-type="cards-container"]');
     displayCards(newCardSelector, games, newCheckbox.checked, oldCheckbox.checked);
 }
-
-function init() {
-    const newCheckbox = document.getElementById('new');
-    const oldCheckbox = document.getElementById('old');
+async function init() {
     newCheckbox.addEventListener('change', filterAndRenderCards);
     oldCheckbox.addEventListener('change', filterAndRenderCards);
-    filterAndRenderCards();
-    fethcCards();
+    await fetchCards();
+    displayCards(container, games);
 }
 
 init();