Added Search func2

Author: isid555

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,7 @@ function getProjectContent(project) {
 }
 
 function renderProjectList(projects) {
+  projectsArea.innerHTML = ""
   projects.forEach((project) => {
     const projectCard = document.createElement("div");
     projectCard.className = "project-card";
@@ -86,15 +88,34 @@ 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,7 +167,21 @@ 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;
+}
 .project-card {
   border: 1px solid black;
   border-radius: 6px;