From a3d2e6225d8706660e7ef5748b673bb2a4bf54c8 Mon Sep 17 00:00:00 2001
From: shriyakalakata <shriyakalakata123@gmail.com>
Date: Wed, 28 Feb 2024 23:01:40 -0500
Subject: [PATCH 1/3] Add html for search engine

---
 templates/decks.html | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/templates/decks.html b/templates/decks.html
index 5e8735f..2f48a88 100644
--- a/templates/decks.html
+++ b/templates/decks.html
@@ -2,6 +2,10 @@
 
 {% block container %}
 
+    <div class="search-container">
+        <input type="text" id="searchInput" placeholder="Search decks..." onkeyup="searchDecks()">
+    </div>
+
     {% for deck in mainDecks %}
         <a href="{{ url_for('displayDeck', username='guest', deckTitle=deck.title )}}" style="text-decoration:none">
             <button class="main-deck">

From 410605bc75e0567c091962a35d9cd28c27742e32 Mon Sep 17 00:00:00 2001
From: shriyakalakata <shriyakalakata123@gmail.com>
Date: Wed, 28 Feb 2024 23:02:06 -0500
Subject: [PATCH 2/3] Add css for search engine

---
 static/css/style.css | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/static/css/style.css b/static/css/style.css
index 62bbb15..90c50ab 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -137,3 +137,19 @@ h3 {
 .signup-error, .login-error {
   font-size: 25px;
 }
+
+.search-container {
+  margin-bottom: 40px;
+}
+
+#searchInput {
+  width: 90%;
+  padding: 15px;
+  font-size: 25px;
+  border-radius: 5px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: auto;
+}
\ No newline at end of file

From 490bcb4b727512c23ae99a3f97e9ec7cc82dc395 Mon Sep 17 00:00:00 2001
From: shriyakalakata <shriyakalakata123@gmail.com>
Date: Thu, 29 Feb 2024 15:37:50 -0500
Subject: [PATCH 3/3] Implement search bar for decks

---
 static/css/style.css |  2 +-
 templates/decks.html | 29 ++++++++++++++++++++++++-----
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index 772d4c4..655fe02 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -210,7 +210,7 @@ h3 {
   margin-bottom: 40px;
 }
 
-#searchInput {
+#searchBar {
   width: 90%;
   padding: 15px;
   font-size: 25px;
diff --git a/templates/decks.html b/templates/decks.html
index b5ce35a..9201a66 100644
--- a/templates/decks.html
+++ b/templates/decks.html
@@ -3,11 +3,11 @@
 {% block container %}
 
     <div class="search-container">
-        <input type="text" id="searchInput" placeholder="Search decks..." onkeyup="searchDecks()">
+        <input type="text" id="searchBar" placeholder="Search decks...">
     </div>
 
     {% for deck in mainDecks %}
-        <a href="{{ url_for('displayDeck', username='guest', deckTitle=deck.title )}}" style="text-decoration:none">
+        <a href="{{ url_for('displayDeck', username='guest', deckTitle=deck.title )}}" style="text-decoration:none" class="deck-link">
             <button class="main-deck">
                 <h3>{{ deck.title }}</h3>
             </button>
@@ -15,14 +15,31 @@ <h3>{{ deck.title }}</h3>
     {% endfor %}
 
     {% for deck in personalDecks %}
-        <a href="{{ url_for('home') }}" style="text-decoration:none">
+        <a href="{{ url_for('home') }}" style="text-decoration:none" class="deck-link">
             <button class="personal-deck">
                 <h3>{{ deck.title }}</h3>
             </button>
         </a>
     {% endfor %}
-    
-   {% if isAuth %} 
+
+    <script>
+        const searchBar = document.getElementById("searchBar");
+        const deckLinks = document.querySelectorAll(".deck-link");
+
+        searchBar.addEventListener("input", function() {
+            const searchTerm = searchBar.value.toLowerCase();
+            deckLinks.forEach(function(link) {
+                const deckTitle = link.querySelector("h3").textContent.toLowerCase();
+                if (deckTitle.includes(searchTerm)) {
+                    link.style.display = "block";
+                } else {
+                    link.style.display = "none";
+                }
+            });
+        });
+    </script>
+
+    {% if isAuth %} 
     <button class="add-deck">
         <h3> + </h3>
     </button>
@@ -49,4 +66,6 @@ <h3> + </h3>
         })
     </script>
     {% endif %}
+
 {% endblock %}
+