Added SearchBar

src/app.js

@@ -10,17 +10,19 @@ async function loadContributors() {
 }
 
 // Function to display participants on the mural
-async function displayContributors() {
+async function displayContributors(filter = '') {
   const wall = document.getElementById("wall");
   const contributors = await loadContributors();
   wall.innerHTML = "";
 
   contributors.forEach((contributor, index) => {
-    const div = document.createElement("div");
-    div.classList.add("participant");
-    div.textContent = contributor.name;
-    div.style.animationDelay = `${index * 0.1}s`;
-    wall.appendChild(div);
+    if (contributor.name.toLowerCase().includes(filter.toLowerCase())) {
+      const div = document.createElement("div");
+      div.classList.add("participant");
+      div.textContent = contributor.name;
+      div.style.animationDelay = `${index * 0.1}s`;
+      wall.appendChild(div);
+    }
   });
 }
 
@@ -60,6 +62,7 @@ window.onload = function () {
   displayContributors();
   initializeDarkMode();
   addParticipantHoverEffect();
+  initializeSearch(); // Add this line
 };
 
 // Function to play spooky sound
@@ -107,4 +110,18 @@ document.addEventListener("keydown", function (event) {
 
 function activateNeonMode() {
   document.body.classList.add("neon-mode");
+}
+
+// Add this new function
+function initializeSearch() {
+  const searchInput = document.getElementById('searchInput');
+  const searchButton = document.getElementById('searchButton');
+
+  searchInput.addEventListener('input', () => {
+    displayContributors(searchInput.value);
+  });
+
+  searchButton.addEventListener('click', () => {
+    displayContributors(searchInput.value);
+  });
 }

src/contributors.json

@@ -10,5 +10,8 @@
     },
     {
         "name": "Anish"
+    },
+    {
+        "name": "Piyush"
     }
 ]

src/index.html

@@ -22,13 +22,21 @@
         </a>
         <i id="halloweenIcon" class="fas fa-ghost"></i> 
       </div>
-      <button
-        id="toggleButton"
-        class="toggle-btn"
-        aria-label="Toggle dark mode"
-      >
-        <i class="fas fa-sun"></i>
-      </button>
+      <div class="header-controls">
+        <div class="search-container">
+          <input type="text" id="searchInput" placeholder="Search contributors..." aria-label="Search contributors">
+          <button id="searchButton" aria-label="Search">
+            <i class="fas fa-search"></i>
+          </button>
+        </div>
+        <button
+          id="toggleButton"
+          class="toggle-btn"
+          aria-label="Toggle dark mode"
+        >
+          <i class="fas fa-sun"></i>
+        </button>
+      </div>
     </header>
     <main class="container">
       <section class="intro">

src/style.css

@@ -44,6 +44,68 @@ header {
   z-index: 1000;
 }
 
+.header-controls {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.search-container {
+  display: flex;
+  align-items: center;
+  background-color: #f0f0f0;
+  border-radius: 20px;
+  padding: 0.3rem 0.5rem;
+  transition: all 0.3s ease;
+  width: 250px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+.dark-mode .search-container {
+  background-color: #333;
+  box-shadow: 0 2px 5px rgba(255, 255, 255, 0.1);
+}
+
+#searchInput {
+  border: none;
+  background: transparent;
+  padding: 0.3rem 0.5rem;
+  font-size: 0.9rem;
+  color: #333;
+  width: 210px;
+  outline: none;
+}
+
+.dark-mode #searchInput {
+  color: #f0f0f0;
+}
+
+#searchInput::placeholder {
+  color: #888;
+}
+
+#searchButton {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: #555;
+  font-size: 0.9rem;
+  padding: 0.3rem;
+  transition: color 0.3s ease;
+}
+
+#searchButton:hover {
+  color: #000;
+}
+
+.dark-mode #searchButton {
+  color: #aaa;
+}
+
+.dark-mode #searchButton:hover {
+  color: #fff;
+}
+
 h1 {
   font-size: 2.5rem;
   font-weight: 600;