Merge pull request #1927 from isid555/search_2

Implemented Search Bar Functionality

Author: swapnilsparsh

index.html

@@ -92,6 +92,9 @@ <h2>30 Days of JavaScript</h2>
           <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript">
             <button class="btn active">Learn JS</button>
           </a>
+          <div>
+            <input type="text" id="search-bar" placeholder="Search" />
+          </div>
         </div>
       </div>
     </section>

script.js

@@ -1,5 +1,6 @@
 const projectsArea = document.querySelector(".project-list-area");
-
+const searchBar = document.getElementById("search-bar");
+let allProjects = []
 function getImagePath(id) {
   return `public/assets/${id}.png`;
 }
@@ -65,6 +66,16 @@ function getProjectContent(project) {
 }
 
 function renderProjectList(projects) {
+  projectsArea.innerHTML = ""
+
+  if (projects.length === 0) {
+    const noResultsMessage = document.createElement("p");
+    noResultsMessage.className = "no-results";
+    noResultsMessage.innerText = "No results found";
+    projectsArea.appendChild(noResultsMessage);
+    return;
+  }
+  
   projects.forEach((project) => {
     const projectCard = document.createElement("div");
     projectCard.className = "project-card";
@@ -86,15 +97,35 @@ function renderProjectList(projects) {
   });
 }
 
+function filterProjects(query) {
+  const filteredProjects = allProjects.filter(project =>
+      project.name.toLowerCase().includes(query.toLowerCase()) ||
+      project.description.toLowerCase().includes(query.toLowerCase())
+  );
+  
+  renderProjectList(filteredProjects);
+}
+
 function fetchProjects() {
+
   fetch("./data.json")
-    .then((res) => res.json())
-    .then((projects) => {
-      renderProjectList(projects);
-    })
-    .catch((err) => {
-      console.log("Error fetching project data:", err);
-    });
+      .then((res) => res.json())
+      .then((projects) => {
+        allProjects = projects;
+        renderProjectList(projects);
+        searchBar.addEventListener( "input", () => {
+          const query = searchBar.value;
+          if (query) {
+            filterProjects(query)
+          }
+          else {
+            renderProjectList(projects);
+          }
+        });
+      })
+      .catch((err) => {
+        console.log("Error fetching project data:", err);
+      });
 }
 
 fetchProjects();

style.css

@@ -167,6 +167,28 @@ section.hero {
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 25px;
 }
+#search-bar{
+  height: 35px;
+  width: 100%;
+  max-width: 410px;
+  border-radius: 8px;
+  margin: 18px;
+  padding: 8px;
+  color: black;
+  font-weight: bold;
+}
+#search-bar::placeholder{
+  font-weight: bold;
+  color: black;
+  font-size: 13px;
+}
+.no-results {
+  font-size: 1.5rem;
+  color: black;
+  text-align: center;
+  padding: 20px;
+  font-weight: bold;
+}
 
 .project-card {
   border: 1px solid black;