added searchbar

TealCode/main/static/main/css/style.css

@@ -161,4 +161,25 @@ body main #main-content .note p{
 #button-content div a:hover{
     background-color: rgba(137, 250, 194, 0.3);
     border: 5px solid rgb(107, 255, 181);
+}
+
+#search{
+    width: 100%;
+    height: 30px;
+}
+
+#search input{
+    width: 80%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0.014);
+    border: 3px solid rgb(34, 102, 71);
+    outline: 0;
+    font-size: 13pt;
+    font-weight: bold;
+    padding-left:10px;
+    padding-right: 10px;
+    display: block;
+    margin-top: 10px;
+    margin-left: auto;
+    margin-right: auto;
 }

TealCode/main/templates/main/category.html

@@ -9,6 +9,11 @@
         <h2>{{ category_obj.title }}</h2>
     {% endif %}
     </div>
+
+    <div id="search">
+        <input placeholder = "Search..." type="text" id="searchBar" onkeydown="search()" onkeyup="search()" onchange="search()">
+    </div>
+
     <div id="list">
         {% for topic in topics %}
         <div class="list-item" onclick="openTopic('{{ topic.title }}')">
@@ -21,6 +26,23 @@
     </div>   
 
     <script>
+        function search(){
+            var input = document.getElementById("searchBar");
+            var items = document.getElementsByClassName("list-item");
+
+            for (let index = 0; index < items.length; index++) {
+                const item = items[index];
+                const p = item.getElementsByTagName("p")[0];
+                
+                item.style.display = "none";
+
+                if(p.innerHTML.toLowerCase().includes(input.value.toLowerCase())){
+                    item.style.display = "block";
+                }
+
+            }
+        }
+
         function openTopic(topic){
             window.open("/topic/{{ category_obj.title }}/" + topic, "_self");
         }