Technigo · mathildakarlsson · Feb 26, 2022 · Feb 26, 2022 · Feb 27, 2022 · Feb 27, 2022
diff --git a/.DS_Store b/.DS_Store
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,27 @@
 # GitHub Tracker
 
-Replace this readme with your own information about your project.
+The assignment was to build a website that holds all Technigo-projects on Github. We should fetch these by API, and using filter to display the correct ones. 
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+Furthermore the website should include some information from each repository, such as default branch and number of commit messages. 
+
+The website should also include a chart that showed how many projects was done in the Bootcamp.
 
 ## 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 started with fetching the Github API for my user and my repositories. Then I could display my username and profile pic as well as filter out the repositories so only the forked ones marked as "project-" was displayed.
+
+I continued with building up info about push date, default branch etc in innerHTML. Then I fetched all pullrequests and filtered out so only my own was left by comparing "pull.user.login" with "repo.owner.login". I used a dynamic ID for the innerHTML-element to display the number of commits in the panel.
+
+Then I created a chart using chart.js and called the function for it in script-file. To be able to style the chart I put it in a div-element in the HTML-file.
+
+For this project I used a personal API token from Github, and making it secret by using secret.js and gitignore.
+
+Lastly I styled the webpage and made it responsive. I'm happy with the accordion and the way the flex/grid is responsive, but the headers in the user-section doesn't look quite right in desktop-size. I think it is because of the position: absolute and how the headers are positioned in relation to the profile pic and the chart.
+
+If I had more time I would give the styling of the website a little more love. I would also make another 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://confident-brattain-b7ba85.netlify.app/
diff --git a/code/chart.js b/code/chart.js
@@ -1,4 +1,32 @@
-//DOM-selector for the canvas 👇
-const ctx = document.getElementById('chart').getContext('2d')
 
-//"Draw" the chart here 👇
+//DOM-selector for the canvas
+const ctx = document.getElementById('chart').getContext("2d");
+
+//drawing the chart
+const drawChart = (projects) => { 
+const labels = [
+    'Finished projects',
+    'Upcoming projects',
+];
+
+const data = {
+    labels: labels,
+    datasets: [{
+    data: [projects, 19-projects],
+    label: 'Bootcamp progress',
+    backgroundColor: ['rgb(255, 99, 132)', 'rgb(104, 131, 180)'],
+    }]
+};
+
+const config = {
+    type: 'doughnut',
+    data: data,
+    options: {}
+};
+
+// new Chart(document.getElementById('chart'),config);
+const myChart = new Chart(
+    document.getElementById('chart'),
+    config
+  );
+}
diff --git a/code/images/GitHub-Mark-32px.png b/code/images/GitHub-Mark-32px.png
diff --git a/code/index.html b/code/index.html
@@ -4,18 +4,39 @@
   <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>
+  <title>GitHub Tracker</title>
   <link rel="stylesheet" href="./style.css" />
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <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=PT+Sans:wght@400;700&display=swap" rel="stylesheet">
 </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>
+  <main>
+    <div id="user-container" class="user-container">
+      <h1 class="github-tracker">GitHub Tracker</h1>
+      <h2 class="user-header">USER</h2>
+    </div>
+    <h2 class="projects-header">PROJECTS</h2>
+    <div id="projects-container" class="projects-container"></div>
+    <h2 class="chart-header">PROGRESS</h2>
+    <section class="chart-container">
+      <div class="chart">
+        <canvas id="chart"></canvas>
+      </div>
+    </section>
+  </main>
+
+  <footer>
+    <p>Technigo Web Development Bootcamp 2022</p>
+  </footer>
 
+  <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,102 @@
+// DOM-selectors stored as variables
+const userContainer = document.getElementById('user-container')
+const projectsContainer = document.getElementById('projects-container')
+
+// global variables + storing API
+const username = 'mathildakarlsson'
+const API_USER = `https://api.github.com/users/${username}`
+const API_REPOS = `https://api.github.com/users/${username}/repos`
+
+//personal token
+const options = {
+    method: 'GET',
+    headers: {
+          Authorization: `token ${GITHUBTOKEN}`
+      }
+  } 
+
+// step 1 - fetch user
+const getUser = () => {
+    fetch(API_USER, options)
+    .then(res => res.json())
+    .then(data => {
+        userContainer.innerHTML += `
+        <img class="user-img"src="${data.avatar_url}">
+        <div class="github-user">
+            <a href="https://github.com/"><img class="github-logo" src="images/GitHub-Mark-32px.png"></a>
+            <a href="https://github.com/mathildakarlsson" class="user-name">${data.login}</a>
+        </div>
+        `
+    })
+}
+getUser()
+
+//step 2 - fetch repos and filter + open/closing accordion
+const getRepos = () => { 
+    fetch(API_REPOS, options)
+    .then(res => res.json())
+    .then((data) => {
+        const filteredRepos = data.filter((repo) => repo.fork && repo.name.startsWith('project'))
+        filteredRepos.forEach((repo) => {
+            projectsContainer.innerHTML += `
+            <div class="repos">
+                <button class="project-name">${repo.name}</button>
+                <div class="panel">
+                    <a href="${repo.html_url}">
+                    <p>Link to repo</p></a>
+                    <p>Branch: ${repo.default_branch}</p>
+                    <p>Main language: ${repo.language}</p>
+                    <p id="commit-${repo.name}"> Number of commits: </p>
+                    <p>Latest push: ${new Date(repo.pushed_at).toDateString()}</p>
+                </div>
+            </div>
+            `
+
+        //open and close accordion with project info
+        const acc = document.getElementsByClassName("project-name")
+        let i
+        for (i = 0; i < acc.length; i++) {
+            acc[i].addEventListener("click", function() {
+                this.classList.toggle("active")
+                const panel = this.nextElementSibling
+                if (panel.style.maxHeight) {
+                    panel.style.maxHeight = null
+                } else {
+                    panel.style.maxHeight = panel.scrollHeight + "px"
+                } 
+            })
+        }
+        })
+    getPullRequests(filteredRepos)
+    drawChart(filteredRepos.length) 
+    })
+}
+
+getRepos()
+
+// step 3 - fetch pull requests
+const getPullRequests = (filteredRepos) => { 
+    filteredRepos.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.find((pull) => pull.user.login === repo.owner.login)
+            if (myPullRequests) {
+                getCommits(myPullRequests.commits_url, `${repo.name}`)
+            } else {
+                document.getElementById(`commit-${repo.name}`).innerHTML += 
+                `commits made by group partner`
+            }
+        })
+
+//step 4 - fetch commits and display number
+const  getCommits = (URL, repoName) => { 
+        fetch(`https://api.github.com/repos/${username}/${repo.name}/commits`, options)
+        .then(res => res.json())
+        .then(data => {
+            document.getElementById(`commit-${repo.name}`).innerHTML += data.length
+        })
+        }
+    })
+}
+