Technigo · nehrwein · Sep 27, 2021 · Sep 29, 2021 · Sep 29, 2021 · Sep 29, 2021
diff --git a/README.md b/README.md
@@ -1,13 +1,25 @@
 # GitHub Tracker
 
-Replace this readme with your own information about your project.
+This project is all about working with the Github-API.
+
+The tracker shows
+- username/pic
+- all the repos that are done by me during the Technigo bootcamp 
+- no. of commits and commit messages for each repository
+- a doughnut pie from chart.js
+
+
 
-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?
+I focussed in this project on gaining data from the API and filter/sort it in a way that I get all the entries I want to show in my tracker.
+
+I kept the design simple and made it look close to the original GitHub-website. 
+
+If I would have more time, I would like to add "no. of commits" to the sort field and maybe add a search field also.
+
 
 ## 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.
+Take a look at the project here: https://github-tracker-nehrwein.netlify.app/
diff --git a/code/chart.js b/code/chart.js
@@ -1,4 +1,34 @@
 //DOM-selector for the canvas 👇
 const ctx = document.getElementById('chart').getContext('2d')
+
+const drawChart = (doneProjects) => {
+	//config for the the doughnut-chart:
+	const config = {
+		type: 'doughnut',
+		data: {
+			labels: [
+				'Finished Projects',
+				'Projects left'
+			],
+			datasets: [{
+				label: 'My First Dataset',
+				data: [doneProjects, totalProjects - doneProjects],
+				backgroundColor: [
+				'rgb(120, 129, 131)',
+				'rgb(198, 207, 215)',
+				],
+				hoverOffset: 5
+			}],
+		},
+		options: {
+			plugins: {
+				legend: {
+					position: 'right',
+				}
+			}
+		}
+	};
 
-//"Draw" the chart here 👇
+	//rendering the chart in the browser/ newChart(where to put it, what to put)
+	const chart = new Chart(ctx, config);
+}
diff --git a/code/index.html b/code/index.html
@@ -6,15 +6,28 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Project GitHub Tracker</title>
   <link rel="stylesheet" href="./style.css" />
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap" rel="stylesheet"> 
+  <script src="https://kit.fontawesome.com/745bd96b12.js" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 </head>
 <body>
-  <h1>GitHub Tracker</h1>
-  <h2>Projects:</h2>
-  <main id="projects"></main>
-
-  <!-- This will be used to draw the chart 👇 -->
-  <canvas id="chart"></canvas>
-
+  <header>
+    <a href="https://github.com/nehrwein" target="_blank"><i class="fab fa-github"></i></a>
+    <a href="https://github.com/nehrwein" target="_blank"><h1>GitHub Tracker</h1></a>
+  </header>
+  <main>
+    <section class="user" id="user-section">
+    </section>
+    <section class="projects" id="projects-section"></section>
+
+  </main>  
+    <!-- This will be used to draw the chart 👇 -->
+    <div class="chart">
+      <canvas id="chart"></canvas>
+    </div> 
+
   <script src="./script.js"></script>
   <script src="./chart.js"></script>
 </body>

diff --git a/code/script.js b/code/script.js
@@ -0,0 +1,135 @@
+//DOM SELECTORS
+const userSection = document.getElementById("user-section")
+
+//GLOBAL VARIABLES
+/* const options = {
+  method: 'GET',
+  headers: {
+    Authorization: `token xxx`
+  },
+}; */
+
+const REPO_API = "https://api.github.com/users/nehrwein/repos";
+const totalProjects = 19;
+
+//FUNCTIONS
+
+
+const getRepos = () => {
+  fetch(REPO_API, /* options */)
+    .then((res) => res.json())
+    .then((data) => {
+
+      //forkedRepos shows a list of all repos that are forked ones from Technigo
+      const forkedRepos = data.filter(repo => repo.fork && repo.name.startsWith('project-'))
+
+      //show the newest repos first (default)
+      forkedRepos.sort((a, b) => {
+        return new Date(b.pushed_at) - new Date(a.pushed_at);
+      });
+
+      //My name, username and profile picture
+      const userName = data[0].owner.login
+      const profilePic = data[0].owner.avatar_url
+
+      userSection.innerHTML += /* html */`
+        <div class="userImage_Text">
+        <div class="userImageDiv">
+          <img class="userImage" id="userImage" src="${profilePic}" alt="Github Avatar">
+        </div>
+        <div class="userTextDiv">
+          <p class="myName">Birgit</p>
+          <p class="userName">${userName}</p>
+        </div>
+        </div>  
+
+        <label for="sort"></label>
+        <select class="sort" name="sort" id="sort">
+          <option disabled="" value="">Sorted by: </option> 
+          <option value="updated">Last updated</option>
+          <option value="name">Name</option>
+        </select> 	
+      `
+
+      const sortBtn = document.getElementById('sort')
+        sortBtn.addEventListener('change', () => sort(sortBtn.value, forkedRepos))
+
+      drawProjects(forkedRepos);	
+      drawChart(forkedRepos.length)
+    })
+}
+
+//sorting the projects by name, last updated
+const sort = (value, repos) => {
+  if (value === "name") {
+    repos.sort((a, b) => {
+      return (a.name) > (b.name) ? 1 : -1;
+    });
+    drawProjects(repos)
+  } else if (value === "updated") {
+    repos.sort((a, b) => {
+      return new Date(b.pushed_at) - new Date(a.pushed_at);
+    });
+    drawProjects(repos)
+  } 
+}
+
+const drawProjects = (forkedRepositories) => {
+  document.getElementById('projects-section').innerHTML = ` `
+  forkedRepositories.forEach((repo) => {
+    document.getElementById('projects-section').innerHTML += `
+      <div class="projects-div" id="projects">
+        <a href="${repo.html_url}">${repo.name}</a>
+        <p>default branch: ${repo.default_branch}</p>
+        <p>Last push: ${new Date(repo.pushed_at).toLocaleDateString('en-GB')}</p>
+        <p class="noOfCommits" id="commit-${repo.name}">Commits: 0</p>
+        <ul id="commitMessages-${repo.name}"></ul>
+      </div>	
+    `;
+
+    getCommits(forkedRepositories, repo.name);
+  });
+
+  forkedRepositories.forEach((repo) => {
+    document
+      .getElementById(`commit-${repo.name}`)
+      .addEventListener('click', () => {
+        document
+          .getElementById(`commitMessages-${repo.name}`)
+          .classList.toggle('active');
+      });
+  });
+};
+
+const getCommits = (filteredArray, myRepoName) => {
+
+  //First make a new array with all the needed APIs (found under commit_urls in forkedRepos)
+  const allCommitUrls = filteredArray.map(repo => repo.commits_url)
+
+  allCommitUrls.forEach(commitAPI => {
+    //the URLs end with {/sha}, therefore the last 6 chars need to be sliced
+    commitAPI = commitAPI.slice(0, -6)
+
+    //now the URLs can be passed on to get data about number and content of commits 
+    fetch(commitAPI, /* options */)
+      .then((res) => res.json())
+      .then((data) => {
+        const authorCommits = data.filter(commits => commits.author.login === 'nehrwein' && commits.url.includes(myRepoName))
+        if (authorCommits.length > 0) {
+          document.getElementById(`commit-${myRepoName}`).innerHTML = `
+            Commits: ${authorCommits.length}<i class="fas fa-bars"></i>
+          `
+          authorCommits.forEach(element => {
+            document.getElementById(`commitMessages-${myRepoName}`).innerHTML += `
+            <li>${element.commit.message}</li>
+            `
+          })
+        } 
+      })		
+  });
+}
+
+
+
+getRepos();
+