From 9aa26c4e11d7fadfc4bb8b70c5a1100dbf863d98 Mon Sep 17 00:00:00 2001 From: Nhung Phan Date: Wed, 23 Feb 2022 18:09:59 +0200 Subject: [PATCH 01/16] complete blue level --- code/index.html | 27 +++++++-- code/script.js | 153 ++++++++++++++++++++++++++++++++++++++++++++++++ code/style.css | 143 +++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 316 insertions(+), 7 deletions(-) diff --git a/code/index.html b/code/index.html index 2fb5e0ae..61056916 100644 --- a/code/index.html +++ b/code/index.html @@ -6,15 +6,32 @@ Project GitHub Tracker + + + + + -

GitHub Tracker

-

Projects:

-
- - +
+
+ +
+ + +
+ +

Projects:

+
+
+ + +
+ diff --git a/code/script.js b/code/script.js index e69de29b..e764a498 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,153 @@ +// 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 +// List to do +// A list of all repos that are forked ones from Technigo +// Your username and profile picture - DONE +// Most recent update (push) for each repo +// Name of your default branch for each repo - DONE +// URL to the actual GitHub repo - DONE +// Number of commit messages for each repo +// All pull requests +// A chart of how many projects you've done so far, compared to how many you will do using Chart.js. Here's documentation on how to get started, +// and in the left menu you can also find example usage. + + +const user = document.querySelector(".user-info"); +const projects = document.querySelector("#projects"); + + + + +const username = "sukiphan97"; +const API_URL = `https://api.github.com/users/${username}/repos` + +let reponame; + +const options = { + method: "GET", + headers: { + Authorization: "token" + } +} + +fetch (API_URL, options) + .then(res => res.json()) + .then(data => { + console.log(data) + userInfo(data[0]); + + data.forEach(project => { + + technigoRepo(project); + gitDashBoard(project); + + }) + + }) + + + // Your username and profile picture + const userInfo = (data) => { + + const userPicture = data.owner.avatar_url; + + user.innerHTML += ` + +
+ +

Suki (Nhung) Phan

+ ${username} +

Front End Development Student

+ +
+ + + + ` + } + + + + // All pull request + const technigoRepo = (project) => { + + reponame = project.name; + + fetch(`https://api.github.com/repos/Technigo/${reponame}/pulls?per_page=100`) + .then(res => res.json()) + .then(data => { + + + reponame = data.map(item => item.base.repo.name); + + const first = data.filter(item => item.user.login === username); + + const second = data.filter(item => item.base.repo.name === "project-weather-app" && item.user.login === "emmahogberg88"); + + //Combine all pull request links + const allPR = first.concat(second); + + //Get the commits + const commits_URL = allPR.map(item => item.commits_url); + + //Get the comments + const comments_URL = allPR.map(item => item.review_comments_url); + + // Display commits; + if(commits_URL.length === 0) { + document.getElementById(reponame[0]).innerHTML += `No commit ` + } else { + + getCommits(commits_URL, reponame[0]); + } + + // Comments + getComments(comments_URL); + + } + ) + + } + + const getCommits = (commits_URL, reponame) => { + + fetch(commits_URL,options) + .then(res => res.json()) + .then(data => { + + if (data.length > 0) { + document.getElementById(reponame).innerHTML += data.length; + } else { + document.getElementById(reponame).innerHTML += `No commit`; + + } + + }) + } + + + const getComments = (comments_URL) => { + console.log(comments_URL) + fetch(comments_URL,options) + .then(res => res.json()) + .then(data => console.log(data)) + } + + + const gitDashBoard = (project) => { + + if (project.fork === true && reponame.startsWith("project-")) { + + projects.innerHTML += ` + +
+

${reponame}

+ Visit + ${project.default_branch} + language ${project.language} +
+ + ` + + } + } + diff --git a/code/style.css b/code/style.css index 7c8ad447..a257ca66 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,142 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + font-size: 62.5%; +} + body { - background: #FFECE9; -} \ No newline at end of file + background: #FFf; + display: flex; + flex-direction: column; + font-family: 'Raleway', sans-serif; + color: #333; +} + +.hidden { + display: none; +} + +.user-info { + height: 100%; + overflow: hidden; +} + +.user-info .container { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.5rem; + border-bottom: solid 1px #333; + padding: 2.4rem; +} + +h1 { + font-size: 2.4rem; +} + +.user-info .container img { + border-radius: 400px; + height: 130px; + width: auto; + padding: 0.5rem; + border: solid 2px #cacafa; + position: relative; +} + +.user-info .user-name, +.user-info p { + font-size: 1.4rem; + font-weight: 500; + color: #999; +} + + +.follow-btn:link, +.follow-btn:visited { + background: #5e5eff; + padding: 1.2rem 2.8rem; + text-decoration: none; + font-size: 1.4rem; + font-weight: 700; + letter-spacing: 1.2px; + border-radius: 5px; + color: #Fff; + transition: all 0.4s ease; + margin-top: 1.2rem; +} + +.follow-btn:hover, +.follow-btn:active { + background: #a9a9ff; +} + +.organization-img { + width: 48px; + background-color: #fff; + border-radius: 100px; +} + + +/******* Projects *******/ + +.projects-container { + padding: 2.4rem; + +} + +.projects-container label { + background: #eee; + padding: 1.2rem; + font-size: 1.6rem; + display: block; +} + +.projects-container .search-input { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background: transparent; + border: none; + width: 90%; + outline: none; + padding: 0 1.2rem; +} + + +.projects-container .title { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 2.4rem 0; +} + +.projects-container .title span { + height: 25px; + width: 25px; + display: inline-block; + border: solid 5px #ffc2fc; + border-radius: 100px; +} + +.projects-container #projects { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); + grid-gap: 2rem; +} + +.div { + border: solid 1px #5e5eff; +} + +h2 { + font-size: 1.8rem; +} + + + + + From 421ccde3ca1d4ef552bc633817f0cda51aed9c0a Mon Sep 17 00:00:00 2001 From: Nhung Phan Date: Sun, 27 Feb 2022 17:32:13 +0200 Subject: [PATCH 02/16] complete project --- .gitignore | 5 + code/chart.js | 45 +++++ code/index.html | 85 ++++++++-- code/script.js | 439 +++++++++++++++++++++++++++++++++++++----------- code/style.css | 356 +++++++++++++++++++++++++++++++++------ 5 files changed, 774 insertions(+), 156 deletions(-) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..d9bd2e1a --- /dev/null +++ b/.gitignore @@ -0,0 +1,5 @@ +# Ignore environmental API keys +.env + +# Other +code/token.js \ No newline at end of file diff --git a/code/chart.js b/code/chart.js index 92e85a30..8ac15007 100644 --- a/code/chart.js +++ b/code/chart.js @@ -2,3 +2,48 @@ const ctx = document.getElementById('chart').getContext('2d') //"Draw" the chart here 👇 + +const updateChart = (projects) => { + + const labels = [ + '' + ]; + + const data = { + labels: labels, + datasets: [{ + label: `Done: ${projects}`, + backgroundColor: ['#7365e5'], + data: [projects], + }, + { + label: `Total: ${19}`, + backgroundColor: [ '#D6CDE9'], + data: [19-projects], + } + ] + }; + + const config = { + type: 'bar', + data: data, + options: { + barThickness: 30, + maxBarThickness: 30, + responsive: true, + indexAxis: 'y', + scales: { + x: { + stacked: true, + }, + y: { + stacked: true + } + } + } + }; + const myChart = new Chart( + document.getElementById('chart'), + config + ); +} diff --git a/code/index.html b/code/index.html index 61056916..5a97a138 100644 --- a/code/index.html +++ b/code/index.html @@ -7,32 +7,89 @@ Project GitHub Tracker + - -