Technigo · tiiliu · Feb 25, 2022 · Feb 25, 2022 · Feb 27, 2022 · Feb 27, 2022
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,3 +1,7 @@
 {
-  "liveServer.settings.port": 5505
+    "workbench.colorCustomizations": {
+        "activityBar.background": "#153135",
+        "titleBar.activeBackground": "#1E454A",
+        "titleBar.activeForeground": "#F8FCFC"
+    }
 }
diff --git a/README.md b/README.md
@@ -1,13 +1,16 @@
 # 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 weeks assignment was to create a responsive tracker website for Github repos by using the Github 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 started the project by gathering all the necessary information using the fetch() method. After that I started to build the functions for using the information and refactored the code. All functionalities were done with Javascript. With Javascript I also created a chart to show data about course progress.
+
+With more time, I would like to use the collected data to show more information through different functionalities, for example the accordion to show review or commit messages from projects.
+
 
 ## 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.
+Link to my deployed project:
+
+https://my-gitfolio.netlify.app/
diff --git a/code/.gitignore b/code/.gitignore
@@ -0,0 +1,8 @@
+# This will ignore node modules
+
+# This will ignore all text files
+
+
+# This will ignore the file storing the token
+token.js
+
diff --git a/code/chart.js b/code/chart.js
@@ -1,4 +1,73 @@
 //DOM-selector for the canvas 👇
 const ctx = document.getElementById('chart').getContext('2d')
 
-//"Draw" the chart here 👇
+// Global options
+Chart.defaults.font.family = 'Manrope, sans-serif';
+Chart.defaults.font.size = 25;
+
+
+// Function for creating the chart
+const drawChart = (doneProjects) => { 
+
+    //"Draw" the chart here 👇
+    const config = {
+        type: 'doughnut',
+        data: {
+            labels: ['Projects done', 'Projects left to do'],
+            datasets: [{
+                label: 'Technigo Bootcamp 2022',
+                data: [
+                    doneProjects,
+                    19 - doneProjects,
+                ],
+                backgroundColor: [
+                    '#D1ADCC',
+                    '#F6E9D7',
+                ],
+                borderWidth: 1,
+                borderColor: '#F6E9D7',
+                hoverBorderWidth: 3,
+                hoverBorderColor: '#D1ADCC',
+            }],
+        },
+        options: {
+            responsive: true,
+            plugins: {
+                legend: {
+                    display: true,
+                    position: 'bottom',
+                    labels: {
+                        boxWidth: 20,
+                        color: '',
+                        color: '#5F2C3E',
+                        padding: 30,
+                        maxHeight: 30,
+
+                    },
+                },
+                title: {
+                    display: true,
+                    text: 'Bootcamp Progress',
+                    color: '#5F2C3E',
+                    font: {
+                        size: 32,
+                    },
+                    padding: {
+                        top: 0,
+                        right: 0,
+                        left: 0,
+                        bottom: 30,
+                    },
+                },
+            },
+            // tooltips: {
+            //     enabled: false,
+            // },
+        }
+    }
+    const myChart = new Chart(document.getElementById('chart'), config)
+}
+
+
+
+
diff --git a/code/index.html b/code/index.html
@@ -1,21 +1,42 @@
 <!DOCTYPE html>
-<html lang="en">
+<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">
+  <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='stylesheet' href='./style.css' />
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">
+  <link  rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400&family=Manrope:wght@300;400&display=swap">
+  <script src='https://cdn.jsdelivr.net/npm/chart.js'></script>
 </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>
+    <aside class='user-section'>
+
+      <h1 class='main-title'>My Gitfolio</h1>
+      <div class='user-info' id='user-info'></div>
+
+      <div class='chart-container'>
+        <!-- This will be used to draw the chart 👇 -->
+        <canvas class='chart' id='chart'></canvas>
+      </div>
 
-  <script src="./script.js"></script>
-  <script src="./chart.js"></script>
+    </aside>
+
+
+    <main class='projects-container'>      
+      <div class='projects' id='projects'></div>
+    </main>
+
+    <footer class='footer'>
+        <p>&copy; Tiina Liukkonen</p>
+    </footer>
+
+  </div>
+
+  <script src='./token.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,183 @@
+// DOM selectors
+const userInfo = document.getElementById('user-info')
+const projectBoard = document.getElementById('projects')
+
+// Global variables
+const username = 'tiiliu'
+
+// Api for fetching github repos
+const API_URL = `https://api.github.com/users/${username}/repos`
+
+// Github token
+const TOKEN = API_TOKEN
+
+// Authorization
+const options = {
+    method: 'GET', 
+    headers: {
+        Authorization: `token ${TOKEN}`,
+    } 
+}
+
+
+// Function for fetching all github projects
+const getGithubProjects = () => {
+
+//-------------------------------FETCH 1------------------------------------------------
+    fetch(API_URL, options)
+        .then(res => res.json())
+        .then(data => {
+
+            // Invoking the createUser and getTechnigoRepos functions
+            createUser(data)
+            getTechnigoRepos(data)
+        })
+        .catch(err => console.error(err))
+}
+
+// Function to display info from user
+const createUser = (data) => {
+    userInfo.innerHTML = `
+        <p><img class='user-image' src='${data[0].owner.avatar_url}' alt='profile picture from Github'/></p>
+        <h1 class='full-name'>Tiina Liukkonen</h1>
+        <h3 class='github-user-name'><a class='nav-item' href='https://github.com/tiiliu' target="-blank"><i class="fab fa-github"></i>  ${data[0].owner.login}</a></h3>
+        <h1 class='course-name'>Technigo Web Development Class of Jan '22 student</h1>
+        `
+}
+
+// Function to filter out all repos forked from Technigo
+const getTechnigoRepos = (data) => {
+
+    // variable to store the filtered repos
+    const forkedProjects = data.filter(repo => repo.name.includes('project-'))
+    console.log('forked projects:', forkedProjects)
+
+    // Invoking the drawChart function
+    drawChart(forkedProjects.length)
+
+    // Looping through the filtered repos
+    forkedProjects.forEach(repo => {
+
+    // storing reponame for each repo
+    let reponame = repo.name
+    reponame = reponame[0].toUpperCase() + reponame.substring(1)
+
+    //storing the latest update for each repo
+    let recentUpdate = new Date(repo.pushed_at).toLocaleDateString('en', {day: 'numeric', month: 'short', year: 'numeric'})
+
+    // storing the default branch for each repo
+    let defaultBranch = repo.default_branch
+
+    // storing the link for each repo
+    let linkToRepo = repo.html_url
+
+    // Printing the info about projects
+    projectBoard.innerHTML += `
+    <div class='repo-container'>
+        <h2 class='repo-title'>${reponame}</h2>
+        <p>Default branch: ${defaultBranch}</p>
+        <p id='commit-${repo.name}'></p>
+        <p>Most recent push: ${recentUpdate}</p>
+        <button class='repo-link-button'><a class='nav-item' href='${repo.html_url}' target="-blank">Click here to view repo</a></button>
+    `
+
+//-------------------------------FETCH 2------------------------------------------------
+        fetch(`https://api.github.com/repos/Technigo/${reponame}/pulls?per_page=100`, options)
+            .then(res => res.json())
+            .then(data => {
+
+                // filtering own pull requests
+                const ownPullRequests = data.filter(repo => repo.user.login === username)
+
+                // filtering pull requests done by a team member
+                const otherPullRequests = data.filter(item => item.user.login === 'kolkri' && item.base.repo.name === 'project-weather-app')
+
+                // combining the created arrays
+                const combinedPullRequests = ownPullRequests.concat(otherPullRequests)
+
+                    // looping through own pull requests
+                    combinedPullRequests.forEach(repo => {
+
+                        // storing the reponame of each pull request
+                        reponame = repo.base.repo.name
+
+                        // storing the url for commits for each repo
+                        const commitsForRepos = repo.commits_url
+
+                        // Invoking the fetchCommits function
+                        fetchCommits(commitsForRepos, reponame)
+
+                        // storing the url for comments for each repo -> commented out because not used yet in code
+                        //const commentsForRepos = repo.comments_url
+
+                        // storing the pull request number for each repo
+                        const pullRequestNumber = repo.number
+
+                        // Invoking the fetchComments function
+                        fetchComments(pullRequestNumber, reponame)
+
+                        // storing the url for languages
+                        const usedLanguages = repo.base.repo.languages_url
+
+                        // Invoking the getLanguages function
+                        getLanguages(usedLanguages, reponame)
+
+                    })
+            })
+    })
+}
+
+// Function for fetching the commits for all repos
+const fetchCommits = (commitsForRepos, reponame) => {
+
+//-------------------------------FETCH 3------------------------------------------------
+    fetch(commitsForRepos, options)
+        .then(res => res.json())
+        .then(data => {
+
+        // storing the number of commits
+        const numberOfCommits = data.length
+
+        // printing info to the projectBoard with dynamic id
+        document.getElementById(`commit-${reponame}`).innerHTML += `
+        <p>Amount of commits: ${numberOfCommits}</p>
+        `
+            // looping through data for commit messages
+            data.forEach(item => {
+            // storing the commit message from each 
+                const commitMessages = item.commit.message
+
+            })     
+        })
+        .catch(err => console.error(err))
+}
+
+// Function for fetching the comments for each pull request
+const fetchComments = (pullRequestNumber, reponame) => {
+
+//-------------------------------FETCH 4------------------------------------------------
+    fetch(`https://api.github.com/repos/Technigo/${reponame}/issues/${pullRequestNumber}/comments`, options)
+        .then(res => res.json())
+        .then(data => {
+
+        // storing the review message -> commented out because not used yet in the code
+        //const reviewMessage = data[0].body
+
+        })    
+        .catch(err => console.error(err))
+}
+
+// Function for fetching the languages used in projects
+const getLanguages = (usedLanguages, reponame) => {
+    fetch(usedLanguages, options)
+        .then(res => res.json())
+        .then(data => {
+
+            // storing the info about used languages
+            const languages = Object.keys(data)
+
+        })
+}
+
+// Invoking the getGithubProjects function
+getGithubProjects()