feat: add no profile text (#158)

Merge pull request #158 from mathanraj0601/feature/user-experience

css/style.css

@@ -62,6 +62,14 @@ h1 {
   padding: 20px;
 }
 
+#no-profile
+{
+  text-align: center;
+  padding: 20px;
+  font-family: "PT Serif", serif; 
+  display: none;
+}
+
 .profile {
   background-color: var(--clr-secondary);
   border-radius: 10px;
@@ -75,6 +83,7 @@ h1 {
 .profile:hover {
   background-color: var(--clr-profile-hover);
 }
+
 .pfp img {
   width: 100px;
   height: 100px;

index.html

@@ -33,6 +33,7 @@ <h1 class="col">Dev Profiles</h1>
     <button class="add col"
         onclick='window.open("https://github.com/oyepriyansh/DevProfiles","_blank")'"><span>Add your Profile &nbsp;</span><i class="
         fa-sharp fa-solid fa-user-plus"></i> </button>
+    <div id="no-profile"> No Profile Found </div>
 
     <div class="container">
         <!--Don't add your profile in top or bottom, add it in between, this is to avoid merge conflicts -->

js/script.js

@@ -1,21 +1,27 @@
 const searchInput = document.getElementById('searchInput');
 const profiles = document.querySelectorAll('.profile');
-
+const noProfileDiv = document.getElementById('no-profile');
 searchInput.addEventListener('input', filterProfiles);
 
 function filterProfiles() {
     const query = searchInput.value.toLowerCase();
-
+    let hasMatchingProfile = false;
     profiles.forEach((profile) => {
         const name = profile.querySelector('.name').textContent.toLowerCase();
         const skills = profile.querySelector('.skills').textContent.toLowerCase();
-
         if (name.includes(query) || skills.includes(query)) {
-            profile.style.display = 'block'; // Show matching profiles
+          hasMatchingProfile = true;
+          profile.style.display = 'block'; // Show matching profiles
         } else {
             profile.style.display = 'none'; // Hide non-matching profiles
         }
     });
+    if (hasMatchingProfile) {
+      noProfileDiv.style.display = 'none';
+    } else {
+      noProfileDiv.style.display = 'block';
+    }
+
 }