Technigo · Katarina821 · Feb 25, 2022 · Feb 26, 2022 · Feb 26, 2022 · Feb 26, 2022
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+// .gitignore file
+code/secret.js
diff --git a/README.md b/README.md
@@ -1,13 +1,9 @@
 # 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.
+Assigment: To create a place to keep track of the GitHub repos that I am using at Technigo using JavaScript and API:s. 
 
 ## 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 had problems with fetching teh commitsamount for my repos since all of them didnt have a pullrequest done by me. I solved it by adding conditional statment to sort out the repos with a pullrequest and only fetcinh the commitamount for them.
 
 ## 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://cocky-lovelace-ac89bc.netlify.app
diff --git a/code/GitHubMark.png b/code/GitHubMark.png
diff --git a/code/chart.js b/code/chart.js
@@ -2,3 +2,31 @@
 const ctx = document.getElementById('chart').getContext('2d')
 
 //"Draw" the chart here 👇
+const drawChart = (repos) => {
+
+const labels = [
+    'Completed projects',
+    'Remaining projects',
+
+  ];
+
+  const data = {
+    labels: labels,
+    datasets: [{
+      label: 'My First dataset',
+      backgroundColor:  ['#A9C9FF', '#fde3fb'],
+      borderColor:'pink',
+      data: [repos, 19-repos],
+    }]
+  };
+
+  const config = {
+    type: 'pie',
+    data: data,
+  };
+
+  const myChart = new Chart(
+    document.getElementById('chart'),
+    config
+  );
+}
diff --git a/code/index.html b/code/index.html
@@ -1,21 +1,24 @@
 <!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>
+  <head>
+	  <meta charset="UTF-8">
+    <meta content="IE=edge" http-equiv="X-UA-Compatible">
+    <meta content="width=device-width, initial-scale=1.0" name="viewport">
+    <title>Project GitHub Tracker</title>
+    <link href="./style.css" rel="stylesheet">
+  </head>
+  <body>
+	  <h1>GitHub Tracker</h1>
+	  <div class="intro">
+		  <img class="picture" id="avatar">
+		  <section class="userinfo" id="userinfo"></section>
+	  </div>
+	  <h1>Projects:</h1>
+	  <main class="projects" id="projects"></main>
+	  <canvas class="chart" id="chart"></canvas>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> 
+    <script src="./secret.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,80 @@
+const avatar = document.getElementById('avatar')
+const projects = document.getElementById('projects')
+const userInfo = document.getElementById('userinfo')
+const username = 'Katarina821'
+
+const API_URL_REPOS = `https://api.github.com/users/${username}/repos`
+const API_URL_ID = `https://api.github.com/users/${username}`
+
+
+
+const API_TOKEN = TOKEN || process.env.API_KEY;
+
+const options = {
+    method: 'GET',
+    headers: {
+       // Authorization: `token ${API_TOKEN}`
+    }
+}
+
+
+
+//First function, fetches userdata and displays them in userinfo
+const getIntro = () => {
+	fetch(API_URL_ID, options).then(res => res.json()).then(data => {
+		userInfo.innerHTML = `<h2>${data.name}</h2><a href=${data.html_url}> <h2> <img class="logo"src="./GitHubMark.png"> ${data.login} </h2></a>`
+		avatar.src = data.avatar_url
+    console.log(data.html_url)
+		getRepos()
+	})
+}
+//second function, fetches my repos and filters the ones that are forked and stars with project. Displays info.
+const getRepos = () => {
+	fetch(API_URL_REPOS, options).then(res => res.json()).then(data => {
+		console.log(data)
+		const forkedRepos = data.filter((repo) => repo.fork && repo.name.startsWith("project-"))
+		console.log(forkedRepos)
+		forkedRepos.forEach((repo) => projects.innerHTML += `
+      <div class="repo"> 
+      <img class="logo"src="./GitHubMark.png">
+       <a href="${repo.html_url}"><h3>${repo.name }</h3></a>
+        <h4>Defaultbranch  ${repo.default_branch}</h4> 
+        <p> Most resent update: ${new Date(repo.updated_at).toLocaleDateString("en-UK")}</p>
+        <p id="${repo.name}">Commits amount: </p>
+      </div>
+      `)
+		getPullRequests(forkedRepos)
+		drawChart(forkedRepos.length)//Evokes chartfunction with total amount of forked repos as argument
+	})
+}
+//third function Fetches all techningos pullrequests and filters the one done by me
+const getPullRequests = (forkedRepos) => {
+	forkedRepos.forEach(repo => {
+		fetch(`https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=100`, options).then(res => res.json()).then(data => {
+			const myPullRequests = data.filter(item => item.user.login === repo.owner.login)
+			console.log(myPullRequests)
+      //conditional statement to sort out the repos that have a pullrequest done 
+     // if pullrequest is done, evoke fetch commit function
+			if (myPullRequests.length > 0) {
+				fetchCommits(myPullRequests[0].commits_url, repo.name)
+      //if not dipslay message with info
+			} else {
+				document.getElementById(`${repo.name}`).innerHTML = `No pull request done, commits not avalible`
+			}
+		})
+	})
+}
+// 4th function, fetches the ammount of commits
+const fetchCommits = (myCommitsUrl, myRepoName) => {
+	fetch(myCommitsUrl).then((res) => res.json()).then((data) => {
+		document.getElementById(`${myRepoName}`).innerHTML += data.length
+	})
+}
+
+getIntro()
+
+
+
+
+
+
diff --git a/code/style.css b/code/style.css
@@ -1,3 +1,98 @@
+@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300&family=Roboto:wght@300&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
+* {
+	box-sizing: border-box;
+}
 body {
-  background: #FFECE9;
+	background-repeat: no-repeat;
+	background-attachment: fixed;
+	background-color: #A9C9FF;
+	background-image: linear-gradient(180deg, #A9C9FF 0%, #FFBBEC 100%);
+	font-family: 'Oswald', sans-serif;
+}
+.intro {
+	width: 80%;
+	margin: auto;
+	text-align: center
+}
+h1 {
+	font-size: 70px;
+	text-align: center;
+}
+h2 {
+	text-align: center;
+}
+.repo {
+	width: 80%;
+	margin: auto;
+	background-color:  rgb(255,255,255,0.5);
+	border: 1px solid white;
+	padding: 20px;
+	margin: 30px;
+	border-radius: 5%
+}
+.projects {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+}
+a {
+	text-decoration: none;
+  color:black
+}
+h3 {
+	font-size: 30px;
+}
+a:hover {
+	color: rgb(247, 91, 208);
+	font-family: 'Bebas Neue', cursive;
+	;
+}
+.picture {
+	width: 80%;
+	border-radius: 50%;
+  opacity: 0.8
+}
+.picture:hover{opacity: 1.0}
+.logo {
+	width: 30px;
+}
+.chart {
+	position: absolute;
+	left: 0;
+	right: 0;
+	margin: auto;
+	width: 400px
+}
+.userinfo {
+	padding: 20px;
+}
+@media only screen and (min-width: 600px) {
+	.repo {
+		width: 40%
+	}
+	.chart {
+		width: 600px
+	}
+}
+@media only screen and (min-width: 992px) {
+	.repo {
+		width: 20%
+	}
+	.picture {
+		width: 20%;
+	}
+	.intro {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	h2 {
+		font-size: 35px;
+		text-align: left;
+		margin-left: 10px;
+	}
+	.chart {
+		width: 40%
+	}
 }