Added a search function and a fallback image to github if image is no…

…t defined

Added a search function
Added GitHub as fallback if image is not provided and if that is not found it will use the defaultimage variable

scripts/app.js

@@ -1,7 +1,7 @@
 const container = document.querySelector('.container');
 const defaultImage = "https://oyepriyansh.pages.dev/i/5nf5fd.png";
 const searchInput = document.getElementById('searchInput'); // Assuming there's an input field for searching
-const noProfileMessage = document.querySelector('.no-profile');
+const noProfileMessage = document.querySelector('.no-profile'); // Message element
 const fabButton = document.getElementById("backToTopBtn");
 
 // Load profiles from JSON file
@@ -16,16 +16,20 @@ const loadProfiles = async () => {
   } catch (error) {
     console.error('Error fetching profiles:', error);
     noProfileMessage.textContent = 'Failed to load profiles. Please try again later.';
-    noProfileMessage.style.display = 'block';
+    noProfileMessage.style.display = 'block'; // Show error message
   }
 };
 
 // Display profiles on the page
-const displayProfiles = (profiles) => {
-  profiles.forEach((profile) => {
+const displayProfiles = async (profiles) => {
+  container.innerHTML = ''; // Clear existing profiles
+  for (const profile of profiles) {
     const profileDiv = document.createElement('div');
     profileDiv.classList.add('profile');
 
+    // Determine the image source
+    let imageSrc = profile.image || await fetchGitHubImage(profile.github);
+
     // Skills
     const skills = profile.skills.map(skill => `<span class="skill">${skill}</span>`).join('');
 
@@ -39,15 +43,36 @@ const displayProfiles = (profiles) => {
     // Adding profile HTML content
     profileDiv.innerHTML = `
       <div class="pfp">
-        <img src="${profile.image}" alt="${profile.name}'s Profile Picture" onerror="this.onerror=null; this.src='${defaultImage}';" />
+        <img src="${imageSrc}" alt="${profile.name}'s Profile Picture" onerror="this.onerror=null; this.src='${defaultImage}';" />
       </div>
       <h2 class="name">${profile.name}</h2>
       <div class="skills">${skills}</div>
       <div class="social">${social}</div>
     `;
 
     container.append(profileDiv);
-  });
+  }
+};
+
+// Function to fetch GitHub image
+const fetchGitHubImage = async (githubUrl) => {
+  if (!githubUrl) return defaultImage; // Return default if no GitHub URL
+
+  // Extract username from GitHub URL
+  const username = githubUrl.split('/').pop();
+  const apiUrl = `https://api.github.com/users/${username}`;
+
+  try {
+    const response = await fetch(apiUrl);
+    if (!response.ok) {
+      throw new Error('GitHub user not found');
+    }
+    const userData = await response.json();
+    return userData.avatar_url || defaultImage; // Return avatar URL or default image
+  } catch (error) {
+    console.error('Error fetching GitHub image:', error);
+    return defaultImage; // Fallback to default image on error
+  }
 };
 
 // Shuffle array function
@@ -59,16 +84,25 @@ const shuffleArray = (array) => {
   return array;
 };
 
-// Search function with debouncing
+// Search function with debouncing and URL update
 let debounceTimer;
 searchInput.addEventListener('keyup', () => {
   clearTimeout(debounceTimer);
+  const searchTerm = searchInput.value.trim().toLowerCase();
+  updateURL(searchTerm); // Update the URL with the search term
+
   debounceTimer = setTimeout(() => {
-    const searchTerm = searchInput.value.trim().toLowerCase();
     filterProfiles(searchTerm);
   }, 300); // 300ms debounce time
 });
 
+// Function to update the URL
+const updateURL = (searchTerm) => {
+  const url = new URL(window.location);
+  url.searchParams.set('search', searchTerm);
+  window.history.pushState({}, '', url);
+};
+
 // Filter profiles based on search term
 const filterProfiles = (searchTerm) => {
   const profiles = document.querySelectorAll('.profile');
@@ -86,8 +120,12 @@ const filterProfiles = (searchTerm) => {
     }
   });
 
-  // Show or hide the no profiles message
-  noProfileMessage.style.display = visibleProfiles > 0 ? 'none' : 'block';
+  // Show or hide the no profiles message based on search results
+  if (visibleProfiles === 0 && searchTerm !== '') {
+    noProfileMessage.style.display = 'block'; // Show message if no profiles found
+  } else {
+    noProfileMessage.style.display = 'none'; // Hide message if profiles are found
+  }
 };
 
 // Scroll to top button functionality
@@ -104,3 +142,9 @@ document.getElementById("currentYear").textContent = new Date().getFullYear();
 
 // Load profiles when the page is ready
 loadProfiles();
+
+// Load search term from URL on page load
+const urlParams = new URLSearchParams(window.location.search);
+const searchTerm = urlParams.get('search') || '';
+searchInput.value = searchTerm; // Set the input value from the URL
+filterProfiles(searchTerm); // Filter profiles based on the URL search term