Merge pull request #63 from software-students-spring2024/search

Adding search engine
software-students-spring2024 · Feb 29, 2024 · d1f1ce9 · d1f1ce9
2 parents ec74274 + 490bcb4
commit d1f1ce9
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 4 deletions.
diff --git a/static/css/style.css b/static/css/style.css
@@ -205,3 +205,19 @@ h3 {
 .signup-error, .login-error {
   font-size: 25px;
 }
+
+.search-container {
+  margin-bottom: 40px;
+}
+
+#searchBar {
+  width: 90%;
+  padding: 15px;
+  font-size: 25px;
+  border-radius: 5px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: auto;
+}
diff --git a/templates/decks.html b/templates/decks.html
@@ -2,23 +2,44 @@
 
 {% block container %}
 
+    <div class="search-container">
+        <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>
         </a>
     {% 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>
@@ -45,4 +66,6 @@ <h3> + </h3>
         })
     </script>
     {% endif %}
+
 {% endblock %}
+