Technigo · pcruzem · Oct 8, 2021 · Oct 8, 2021 · Oct 8, 2021 · Oct 10, 2021
diff --git a/README.md b/README.md
@@ -1,13 +1,14 @@
 # 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 creating a git hub tracker with a list of all my Technigo Repositories as well as amount of commits for each repo. 
 
 ## 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 used javascript, CSS and some html. I encountered most problem in the beginning when trying to fetch my data from github. I followed Jennies and Maks videos and constantly ran out of fetches. Eventually I managed. For styling I looked at my teammate Maria Sjögrens Code and implemented it step by step, by doing that I learned a lot of things that I didn't know before. 
+
+What technologies did you use? If you had more time, what would be next?
+If I had more time I would work more on the links, because I want them to open in a new window but I didnt manage to do it. I would also try to put the chart in the profile-section and add som red level stuff. 
 
 ## 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://infallible-bassi-7672f0.netlify.app/
diff --git a/code/chart.js b/code/chart.js
@@ -2,3 +2,27 @@
 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: [
+            'rgba(192, 253, 196, 0.48)',
+            'rgba(255, 159, 209, 0.8)',
+          ],
+          hoverOffset: 4
+        }],
+      },
+    };
+
+    const projectsChart = new Chart(ctx, config);
+}
+
+
diff --git a/code/index.html b/code/index.html
@@ -6,16 +6,31 @@
   <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 href="https://fonts.googleapis.com/css2?family=Archivo+Black&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>
+  <header class="title">
+    <h1 >GITHUB TRACKER</h1>
+  </header>
+
+  <main class="main-container">
+    <section id="profile-container" class="profile-container">
+    </section>
+
+    <section id="projects" class="projects-container"></section>
+
+   <!-- This will be used to draw the chart 👇 -->
+  <section class="chart-container">
+    <canvas id="chart" class="chart"></canvas>
+  </section>
 
-  <!-- This will be used to draw the chart 👇 -->
-  <canvas id="chart"></canvas>
-
-  <script src="./script.js"></script>
+</main>
+
   <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,89 @@
+const USER = 'pcruzem';
+const PROFILE_URL = `https://api.github.com/users/${USER}`;
+const REPOS_URL = `https://api.github.com/users/${USER}/repos`;
+
+const profileContainer = document.getElementById('profile-container');
+const projectsContainer = document.getElementById('projects');
+
+
+// fetch Profile function
+const fetchProfile = () => {
+    fetch(PROFILE_URL)
+        .then((res) => res.json()) 
+        .then((profileData) => {
+        profileContainer.innerHTML += `
+            <img src=${profileData.avatar_url} class="profile-img">    
+            <h2>${profileData.name}</h2>
+            <button class="GFG" 
+            onclick="window.location.href = 'https://github.com/pcruzem';">${profileData.login}</button>
+        `;
+        });
+  };
+
+const fetchRepositories = () => {
+    fetch (REPOS_URL)
+    .then((res)=> res.json())
+    .then((data) => {
+        const technigoRepositories = data.filter(
+            (repo) => repo.name.includes('project-') && repo.fork
+         );
+
+        technigoRepositories.forEach((repo) => {
+            projectsContainer.innerHTML += `
+        <div class="card">
+            <a href="${repo.html_url}">
+            <h2>${repo.name}</h2>
+            <p>Default branch: ${repo.default_branch}</p> 
+            <p>Most recent push: ${new Date(repo.pushed_at).toDateString()}</p>
+            <p id="commit-${repo.name}">Amount of commits: </p>
+            </a>
+        </div>
+    `;
+
+        });
+
+
+        fetchPullRequestsArray(technigoRepositories);
+
+        //Draw chart with technigoRepos data
+        drawChart(technigoRepositories.length);
+
+    });
+};
+
+const fetchPullRequestsArray = (allRepositories) => {
+    allRepositories.forEach((repo) => {
+        const PULL_URL = `https://api.github.com/repos/Technigo/${repo.name}/pulls?
+        per_page=100`;
+
+        fetch(PULL_URL)
+        .then((res) => res.json()) 
+        .then((data) => {
+            const myPullRequest = data.find(
+                (pull) => pull.user.login === repo.owner.login
+            );
+            console.log(myPullRequest);
+
+            // Detect if we have pull request or not.
+			// If yes - call fetchCommits function
+			// If no - inform user that no pull request was yet done
+			if (myPullRequest) {
+				fetchCommits(myPullRequest.commits_url, repo.name);
+			} else {
+				document.getElementById(`commit-${repo.name}`).innerHTML =
+                'No pull requests made by pcruzem';
+			}
+        });
+    });
+};
+
+const fetchCommits = (myCommitsUrl, myRepoName) => {
+	fetch(myCommitsUrl)
+		.then((res) => res.json())
+		.then((data) => {
+			document.getElementById(`commit-${myRepoName}`).innerHTML += data.length;
+		});
+};
+
+fetchProfile();
+fetchRepositories();
diff --git a/code/style.css b/code/style.css
@@ -1,3 +1,108 @@
 body {
-  background: #FFECE9;
+  background: rgb(163, 211, 198);
+}
+
+.title {
+  font-family: 'Archivo Black', sans-serif;
+  font-size: 1.6rem;
+  text-align: center;
+}
+
+h2, p, button {
+  font-family: 'Roboto', sans-serif;
+}
+
+.profile-img {
+  border-radius: 50%;
+  max-width: 200px;
+}
+
+button {
+  font-size: 1.3rem;
+  border: 1px solid #95dcbe;
+  border-radius: 8px;
+  padding: 14px;
+  box-shadow: 0 0.2rem 1.2rem rgba(22, 23, 23, 0.2);
+  transition-duration: 0.4s;
+}
+
+button:hover {
+  background-color: #f5cbe6;
+  color: white;
+}
+
+.main-container .title {
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  align-items: center;
+}
+
+.profile-container {
+  display: grid;
+  grid-column: span 6;
+  justify-items: center;
+  padding-bottom: 2rem;
+}
+
+.projects-container {
+  display: grid;
+  grid-column: span 6;
+  grid-gap: 2rem;
+  margin: 50px auto;
+}
+
+.chart-container {
+  display: grid;
+  grid-column: span 6;
+  justify-items: center;
+  margin: 5% auto;
+  width: 300px;
+}
+
+
+.card {
+  background: #fff;
+  text-align:center;
+  padding: 1.5rem;
+  box-shadow: 0 0.2rem 1.2rem rgba(22, 23, 23, 0.2);
+  transform: translateY(0);
+  position: relative;
+
+}
+
+.card a {
+  text-decoration: none;
+  color: inherit;
+}
+
+.card:hover,
+.card:focus,
+.card:active {
+  filter: none;
+  box-shadow: 0 4px 5px rgba(0,0,0,0.2);
+  color: #95dcbe;
+}
+
+
+
+@media (min-width: 768px) {
+  .profile-container {
+    grid-column: span 3;
+  }
+
+  .chart-container {
+    grid-column: span 3;
+  }
+
+  .projects-container {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (min-width: 992px) {
+  .projects-container {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
 }