Technigo · jakobxlindstrom · Sep 26, 2021 · Sep 27, 2021 · Sep 28, 2021 · Sep 29, 2021
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
@@ -1,13 +1,18 @@
 # 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.
+This assignment was structued to create fetch functions to showcase data coming from Githubs API.
+Part of the assigment was to design a page that would show fetched data.
 
 ## 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?
+First of I started by creating all the main functions that I would need to fullfill the blue requirements.
+I used HTML, CSS and Javascript languages to write my code in VS code and deployed my site through netlify.
+
+Secondly I decided on a simple HTML CSS styling that would focus on the fetched data. I made the site responsive through all viewports and added very few animations to make the site look and feel proffesional and to the point.
+
+If I had more time I would make my site Universal to any github account instead of Personal.
 
 ## 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.
+Here is a link to my project.
+https://githubtrace.netlify.app/
diff --git a/code/chart.js b/code/chart.js
@@ -2,3 +2,21 @@
 const ctx = document.getElementById('chart').getContext('2d')
 
 //"Draw" the chart here 👇
+const drawChart = (amount) => {
+  const config = {
+    type: 'doughnut',
+    data: {
+      labels: ['Finished', 'Not finished'],
+      datasets: [
+        {
+          label: 'Technigo projects rate ',
+          data: [amount, 19 - amount],
+          backgroundColor: ['#0f0c29', '#e6e6e6'],
+          hoverOffset: 50,
+        },
+      ],
+    },
+  }
+
+  const myProjects = new Chart(ctx, config)
+}
diff --git a/code/github_icon.png b/code/github_icon.png
diff --git a/code/index.html b/code/index.html
@@ -1,21 +1,44 @@
 <!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" />
+    <title>Project GitHub Tracker</title>
+    <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=Bebas+Neue&family=Ubuntu&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="./style.css" />
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  </head>
+  <body>
+    <header class="hero">
+      <h1>GitHub Tracker  <img src="./github_icon.png" alt="logo" class="logo"></h1>
+      <div class="spinner">
+        <div class="spinner spinner2">
+           <div class="spinner spinner3"></div>
+        </div>   
+      </div>
+      <main>
+    </header>
+    <section class="person-data" id="personData"></section>
+    <div class="btn-div">
+      <a href="" class="button1" id="tracerBtn">Start the Github tracker</a>
+    </div>
+    <hr>
 
-  <!-- This will be used to draw the chart 👇 -->
-  <canvas id="chart"></canvas>
+    <section class="grid">
+      <div id="projects" class="projects"></div>
 
-  <script src="./script.js"></script>
-  <script src="./chart.js"></script>
-</body>
-</html>
+      <section class="chart-container"> 
+        <canvas id="chart" class="chart"></canvas>
+      </section>
+    </section>
+  </main>
+    <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,110 @@
+const projects = document.getElementById('projects')
+const personData = document.getElementById('personData')
+const USER = 'jakobxlindstrom'
+const USER_URL = `https://api.github.com/users/${USER}`
+const tracerBtn = document.getElementById('tracerBtn')
+
+// This function simply fetches and presents my user data through innerhtml.
+const getUserData = () => {
+  fetch(USER_URL)
+    .then((res) => res.json())
+    .then((data) => {
+      personData.innerHTML = `
+      <div class="personal-info">    
+      <img class="img" src="${data.avatar_url}">
+      <h2 class="info">Full name: ${data.name}</h2>
+      <h2 class="info">Located in ${data.location}, Sweden</h2>
+      <h2 class="info">Github account:  ${data.login}</h2>
+    </div>
+     `
+    })
+}
+
+// Inside this function I fetch all the repositories connceted to my github account, presents fetched data and also invokes
+// the chart and the next function getPR.
+const getRepos = () => {
+  fetch(`https://api.github.com/users/${USER}/repos`)
+    .then((res) => res.json())
+    .then((data) => {
+      // console.log(data)
+      const filtered = data.filter(
+        (repo) => repo.fork && repo.name.startsWith('project-')
+      )
+      filtered.forEach((repo) => {
+        const pushedDate = new Date(repo.pushed_at).toLocaleDateString(
+          'en-se',
+          {
+            hour: '2-digit',
+            minute: '2-digit',
+            weekday: 'short',
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric',
+          }
+        )
+
+        projects.innerHTML += `
+
+          <div id="${repo.name}"" class="repo-cards">
+
+            <p class="card-info" id="commit-${repo.name}"></p>
+            <p class="card-info">Recent push ${pushedDate}</p>
+            <p class="card-info">Branch ${repo.default_branch}</p> 
+            <p class="card-info"><a href="${repo.html_url}" target="blank">Repository ${repo.name}</a></p>
+          <div class="small-logo"><a href="${repo.html_url}" target="blank">
+            <img src="./github_icon.png" class="logo">
+            </a>
+          </div>
+        </div>
+
+      `
+      })
+      drawChart(filtered.length)
+      getPR(filtered)
+    })
+}
+// The pull reguest function fetches all the pull requests where I have been repository owner on github,
+//otherwise a else message will appear tell otherwise.
+const getPR = (repos) => {
+  repos.forEach((repo) => {
+    fetch(
+      `https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=100`
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        const myPR = data.find((pull) => pull.user.login === repo.owner.login)
+        if (myPR) {
+          getCommits(myPR.commits_url, repo.name)
+        } else {
+          document.getElementById(`commit-${repo.name}`).innerHTML =
+            'No pull request yet done :('
+        }
+      })
+  })
+}
+
+// This function gets the commits of each pull request and presents it together with earlier fetched data in the "repo cards"
+const getCommits = (url, myRepoName) => {
+  fetch(url)
+    .then((res) => res.json())
+    .then((data) => {
+      let commitMessage = data[data.length - 1].commit.message
+      document.getElementById(
+        `commit-${myRepoName}`
+      ).innerHTML += `<p class="card-info">Amount of commits ${data.length}</p>
+      <p class="card-info">${commitMessage}</p>
+      `
+    })
+}
+
+// When launching the site this function is invoked directly, simultaing a "landing" feeling before pushing the tracker button
+getUserData()
+
+{
+}
+
+// This addEventListener makes it possible to view the fetched data by a button click under the userdata
+tracerBtn.addEventListener('click', (event) => {
+  event.preventDefault()
+  getRepos()
+})