added iteration but not sure it's working

app.js

@@ -1,8 +1,13 @@
+'use strict';
 // Full year for footer
 const todayDate = new Date();
 jsyear.innerText = todayDate.getFullYear();
 
 const disp = document.querySelector(".quote");
+let numQuotes;
+let randomNum;
+let intervalID;
+let iteratorID = 0;
 
 fetch("FavouriteQuotes.json")
   .then((response) => {
@@ -10,7 +15,23 @@ fetch("FavouriteQuotes.json")
   })
   .then((data) => {
     numQuotes = Object.entries(data).length;
-    num = Math.floor(Math.random() * numQuotes);
+    randomNum = Math.floor(Math.random() * numQuotes);
     disp.classList.add("anim");
-    disp.innerText = data[num].quote + "\n\n" + data[num].author.replace(/"/g, '');
-  })
+    disp.innerText = data[randomNum].quote + "\n\n" + data[randomNum].author.replace(/"/g, '');
+    disp.classList.remove("anim");
+    
+    intervalID = setInterval(() => {
+      if(iteratorID < numQuotes) {
+        randomNum = Math.floor(Math.random() * numQuotes);
+        disp.classList.add("anim");
+        disp.innerText = data[randomNum].quote + "\n\n" + data[randomNum].author.replace(/"/g, '');
+        disp.classList.remove("anim");
+        iteratorID++;
+      }
+    }, 6000);
+    clearInterval(intervalID);
+    //numQuotes = Object.entries(data).length;
+    //num = Math.floor(Math.random() * numQuotes);
+    //disp.classList.add("anim");
+    //disp.innerText = data[num].quote + "\n\n" + data[num].author.replace(/"/g, '');
+  });

style.css

@@ -13,8 +13,8 @@
   .display {
     width: 80vw;
     max-width: 500px;
-    height: 240px;
-    margin: 12rem auto;
+    /*height: 240px;*/
+    margin: 6rem auto;
     background: linear-gradient(to bottom right, #0c024d, #0dbcc5);
     background-attachment: fixed;
     color: white;
@@ -28,7 +28,7 @@
     -webkit-animation: fadeIn linear 2s;
     -moz-animation: fadeIn linear 2s;
     -o-animation: fadeIn linear 2s;
-    -ms-animation: fadeIn linear 2s
+    -ms-animation: fadeIn linear 2s;
   }