Technigo · silvertejp89 · Sep 30, 2021 · Sep 30, 2021 · Oct 1, 2021 · Oct 3, 2021
diff --git a/7f9171366b55b4edc9f1631f618d8b46.jpg b/7f9171366b55b4edc9f1631f618d8b46.jpg
diff --git a/README.md b/README.md
@@ -1,13 +1,11 @@
 # 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.
+The task was to create a place to keep track of the GitHub repos that we are using at Technigo using fetch API.
 
 ## 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 struggled with time as usual but the biggest challenge was all the new information and techniques I got to learn. 
 
 ## 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.
+Look! https://kriss-github-tracker.netlify.app/
diff --git a/code/Untitled-1.txt b/code/Untitled-1.txt
@@ -0,0 +1,6 @@
+TODO:
+
+1) fetch the repos and console log them
+2) get them in the browser
+3) FILTHER OUT THE Technogo repos 
+4) test chart library 
diff --git a/code/chart.js b/code/chart.js
@@ -1,4 +1,30 @@
-//DOM-selector for the canvas 👇
+
 const ctx = document.getElementById('chart').getContext('2d')
 
-//"Draw" the chart here 👇
+console.log ('chart is heart')
+
+Chart.defaults.color = "#ff0000";
+Chart.defaults.font.size = 18;
+
+  const drawChart = (amount) => {
+    const config = {
+      type: 'doughnut',
+      data: {
+          labels: [
+            'Finished Projects',
+            'Projects Left'
+          ],
+          datasets: [{
+            label: 'My First Dataset',
+            data: [amount, Math.max(18 - amount, 0)],
+            backgroundColor: [
+              'rgb(226, 176, 9)',
+              'white'
+            ],
+            hoverOffset: 4
+          }]
+        },
+    };
+
+    const myChart = new Chart(ctx, config)
+  }
diff --git a/code/index.html b/code/index.html
@@ -6,16 +6,40 @@
   <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=Roboto&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="header"> 
+    <h1>GitHub Tracker</h1>
+  </header>
 
-  <!-- This will be used to draw the chart 👇 -->
-  <canvas id="chart"></canvas>
+  <section class="grid-container">
+  <div class="profile" id="profile"></div>
+
+    <section class="repos-area">
+      <h2>Technigo projects:</h2>
+      <div class="project-grid" id="projects"></div>
+    </section>  
+
+    <div class='chart'>
+      <canvas id="chart"></canvas>
+    </div>
+  </section>
 
   <script src="./script.js"></script>
   <script src="./chart.js"></script>
+
+  <footer>
+     <h5>silvertejp89 🦊</h5>
+  </footer>
+
 </body>
-</html>
+</html>
+
diff --git a/code/script.js b/code/script.js
@@ -0,0 +1,82 @@
+const USER = 'silvertejp89'
+const REPOS_URL = `https://api.github.com/users/${USER}/repos`
+const PROFILE_URL = `https://api.github.com/users/${USER}`
+const projectContainer = document.getElementById('projects')
+const profileInfo = document.getElementById("profile");
+
+const getProfile = () => {
+    fetch(PROFILE_URL)
+    .then(Response => Response.json())
+    .then(data => {
+        // console.log('Profiluris', data)
+        profileInfo.innerHTML += `
+        <img src=${data.avatar_url}></img>
+        <h5>${USER}</h5>
+        `
+    }) 
+}
+getProfile() //invoking
+
+
+const getRepos = () => {
+    fetch(REPOS_URL)
+    .then(response => response.json())
+    .then(data => {
+        // console.log("Here we are!", data) 
+
+        const forkedRepos = data.filter(
+            (repo) => repo.name.includes('project-') && repo.fork
+			);
+
+        forkedRepos.forEach(repo => projectContainer.innerHTML += `
+            <div class='card'>
+                <a href="${repo.html_url}"><h3>${repo.name}</h3></a>  
+                <p> Default branch: ${repo.default_branch}</p>
+                <p> Recent push: ${new Date(repo.pushed_at).toDateString()}</p>  
+                <p id='commit-${repo.name}'> Number of commits:</p>   
+            </div>
+
+        `) 
+
+        fetchPullRequestsArray(forkedRepos);
+
+        drawChart(forkedRepos.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(response => response.json())
+        .then(data => {
+            console.log(data)
+            const myPullRequest = data.find(
+                (pull) => pull.user.login === repo.owner.login 
+            );
+        console.log('pull request', myPullRequest)
+
+        if (myPullRequest) {
+            fetchCommits(myPullRequest.commits_url, repo.name);
+        } else {
+            document.getElementById(`commit-${repo.name}`).innerHTML =
+                'No pull request done yet';
+        }
+        })
+    })
+}
+const fetchCommits = (myCommitsUrl, myRepoName) => {
+	fetch(myCommitsUrl)
+		.then(res => res.json())
+		.then(data => {
+			document.getElementById(`commit-${myRepoName}`).innerHTML += data.length;
+		});
+};
+
+getRepos() //invoking getRepos
+
+
+
diff --git a/code/style.css b/code/style.css
@@ -1,3 +1,78 @@
+*{box-sizing: border-box;
+text-align: center;
+}
+
+
 body {
-  background: #FFECE9;
+  background:black;
+  font-family: 'Roboto', sans-serif;
+}
+
+h1 {
+  color:rgb(226, 176, 9)
+}
+
+h2 {
+  color: white
+}
+
+h3 {
+  color:rgb(226, 176, 9)
+}
+
+h5{
+  color:  #1e7699;
+  font-size: 18px;
+  font-style: italic;
+}
+
+p {
+  color: black;
+}
+
+img {
+  border-radius: 50%;
+  height: 200px;
+  width: 200px;
+}
+
+.card {
+  background-color: #1e7699;
+  width: 300px;
+  padding-top: 25px;
+  padding-bottom: 20px;
+  margin: auto;
+  border-radius: 7px;
+}
+
+a:link {
+  text-decoration: none;
+}
+
+a:visited {
+  text-decoration: none;
+}
+
+a:hover {
+  background-color: transparent;
+  text-decoration: underline;
+}
+
+.chart {
+  width: 250px;
+  height: 250px;
+  margin: auto;
+  padding-top: 50px;
+}
+
+.project-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  grid-gap: 1.5rem;
+}
+
+footer {
+  background: black;
+  padding: 10px;
+  margin-top: 20px;
 }
diff --git a/website12-1024x512.jpg b/website12-1024x512.jpg