Merge pull request #86 from Arpitawork24/main

Fix unresponsive UI caused by null DOM references (#76)

Author: steam-bell-92

web-app/css/styles.css

@@ -921,6 +921,7 @@ body {
         bottom: 1rem;
         width: 3rem;
         height: 3rem;
+    }
 
     .search-wrapper {
         max-width: 100%;
@@ -1072,4 +1073,4 @@ body {
     .modal-close:hover {
         transform: none;
     }
-}
+}

web-app/js/main.js

@@ -3,6 +3,7 @@ const themeToggle = document.getElementById('themeToggle');
 const themeColorMeta = document.getElementById('themeColorMeta');
 const html = document.documentElement;
 const mainContent = document.getElementById('main-content');
+let recentSearches = [];
 
 function prefersReducedMotion() {
     return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
@@ -61,7 +62,7 @@ backToTopButton.addEventListener('click', () => {
 });
 
 // Category Filtering
-const tabs = document.querySelectorAll('.tab');
+// const tabs = document.querySelectorAll('.tab');
 
 // Category Filtering (tabs)
 
@@ -171,14 +172,21 @@ function highlightMatch(text, query) {
 
 // Render recent searches
 function renderRecentSearches() {
-    if (recentSearches.length === 0) {
-        recentSearchesSection.style.display = 'none';
-        tipsSection.style.display = 'block';
-        resultsSection.style.display = 'none';
-        return;
+    if (recentSearchesSection) {
+    recentSearchesSection.style.display = 'none';
+    }
+
+    if (tipsSection) {
+    tipsSection.style.display = 'block';
+    }
+
+    if (resultsSection) {
+    resultsSection.style.display = 'none';
     }
 
+    if (recentSearchesList) {
     recentSearchesList.innerHTML = '';
+    }
     recentSearches.slice(0, 5).forEach((search) => {
         const item = document.createElement('div');
         item.className = 'dropdown-recent-item';
@@ -212,11 +220,15 @@ function renderRecentSearches() {
         recentSearchesList.appendChild(item);
     });
 
+    if (recentSearchesSection && resultsSection && tipsSection) {
     recentSearchesSection.style.display = 'block';
     resultsSection.style.display = 'none';
     tipsSection.style.display = 'block';
 }
 
+    
+}
+
 function applyCategoryFilter(category) {
     projectCards.forEach((card) => {
         if (category === 'all' || card.getAttribute('data-category') === category) {