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;