Technigo · jessicatf · Oct 3, 2021 · Oct 3, 2021 · Oct 3, 2021 · Oct 16, 2021
diff --git a/README.md b/README.md
@@ -1,13 +1,10 @@
 # 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 is about tracking my Github projects from Technigo using Github's API to fetch data.
 
 ## 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?
+My CSS could have been nicer and I need to deepen my knowledge about CSS.
 
 ## 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://epic-williams-e889ca.netlify.app/
diff --git a/code/chart.js b/code/chart.js
@@ -2,3 +2,33 @@
 const ctx = document.getElementById('chart').getContext('2d')
 
 //"Draw" the chart here 👇
+//console.log('hey from chart')
+
+
+
+
+ // const myChart = new Chart(document.getElementById('myChart'),config);
+ //amount of repos
+ const drawChart =(amount) =>{
+
+ const config = {
+    type: 'doughnut',
+    data:
+    { labels: [
+        'Finished Projects',
+        'Projects Left',
+
+      ],
+      datasets: [{
+        label: 'Technigo projects',
+        //data: [300, 50, 100], //[5,20-5] 1st:length of repoarray, 2nd: all projects need to do + length ofRepoArray
+        data: [amount,19-amount],
+        backgroundColor: [
+          '#CEE5D0', 'rgb(46, 12, 124);'
+        ],
+        hoverOffset: 4
+      }]
+  },
+};
+const myChart = new Chart(ctx,config);
+}
diff --git a/code/index.html b/code/index.html
@@ -1,21 +1,43 @@
 <!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" />
+  <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=Montserrat:wght@200;300;400;500&display=swap"
+      rel="stylesheet"
+    />
 </head>
+
+
 <body>
-  <h1>GitHub Tracker</h1>
-  <h2>Projects:</h2>
-  <main id="projects"></main>
+
+  <header class="hero">
+    <h1>GitHub Tracker</h1>
+  </header>
+
+  <section class="personal-info" id="personalInfo"></section>
+
+
+  <h2>for the Technigo Projects</h2>
+
+   <div id="projects" class="projects"></div>
 
   <!-- This will be used to draw the chart 👇 -->
-  <canvas id="chart"></canvas>
+  <section class="chart-container">
+    <p class="chart-text">Overview of projects</p>
+    <canvas class="chart" id="chart"></canvas>
+  </section>
 
-  <script src="./script.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
   <script src="./chart.js"></script>
+  <script src="./script.js"></script>
 </body>
+
 </html>
diff --git a/code/pngkey.com-github-icon-png-1787508.png b/code/pngkey.com-github-icon-png-1787508.png
diff --git a/code/script.js b/code/script.js
@@ -0,0 +1,143 @@
+
+
+const personalInfo = document.getElementById('personalInfo');
+const projectsContainer=document.getElementById('projects');
+const USER='jessicatf';
+const USER_URL = `https://api.github.com/users/${USER}`;
+const REPOS_URL = `https://api.github.com/users/${USER}/repos`;
+
+
+
+//User data
+
+const getUserData = () => {
+    fetch(USER_URL)
+      .then((response) => response.json())
+      .then((data) => {
+        personalInfo.innerHTML = `
+        <div class="personal-info">    
+        <img class="img" src="${data.avatar_url}">
+        <h2 class="info"> ${data.login}</h2>
+      </div
+       `
+      })
+  }
+
+  //get repositories from Technigo starting with "project"
+
+const fetchRepositories = () => {
+    fetch(REPOS_URL)
+    .then ((res)=>res.json())
+    .then((data) => {
+
+      const technigoRepositories = data.filter(
+          (repo) => repo.name.includes('project-')&& repo.fork
+          );
+
+            drawChart(technigoRepositories.length)
+
+            technigoRepositories.forEach(repo=>{
+            projectsContainer.innerHTML += `
+            <div class="commits-row">
+            <a href="${repo.html_url}">
+            <h6>${repo.name} </h6></a>
+                <p>Default branch:  ${repo.default_branch}</p>
+
+                <p>Recent push: ${new Date(repo.pushed_at).toDateString(
+
+                )}</p>
+                <p id="commit-${repo.name}">Commits amount: </p>
+            </div>
+            `;
+
+        });
+
+        fetchPullRequestsArray(technigoRepositories); 
+    });
+};
+
+
+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
+    );
+
+
+				if (myPullRequest) {
+					fetchCommits(myPullRequest.commits_url, repo.name);
+				} else {
+					document.getElementById(`commit-${repo.name}`).innerHTML =
+						'No pull request or commits done.';
+				}
+
+            });
+        });
+};   
+
+
+const fetchCommits =  (myCommitsUrl,myRepoName) => {
+    fetch(myCommitsUrl)
+    .then((res)=>res.json())
+    .then((data)=> {
+    document.getElementById(`commit-${myRepoName}`).innerHTML+=data.length;
+    });                 
+
+};
+
+fetchRepositories();
+getUserData();
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/*Jennie
+const projectsContainer=document.getElementById('projects')
+const repoName= document.getElementById(repoName)
+
+
+
+
+//Jennies
+const getRepos = () => {
+
+    fetch(REPOS_URL,options)
+    .then(response =>response.json())
+    .then(data => {
+        console.log(data)
+        const repoName=data.forEach(repo => console.log(repo.name))
+        const forkedRepos = data.filter(repo => 
+            repo.fork && repo.name.startsWith('project-'))
+        forkedRepos.forEach(repo =>  projectsContainer.innerHTML += `<h3>${repo.name}</h3>` )
+        drawChart(forkedRepos.length)
+        getPullRequests (forkedRepos)
+
+    })
+}
+getRepos()
+
+*/
+
diff --git a/code/style.css b/code/style.css
@@ -1,3 +1,137 @@
+
+.hero {
+  width: 100vw;
+  height: 30vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  color: rgb(46, 12, 124);
+  background-image: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)), url('pngkey.com-github-icon-png-1787508.png');
+  background-size: cover;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+}
+
+.hero h1 {
+  font-size: 5em;
+  margin-top: 0;
+  margin-bottom: 0.5em;
+}
+
+
+h2 {
+  color: rgb(49, 3, 30);
+  padding: 10px;
+  text-align: center;
+  text-shadow: 1px 1px 1px #ccc;
+
+}
+
+h3 {
+  margin-bottom: 15px;
+  margin-left: 20px;
+}
+
+h6 {
+  margin: 10px 4px;
+  font-size: 25px;
+  margin-top: 1em;
+  font-weight: bolder;
+  color: rgb(49, 3, 30);
+}
+
+
+.img {
+  max-width: 20em;
+  border-radius: 50%;
+  margin:1em;
+  align-items: center;
+  border-color: #cac4ce;
+  border-style: double;
+}
+
+.personal-info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: sticky;
+}
+
+
+.info {
+  margin: 12px;
+  letter-spacing: 5px;
+}
+
+
 body {
-  background: #FFECE9;
+  background:#F3F0D7;
+  font-family: "Montserrat", sans-serif;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 0em;
+  padding: 0;
+  box-sizing: border-box;
+  min-width: 320px;
+}
+
+.projects {
+  background: #555351;
+  margin: 1em;
+  box-shadow: 0 4px 8px 0 rgba(15, 12, 12, 0.2), 0 6px 20px 0 rgba(5, 5, 5, 0.19);
+  border-radius: 5px;
+}
+
+.commits-row {
+  background: rgb(47, 17, 117);
+  margin: 10px 4px;
+  display: grid;
+  grid-template-columns: 3fr 1fr 1fr 1fr;
+  grid-template-rows: auto;
+  column-gap: 5px;
+  row-gap: 12px;
+}
+
+.commits-row p {
+  background:#F3F0D7;
+  padding:1em;
+  border-radius: 15px;
+  text-align: center;
+  box-shadow: 0 4px 8px 0 rgba(15, 12, 12, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  margin: 10px 4px;
+
+}
+
+.commits-row a {
+  background:#CEE5D0;
+  padding:1em;
+  margin: 1em;
+  border-radius: 12px;
+  text-align: center;
+  text-decoration: none;
+  box-shadow: 0 4px 8px 0 rgba(15, 12, 12, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+
+}
+
+.chart-container {
+  text-align: center;
+  font-size: 25px;
+  padding: 20px;
+  font-weight: bold;
+  color: rgb(46, 12, 124);
+
+}
+
+.chart-text {
+  padding: 20px;
+  color: rgb(46, 12, 124);
+}
+
+.chart {
+  max-width: 400px;
+  max-height: 400px;
+
 }
diff --git a/code/text b/code/text
@@ -0,0 +1 @@
+ grid-template-columns: 2fr 1fr 1fr 1fr