Merge pull request #440 from satyamra1/main

Update Search bar functionality in Devotional resource section
vishal02527 · Oct 15, 2024 · 7e34122 · 7e34122
2 parents 7d8b474 + 585cbac
commit 7e34122
Showing 1 changed file with 34 additions and 29 deletions.
diff --git a/devotional-resources.html b/devotional-resources.html
@@ -111,7 +111,7 @@
 
       .navigation .navbar {
         display: flex;
-        /* margin-right: 350px !important; */
+        margin-right: 350px !important;
       }
       .navigation .navbar a {
         color: #fff;
@@ -426,7 +426,9 @@
     </style>
   </head>
   <body>
-    <button id="scrollTopBtn" class="scroll-top-btn"> <i class="fas fa-arrow-up"></i></button>
+    <button id="scrollTopBtn" class="scroll-top-btn">
+      <i class="fas fa-arrow-up"></i>
+    </button>
     <div class="header">
       <div class="navigation">
         <div class="homeDiv">
@@ -438,19 +440,18 @@
             <a href="scriptures.html">Scriptures</a>
             <a href="gallery.html">Gallery</a>
             <a href="#" onclick="showLoginForm()">Discussion Forum</a>
-            <a href="devotional-resources.html" id="active"
-              >Devotional Resources</a
-            >
-            <a href="avatars.html">Avatars</a>
+            <a href="devotional-resources.html" id="active">Devotional Resources</a>
           </div>
         </div>
-        <form class="searchForm">
+        <form class="searchForm" onsubmit="return false;">
           <input
             type="text"
+            id="searchInput"
             class="searchInput"
             placeholder="Search all the content"
+            onkeyup="searchResources()"
           />
-          <button><i class="fa-solid fa-magnifying-glass"></i></button>
+          <button type="button"><i class="fa-solid fa-magnifying-glass"></i></button>
         </form>
       </div>
     </div>
@@ -511,9 +512,7 @@ <h2>Morning Mantras Audio</h2>
             Shree Krishna. Listen to the divine vibrations and bring positivity
             to your mornings.
           </p>
-          <a href="./morning-mantra-audio.html" class="cta-button"
-            >Listen Now</a
-          >
+          <a href="./morning-mantra-audio.html" class="cta-button">Listen Now</a>
         </div>
 
         <!-- Resource 5 Card -->
@@ -524,8 +523,7 @@ <h2>Shri Radha Chalisa PDF</h2>
             href="./pdf_files/Shree-Radha-Chalisa.pdf"
             class="cta-button"
             download
-            >Download Now</a
-          >
+            >Download Now</a>
         </div>
 
         <!-- Resource 6 Card -->
@@ -547,11 +545,10 @@ <h2>Divine and beautiful wallpapers</h2>
 
     <footer>
       <div class="footer-content">
-        <div class="footer-section statement ">
-          <h3>Statement on Faith </h3>
+        <div class="footer-section statement">
+          <h3>Statement on Faith</h3>
           <p class="faith-statement">
             Faith isn't just about something we believe; it is integral to our very existence, it's about how we live...
-
           </p>
           <a href="devotional-resources.html" class="read-more">Read More</a>
         </div>
@@ -575,25 +572,17 @@ <h3>Contact Us</h3>
         <div class="footer-section">
           <h3>Follow Us</h3>
           <div class="social-icons">
-            <a href="https://github.com/vishal02527" target="_blank"
-              ><i class="fa-brands fa-github"></i
-            ></a>
-            <a href="https://codepen.io/Vishal-Kumar25" target="_blank"
-              ><i class="fa-brands fa-codepen"></i
-            ></a>
-            <a
-              href="https://www.linkedin.com/in/vishal-kumar-8303a3283"
-              target="_blank"
-              ><i class="fa-brands fa-linkedin"></i
-            ></a>
+            <a href="https://github.com/vishal02527" target="_blank"><i class="fa-brands fa-github"></i></a>
+            <a href="https://codepen.io/Vishal-Kumar25" target="_blank"><i class="fa-brands fa-codepen"></i></a>
+            <a href="https://www.linkedin.com/in/vishal-kumar-8303a3283" target="_blank"><i class="fa-brands fa-linkedin"></i></a>
           </div>
         </div>
       </div>
       <div class="creatorDiv">
         <p>&copy; All rights reserved 2023, Created by Vishal.</p>
       </div>
     </footer>
-    <script src="script.js"></script>
+
     <script>
       window.onscroll = function () {
         toggleScrollTopButton();
@@ -615,6 +604,22 @@ <h3>Follow Us</h3>
       scrollTopBtn.onclick = function () {
         window.scrollTo({ top: 0, behavior: "smooth" }); // Smooth scroll to top
       };
+
+      // Function to filter resources by search input
+      function searchResources() {
+        const input = document.getElementById('searchInput').value.toLowerCase();
+        const resourceCards = document.querySelectorAll('.resource-card');
+
+        resourceCards.forEach(function(card) {
+          const title = card.querySelector('h2').textContent.toLowerCase();
+          if (title.includes(input)) {
+            card.style.display = '';
+          } else {
+            card.style.display = 'none';
+          }
+        });
+      }
     </script>
-  </body>
+</body>
+
 </html>