search function added in, styled, and working

public/js/app.js

@@ -1,33 +0,0 @@
-'use strict';
-// Full year for footer
-const todayDate = new Date();
-jsyear.innerText = todayDate.getFullYear();
-
-const quoteDisplay = document.querySelector(".quote");
-let numQuotes;
-let randomNum;
-let intervalID;
-let iteratorID = 0;
-let currQuote;
-
-fetch("https://cdn.fyrfli.link/FavouriteQuotes.json")
-  .then((response) => {
-    return response.json();
-  })
-  .then((data) => {
-    currQuote = getQuote(data);
-    for (let i = 0; i < 50; i++) {
-      quoteDisplay.innerText = currQuote;
-      intervalID = setInterval(() => {
-        currQuote = getQuote(data);
-        quoteDisplay.innerText = currQuote;
-      }, 12000);
-    }
-  });
-
-
-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, '');
-}

public/js/layout.js

@@ -21,3 +21,36 @@ fetch("https://cdn.fyrfli.link/FavouriteQuotes.json")
       i++;
     }
   });
+
+function liveSearch() {
+  let j;
+  let input = document.getElementById('filter').value.toLowerCase();
+  let item = document.getElementsByClassName('quote');
+  
+  for (j = 0; j < item.length; j++) {
+    if (!item[j].innerText.toLowerCase().includes(input)) {
+      item[j].style.display = "none";
+    }
+    else {
+      item[j].style.display = "inline-block"
+    }
+  }
+}
+
+
+// The working funtion for live search from https://jupiter.fyrfli.net/js-play/jsplay.html
+//   - this is for reference only
+// function search_items() {
+//     let input = document.getElementById('filter').value.toLowerCase();
+//     let x = document.getElementsByClassName('item');
+
+//     for (i = 0; i < x.length; i++) {
+//         if (!x[i].innerHTML.toLowerCase().includes(input)) {
+//             x[i].style.display = "none";
+//         }
+//         else {
+//             x[i].style.display = "list-item";
+//         }
+//     }
+// }
+