[FEAT] Added Contributors List (#124)

* Added contributors list

* modified contributors

about.html

@@ -149,6 +149,14 @@ <h3 class="content">
 
 
       </div>
+            <!-- Contributor Section -->
+      <div class="contributors-container">
+        <h2>Contributors</h2>
+        <ul id="contributors-list">
+          <!-- Contributors will be dynamically added here -->
+        </ul>
+      </div>
+
 
 
       <!-- footer section  -->

contributors.json

@@ -0,0 +1,6 @@
+[
+    {"name": "Rishi Paul", "github": "rishicds"},
+    {"name": "Aditi Ghosh", "github": "GhoshAditi"},
+    {"name": "Shwet Khatri" , "github": "ShwetKhatri2001"}
+]
+

script.js

@@ -20,4 +20,68 @@ const initSlider = () => {
     imageList.addEventListener("scroll", handleSlideButtons);
 };
 
-window.addEventListener("load", initSlider);
+window.addEventListener("load", initSlider);
+
+document.addEventListener("DOMContentLoaded", function () {
+    // Fetch contributors data from the JSON file
+    fetch("contributors.json")
+      .then(response => response.json())
+      .then(data => displayContributors(data))
+      .catch(error => console.error("Error fetching contributors:", error));
+  });
+
+  // Function to display contributors in the HTML
+  // script.js
+
+async function fetchContributors(owner, repo) {
+  try {
+      const response = await fetch(`https://api.github.com/repos/${owner}/${repo}/contributors`);
+
+      if (!response.ok) {
+          throw new Error(`Failed to fetch contributors for ${owner}/${repo}. Status: ${response.status}`);
+      }
+
+      const contributors = await response.json();
+      return contributors;
+  } catch (error) {
+      console.error(`Error fetching contributors for ${owner}/${repo}:`, error);
+      // You might want to handle the error or display a message to the user
+      return [];
+  }
+}
+
+async function displayContributors(contributors) {
+  const contributorsList = document.getElementById("contributors-list");
+
+  for (const contributor of contributors) {
+      try {
+          const response = await fetch(`https://api.github.com/users/${contributor.login}`);
+          if (!response.ok) {
+              throw new Error(`Failed to fetch GitHub user (${contributor.login}) details. Status: ${response.status}`);
+          }
+
+          const user = await response.json();
+
+          const listItem = document.createElement("li");
+          listItem.innerHTML = `
+              <div class="contributor-item">
+                  <img src="${user.avatar_url}" alt="${contributor.login}'s profile picture" class="contributor-image">
+                  <a href="https://github.com/${contributor.login}" target="_blank">${contributor.login}</a>
+              </div>`;
+          contributorsList.appendChild(listItem);
+      } catch (error) {
+          console.error(`Error fetching GitHub user (${contributor.login}) details:`, error);
+          // You might want to display an error message to the user
+      }
+  }
+}
+
+
+const owner = 'ShwetKhatri2001';
+const repo = 'Swetify-Music';
+
+fetchContributors(owner, repo)
+    .then(contributors => {
+        // Do something with the contributors, e.g., display them
+        displayContributors(contributors);
+    });

swetify.css

@@ -1657,3 +1657,51 @@ input:checked + .slider2:before {
 .slider2.round:before {
   border-radius: 50%;
 }
+/* Add these styles to your existing CSS file or create a new one */
+
+#contributors-list {
+  list-style-type: none;
+  padding-left: 0;
+  display: grid; /* Add this line */
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Add this line */
+  gap: 20px; /* Add this line to add space between grid items */
+}
+
+.contributor-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.contributor-image {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  margin-right: 10px;
+}
+
+.contributor-name {
+  font-size: 20px; /* Adjust the font size as needed */
+}
+.contributor-name:hover {
+  text-decoration: underline;
+}
+
+.contributors-container h2{
+  font-size: 40px;
+  font-weight: 600;
+  margin-bottom: 20px;
+}
+.contributors-container a{
+  text-decoration: none;
+  color: #ffffff;
+  font-size: medium;
+}
+.contributors-container a:hover{
+  color:#ffc400;
+}
+#contributors-list {
+  list-style-type: none; /* Add this line */
+  padding-left: 0; /* Add this line to remove the default padding */
+}