Technigo · Fatima-GR · Sep 28, 2021 · Sep 29, 2021 · Sep 30, 2021 · Sep 30, 2021
diff --git a/README.md b/README.md
@@ -1,13 +1,12 @@
 # GitHub Tracker
 
-Replace this readme with your own information about your project.
-
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+The aim of the project was to build a personal github tracker that would show my technigo-projects. This was done by fetching and displaying data from API's, using forEach, filter and find methods. A doughnut chart was also implemented to give a visual display of the amount of projects done. In terms of styling, a CSS grid and a hero header was used.
 
 ## The problem
 
-Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next?
+In the beginning of the project it felt like there were a lot of API fetches that needed to be done. It was also hard to understand were to place, and where to call the different functions. 
+The solution were to scale down the project and do small chunks at a time. 
 
 ## View it live
 
-Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about.
+https://github-tracker-fatima.netlify.app/
diff --git a/code/assets/background.png b/code/assets/background.png
diff --git a/code/chart.js b/code/chart.js
@@ -1,4 +1,24 @@
 //DOM-selector for the canvas 👇
-const ctx = document.getElementById('chart').getContext('2d')
+const ctx = document.getElementById("chart").getContext("2d");
 
 //"Draw" the chart here 👇
+
+const drawChart = (amount) => {
+  //This function is being called inside the getRepos function
+
+  const config = {
+    type: "doughnut",
+    data: {
+      labels: ["P. Finished", "P. Left"],
+      datasets: [
+        {
+          label: "My First Dataset",
+          data: [amount, 20 - amount], //1st number:the lenght of my repo array, 20(total projects I must do) minus the repo array
+          backgroundColor: ["#FFB319", "grey"],
+          hoverOffset: 4,
+        },
+      ],
+    },
+  };
+  const myChart = new Chart(ctx, config);
+};
diff --git a/code/index.html b/code/index.html
@@ -1,21 +1,81 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Project GitHub Tracker</title>
-  <link rel="stylesheet" href="./style.css" />
-</head>
-<body>
-  <h1>GitHub Tracker</h1>
-  <h2>Projects:</h2>
-  <main id="projects"></main>
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- Facebook Meta Tags -->
+    <meta
+      property="og:url"
+      content="https://github-tracker-fatima.netlify.app/"
+    />
+    <meta property="og:type" content="website" />
+    <meta
+      property="og:title"
+      content="GitHub-tracker - Technigo project by Fatima Gamero Romero"
+    />
+    <meta
+      property="og:description"
+      content="GitHub-tracker from my projects from Technigo"
+    />
+    <meta
+      property="og:image"
+      content="https://github-tracker-fatima.netlify.app/assets/background.png"
+    />
+
+    <!--ICON-->
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-1/css/all.min.css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Yanone+Kaffeesatz:wght@600&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400&family=Yanone+Kaffeesatz:wght@600&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="./style.css" />
+    <title>Project GitHub Tracker</title>
 
-  <!-- This will be used to draw the chart 👇 -->
-  <canvas id="chart"></canvas>
+    <!--Chart-->
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  </head>
+  <body>
+    <header class="header">
+      <i class="fab fa-github"></i>
+      <h1 class="heading-one">
+        GitHub <br/><span class="tracker">Tracker</span>
+      </h1>
+      <div class="burger">
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>
+    </header>
 
-  <script src="./script.js"></script>
-  <script src="./chart.js"></script>
-</body>
-</html>
+    <section id="profile" class="profile-section"></section>
+
+    <main class="main">
+      <h2 class="heading-two">My Projects</h2>
+
+      <section id="projects" class="projects-container"></section>
+
+      <section class="chart">
+        <canvas id="chart" class="myChart"></canvas>
+      </section>
+    </main>
+    <footer class="footer">
+      <div class="icon-footer">
+        <i class="fab fa-github orange-icon"></i>
+        <p class="copyright">
+          Copyright @2021 | Designed by Fatima Gamero Romero
+        </p>
+      </div>
+    </footer>
+    <script src="./script.js"></script>
+    <script src="./chart.js"></script>
+
+  </body>
+</html>
diff --git a/code/script.js b/code/script.js
@@ -0,0 +1,87 @@
+//DOM SELECTORS:
+const projectsContainer = document.getElementById("projects");
+const profileSection = document.getElementById("profile");
+
+//GLOBAL VARIABLES:
+const userName = "Fatima-GR";
+const API_GITHUB = `https://api.github.com/users/${userName}/repos`; //Here we use backticks instead of quotes because we are injecting a variable
+const API_GITHUB_PROFILE = `https://api.github.com/users/${userName}`;
+
+// FUNCTIONS:
+
+//Get all info about my github profile
+const getMyProfile = () => {
+  fetch(API_GITHUB_PROFILE)
+  .then(resp => resp.json())
+  .then(data => {
+    profileSection.innerHTML = `
+    <div class=picture-container>
+       <img class="profile-pic" alt="profile picture" src = ${data.avatar_url}/>
+     </div>
+     <div class=myProfile>
+       <p>${data.name}</p>
+       <a href = "http://gitHub.com/Fatima-GR" class="account" target="_blank">${data.login}</a>
+       <a href = "mailto:fatigr2692@gmail.com" class="email">fatigr2692@gmail.com</a>
+       <p><i class="fas fa-map-marker-alt"></i>${data.location}<p/>
+     </div>
+
+    `
+  })
+}
+getMyProfile()
+
+
+// Get all my repositories from Technigo
+const getRepos = (search) => {
+  fetch(API_GITHUB)
+    .then((resp) => resp.json())
+    .then((data) => {
+      // Filtering the repos that are forked from Technigo plus the ones that start with the project word
+      let forkedRepos = data.filter((repo) => repo.fork && repo.name.startsWith("project-"));
+      forkedRepos.forEach((repo) => {
+      projectsContainer.innerHTML += `
+      <div class="card">
+        <a href= ${repo.html_url} class="repo" target="_blank">${repo.name}</a>
+        <p>Default branch:<span> ${repo.default_branch}</span></p>
+        <p>Last update: <span>${new Date(repo.pushed_at).toDateString()}<span></p>
+        <p id= "commit-${repo.name}"> Number of commits:</p>
+      </div>
+      `;
+    }); 
+      drawChart(forkedRepos.length); // Function being called with the length of the repos which is needed in the chart
+      getPullRequests(forkedRepos); // Function being called
+    })
+};
+getRepos();
+
+
+// Get all the pull requests of my projects 
+const getPullRequests = (allRepositories) => {
+  allRepositories.forEach((repo) => {
+    // console.log(repo.owner.login)
+    const API_PR = `https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=100`;
+    fetch(API_PR)
+      .then((resp) => resp.json())
+      .then((data) => {
+        const myPullRequest = data.find((pull) => pull.user.login === repo.owner.login) // It gets only the PR that I made by comparing pull.user.login with repo.owner.login
+        // Detect if we have pull request or not: If yes - call getCommits function // If no - inform user that no pull request was yet done
+        if(myPullRequest) {
+					getCommits(myPullRequest.commits_url, repo.name); // Function being called
+				} else {
+					document.getElementById(`commit-${repo.name}`).innerHTML =
+						'No pull request yet done!';
+				}
+      });
+  });
+};
+
+// Get the amount of commits 
+const getCommits = (myCommitsUrl,myRepoName) => {
+  fetch(myCommitsUrl)
+  .then(res => res.json())
+  .then(data => {
+    document.getElementById(`commit-${myRepoName}`).innerHTML += `<span> ${data.length}</span>`;
+  })
+}
+
+