Technigo · id4h4lling · Feb 25, 2022 · Feb 25, 2022 · Feb 25, 2022 · Feb 25, 2022
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,26 @@
+// .gitignore file code/secret.js
+
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+
+# Ignore Mac system files
+.DS_store
+
+# Ignore node_modules folder
+node_modules
+
+# Ignore all text files
+*.txt
+
+# Ignore files related to API keys
+.env
+
+# misc
+/.pnp
+.pnp.js
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# other
+code/secret.js
diff --git a/README.md b/README.md
@@ -1,13 +1,12 @@
 # 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.
+Create a tracker for my progress as a student at Technigo bootcamp. 
 
 ## 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 started with getting the fetches, trying to remember everything from last weeks project. Had some trouble with (a lot) but "small things" like remembering to pass along the filtered repos and calling functions. This project was intense but I pulled through (pun intended). 
+With more time I would try harder to get the token to work. And as always more time on styling. 
 
 ## View it live
+https://id4h4lling.netlify.app/
 
-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.
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')
+const ctx = document.getElementById('myChart').getContext('2d')
 
-//"Draw" the chart here 👇
+
+const drawChart = (amount) => {
+const labels = [
+'Completet projects',
+'Projects left'
+];
+
+const data = {
+  labels: labels,
+  datasets: [{
+    label: 'My First dataset',
+    backgroundColor: ['rgb(105, 137, 175)','rgb(250, 245, 205)'],
+    borderColor: 'rgb(238, 226, 185)',
+    data: [amount, 19 - amount],
+  }]
+};
+
+const config = {
+  type: 'doughnut',
+  data: data,
+  options: {}
+};
+
+const myChart = new Chart(
+  ctx,config)
+}
diff --git a/code/index.html b/code/index.html
@@ -6,16 +6,33 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Project GitHub Tracker</title>
   <link rel="stylesheet" href="./style.css" />
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
+
 </head>
 <body>
-  <h1>GitHub Tracker</h1>
-  <h2>Projects:</h2>
-  <main id="projects"></main>
+  <header class="title" id="title">
+    <h1>GitHub Tracker</h1>
+  </header>
+
 
-  <!-- This will be used to draw the chart 👇 -->
-  <canvas id="chart"></canvas>
 
-  <script src="./script.js"></script>
+  <main class="main-container" id="mainContainer">
+
+    <section class="user-info" id="userInfo">
+    </section>
+
+    <section class="projects" id="projects">
+    </section>
+  </main>
+
+  <!-- This will be used to draw the chart 👇 -->
+  <div class="my-chart">
+    <canvas id="myChart"></canvas>
+  </div>
+
+  <script src="./secret.js"></script>
   <script src="./chart.js"></script>
+  <script src="./script.js"></script>
 </body>
-</html>
+</html>
diff --git a/code/script.js b/code/script.js
@@ -0,0 +1,99 @@
+const username = 'id4h4lling'
+let reponame = ''
+
+const API_GIT_URL = `https://api.github.com/users/${username}/repos`
+const API_GIT_USER = `https://api.github.com/users/${username}` //to get a hold of profilepicture
+
+const userInfo = document.getElementById('userInfo')
+const projects = document.getElementById('projects')
+
+
+// paus for now, try token another time. 
+const options = {
+    method: 'GET',
+    headers: {
+        // Authorization: `token ${API_TOKEN}`
+    }
+}
+
+//User info
+fetch (API_GIT_USER, options)
+    .then(res => res.json()) 
+    .then(user => {
+        console.log(user)
+        userInfo.innerHTML += `
+        <div class="user-info">
+        <img class="profile-img" src="${user.avatar_url}">  
+        <h2> ${username}</h2>
+        <p> ${user.bio}</p>
+        </div>
+        `      
+    })
+
+
+//fetch repos
+const getRepos = () =>{
+
+fetch (API_GIT_URL, options)
+    .then(res => res.json()) 
+    .then(data => {
+        console.log(data)
+
+        //filter out and only show the forked ones, filter out Technigo projects 
+        const forkedRepos = data.filter((repo) => repo.fork && repo.name.startsWith("project-"))
+        console.log(forkedRepos) 
+
+        forkedRepos.forEach((repo) => {
+        projects.innerHTML+=
+       `    <div class="card" id=${repo.id}>
+            <h2><a href="${repo.html_url}">${repo.name}</a></h2>
+            <p>Default branch: ${repo.default_branch}</p>
+            <p class = "repo"id="commit-${repo.name}"">Commits Done: </p>
+            <p>Recent push: ${new Date (repo.pushed_at).toDateString()}</p>       
+            </div>   ` 
+        })
+
+        fetchPullRequests(forkedRepos)
+
+        drawChart(forkedRepos.length)
+    })
+}
+ getRepos()
+
+
+const fetchPullRequests = (repos) => {
+
+    repos.forEach((repo => {
+        fetch (`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`)
+            .then(res => res.json()) 
+            .then(data => 
+                {
+            //filter out pr        
+            const pulls = data.find((pull) => pull.user.login === repo.owner.login);
+
+            if (pulls) {
+                fetchCommits(pulls.commits_url, repo.name)
+            }
+            else {
+                document.getElementById(`commit-${repo.name}`).innerHTML =
+                    'Commits Done: (Pull request unavailable)'
+                } 
+         })
+        })
+    )}
+
+const fetchCommits = (myCommitsUrl, myRepoName) => {
+    fetch(myCommitsUrl, options)
+    .then((res) => {
+       return res.json()
+    })
+    .then((data) => {
+        document.getElementById(`commit-${myRepoName}`).innerHTML += data.length
+        console.log("data", data)
+    })
+}
+
+
+
+
+
diff --git a/code/style.css b/code/style.css
@@ -1,3 +1,111 @@
 body {
-  background: #FFECE9;
+  background: rgb(238, 226, 185);
+  font-family: Roboto;
+}
+
+.title {
+  font-size: 20px;
+  text-align: center;
+  padding: 30px 0px 0px 0px;
+  color: rgb(255, 255, 255);
+}
+
+h2 {
+  font-size: 30px;
+}
+
+p {
+  font-size: 20px;
+}
+
+.header{
+  display: flex;
+  justify-content: center;
+}
+
+.profile-img {
+  width: 300px;
+  height: 300px;
+  border-radius: 50%;
+  align-self: center;
+
+}
+
+.main-container {
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border-radius: 2px;
+
+}
+
+.user-info {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  margin: 0px;
+  padding-top: 20px;
+  color: white;
+}
+
+.projects{
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  column-gap: 1rem;
+  row-gap: 1rem;
+  margin: 30px 0px 50px 0px;
+}
+
+.card {
+  background: rgb(240, 240, 240);
+  text-align:left;
+  padding: 1.5rem;
+  box-shadow: 0 0.1rem 1.2rem rgba(22, 23, 23, 0.2);
+  transform: translateY(0);
+  position: relative;
+  padding: 5px, 10px, 5px, 30px;
+  margin: 10px;
+  /* border: solid 2px rgb(187, 206, 241); */
+  border-radius: 5px;
+}
+
+a {
+  color: rgb(105, 137, 175);
+}
+
+a:hover {
+  color: pink;
+}
+
+.my-chart{
+  display: grid;
+  grid-column: span 6;
+  justify-items: center;
+  margin: 5% auto;
+  width: 500px;
+}
+
+/* ---------- media queries desktop ---------- */
+
+@media (min-width: 1025px) {
+  .user-info {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .projects {
+    grid-template-columns: repeat(auto-fit, minmax(400px, 2fr));
+    max-width: 80%;
+    align-self: center;
+    margin-top: 60px;
+  }
+
+  .my-chart{
+    margin: 5% auto;
+    width: 700px;
+  }
+
 }