From 9fa68ce0019b45b6d4643b4a84c97a2791144ca2 Mon Sep 17 00:00:00 2001
From: Kris0011 <krishp759@gmail.com>
Date: Sun, 15 Oct 2023 18:02:36 +0530
Subject: [PATCH] Search List added for components

---
 components.html | 20 +++++++++++++-------
 script.js       | 19 +++++++++++++++++++
 2 files changed, 32 insertions(+), 7 deletions(-)
 create mode 100644 script.js

diff --git a/components.html b/components.html
index c6db3ff..6861ca1 100644
--- a/components.html
+++ b/components.html
@@ -29,8 +29,8 @@
                 </ul>
                 <form class="d-flex" role="search">
                     <input class="form-control me-3" type="search" placeholder="Search for the components"
-                        aria-label="Search" />
-                    <button class="btn btn-outline-success" type="submit">
+                        aria-label="Search" id="searchInput" />
+                    <button class="btn btn-outline-success" type="button" onclick="searchComponents()">
                         Search
                     </button>
                 </form>
@@ -39,26 +39,32 @@
     </nav>
 
     <div class="wrapper">
+        <!-- card-1 -->
         <div class="card">
-            
-            <div class="poster"><a href="components/Login_page/login.html"><img src="images/pexels-bich-tran-2481177.jpg" alt="" /></a></div>
+            <div class="poster"><a href="components/Login_page/login.html"><img
+                        src="images/pexels-bich-tran-2481177.jpg" alt="" /></a></div>
             <div class="details">
                 <h1>Login Page</h1>
                 <h2>By : 12Kishan</h2>
             </div>
         </div>
+
+        <!-- card-2 -->
         <div class="card">
-            <div class="poster"><a href="components/contact_form/index.html"><img src="images/contact.png" alt="" /></a></div>
+            <div class="poster"><a href="components/contact_form/index.html"><img src="images/contact.png" alt="" /></a>
+            </div>
             <div class="details">
-                <h1>Contact  Form</h1>
+                <h1>Contact Form</h1>
                 <h2>By : NaitikPatel-325</h2>
             </div>
         </div>
     </div>
-    
+
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
         integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
         crossorigin="anonymous"></script>
+
+    <script src="script.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..c01d7fa
--- /dev/null
+++ b/script.js
@@ -0,0 +1,19 @@
+function searchComponents() {
+    const searchInput = document.getElementById("searchInput").value.toLowerCase();
+    const cards = document.querySelectorAll(".card");
+
+
+    cards.forEach(card => {
+        const title = card.querySelector(".details h1").textContent.toLowerCase();
+        const author = card.querySelector(".details h2").textContent.toLowerCase();
+        console.log(title, author);
+
+        if (title.includes(searchInput) || author.includes(searchInput)) {
+            card.style.display = "block";
+            foundResults = true;
+        } else {
+            card.style.display = "none";
+        }
+    });
+    
+}
\ No newline at end of file