Removed filter logic from index.php and put it in a separate javascript file bookFilter.js

bookFilter.js

+let selectedCategories = new Set();
+        function filterBooks(categoryId, element) {
+            categoryId = categoryId.toString();
+            if (selectedCategories.has(categoryId)) {
+                selectedCategories.delete(categoryId);
+                element.classList.remove(element.getAttribute('data-bg-color'));
+                element.classList.add('bg-white');
+            } else {
+                selectedCategories.add(categoryId);
+                element.classList.remove('bg-white');
+                element.classList.add(element.getAttribute('data-bg-color'));
+            }
+
+            const books = document.querySelectorAll('.book-card');
+            books.forEach(book => {
+                if (selectedCategories.size === 0 || selectedCategories.has(book.getAttribute('data-category'))) {
+                    book.style.display = '';
+                } else {
+                    book.style.display = 'none';
+                }
+            });
+        }
\ No newline at end of file

index.php

@@ -80,31 +80,7 @@
         </div>
     </footer>
     <script src="footer.js"></script>
-    <script>
-        let selectedCategories = new Set();
-
-        function filterBooks(categoryId, element) {
-            categoryId = categoryId.toString();
-            if (selectedCategories.has(categoryId)) {
-                selectedCategories.delete(categoryId);
-                element.classList.remove(element.getAttribute('data-bg-color'));
-                element.classList.add('bg-white');
-            } else {
-                selectedCategories.add(categoryId);
-                element.classList.remove('bg-white');
-                element.classList.add(element.getAttribute('data-bg-color'));
-            }
-
-            const books = document.querySelectorAll('.book-card');
-            books.forEach(book => {
-                if (selectedCategories.size === 0 || selectedCategories.has(book.getAttribute('data-category'))) {
-                    book.style.display = '';
-                } else {
-                    book.style.display = 'none';
-                }
-            });
-        }
-    </script>
+    <script src ="bookFilter.js"></script>
 </body>
 
 </html>
\ No newline at end of file