Technigo · JenFi72 · Feb 26, 2022 · Feb 27, 2022 · Feb 27, 2022 · Feb 27, 2022
diff --git a/.DS_Store b/.DS_Store
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+code./secret.js
diff --git a/README.md b/README.md
@@ -1,13 +1,21 @@
 # GitHub Tracker
 
-Replace this readme with your own information about your project.
+In this project we were suppose to build a tracker of all our projects related to Technigo using GitHub API. The site should include:
+
+
+- A list of all repos forked from Technigo
+- Username and profile picture
+- Most recent push for each repo
+- Default branch for each repo
+- URL to the actual GitHub repo
+- Number of commits per repo
+- Chart showing completed projects/total.
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
 
 ## 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 order to solve the problem I've worked with API's and a personal token. A challening project where there still are things needed to be fixed (when the chart is showing only 2 out of 5 projects are visible). 
 
 ## 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://jolly-hopper-ee7c71.netlify.app/
diff --git a/code/chart.js b/code/chart.js
@@ -1,4 +1,28 @@
 //DOM-selector for the canvas 👇
 const ctx = document.getElementById('chart').getContext('2d')
 
-//"Draw" the chart here 👇
+
+//CHART
+
+const drawChart = (number) => {
+    const config = {
+      type: "doughnut",
+      data: {
+        labels: ["DONE", "LEFT TO DO"],
+        datasets: [
+          {label: "PROJECT CHART",
+            data: [number, 19 - number],
+            backgroundColor: ["#ff874e", "#db738e"],
+            hoverOffset: 4,
+            borderColor: [
+                'rgba(255, 99, 132, 1)',
+                'rgba(255, 206, 86, 1)',
+            ],
+            borderWidth: 4
+          },
+        ],
+      },
+    };
+    const myChart = new Chart(ctx, config);
+  };
+
diff --git a/code/index.html b/code/index.html
@@ -4,18 +4,43 @@
   <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>
+  <title>⏱  My GitHub Tracker</title>
   <link rel="stylesheet" href="./style.css" />
+
+
+
+  <link href="https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@300&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Galada&display=swap" rel="stylesheet">
 </head>
+
+
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 <body>
-  <h1>GitHub Tracker</h1>
-  <h2>Projects:</h2>
-  <main id="projects"></main>
 
-  <!-- This will be used to draw the chart 👇 -->
-  <canvas id="chart"></canvas>
+  <h1>My GitHub Tracker</h1>
+
+  <div class="profile-box" id="profileBox">
+
+    <p id="userName" class="user-name"></p>
+
+</div>
+
 
+<h3>PROJECTS</h3>
+
+<main id="projects" class="projects"> 
+
+  </main>
+
+
+  <div class="chart-size">
+  <canvas id="chart" class="chart"></canvas>
+
+</div>
+
+  <script src="./secret.js"></script>
   <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,97 @@
+const username = 'JenFi72'
+let reponame = ' '
+
+const profileBox= document.getElementById('profileBox');
+const profileImage = document.getElementById('profileImage')
+const projectBox = document.getElementById('projects')
+const repoName = document.getElementById('reponame')
+
+const API_URL  = `https://api.github.com/users/${username}/repos`;
+const PULL_URL  = `https://api.github.com/repos/Technigo/${reponame}/pulls`;
+const PROFILE_URL  = `https://api.github.com/users/${username}`
+
+
+//TOKEN
+
+const options = {
+    method: 'GET',
+    headers: {
+          Authorization: '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' // my TOKEN
+      }
+  }
+
+//FETCH PROFILE
+ const fetchProfile = () =>{
+     fetch(PROFILE_URL)
+     .then(res => res.json())
+     .then(profileData => {
+
+        profileBox.innerHTML +=`
+        <img src="${profileData.avatar_url}" class='profile-image'>
+        <h2>NAME: ${profileData.name}</h2>
+        <p>USERNAME: ${profileData.login}</p>`
+     });
+ }
+
+ fetchProfile();
+
+//FETCH REPOS
+
+const getRepos = () => {
+fetch (API_URL, options)
+.then(res => res.json())
+.then(data => {
+    const technigoRepos =data.filter(
+        (repo) => repo && repo.name.startsWith ('project-')
+    );
+
+technigoRepos.forEach((repo) => {
+    projectBox.innerHTML += `
+    <div id=${repo.name} class ="repo-card">
+    <h2>${repo.name} </h2>
+    <p>Branch: ${repo.default_branch}</p>  
+    <p>URL: ${repo.html_url}</p>
+    <p> Main Language: ${repo.language}</p> 
+    <p>Last push: ${new Date(repo.pushed_at).toDateString()}</p>
+    <p id="commit-${repo.name}"> Number of commits: </p>   
+    </div>
+    `;
+    getPullRequests(technigoRepos);
+    drawChart(technigoRepos.length);  //* if this one is commented out, more projects will appear. Do not know why. 
+        });
+
+});
+};
+
+//FETCH THE PULL REQUESTS
+const getPullRequests = (allRepos) => {
+    allRepos.forEach((repo) => {
+      fetch (`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=150`)
+        .then((res) => res.json())
+        .then((data) => {
+          const myPullRequest = data.find(
+            (pull) => pull.user.login === repo.owner.login
+          );
+
+          if (myPullRequest) {
+            fetchCommits(myPullRequest.commits_url, repo.name);
+          } else {
+            document.getElementById(`commit-${repo.name}`).innerHTML =
+              'No pull requests or closed';
+          }
+        });
+    });
+  };
+
+//FETCH COMMITS
+const fetchCommits = (urlMyCommits, myRepoName) => {
+    fetch(urlMyCommits)
+    .then((res) => res.json ())
+    .then ((data) => {
+        document.getElementById(`commit-${myRepoName}`).innerHTML += data.length;   
+
+    })
+};
+
+getRepos();
+
diff --git a/code/secret.js b/code/secret.js
@@ -0,0 +1,2 @@
+// secret.js file
+const API_TOKEN = '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';
diff --git a/code/style.css b/code/style.css
@@ -1,3 +1,78 @@
 body {
-  background: #FFECE9;
-}
+  background: #11130d;
+  font-family: 'Zilla Slab', serif; 
+  display: flexbox;
+}
+
+h1{
+  font-family: 'Galada', cursive;
+  font-size: 65pt;
+  text-align: center;
+  text-shadow: 6px 5px rgb(151, 31, 71);
+  margin-bottom: -2rem;
+  color: rgb(216, 83, 128);
+}
+
+h3{
+  font-size: 35pt;
+  text-align: center;
+  color: rgb(216, 83, 128);
+}
+
+.profile-box {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  width: 90%;
+  margin: 0 auto;
+  color: rgb(216, 83, 128);
+}
+
+.profile-image {
+  border-radius: 50%;
+  width: 290px;
+  align-content: center;
+  border: 6px solid rgb(216, 83, 128); 
+ }
+
+
+ .projects {
+   display: flex;
+   flex-wrap: wrap;
+   justify-content: space-evenly;
+ }
+
+ .repo-card {
+   display: flexbox;
+   margin: 2rem;
+   border-radius: 1rem;
+   padding: 1rem;
+   background-color:rgb(216, 83, 128)
+ }
+
+ .chart-size{
+   height: 500px;
+   width: 500px;
+padding: 3rem;
+justify-content: space-evenly;
+ }
+
+ @media (max-width: 624px) {
+  h1{
+    font-size: 30pt;
+  }
+  .profile-image {
+    width: 190px;
+  }
+.h3 {
+  font-size: 20pt
+ }
+ .repo-card {
+  margin-left: 5rem;
+  margin-right: 5rem;
+ }
+ .chart-size{
+  height: 250px;
+  width: 250px;
+}
+ }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		// secret.js file
		const API_TOKEN = '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';