Technigo · Kyparn · Feb 25, 2022 · Feb 27, 2022 · Feb 27, 2022 · Feb 27, 2022
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+
+code/secret.js
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.
+This weeks project was to build a website that keept track on my info on github :)
 
 ## 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?
+This week i had alot of problems with the code, all kinds of error and more more, i had help from my my team Foxes to fix the problem :)
 
 ## 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 u can se my page live -----> https://github-trackar.netlify.app/
diff --git a/code/chart.js b/code/chart.js
@@ -2,3 +2,20 @@
 const ctx = document.getElementById('chart').getContext('2d')
 
 //"Draw" the chart here 👇
+const drawChart = (amount) => {
+  const configchart = {
+    type: 'doughnut',
+    data: {
+      labels: ['Complete', 'Not Complete'],
+      datasets: [
+        {
+          label: 'Technigo projects rate ',
+          data: [amount, 19 - amount],
+          backgroundColor: ['#77E327', '#E33527'],
+          hoverOffset: 3,
+        },
+      ],
+    },
+  }
+  const myProjects = new Chart(ctx, configchart)
+}
diff --git a/code/github.png b/code/github.png
diff --git a/code/index.html b/code/index.html
@@ -1,21 +1,40 @@
 <!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>
-
-  <!-- This will be used to draw the chart 👇 -->
-  <canvas id="chart"></canvas>
-
-  <script src="./script.js"></script>
-  <script src="./chart.js"></script>
-</body>
-</html>
+  <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" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Mochiy+Pop+P+One&family=Roboto&display=swap"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  </head>
+  <body>
+    <header>
+      <h1>
+        GitHub Tracker
+        <img src="github.png" alt="logo" width="50px" />
+      </h1>
+    </header>
+    <section class="personData" id="personData"></section>
+    <main id="projects" class="projects"></main>
+    <!-- This will be used to draw the chart 👇 -->
+    <div class="chart">
+      <canvas id="chart"></canvas>
+    </div>
+    <footer>
+      <p>
+        © Copyright 2022 Simon Andersson Student @ Technigo - All Rights
+        Reserved
+      </p>
+    </footer>
+    <script src="./secret.js"></script>
+    <script src="./chart.js"></script>
+    <script src="./script.js"></script>
+  </body>
+</html>
diff --git a/code/script.js b/code/script.js
@@ -0,0 +1,108 @@
+// GITHUB API
+const username = 'Kyparn'
+const API_USER = `https://api.github.com/users/${username}`
+const API_REPO = `https://api.github.com/users/${username}/repos`
+const projects = document.getElementById('projects')
+const personData = document.getElementById('personData')
+
+//token
+const api_Token = apiToken || process.API_KEY
+
+const options = {
+  method: 'GET',
+  headers: {
+    Authorization: `${apiToken}`,
+  },
+}
+
+//Prints out the user info in the HTML
+
+const getUserData = () => {
+  fetch(API_USER)
+    .then((res) => res.json())
+    .then((user) => {
+      personData.innerHTML = `
+  <div class="info">
+  <img class="img" src="${user.avatar_url}">
+  <h2 class="userInfo"> ${user.name}</h2>
+  <h2 class="userInfo">${user.location}</h2>
+  <h2 class="userInfo">${user.bio}</h2>
+  </div>`
+    })
+}
+getUserData()
+
+// Function to fetch my repositories
+
+const getRepos = () => {
+  fetch(API_REPO, options)
+    .then((res) => res.json())
+    .then((data) => {
+      // This function filters out my projects from technigo
+
+      const repos = data.filter(
+        (repo) => repo.fork && repo.name.startsWith('project-'),
+      )
+
+      repos.forEach((repo) => {
+        //Her we create a unique ID for each of my forked repos and print them in the HTML
+        let projectID = repo.id
+
+        projects.innerHTML += `
+              <div class="repoInfo" id="${projectID}">
+              <img src="github.png" class="repoimg" alt="logo" width="25px" />
+              <p class="cardInfo">Project name: 
+              ${repo.name.replace('project-', '').replace('-', ' ')}
+          </p>
+              <p class="cardInfo" id="commit-${repo.name}"></p>
+              <p class="cardInfo">${new Date(repo.pushed_at).toDateString()}</p>
+              <p class="cardInfo">Branch : ${repo.default_branch}</p> 
+              <p class="cardInfo"$> <a href="${
+                repo.html_url
+              }" target="blank">Repository ${repo.name}</a></p>
+          <p class="cardInfo" id="commit-${repo.name}"></p>
+          <p class="cardInfo" id="pull-request-${repo.name}">
+      Pull requests:</p>
+
+              </div>`
+
+        // Invoking function to get the number of commits for the projects
+        getCommits(repo, projectID)
+      })
+      getPullRequest(repos)
+      drawChart(repos.length)
+    })
+}
+// This function
+const getPullRequest = (repos) => {
+  repos.forEach((repo) => {
+    fetch(
+      `https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`,
+      options,
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        //Filter out my pullrequests
+        const pulls = data.find((pull) => pull.user.login === repo.owner.login)
+        const myPullRequests = data.filter((pullRequest) => {
+          return pullRequest.user.login === username
+        })
+        document.getElementById(
+          `pull-request-${repo.name}`,
+        ).innerHTML = `Pull Request: ${myPullRequests.length}`
+      })
+  })
+}
+//  Function to get commits and print them out
+const getCommits = (projects, projectID) => {
+  const GIT_COMMIT_API = projects.commits_url.replace('{/sha}', '')
+  fetch(GIT_COMMIT_API, options)
+    .then((res) => res.json())
+    .then((data) => {
+      let numberOfCommits = data.length
+      document.getElementById(projectID).innerHTML += `
+      <p>Number of commits: ${numberOfCommits}</p>`
+    })
+}
+
+getRepos()
diff --git a/code/style.css b/code/style.css
@@ -1,3 +1,119 @@
+* {
+  padding: 0;
+  margin: 0;
+}
+
 body {
-  background: #FFECE9;
-}
+  animation: 10000ms ease-in-out infinite color-change;
+  font-family: 'Roboto', sans-serif;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+header {
+  padding: 50px;
+  text-align: center;
+  justify-content: center;
+}
+
+footer {
+  background: linear-gradient(250deg, #191b1b, #736bc7, #3a09b5) fixed;
+  text-align: center;
+  padding: 50px;
+}
+.info {
+  text-align: center;
+}
+.userInfo {
+  padding: 10px;
+}
+.img {
+  margin: 20px;
+  border-radius: 250px;
+  width: 300px;
+  box-shadow: 1px 1px 5px black;
+}
+.personData {
+  justify-items: center;
+  display: grid;
+}
+.repoInfo {
+  box-shadow: 1px 1px 5px black;
+  background: linear-gradient(150deg, #191b1b, #736bc7, #3a09b5) fixed;
+  padding: 20px;
+  border-radius: 20px;
+  border: 1px black solid;
+  margin: 20px;
+  justify-items: center;
+  display: grid;
+}
+.cardInfo {
+  text-transform: uppercase;
+  font-size: 13px;
+  line-height: 20px;
+}
+
+.chart {
+  aspect-ratio: 1 / 1;
+  margin: 0 auto;
+  max-height: 250px;
+  max-width: 250px;
+  padding: 25px;
+}
+.projects {
+  display: grid;
+  grid-template-columns: 1fr;
+}
+@keyframes color-change {
+  0% {
+    background-color: rgb(7, 41, 152);
+  }
+  10% {
+    background-color: rgb(65, 32, 153);
+  }
+  20% {
+    background-color: rgb(142, 120, 240);
+  }
+  30% {
+    background-color: rgb(176, 151, 235);
+  }
+  40% {
+    background-color: rgb(149, 157, 233);
+  }
+  50% {
+    background-color: rgb(172, 169, 232);
+  }
+  60% {
+    background-color: rgb(149, 157, 233);
+  }
+  70% {
+    background-color: rgb(176, 151, 235);
+  }
+  80% {
+    background-color: rgb(142, 120, 240);
+  }
+  90% {
+    background-color: rgb(65, 32, 153);
+  }
+  100% {
+    background-color: rgb(7, 41, 152);
+  }
+}
+@media (min-width: 668px) {
+  .repoInfo {
+    justify-items: center;
+    display: grid;
+  }
+
+  .personData {
+    justify-items: center;
+    display: grid;
+  }
+  .projects {
+    grid-template-columns: 1fr 1fr;
+  }
+  .cardInfo {
+    font-size: 16px;
+    padding: 5px;
+  }
+}