diff --git a/src/app.js b/src/app.js index bd72f56..f1126a0 100644 --- a/src/app.js +++ b/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); + }); } \ No newline at end of file diff --git a/src/contributors.json b/src/contributors.json index 9fc4375..c9153ab 100644 --- a/src/contributors.json +++ b/src/contributors.json @@ -10,5 +10,8 @@ }, { "name": "Anish" + }, + { + "name": "Piyush" } ] diff --git a/src/index.html b/src/index.html index 4eb54c1..71f65b1 100644 --- a/src/index.html +++ b/src/index.html @@ -22,13 +22,21 @@ - +
+
+ + +
+ +
diff --git a/src/style.css b/src/style.css index 9246667..18d8e49 100644 --- a/src/style.css +++ b/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;