Technigo · dandeloid · Sep 27, 2021 · Sep 29, 2021 · Sep 30, 2021 · Oct 1, 2021
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
@@ -1,13 +1,13 @@
 # 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.
+Project making a GitHub tracker that tracks my profile repositories data with the help of GitHub API's and presents it on a page.
 
 ## 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?
+Watched the online lectures and resources to get an idea how to approach the task at hand. Tried to make it look sort of similar to GitHub.
+Used a lot of fetch of APIs and tried to figure out which data that was relevant to use and how to add it on the page in a good way.
+If I had more time I would've wanted to grab more data and charts adding more content.
 
 ## 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://quizzical-fermi-01d0aa.netlify.app/
diff --git a/code/.DS_Store b/code/.DS_Store
diff --git a/code/chart.js b/code/chart.js
@@ -1,4 +1,27 @@
 //DOM-selector for the canvas 👇
 const ctx = document.getElementById('chart').getContext('2d')
 
-//"Draw" the chart here 👇
+//Doughnut chart for projects
+const drawChart = (amount) => {
+  const config = { 
+    type: 'doughnut',
+    data: {
+        labels: [
+          'Finished',
+          'Not Finished',
+        ],
+        datasets: [{
+          label: 'My First Dataset',
+          data: [amount, 20-amount],
+          backgroundColor: [
+            'rgb(87, 166, 255)',
+            'rgb(128, 128, 128)',
+          ],
+          hoverOffset: 2,
+          borderWidth: 0,
+        }]
+      },
+    };
+  const myChart = new Chart (ctx, config)
+}
+
diff --git a/code/github-icon-black.svg b/code/github-icon-black.svg
diff --git a/code/index.html b/code/index.html
@@ -5,15 +5,30 @@
   <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="icon" href="./github-icon-black.svg"/>
   <link rel="stylesheet" href="./style.css" />
+  <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>
+  <main class="content">
+
+    <h1 class="title">GitHub Tracker</h1>
+    <div class="profile" id="profile"></div>
+
+    <h2 class="projects-title">Projects</h2>
+    <div class="projects"id="projects"></div>
+
+    <div class="chart">
+      <canvas id="chart"></canvas>
+    </div>
+
+  </main>
+
+  <footer>
+    <p class="footer">Project for Technigo by Daniel Vestin</p>
+  </footer>
 
   <script src="./script.js"></script>
   <script src="./chart.js"></script>

diff --git a/code/script.js b/code/script.js
@@ -0,0 +1,109 @@
+const USER = 'dandeloid'
+const REPOS_URL = `https://api.github.com/users/${USER}/repos`
+const profileContainer = document.getElementById('profile')
+const projectsContainer = document.getElementById('projects')
+const pullContainer = document.getElementById('pullRequests')
+
+//Fetch for profile name and profile picture
+const getProfile = () => {
+fetch (`https://api.github.com/users/${USER}`)
+    .then(response => response.json())
+    .then(data => {
+        profileContainer.innerHTML = `
+        <img class="profile-picture" src=${data.avatar_url}>
+        <div class = "profile-name">
+            <img class="github-icon" src="./github-icon-black.svg">
+            <a href="https://github.com/dandeloid" target="_blank" class="profile-title">${data.login}</a>
+        </div>
+            <p class="bio">"${data.bio}"</p>
+            <p class="location">Location - ${data.location}</p>
+        `
+    })
+}
+getProfile()
+
+//Fetch for Technigo forked repos
+const getRepos = () => {
+    fetch (REPOS_URL)
+        .then(response => response.json())
+        .then(data => {
+            const forkedRepos = data.filter(repo => repo.fork && repo.name.startsWith('project-'))
+            forkedRepos.forEach((repo) => {
+                projectsContainer.innerHTML += `
+                <div class="single-project">
+                    <a href="${repo.html_url}" class="repo-name" target="_blank" style="text-transform: capitalize;">${repo.name}</a>
+                    <p style="text-transform: capitalize;">Branch: ${repo.default_branch}</p>
+                    <p class="last-push">Last push: ${repo.pushed_at.slice(0, 10)} - ${repo.pushed_at.slice(11, 16)}</p>
+                    <p class="commit-text" id="commit-${repo.name}">Commits: </p>
+                    <p class="comment-title"">Last comments: </p>
+                    <p class="comment-text" id="comment1-${repo.name}"> </p>
+                    <p class="comment-text" id="comment2-${repo.name}"> </p>
+                    <p class="comment-text" id="comment3-${repo.name}"> </p>
+                </div>
+                `
+        })
+        drawChart(forkedRepos.length)
+        fetchPulls(forkedRepos)
+        commitComments(forkedRepos)
+        })
+}
+
+//Fetch pull request
+const fetchPulls = (allRepositories) => {
+    allRepositories.forEach((repo) => {
+        const PULL_URL = `https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`
+        fetch(PULL_URL)
+        .then((response) => response.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 = 'Commits: 0'
+            }
+        })
+    })
+}
+
+//Fetch nr of commits
+const fetchCommits = (myCommitsUrl, RepoName) => {
+    fetch(myCommitsUrl)
+    .then((response) => response.json())
+    .then((data) => {
+        document.getElementById(`commit-${RepoName}`).innerHTML += data.length
+    })
+    }
+
+//Fetch last commit messages
+const commitComments = (forkedRepos) => {
+    forkedRepos.forEach((repo) => {
+        const COM_URL = `https://api.github.com/repos/dandeloid/${repo.name}/commits`
+        fetch(COM_URL)
+        .then((response) => response.json())
+        .then((data) => {
+
+            if (data[0].author.login === 'dandeloid'){
+            const commitDate1 = new Date (data[0].commit.committer.date).toDateString()
+            document.getElementById(`comment1-${repo.name}`).innerHTML += `${commitDate1}: "${data[0].commit.message}"`
+            }
+            if (data[1].author.login === 'dandeloid'){
+            const commitDate2 = new Date (data[1].commit.committer.date).toDateString()
+            document.getElementById(`comment2-${repo.name}`).innerHTML += `${commitDate2}: "${data[1].commit.message}"`
+            }
+            if (data[2].author.login === 'dandeloid'){
+            const commitDate3 = new Date (data[2].commit.committer.date).toDateString()
+            document.getElementById(`comment3-${repo.name}`).innerHTML += `${commitDate3}: "${data[2].commit.message}"`
+            }
+            else{
+            document.getElementById(`comment1-${repo.name}`).innerHTML += `No comments atm`
+            }
+
+        })
+    })
+}
+
+//Start fetching repository data
+getRepos()
+
+
+
diff --git a/code/style.css b/code/style.css
@@ -1,3 +1,107 @@
+:root {
+  --gblue: rgb(87, 166, 255);
+}
 body {
-  background: #FFECE9;
-}
+  background: black;
+  color: white;
+  font-family: Verdana, Geneva, Tahoma, sans-serif;
+}
+.content {
+  max-width: 300px;
+  margin: auto;
+}
+.title {
+  text-align: center;
+}
+.profile-picture {
+  width: 100%;
+  border-radius: 100%;
+  padding: 20px 0;
+}
+.profile-name {
+  display: flex;
+  justify-content: center;
+}
+.profile-title {
+  text-decoration: none;
+  color: white;
+  font-size: 1.8rem;
+  margin: 20px 0;
+}
+.github-icon {
+  border-radius: 100%;
+  width: 30px;
+  margin-right: 10px;
+}
+.bio,
+.location {
+  text-align: center;
+  padding-bottom: 20px;
+}
+.projects-title {
+  border-top: 1px solid grey;
+  padding: 40px 0 10px 0;
+  text-align: center;
+}
+.repo-name {
+  font-size: 1.3rem;
+  color: var(--gblue);
+  text-decoration: none;
+}
+.single-project {
+  border: 1px solid grey;
+  border-radius: 5px;
+  padding: 10px 10px 10px 20px;
+  margin: 10px 10px;
+}
+a:hover {
+  text-decoration: underline;
+}
+.last-push {
+  font-size: 0.8rem;
+  color: grey;
+}
+.comment-text {
+  font-size: 0.8rem;
+  color: grey;
+}
+.chart {
+  width: 300px;
+  margin: 20px 0;
+}
+footer {
+  border: 1px solid grey;
+  border-radius: 5px;
+  width: 300px;
+  margin: auto;
+  padding: 10px;
+  margin-top: 50px;
+  text-align: center;
+  font-size: 0.8rem;
+}
+
+/* Tablet > */
+@media (min-width: 768px) {
+  .content {
+    max-width: none;
+  }
+  .profile-picture {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    width: 300px;
+  }
+  .projects {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+  }
+  .chart {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    width: 300px;
+  }
+  footer {
+    width: auto;
+  }
+}