From 2445cd9bbee63e93c715269b7079794aa8f47714 Mon Sep 17 00:00:00 2001 From: Camille Frantz Date: Sat, 28 May 2022 09:03:27 -0500 Subject: [PATCH] fix the iteration and removed the animation --- app.js | 40 +++++++++++++++++------------------- index.html | 2 +- style.css | 59 ------------------------------------------------------ 3 files changed, 19 insertions(+), 82 deletions(-) diff --git a/app.js b/app.js index 423c4ab..a1f8dee 100644 --- a/app.js +++ b/app.js @@ -3,35 +3,31 @@ const todayDate = new Date(); jsyear.innerText = todayDate.getFullYear(); -const disp = document.querySelector(".quote"); +const quoteDisplay = document.querySelector(".quote"); let numQuotes; let randomNum; let intervalID; let iteratorID = 0; +let currQuote; fetch("FavouriteQuotes.json") .then((response) => { return response.json(); }) .then((data) => { - numQuotes = Object.entries(data).length; - 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"); - - 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 + currQuote = getQuote(data); + for (let i = 0; i < 25; i++) { + quoteDisplay.innerText = currQuote; + intervalID = setInterval(() => { + currQuote = getQuote(data); + quoteDisplay.innerText = currQuote; + }, 8000); + } + }); + + +function getQuote(data) { + let noQuotes = Object.entries(data).length; + let randNo = Math.floor(Math.random() * noQuotes); + return data[randNo].quote + "\n\n" + data[randNo].author.replace(/"/g, ''); +} \ No newline at end of file diff --git a/index.html b/index.html index 46fda7d..204381c 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ read quote - + diff --git a/style.css b/style.css index 1e9b4cb..dc08aa9 100644 --- a/style.css +++ b/style.css @@ -23,65 +23,6 @@ border-radius: 12px; } - .anim { - animation: fadeIn linear 2s; - -webkit-animation: fadeIn linear 2s; - -moz-animation: fadeIn linear 2s; - -o-animation: fadeIn linear 2s; - -ms-animation: fadeIn linear 2s; - } - - - @keyframes fadeIn { - 0% { - opacity: 0; - } - - 100% { - opacity: 1; - } - } - - @-moz-keyframes fadeIn { - 0% { - opacity: 0; - } - - 100% { - opacity: 1; - } - } - - @-webkit-keyframes fadeIn { - 0% { - opacity: 0; - } - - 100% { - opacity: 1; - } - } - - @-o-keyframes fadeIn { - 0% { - opacity: 0; - } - - 100% { - opacity: 1; - } - } - - @-ms-keyframes fadeIn { - 0% { - opacity: 0; - } - - 100% { - opacity: 1; - } - } - .instructions { display: none; margin-top: 2rem;