Add tag filtering

src/views/HomepageView.vue

@@ -7,7 +7,8 @@ export default {
 
     return {
       data: await res.json(),
-      frontend_url
+      frontend_url,
+      filterTags: ''
     }
   },
   methods: {
@@ -17,6 +18,35 @@ export default {
         notation: 'compact',
         maximumFractionDigits: 1
       }).format(text)
+    },
+
+    filterSearches(toFilter: string) {
+      const categories = this.$refs.categoryItem
+      const wantedTags = toFilter.split(',').filter((v) => v.toLowerCase())
+
+      for (let category of categories as any) {
+        let tagElements = category.getElementsByTagName("span")
+        let tags = []
+
+        for (let tag of tagElements) {
+          tags.push(tag.innerText.toLowerCase())
+        }
+
+        // Create sets from the arrays
+        const [set1, set2] = [new Set(wantedTags), new Set(tags)]
+        const common = [...set1].filter(x => set2.has(x));
+        
+        console.log(wantedTags)
+
+        if(common.length === wantedTags.length) {
+          category.style.display = ""
+        } else if (wantedTags[0] === "") {
+          category.style.display = ""
+          console.log('ok')
+        } else {
+          category.style.display = "none"
+        }
+      }
     }
   }
 }
@@ -38,16 +68,19 @@ export default {
             id="searchBar"
             name="searchBar"
             placeholder="Search"
+            v-model="filterTags"
+            @keyup="filterSearches(filterTags)"
             class="rounded-md p-1 pl-8 text-black bg-neutral-500 placeholder:text-white"
           />
         </form>
       </div>
     </div>
 
-    <ul class="">
+    <ul ref="categoryList">
       <li
         v-for="category in data"
         :key="category"
+        ref="categoryItem"
         class="inline-flex m-2 hover:scale-105 transition-transform"
       >
         <div class="bg-ctp-crust max-w-[13.5rem] rounded-lg">