master push to gitlab

2022-05-18 10:10:25 -05:00 · 2022-05-18 10:10:25 -05:00 · edc1177984
parent 0ce4c9a6cb
commit edc1177984
4 changed files with 104 additions and 7 deletions
--- 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");
+}
--- a/favicon.ico
+++ b/favicon.ico
--- 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>
--- 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 {