Merge pull request #45 from manisacharya/search-card-fix

Search card issue fix

index.html

@@ -38,6 +38,10 @@ <h1>Add Your Card</h1>
     <div class="search-container">
       <input type="text" id="searchInput" onkeyup="searchCards()" placeholder="Search for names...">
     </div>
+
+    <!-- Add empty state when search result is empty -->
+    <div id="empty-state"></div>
+
     <div class="cardholder">
       <div class="card">
         <div class="name">
@@ -369,13 +373,15 @@ <h2>Varsha Awasthi</h2>
     // Get the name in the card and convert it to lowercase
     var name = card.querySelector('.name h2').innerText.toLowerCase();
 
+    document.getElementById('empty-state').innerHTML ="";
     // Check if the input value is present in the card name
     if (name.includes(input)) {
       // If yes, display the card
-      card.style.display = 'block';
+      card.style.display = 'flex'; // Fix issue of displaying different html content of card
     } else {
       // If not, hide the card
       card.style.display = 'none';
+      document.getElementById('empty-state').innerHTML ="<h1>Card not found!!</h1>";
     }
   });
 }

style.css

@@ -132,6 +132,16 @@ a {
   color: #7300ff;
 }
 
+#empty-state {
+  font-size: larger;
+  font-weight: bolder;
+  color: aliceblue;
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  animation: color-animation 5s infinite;
+}
+
 @keyframes border-animation {
   0% {
     border-color: rgb(160, 140, 212);