Merge pull request #146 from nishant0708/viewCount_try

Feature: Want to Add View Count in each Profile #58
recodehive · Aug 7, 2024 · 8c0c77d · 8c0c77d
2 parents 2ff6b4f + 8e9e0bb
commit 8c0c77d
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -11,7 +11,8 @@
     />
     <link rel="stylesheet" href="styles.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
-
+    <script src="https://www.gstatic.com/firebasejs/7.14.6/firebase-app.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/7.14.6/firebase-database.js"></script>
   </head>
   <body>
     <nav class="navbar">
@@ -153,8 +154,13 @@ <h5>
       </svg>
     </button>
 
+
+    <script src="https://www.gstatic.com/firebasejs/7.14.6/firebase-app.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/7.14.6/firebase-database.js"></script>
     <script src="ScrollToTop.js"></script>
     <script src="retriveprofile.js"></script>
     <script src="dark-mode.js"></script>
+
+
   </body>
 </html>
diff --git a/retriveprofile.js b/retriveprofile.js
@@ -1,3 +1,11 @@
+// Firebase configuration
+var firebaseConfig = {
+//Add Config Files here 
+};
+
+// Initialize Firebase
+firebase.initializeApp(firebaseConfig);
+
 document.addEventListener("DOMContentLoaded", function () {
   let contributors = [];
 
@@ -37,21 +45,51 @@ document.addEventListener("DOMContentLoaded", function () {
         const name = document.createElement("p");
         name.textContent = contributor.login;
 
+        const viewCount = document.createElement("p");
+        viewCount.className = "view-count";
+        viewCount.innerHTML = '<i class="fa fa-eye"></i> Views: Loading...'; // Placeholder text
+
+        // Retrieve and listen to view count from Firebase
+        const profileRef = firebase.database().ref(`profiles/${contributor.login}/views`);
+        profileRef.on("value", (snapshot) => {
+          if (snapshot.exists()) {
+            viewCount.innerHTML = `<i class="fa fa-eye"></i> Views: ${snapshot.val()}`;
+          } else {
+            // Handle new profile
+            profileRef.set(0);
+            viewCount.innerHTML = '<i class="fa fa-eye"></i> Views: 0';
+          }
+        });
+
+        // Increment view count on click
+        card.addEventListener("click", (e) => {
+          e.preventDefault();
+          profileRef.transaction((currentViews) => {
+            return (currentViews || 0) + 1;
+          }).then(() => {
+            window.open(card.href, "_blank");
+          });
+        });
+
         card.appendChild(imgContainer);
         card.appendChild(name);
+        card.appendChild(viewCount);
+        card.classList.add("profile-card");
 
         container.appendChild(card);
       }
     });
   }
 
+  // Fetch contributors data
   fetch("https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/.all-contributorsrc")
     .then((response) => response.json())
     .then((data) => {
       contributors = data.contributors;
       renderProfiles();
     });
 
+  // Add event listener to the search bar
   const searchBar = document.querySelector(".search-input");
   searchBar.addEventListener("input", () => {
     renderProfiles(searchBar.value);

diff --git a/styles.css b/styles.css
@@ -960,3 +960,7 @@ html {
   scroll-behavior: smooth;
 }
 
+/* view count */
+a{
+  text-decoration: none;
+}