Added Tech-Stack based filter

Author: Jils31

index.html

@@ -76,6 +76,12 @@ <h2><i class="fas fa-filter"></i> Filter Projects</h2>
                     </div>
                     <button class="btn-secondary" id="apply-filters">Apply Filters</button>
                     <button class="btn-secondary" id="reset-filters">Reset</button>
+                    <div class="filter-group">
+                        <label>Filter by Tech Stack:</label>
+                        <div id="tag-filters" class="tag-filters">
+                            <!-- Dynamic tags will be appeared here -->
+                        </div>
+                    </div>
                 </div>
             </div>
         </section>

script.js

@@ -83,6 +83,15 @@ const sampleProjects = [
 
         // Store the current projects array
         let currentProjects = [...sampleProjects];
+        let selectedTag = null;
+
+        //Store all the unique tags
+        const allTagSet = new Set();
+        sampleProjects.forEach(project => {
+            project.tags.forEach(tag => allTagSet.add(tag));
+        })
+
+        const uniqueTags = Array.from(allTagSet);
 
         // DOM elements
         const projectsContainer = document.getElementById('projects-container');
@@ -95,13 +104,23 @@ const sampleProjects = [
         const resetFiltersBtn = document.getElementById('reset-filters');
         const searchInput = document.getElementById('search-input');
         const clearSearchBtn = document.getElementById('clear-search');
+        const tagFiltersContainer = document.querySelector('.tag-filters');
+
+        uniqueTags.forEach(tag => {
+            const button = document.createElement('button');
+            button.textContent = tag;
+            button.classList.add('tag-filter-btn')
+            button.dataset.tag = tag
+            tagFiltersContainer.appendChild(button)
+        })
 
         // Initialize the app
         function init() {
             setTimeout(() => {
                 hideLoading();
                 renderProjects(currentProjects);
                 setupEventListeners();
+                initializeTagFilterListener();
             }, 1000); // Simulate loading time
         }
 
@@ -129,6 +148,28 @@ const sampleProjects = [
             });
         }
 
+        function initializeTagFilterListener() {
+            tagFiltersContainer.addEventListener('click', (e) => {
+                if (e.target.classList.contains('tag-filter-btn')) {
+                    const clickedTag = e.target.dataset.tag;
+
+                    // Toggle selection
+                    if (selectedTag === clickedTag) {
+                        selectedTag = null;
+                        e.target.classList.remove('active');
+                    } else {
+                        selectedTag = clickedTag;
+                        // Remove active from all buttons
+                        document.querySelectorAll('.tag-filter-btn').forEach(btn => btn.classList.remove('active'));
+                        e.target.classList.add('active');
+                    }
+
+                    applyFilters(); // Re-apply filters based on tag
+                }
+            });
+        }
+
+
         // Render projects
         function renderProjects(projects) {
             if (projects.length === 0) {
@@ -248,6 +289,10 @@ const sampleProjects = [
                 filtered = filtered.filter(p => p.hasReadme);
             }
 
+            if(selectedTag){
+                filtered = filtered.filter(project => project.tags.includes(selectedTag));
+            }
+
             return filtered;
         }
 
@@ -288,6 +333,8 @@ const sampleProjects = [
             hasReadmeFilter.checked = false;
             searchInput.value = '';
             clearSearchBtn.style.display = 'none';
+            selectedTag = null;
+            document.querySelectorAll('.tag-filter-btn').forEach(btn => btn.classList.remove('active'));
             renderProjects(sampleProjects);
         }
 

style.css

@@ -331,6 +331,28 @@
             transform: translateY(-2px);
         }
 
+        .tag-filters {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 8px;
+            margin: 10px 0;
+        }
+
+        .tag-filter-btn {
+            padding: 6px 12px;
+            background: #f0f0f0;
+            border: 1px solid #ccc;
+            border-radius: 20px;
+            cursor: pointer;
+            transition: background 0.3s;
+        }
+
+        .tag-filter-btn.active {
+            background: #007bff;
+            color: #fff;
+            border-color: #007bff;
+        }
+
         /* Projects section */
         .projects-section {
             padding: 2rem 0;