From edc1177984f6f1f83e64400090405d124f24e11d Mon Sep 17 00:00:00 2001
From: Camille Frantz <camille.frantz@me.com>
Date: Wed, 18 May 2022 10:10:25 -0500
Subject: [PATCH] master push to gitlab

---
 app.js      |  34 +++++++++++++++++++++---
 favicon.ico | Bin 0 -> 2413 bytes
 index.html  |   3 ++-
 style.css   |  74 +++++++++++++++++++++++++++++++++++++++++++++++++---
 4 files changed, 104 insertions(+), 7 deletions(-)
 create mode 100644 favicon.ico

diff --git a/app.js b/app.js
index 1928552..19d7716 100644
--- a/app.js
+++ b/app.js
@@ -3,13 +3,41 @@ const todayDate = new Date();
 jsyear.innerText = todayDate.getFullYear();
 
 const disp = document.querySelector(".display");
+const numIterations = 20;
+let ctr = 0;
 
 fetch("FavouriteQuotes.json")
   .then((response) => {
     return response.json();
   })
   .then((data) => {
-    numQuotes = Object.entries(data).length;
-    num = Math.floor(Math.random() * numQuotes);
-    disp.innerText = data[num].quote + "\n\n" + data[num].author.replace(/"/g, '');
+    // quotes = data;
+    doTheLoop(data);
   })
+
+// doTheLoop(quotes);
+
+function doTheLoop(quotes) {
+  console.log("Entering doTheLoop");
+  numQuotes = Object.entries(quotes).length;
+  console.log(numQuotes);
+  getQuote(quotes, numQuotes);
+  timerID = setInterval(getQuote, 6000, quotes, numQuotes);
+  console.log("Timer ID: " + timerID);
+  setTimeout(() => {
+    console.log("Stopping");
+    clearInterval(timerID);
+    console.log("Stopped");
+    30000
+  });
+}
+
+function getQuote(quotes, numQuotes) {
+  console.log("Entering getQuote");
+  num = Math.floor(Math.random() * numQuotes);
+  disp.classList.remove(".hidden");
+  disp.classList.add(".anim");
+  disp.innerText = quotes[num].quote + "\n\n" + quotes[num].author.replace(/"/g, '');
+  disp.classList.remove(".anim");
+  // disp.classList.add(".hidden");
+}
\ No newline at end of file
diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..1e0715e01336bcc70e1de4e3b38f938ca31fc7f3
GIT binary patch
literal 2413
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

literal 0
HcmV?d00001

diff --git a/index.html b/index.html
index 5999631..4b38401 100644
--- a/index.html
+++ b/index.html
@@ -7,10 +7,11 @@
       content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
     <title>read quote</title>
     <link rel="stylesheet" href="style.css">
+    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
   </head>
 
   <body>
-    <div class="display"></div>
+    <div class="display hidden"></div>
     <div class="instructions">
       <p>{{ Hit Reload to see a new quote }}</p>
     </div>
diff --git a/style.css b/style.css
index cb1e295..e2e2af1 100644
--- a/style.css
+++ b/style.css
@@ -1,6 +1,4 @@
   body {
-    width: 80vw;
-    max-width: 500px;
     margin: auto;
     padding-top: 4rem;
     background-color: beige;
@@ -8,7 +6,14 @@
     font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
   }
 
+  .hidden {
+    display: none;
+  }
+
   .display {
+    width: 80vw;
+    max-width: 500px;
+    margin-top: 12rem;
     background: linear-gradient(to bottom right, #0c024d, #0dbcc5);
     background-attachment: fixed;
     color: white;
@@ -17,7 +22,67 @@
     border-radius: 12px;
   }
 
+  .anim {
+    animation: fadeIn linear 4s;
+    -webkit-animation: fadeIn linear 4s;
+    -moz-animation: fadeIn linear 4s;
+    -o-animation: fadeIn linear 4s;
+    -ms-animation: fadeIn linear 4s
+  }
+
+
+  @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;
     text-align: center;
     border-bottom: 1px dotted #0c024d;
@@ -26,9 +91,12 @@
   }
 
   .footer {
+    display: block;
+    position: relative;
+    top: 30rem;
     text-align: center;
     font-size: 0.8rem;
-    margin-top: 2rem;
+    margin: 2rem auto;
   }
 
   .footer a:any-link {