Merge pull request #2625 from Ayushmaanagarwal1211/Search-functionality

Implemented a search functionality for searching the books

books.html

@@ -498,7 +498,26 @@ <h3>XYZ<br /><span>Book Lover</span></h3>
 
 
 </style>
+<script>
+ document.addEventListener('DOMContentLoaded', function() {
+ const searchInput = document.getElementById('book-search');
+ const allBooks = document.querySelectorAll('.flex.flex-col');
+
+ searchInput.addEventListener('input', function() {
+ const searchTerm = searchInput.value.toLowerCase();
 
+ allBooks.forEach(book => {
+ const title = book.querySelector('p').textContent.toLowerCase();
+
+ if (title.includes(searchTerm)) {
+ book.style.display = 'block'; // Show matching book
+ } else {
+ book.style.display = 'none'; // Hide non-matching book
+ }
+ });
+ });
+});
+</script>
 <style>
  #chaps {
  margin-top: 150px; /* Adjust the margin-top value as needed */
@@ -583,6 +602,7 @@ <h3 class="h3 card-title">"Enriching stories to warm your heart"</h3>
  </div>
  </div>
  </nav>
+ <input type="text" id="book-search" style="border-bottom:solid gray 1px ;" placeholder="Search books..." class="p-2 border border-gray-300 rounded-md mb-4 outline-none mt-[20px] border-b-gray-400 border-b-[1px] ">
 
  <!--books start here-->