Technigo · Thereese · Feb 26, 2022 · Feb 26, 2022 · Feb 27, 2022 · Feb 27, 2022
diff --git a/.DS_Store b/.DS_Store
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+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.
+A really tricky project, happy that everything is working! With more time I would have worked
+more with the styling and added some more fetched information, maybe a different kind of chart.
 
 ## 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?
+Create a github tracker fetching information from my GitHub-profile.
 
 ## 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://thereese-githubtracker.netlify.app
diff --git a/code/bakgrund.jpeg b/code/bakgrund.jpeg
diff --git a/code/chart.js b/code/chart.js
@@ -2,3 +2,24 @@
 const ctx = document.getElementById('chart').getContext('2d')
 
 //"Draw" the chart here 👇
+
+const drawChart = (amount) => {
+  const config = {
+    type: "doughnut",
+    data: {
+      labels: ["Completed projects", "Projects left to build"],
+      datasets: [{
+        label: "My Technigo projects",
+        data: [amount, 19 - amount],
+        backgroundColor: ["rgb(7,145,96)", "rgba(90, 112, 55, 0.1)"],
+        borderColor: ["rgb(0,0,0)"],
+        borderWidth: 0.3,
+        hoverOffset: 4,
+        },
+        ],
+    },
+  };
+
+const projectsChart = 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 href="https://fonts.googleapis.com/css2?family=Oxygen:wght@300&display=swap" rel="stylesheet">
+  <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 class="title">
+    <h1>| github tracker</h1>
+  </header>
+  <main>
+    <section class="user-container" id="user-container">
+      <div class="user-img" id="user-img"></div>
+      <div class="user-info" id="user-info"></div>
+    </section>
+
+    <section class="projects" id="projects" ></section>
+    <section class="chart-wrapper">
+      <div class="chart-container">
+      <canvas id="chart" class="chart"></canvas>
+      </div>
+    </section>
+  </main>
 
+  <script src="./secret.js"></script>
   <script src="./script.js"></script>
   <script src="./chart.js"></script>
 </body>

diff --git a/code/script.js b/code/script.js
@@ -0,0 +1,85 @@
+//DOM SELECTORS
+
+const projectsContainer = document.getElementById('projects')
+const userContainer = document.getElementById('user-container')
+const userInfo = document.getElementById('user-info')
+const userImg = document.getElementById('user-img')
+
+//APIS TO FETCH FROM
+const username = 'Thereese'
+let reponame
+const API_URL = `https://api.github.com/users/${username}/repos`
+const API_URL_PR = `https://api.github.com/repos/Technigo/${reponame}/pulls`
+
+
+const options = {
+  method: 'GET',
+    headers: {
+      Authorization: 'API_TOKEN'
+    }
+}
+
+
+//FETCH USERNAME AND PROFILEPIC 
+const getUser = () => {
+  fetch (`https://api.github.com/users/${username}`, options)
+    .then((res) => res.json())
+    .then((data) => {
+      userImg.innerHTML=
+      `<img class="user-image" src=${data.avatar_url}/>`
+      userInfo.innerHTML=
+      `<h1>${data.name}</h1>
+       <h3> | ${data.login}</h3>`
+    })
+}
+
+
+//FETCH REPOS AND FILTER TECHNIGOPROJECTS. DATA TO PROJECTCONTAINER.
+const getRepos = () => {
+  fetch (API_URL, options)
+    .then((res) => res.json())
+    .then((data) => {
+    const filterTechnigoProjects = data.filter((repo) => repo.fork && repo.name.startsWith("project"))
+      filterTechnigoProjects.forEach(repo => {
+        let projectID = repo.id
+        projectsContainer.innerHTML+=
+        `<div class="repocard" id=${projectID}>
+          <a href=${repo.html_url}><h3> ${repo.name}</h3></a>
+          <p> Default branch: ${repo.default_branch}</p>
+          <p> Latest push: ${new Date(repo.pushed_at).toDateString()}</p>
+          <p id="commit-${repo.name}">Commits:</p>
+        </div>`
+
+         })
+         getPullRequests(filterTechnigoProjects)
+         drawChart(filterTechnigoProjects.length)
+    })
+}
+
+getRepos()
+//FETCH PULLREQUESTS, SORT AND RETURN DATA OR COMMENT
+const getPullRequests = (filterTechnigoProjects) => {
+  filterTechnigoProjects.forEach(repo => {
+    fetch (`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`, options)
+      .then((res) => res.json())
+      .then((data) => {
+        const filterMyPull = data.find((pull) => pull.user.login === repo.owner.login)
+        if (filterMyPull) {
+          getCommits(filterMyPull.commits_url, repo.name)
+        } else {
+          document.getElementById(`commit-${repo.name}`).innerHTML =
+          '<p>No pull requests made</p>'
+        }
+    }) 
+  })
+}
+
+const getCommits = (URL, repoName) => {
+  fetch(URL, options)
+    .then ((res) => res.json())
+    .then (data => {
+      document.getElementById(`commit-${repoName}`).innerHTML += data.length;
+    })
+}
+getUser()
+
diff --git a/code/style.css b/code/style.css
@@ -1,3 +1,110 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+} 
 body {
-  background: #FFECE9;
+  background: #e2e7e8;
+  font-family: "Oxygen", sans-serif;
+}
+
+.title {
+  background-image: url(./bakgrund.jpeg) ;
+  background-position: left bottom;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-attachment: fixed;
+  position: relative;
+  height: 220px;
+  width: 100%;
+  display: grid;
+  justify-content: center; 
+  align-items: center;
+  padding: 5%;
+  font-size: 1.4rem;
+  text-align: center;
+}
+
+main {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.user-container {
+  display: grid;
+  grid-template-columns: 1fr;
+  justify-content: center;
+  background-color: rgba(148,182,165,0.8);
+}
+
+.user-image {
+  max-width: 20vw;
+  border-radius: 100%;
+  padding-top: 20px;
+}
+
+.user-img {
+  display: flex; 
+  justify-content: center; 
+  padding-top: 10px;
+}
+
+.user-info {
+  display: grid;
+  padding-bottom: 40px;
+  justify-items: center; 
+}
+
+.projects {
+  color: black;
+  display: inline-grid;
+  grid-template-columns: 1fr;
+  justify-items: center;
+  padding: 5%;
+}
+
+.repocard {
+  display: block;
+  align-items: center;
+  text-align: center;
+  padding: 20px;
+  margin: 10px;
+  width: 100%; 
+  background-color: rgba(148,182,165,0.1);
+}
+
+.repocard a {
+  text-decoration: none;
+  color: gray
+}
+
+a:hover {
+  color: darkgreen;
+}
+
+.chart-wrapper {
+  display: grid;
+  justify-items: center;
+  width: 100%;
+  background-color: rgba(148,182,165,0.5);
+}
+
+.chart-container {
+  display: grid;
+  justify-items: center;
+  padding: 5%;
+  max-width: 450px;
+}
+
+
+@media (min-width: 769px) {
+.projects {
+  grid-template-columns: 1fr 1fr;
+  column-gap: 25px;
+}
+
+.title {
+font-size: 1.9rem;
+}
 }