diff --git a/app.js b/app.js index da6489a..423c4ab 100644 --- a/app.js +++ b/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, ''); - }) \ No newline at end of file + 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, ''); + }); \ No newline at end of file diff --git a/style.css b/style.css index 2c6eefb..1e9b4cb 100644 --- a/style.css +++ b/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; }