diff --git a/.vscode/settings.json b/.vscode/settings.json index e8783bfe..f158a589 100644 --- 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" + } } \ No newline at end of file diff --git a/README.md b/README.md index 1613a3b0..d5f6347f 100644 --- 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 new file mode 100644 index 00000000..4e0f3a93 --- /dev/null +++ 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 index 92e85a30..714e4965 100644 --- 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 index 2fb5e0ae..c291c70b 100644 --- a/code/index.html +++ b/code/index.html @@ -1,21 +1,42 @@ - + - - - + + + Project GitHub Tracker - + + + + -

GitHub Tracker

-

Projects:

-
- - + + + +
+
+
+ + + + + + + + \ No newline at end of file diff --git a/code/script.js b/code/script.js index e69de29b..fbb053e5 100644 --- 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 = ` +

profile picture from Github

+

Tiina Liukkonen

+

${data[0].owner.login}

+

Technigo Web Development Class of Jan '22 student

+ ` +} + +// 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 += ` +
+

${reponame}

+

Default branch: ${defaultBranch}

+

+

Most recent push: ${recentUpdate}

+ + ` + +//-------------------------------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 += ` +

Amount of commits: ${numberOfCommits}

+ ` + // 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() \ No newline at end of file diff --git a/code/style.css b/code/style.css index 7c8ad447..00d8c40f 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,463 @@ +:root { + --primary: #F6E9D7; + --secondary: #D1ADCC; + --tertiary: #C2D2BD; + --accent: #5F2C3E; +} + body { - background: #FFECE9; -} \ No newline at end of file + box-sizing: border-box; + display: flex; + flex-direction: column; + padding: 0; + margin: 0; + background: var(--tertiary); + font-family: 'Manrope', sans-serif; +} + +@media screen and (min-width:1024px) { + + body { + display: flex; + flex-direction: row; + } +} + + + +/**********************USER INFO SECTION*************************/ + +.user-section { + box-sizing: border-box; + display: flex; + width: 100%; + flex-direction: column; + justify-content: space-between; + align-items: center; + gap: 1rem; + margin-top: 1rem; +} + +.user-info { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 0.5rem; + padding-bottom: 4rem; + border-block-end: 1px solid var(--secondary); + text-align: center; +} + +.user-image { + width: 300px; + border-radius: 50%; + margin-bottom: 1rem; +} + +@media screen and (min-width:768px) { + + .user-section { + gap: 2rem; + margin: 2.5rem 0 0; + } + + .user-info { + gap: 1.5rem; + padding-bottom: 6rem; + } + + .user-image { + width: 350px; + margin-bottom: 0.5rem; + } +} + +@media screen and (min-width:1024px) { + + .user-section { + width: 30%; + max-height: 160vh; + justify-content: space-evenly; + gap: 0; + margin: 0; + padding: 0 1rem 0 3.5rem; + } + + .user-info { + gap: 0; + margin: 0; + padding: 0; + border: none; + text-align: center; + align-items: center; + } + + .user-image { + width: 225px; + margin: 0; + padding-top: 1rem; + } +} + +@media screen and (min-width:1400px) { + + .user-section { + width: 40%; + max-height: 130vh; + padding: 1rem 0 0 3.5rem; + } + + .user-image { + width: 275px; + padding: 0; + } +} + + +/******************************CHART*********************************/ + +.chart-container { + width: 350px; + margin: 4rem 0; +} + +@media screen and (min-width:768px) { + + .chart-container { + width: 500px; + margin: 2rem 0; + padding: 3rem 0; + } +} + +@media screen and (min-width:1024px) { + + .chart-container { + width: 285px; + margin: 1.5rem 0 0 0; + padding: 0 2rem; + } +} + +@media screen and (min-width:1400px) { + + .chart-container { + width: 350px; + padding: 1.5rem 0 0; + } +} + + + +/******************************PROJECT BOARD***************************/ + +.projects-container { + box-sizing: border-box; + display: flex; + width: 100%; + flex-direction: column; + align-items: center; + margin-top: 1rem; +} + +.projects { + display: flex; + width: 90%; + flex-wrap: wrap; + align-items: center; + justify-content: center; + gap: 2rem; + padding: 1rem; +} + +.repo-container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 400px; + height: 300px; + border-radius: 30px; + background-color: #d1adcc; + text-align: center; +} + +@media screen and (min-width:768px) { + + .projects-container { + padding: 2rem 0; + } + + .projects { + width: 95%; + gap: 2.5rem; + } + + .repo-container { + width: 550px; + height: 400px; + } +} + +@media screen and (min-width:1024px) { + + .projects-container { + width: 90%; + height: auto; + flex-direction: row; + justify-items: center; + margin: 0; + padding-bottom: 1rem; + } + + .projects { + width: 100%; + gap: 1rem; + padding: 1.5rem 0; + margin-left: 0.5rem; + } + + .repo-container { + width: 330px; + height: 275px; + padding: 1rem; + } +} + +@media screen and (min-width:1400px) { + + .projects { + margin: 0; + } + + .repo-container { + width: 400px; + height: 300px; + } +} + + +/*****************************FOOTER***************************/ + +.footer { + display: flex; + justify-content: center; + width: 100%; + margin: 4rem 0; +} + +@media screen and (min-width:1024px) { + + .footer { + display: none; + } +} + + +/**********************TEXTS AND TITLES*************************/ + +.main-title, .projects-title, .full-name, .github-user-name, .course-name, .repo-title, p { + color: var(--accent); +} + +.main-title { + display: flex; + justify-content: center; + font-size: 4.5rem; + margin: 1rem 0; + width: 100%; + padding: 0 1.5rem; + text-align: center; +} + +.full-name { + margin-bottom: 0; + font-size: 2rem; +} + +.github-user-name { + margin: 0; + font-size: 1.5rem; +} + +.course-name { + font-size: 1.3rem; + padding: 0 2rem; +} + +.repo-title, p { + margin: 0; + padding: 0; + line-height: 2rem; +} + +.repo-title { + font-size: 2rem; + margin-bottom: 0.5rem; +} + +.repo-container p, .footer p { + font-size: 1.3rem; +} + +@media screen and (min-width:768px) { + + .main-title { + font-size: 5rem; + margin: 1.5rem 0; + } + + .full-name { + font-size: 2.5rem; + } + + .github-user-name { + font-size: 1.8rem; + margin-top: 0; + } + + .course-name { + font-size: 1.5rem; + padding: 0; + } + + .repo-title, p { + line-height: 3rem; + } + + .repo-title { + font-size: 3rem; + } + + .repo-container p, .footer p { + font-size: 1.8rem; + } +} + +@media screen and (min-width:1024px) { + + .main-title { + width: 100%; + font-size: 3.8rem; + margin: 0; + padding-left: 1.5rem; + } + + .full-name { + font-size: 2rem; + margin: default; + padding: default; + } + + .github-user-name { + font-size: 1.5rem; + margin: 0; + padding: 0; + } + + .course-name { + font-size: 1.3rem; + margin-bottom: 0; + } + + .repo-title, p { + margin: 0; + padding: 0; + line-height: 2rem; + } + + .repo-title { + font-size: 1.8rem; + } + + .repo-container p, .footer p { + font-size: 1.5rem; + } +} + +@media screen and (min-width:1400px) { + + .main-title { + font-size: 4.7rem; + } + + .full-name { + font-size: 3rem; + } + + .github-user-name { + font-size: 2.5rem; + } + + .course-name { + font-size: 2rem; + } + + .repo-title, p { + line-height: 2.5rem; + } + + .repo-title { + font-size: 2.2rem; + } + + .repo-container p, .footer p { + font-size: 1.9rem; + } +} + + + +/**********************BUTTONS AND LINKS*************************/ + +.repo-link-button { + font-size: 1rem; + padding: 1rem; + margin-top: 1.5rem; + border-radius: 30px; + background-color: var(--primary); + border: 2px solid var(--primary); +} + +.repo-link-button:hover { + border: 2px solid var(--tertiary); + background-color: var(--tertiary); +} + +a.nav-item:link, a.nav-item:visited { + text-decoration: none; + color: var(--accent); +} + +a.nav-item:hover { + color: var(--primary); +} + +@media screen and (min-width:768px) { + + .repo-link-button { + font-size: 1.5rem; + padding: 1.5rem; + margin-top: 2rem; + } +} + +@media screen and (min-width:1024px) { + + .repo-link-button { + font-size: 1.2rem; + padding: 0.5rem; + margin-top: 1rem; + margin-left: 10%; + } +} + +@media screen and (min-width:1400px) { + + .repo-link-button { + padding: 0.5rem; + margin-top: 2rem; + margin-left: 0; + } +}