Merge branch 'main' into add-authentication

software-students-spring2024 · Mar 1, 2024 · c2db380 · c2db380
2 parents 410369c + d1f1ce9
commit c2db380
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 7 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,26 +2,47 @@
 
 {% 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('displayDeck', username=username, deckTitle=deck.title) }}" style="text-decoration:none">
+        <a href="{{ url_for('displayDeck', username=username, deckTitle=deck.title) }}" style="text-decoration:none" class="deck-link">>
             <button class="personal-deck">
                 <h3>{{ deck.title }}</h3>
             </button>
         </a>
     {% endfor %}
-
-    {% if isAuth %}
-        <button class="add-deck">
-            <h3> + </h3>
-        </button>
+
+    <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>
 
         <form action="{{ url_for('createDeck', username=username) }}" method="post" class="add-deck-form" style="display: none">
             <p>x</p>
@@ -47,3 +68,4 @@ <h3> + </h3>
     {% endif %}
 
 {% endblock %}
+