Technigo · MarianneArdin · Feb 27, 2022 · Feb 27, 2022 · Feb 27, 2022 · Feb 27, 2022
diff --git a/README.md b/README.md
@@ -1,13 +1,20 @@
 # GitHub Tracker
+Requirements:
 
-Replace this readme with your own information about your project.
+- A list of all repos that are forked from Technigo
+- Your username and profile picture
+- Most recent update (push) for each repo
+- Name of your default branch for each repo
+- URL to the actual GitHub repo
+- Number of commits for each repo
+- It should be responsive (mobile first)
+- A visualisation, for example through a pie chart, of how many projects you've done so far, compared to how many you will do (in total it will be 19 weekly projects 🥳) using [Chart.js](https://www.chartjs.org/).
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
 
 ## 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 project wasn't easy to get my head around. It took me a while to get all fetches to show. I also struggled a bit with the chart. 
 
 ## 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://marianneardin-githubtracker.netlify.app/
diff --git a/code/.gitignore b/code/.gitignore
@@ -0,0 +1 @@
+token.js
diff --git a/code/chart.js b/code/chart.js
@@ -1,4 +1,23 @@
-//DOM-selector for the canvas 👇
-const ctx = document.getElementById('chart').getContext('2d')
+//DOM-selector for the canvas
 
-//"Draw" the chart here 👇
+//Chart showing completed and remaining projects
+
+const drawChart = (numberOfProjects) => {
+	const ctx = document.getElementById('chart').getContext('2d');
+	const config = {
+		type: 'pie',
+		data: {
+			labels: ['Projects completed', 'Projects remaining'],
+			datasets: [
+				{
+					label: 'Technigo Projects',
+					data: [numberOfProjects, 19 - numberOfProjects],
+					backgroundColor: ['rgb(255,255,255)', 'rgb(102,153,153)'],
+					hoverOffset: 4,
+				},
+			],
+		},
+	};
+
+	const chart = new Chart(document.getElementById('chart'), config);
+};
diff --git a/code/index.html b/code/index.html
@@ -1,21 +1,46 @@
 <!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="stylesheet" href="./style.css" />
+		<!--Link to font-->
+		<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&display=swap"
+			rel="stylesheet"
+		/>
+	</head>
+	<body>
+		<header>
+			<h1>GitHub Tracker</h1>
+			<h3 id="username"></h3>
+		</header>
+		<section class="profile" id="profile"></section>
 
-  <!-- This will be used to draw the chart 👇 -->
-  <canvas id="chart"></canvas>
+		<section id="userContainer"></section>
+		<section id="projectContainer"></section>
 
-  <script src="./script.js"></script>
-  <script src="./chart.js"></script>
-</body>
-</html>
+		<!-- This will be used to draw the chart 👇 -->
+		<section class="chart-container">
+			<canvas id="chart" class="chart"></canvas>
+		</section>
+
+		<!-- This is a little footer -->
+		<footer>
+			Page by Marianne Ardin week 7 Technigo bootcamp 2022 marianne@ardin.se
+			<a href="https://www.linkedin.com/in/marianneardin/"
+				>Marianne Ardin on linkedin</a
+			>
+		</footer>
+
+		<!-- link to chart.js -->
+		<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+		<script src="./token.js"></script>
+		<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,92 @@
+//DOM selectors//
+const userContainer = document.getElementById('userContainer')
+
+//APIs to fetch from
+const username = 'MarianneArdin'
+const API_URL = `https://api.github.com/users/${username}`
+const REPOS_URL = `https://api.github.com/users/${username}/repos`
+//const API_TOKEN = TOKEN || process.env.API_TOKEN
+//const API_MY_PROFILE = 'https://api.github.com/users/MarianneArdin'
+
+
+//option for authorization
+const options = {
+     method: 'GET',
+     headers: {
+     Authorization: `token ${API_TOKEN}` 
+ } 
+ }
+//FETCHES PROFILE FROM GITHUB//
+const fetchProfile = () => {
+    fetch(API_URL, options)
+        .then((response) => response.json())
+        .then((data) => {
+        console.log(data)
+        userContainer.innerHTML += `
+        <div id="profile" class="profile">
+        <div class="profile-image">
+        <a href="${API_URL}">
+        <img src="${data.avatar_url}" alt="Avatar of ${data.login}">
+        </a>
+        </div>
+        <a href="https://github.com/MarianneArdin"><h1 class="username">${data.login}<h1></a>
+        <h2>My projects</h2>
+        </div>
+        <div>
+        <p>Public repositories: ${data.public_repos}</p>
+        </div>
+         `
+        })
+}
+fetchProfile()
+
+//GET REPOS FROM GITHUB//
+const getRepos = () => {
+    fetch(REPOS_URL, options)
+    .then((res) => res.json())
+    .then((reposData) => {
+    console.log(reposData)
+    const forkedRepos = reposData.filter((repo) => repo.fork && repo.name.startsWith("project-"))
+    forkedRepos.forEach(repo => {
+    projectContainer.innerHTML += 
+       `
+       <a class="project-link" href="${repo.html_url}" target="_blank"> 
+       <div class="forkedrepo-div">
+            <h2 class="project-name"> ${repo.name}</h2>
+            <p class="project-info"> Default branch: ${repo.default_branch}</p>
+            <p class="project-info"> Recent push: ${new Date(repo.pushed_at).toDateString()}</p>
+            <p class="project-info" id="commits-${repo.name}"> Amount of commits: </p>  
+        </div> `
+       })
+       getPullRequests(forkedRepos)
+
+       drawChart(forkedRepos.length)
+    }) 
+}    
+getRepos()
+
+//GETS REPOS FROM GITHUB//
+const getPullRequests = (repos) => {
+    repos.forEach(repo => {
+          fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`, options)
+            .then(res => res.json())
+            .then((pullData) => {
+            let myPullRequest = pullData.find((pull) => pull.user.login === repo.owner.login)
+            if (myPullRequest) {
+                getCommits(myPullRequest.commits_url, repo.name)
+             } else {
+            document.getElementById(`commits-${repo.name}`).innerHTML += `No pulls yet.`
+         }    
+         })
+    })
+}
+
+//GET NUMBER OF COMMITS
+const getCommits = (commitsUrl, repo) => {
+    fetch(commitsUrl, options)
+    .then(res => res.json())
+    .then((data) => {
+    document.getElementById(`commits-${repo}`).innerHTML += `${data.length}`
+    console.log(data.length)
+    })
+}
diff --git a/code/style.css b/code/style.css
@@ -1,3 +1,69 @@
 body {
-  background: #FFECE9;
-}
+	background: grey;
+	font-family: 'Bebas Neue', cursive;
+	margin: 1rem;
+}
+
+header {
+	background-color: lightgrey;
+	border-radius: 180%;
+	color: black;
+	text-align: center;
+}
+
+h1 {
+	font-size: 40px;
+	text-align: center;
+}
+
+h2 {
+	font-size: 40px;
+	text-align: center;
+}
+
+h3 {
+	font-size: 20px;
+	text-align: center;
+}
+
+/*Image*/
+img {
+	width: 200px;
+	border-radius: 50%;
+	padding: 2rem;
+}
+
+a {
+	color: black;
+}
+
+.profile {
+	display: flex;
+	justify-content: center;
+	flex-direction: column;
+	align-items: center;
+	margin-left: auto;
+	margin-right: auto;
+	width: 50%;
+}
+.forkedrepo-div {
+	border: black solid;
+	padding: 1rem;
+	margin: 2rem;
+}
+/* THE CHART SECTION */
+
+#chart-wrapper {
+	width: 90%;
+	margin: 20px auto 40px;
+}
+
+#chart {
+	padding: 20%;
+}
+
+/* This is styling for the footer*/
+footer {
+	background-color: darkgrey;
+	text-align: center;
+}