Technigo · joannalodell19 · Feb 23, 2022 · Feb 24, 2022 · Feb 24, 2022 · Feb 24, 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,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 assignment was to create a GitHub Tracker. 
 
 ## 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?
+Using HTML, CSS and JS. Using the API:s frm GitHub. Also first use of a chart. If I had more time I would've continued with the styling and JS functions. The styling as of now I think has too much code. 
 
 ## 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://modest-archimedes-0644fa.netlify.app/
diff --git a/code/chart.js b/code/chart.js
@@ -1,4 +1,37 @@
 //DOM-selector for the canvas 👇
-const ctx = document.getElementById('chart').getContext('2d')
+const ctx = document.getElementById("myChart").getContext("2d");
 
 //"Draw" the chart here 👇
+
+const drawChart = (amount) => {
+  const config = {
+    type: "bar",
+    data: {
+      labels: ["Finished projects", "Projects to do"],
+      datasets: [
+        {
+          label: "Technigo Projects",
+          data: [amount, 19 - amount],
+          backgroundColor: ["#13233d", "#fafafa"],
+
+          hoverOffset: 4,
+        },
+      ],
+    },
+    options: {
+      layout: {
+        padding: 25,
+      },
+      plugins: {
+        legend: {
+          labels: {
+            font: {
+              size: 15,
+            },
+          },
+        },
+      },
+    },
+  };
+  const myChart = new Chart(ctx, config);
+};
diff --git a/code/index.html b/code/index.html
@@ -6,16 +6,23 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Project GitHub Tracker</title>
   <link rel="stylesheet" href="./style.css" />
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 </head>
 <body>
+  <div class="header "id="header">
   <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>
+  </div>
+  <div id="profile" class="profile">
+  </div>
+  <div id="chart">
+    <canvas id="myChart"></canvas>
+  </div>
+  <main>
+    <div id="projects" class="projects"></div>
+
+  </main>
+  <script src="./secret.js"></script>
   <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,102 @@
+// DOM SELECTORS
+const projectsContainer = document.getElementById('projects')
+const header = document.getElementById('header')
+const profile = document.getElementById('profile')
+
+
+// GLOBAL VARIABLES
+const username = 'joannalodell19'
+let filteredRepo = [] // Probably not needed
+
+// let reponame = ''
+const API_URL = `https://api.github.com/users/${username}/repos`
+const API_PROFILE = `https://api.github.com/users/${username}`
+
+const API_TOKEN = TOKEN || process.env.API_KEY;
+
+const options = {
+    method: 'GET',
+    headers: {
+        Authorization: `token ${API_TOKEN}`
+    }
+}
+
+const profilePic = () => {
+    fetch(API_PROFILE)
+        .then(res => res.json())
+        .then(data => {
+            // console.log(data)
+            picture = data.avatar_url
+    let profilePicture =    `<div class = "photobox">
+                                <img class = "photo" src="${picture}" />
+                                <p>${username}</p>
+                            </div>`;
+    return (profile.innerHTML += profilePicture)
+})
+}
+
+profilePic() 
+
+const getRepos = () => {
+    fetch(API_URL)
+    .then(res => res.json())
+    .then(data => {
+        // console.log('unfiltered data', data)
+
+        const forkedRepos = data.filter(repo => repo.fork = true)
+        // console.log('data filtered by forks', forkedRepos)
+
+        const filteredRepo = forkedRepos.filter(repo => repo.name.startsWith('project-') === true)
+        // console.log('data filtered on projects', filteredRepo)
+
+        filteredRepo.forEach(repo => {
+            // console.log(repo.commits_url)
+            projectsContainer.innerHTML += `
+            <div class="repo" id=${repo.name}>
+            <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>
+            `  
+        })
+        getPullRequests(filteredRepo);
+        drawChart(filteredRepo.length)
+    })
+}
+
+
+getRepos()
+
+// Pull requests for each project
+const getPullRequests = (repos) => {
+    repos.forEach((repo) => {
+      const PULLREQUEST_URL = `https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`;
+      fetch(PULLREQUEST_URL, options)
+        .then((res) => res.json())
+        .then((pull) => {
+          const myPullRequest = pull.find(
+            (pull) => pull.user.login === repo.owner.login
+          );
+
+          // If pull request done by user, getCommits function is invoked
+          if (myPullRequest) {
+            getCommits(myPullRequest.commits_url, repo.name);
+          } else {
+            document.getElementById(`commit-${repo.name}`).innerHTML =
+              "No pull request done by user";
+          }
+        });
+    });
+};
+
+const getCommits = (myCommitsUrl, myRepoName) => {
+    fetch(myCommitsUrl)
+        .then((res) => res.json())
+        .then((commit) => {
+            document.getElementById(`commit-${myRepoName}`).innerHTML +=
+            commit.length;
+        });
+};
+
+//myChart();
diff --git a/code/style.css b/code/style.css
@@ -1,3 +1,106 @@
+* {
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
 body {
-  background: #FFECE9;
-}
+  background: pink;
+  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-height: 100vh;
+}
+
+.header {
+  display: grid;
+  grid-template-columns: auto;  
+  align-items: center;
+  width: auto;
+}
+
+h1 {
+  display: flex;
+  width: 100%;
+  margin: auto;
+  margin-top: 10%;
+  justify-content: center;
+  font-size: 8vw;
+  font-weight: 700;
+  color: #13233d;
+  text-transform: uppercase;
+}
+
+.profile {
+  align-items: center;
+}
+
+.photobox {
+  align-items: center;
+  padding: 5%;
+  margin-top: 20px;
+}
+
+.photobox p {
+  color: black;
+  font-weight: bolder;
+}
+
+.photo {
+  width: 100px;
+  border-radius: 50%;
+  border: #13233d solid 3px;
+}
+
+.projects {
+  display: grid;
+  grid-template-columns: 1 fr;
+  justify-content: center;
+  margin-bottom: 50px;
+}
+
+.repo {
+  background-color: #fafafa;
+  display: flex;
+  flex-direction: column;
+  margin-top: 5%;
+  width: 300px;
+  padding: 3%;
+  border: 5px dashed #13233d;
+  }
+
+  .repo p {
+    font-weight: 600;
+    margin: 2px;
+    color: #13233d;
+  }
+
+  .repo a {
+    color: #13233d;
+    text-decoration: none;
+
+  }
+
+  a:hover {
+    text-decoration: underline;
+  }
+
+
+  @media (min-width: 768px) {
+
+    .projects {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      column-gap: 5%;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .projects {
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr;
+    }
+  }
diff --git a/node_modules/.package-lock.json b/node_modules/.package-lock.json
diff --git a/node_modules/chart.js/LICENSE.md b/node_modules/chart.js/LICENSE.md
diff --git a/node_modules/chart.js/README.md b/node_modules/chart.js/README.md
diff --git a/node_modules/chart.js/auto/auto.esm.d.ts b/node_modules/chart.js/auto/auto.esm.d.ts
diff --git a/node_modules/chart.js/auto/auto.esm.js b/node_modules/chart.js/auto/auto.esm.js
diff --git a/node_modules/chart.js/auto/auto.js b/node_modules/chart.js/auto/auto.js
diff --git a/node_modules/chart.js/auto/package.json b/node_modules/chart.js/auto/package.json