Add no projects available card (Opentek-Org#493)

Swapnil-2503 · Jul 16, 2023 · 7caec31 · 7caec31
1 parent 5664cd4
commit 7caec31
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 20 deletions.
diff --git a/css/projects.css b/css/projects.css
@@ -182,3 +182,20 @@ img {
   padding: 20px 0;
   margin-top: 10px;
 }
+
+.not-found-card {
+    background-color: #090e14;
+    border-radius: 1rem;
+    box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25);
+    display: flex;
+    flex-direction: column;
+    padding: 1rem;
+    gap: 12px;
+    overflow: hidden;
+    position: relative;
+    background: var(--main-color);
+    border: 3px solid white;
+    margin: 50px auto;
+    padding: 10px 50px;
+    font-size: 16px;
+}
diff --git a/js/projects.js b/js/projects.js
@@ -19,32 +19,45 @@ $("#selectoption").append(htmlc);
 function loadData(data, valu) {
   let index = valu;
   if (valu == "all" || valu < domain.length) {
+    let isFound = false
     var html = "";
     for (let i = data.length -1; i >= 0 ; i--) {
-      if (valu == "all" || data[i].domainIds.includes(index))
-      try {
-          html += `
-          <li class="cards_item">
-          <div class="card">
-              <div class="card_content">
-              <p class="card_title">${data[i].langName}</p>
-              <div class="card-project-properties"> 
-              <span class="card-project-admin-name">Project Admin : ${data[i].langAdmin}</span>
-              <h6 class="card-stack"> ${data[i].langTitle}</h6>
-              </div>
-              <p class="card_text">${data[i].langDesc}</p>
-              </div>
-              <a href="${data[i].langurl}" target="_blank"><button class="btn card_btn">Github Repository</button></a>
-          </div>
-          </li>
-  
-          `;
-      } catch (error) {
-        console.log(error);
+      if (valu == "all" || data[i].domainIds.includes(index)) {
+        isFound = true
+        try {
+            html += `
+            <li class="cards_item">
+            <div class="card">
+                <div class="card_content">
+                <p class="card_title">${data[i].langName}</p>
+                <div class="card-project-properties"> 
+                <span class="card-project-admin-name">Project Admin : ${data[i].langAdmin}</span>
+                <h6 class="card-stack"> ${data[i].langTitle}</h6>
+                </div>
+                <p class="card_text">${data[i].langDesc}</p>
+                </div>
+                <a href="${data[i].langurl}" target="_blank"><button class="btn card_btn">Github Repository</button></a>
+            </div>
+            </li>
+    
+            `;
+        } catch (error) {
+          console.log(error);
+        }
       }
+    } 
+    if (!isFound) {
+      console.log("Not found")
+      html += `
+            <div class="not-found-card">
+                <div class="card_content not">No data found</div>
+            </div>
+            `;
     }
     $("#project").append(html);
   } else {
+    console.log(isFound)
+    console.log("error")
     var htmlz = `<div class= "container unique-style3  mb-5 pb-5">`;
     htmlz += `<p class="text-light text-center text-no-data">No data found.Please select another month.</p>`;
     htmlz += `</div>`;