From ecba16ef26abbd9175ddc66882f81e2b0037ffbc Mon Sep 17 00:00:00 2001 From: Jacob Date: Sun, 27 Feb 2022 17:57:28 +0100 Subject: [PATCH 1/4] Fecthed and filtered data from API --- .gitignore | 2 + code/chart.js | 34 +++++++++++++ code/index.html | 25 ++++++++-- code/script.js | 114 ++++++++++++++++++++++++++++++++++++++++++ code/server.rb | 11 ++++ code/style.css | 130 +++++++++++++++++++++++++++++++++++++++++++++++- 6 files changed, 312 insertions(+), 4 deletions(-) create mode 100644 .gitignore create mode 100644 code/server.rb diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..758e5a85 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +//.gitignore file +code/secret.js \ No newline at end of file diff --git a/code/chart.js b/code/chart.js index 92e85a30..2b8a2065 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,38 @@ //DOM-selector for the canvas 👇 const ctx = document.getElementById('chart').getContext('2d') +const technigoProjects = 21 //"Draw" the chart here 👇 +const drawBarChart = (repos) => { + new Chart(ctx, { + type: 'doughnut', + data: { + labels: [ + 'Projects to do', + 'Finished projects' + ], + datasets: [ + { + data: [ + technigoProjects - repos.length, + repos.length, + ], + backgroundColor: [ + '#d5a7b6', + '#5c7fe9' + ] + } + ] + }, + options: { + plugins: { + legend: { + display: true, + labels: { + color: 'rgb(0, 0, 0)' + } + } + }, + }, + }) +} \ No newline at end of file diff --git a/code/index.html b/code/index.html index 2fb5e0ae..fd671679 100644 --- a/code/index.html +++ b/code/index.html @@ -8,14 +8,33 @@ -

GitHub Tracker

-

Projects:

-
+ + +
+
+ All repos +
+ + +
+ +
+ +
+ +
+ + +
+
+ + + \ No newline at end of file diff --git a/code/script.js b/code/script.js index e69de29b..1e4bdae2 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,114 @@ + +//DOM +const profileWrapper = document.getElementById('profile-wrapper'); +const repoWrapper = document.getElementById('repo-wrapper'); + +//API +const USER = 'JaEngd' +const PROFILE_URL = `https://api.github.com/users/${USER}` +const REPO_URL = `https://api.github.com/users/${USER}/repos` + +const API_TOKEN = TOKEN || process.env.API_KEY; + +const options = { //Object + method: 'GET', //POST, PATCH, DELETE + headers: { + Authorization: `token ${API_TOKEN}` + } +} + +const showProfile = () => { + fetch(PROFILE_URL, options) + .then(res => res.json()) //Converting the response to a JSON object + .then(data => { + console.log(data) + profileWrapper.innerHTML += ` +
+
+ + Avatar of ${data.login} + +
+

${data.login}

+

Public repositories: ${data.public_repos}.

+
+ ` + }) +} +showProfile() + +const showRepos = () => { + fetch(REPO_URL, options) + .then((response) => response.json()) + .then((data) => { + const myRepos = data.filter((repo) => repo.name.includes("project") && repo.fork) + + myRepos.forEach(repo => { + repoWrapper.innerHTML += ` +
+

${repo.name} (${repo.default_branch})

+

Most recent push: ${new Date(repo.pushed_at).toDateString()}

+

Number of commits:

+

Main language: ${repo.language}

+
+ ` + }) + showPullRequestsArray(myRepos) + drawBarChart(myRepos) + }) +} + + +const showPullRequestsArray = (allRepos) => { + allRepos.forEach((repo) => { + fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`, options) + .then((response) => response.json()) + .then((data) => { + const myPullRequest = data.find( + (pull) => pull.user.login === repo.owner.login + ) + if (myPullRequest) { + fetchCommits(myPullRequest.commits_url, repo.name) + } else { + document.getElementById(`commit_${repo.name}`) + .innerHTML = 'Pull request unavailable, or closed.'; + } + }) + }) +} + + +const fetchCommits = (myCommitsUrl, myRepoName) => { + fetch(myCommitsUrl) + .then((response) => response.json()) + .then((data) => { + document.getElementById(`commit_${myRepoName}`).innerHTML += data.length + }) + } + +showRepos() + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/code/server.rb b/code/server.rb new file mode 100644 index 00000000..5595ef3f --- /dev/null +++ b/code/server.rb @@ -0,0 +1,11 @@ +require 'sinatra' +require 'rest-client' +require 'json' + +CLIENT_ID = ENV['GH_BASIC_CLIENT_ID'] +CLIENT_SECRET = ENV['GH_BASIC_SECRET_ID'] + +get '/' do + erb :index, :locals => {:client_id => CLIENT_ID} +end + diff --git a/code/style.css b/code/style.css index 7c8ad447..d0f156fb 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,131 @@ body { background: #FFECE9; -} \ No newline at end of file + font-family: 'Nunito', sans-serif; + margin: 0 auto; +} + + +html { + scroll-behavior: smooth; +} + +h1 { + font-size: 1.4rem; +} + +h2 { + font-size: 1.2rem; + text-align: center; +} + +h3 { + text-align: center; + background-color: rgba(130, 60, 60, 0.2); + border-radius: 0.4rem; + margin-top: 0; + padding: 1rem 0rem; +} + +#profile-wrapper { + display: block; + text-align: center; + justify-content: center; + display: flex; + position: absolute; + left: 50%; + top: 50%; + width: 100%; + max-width: 300px; + transform: translate(-50%, -50%); + margin: auto; + width: 63%; +} + +#profile { + display: inline-block; + justify-content: center; +} + +/*/ --- BUTTON --- /*/ +.button{ + background: #00aa2b; + color: #fff; + padding: 10px 40px; + box-shadow: 6px 6px 39px -4px rgba(0,0,0,0.75); + border-radius: 3px; + cursor: pointer; + transition: 0.4s; + position: absolute; + margin-top: 100px; +} +/*/ --- BUTTON --- /*/ + +.profile-image { + display: inline-block; + width: 160px; + height: 160px; + border-radius: 50%; + border: 2px solid whitesmoke; + overflow: hidden; + margin-bottom: 0; +} + +.profile-image > a > img { + width: 100%; +} + +#repo-wrapper { + display: flex; + flex-flow: row wrap; + justify-content: center; + left: 50%; + top: 40%; + width: 100%; + transform: translate(-50%, -50%); + position: absolute; + gap: 1rem; + margin-bottom: 1rem; + +} + +.projects-card { + width: 320px; + background-color: #f2f2f2; + box-shadow: rgba(0, 0, 0, 0.6) 0 0.065rem 0.25rem; + border-radius: 0.4rem; + padding: 1rem; +} + +#chart-wrapper { + width: 90vw; + max-width: 512px; + margin: 0 auto; + position: absolute; +} + +header { + position: sticky; + top: 0; +} + +footer { + margin-top: 1rem; +} + +header, footer { + background-color: #f2f2f2; + text-align: center; + padding: 1rem 0rem; + width: 100%; +} + +footer, a { + color: rgb(130, 60, 60) +} + +footer > p > a { + text-decoration: none; +} + + + From d817f530a20c3f3e3d5b040f2c1eb18ceb19b6c6 Mon Sep 17 00:00:00 2001 From: Jacob Date: Sun, 27 Feb 2022 22:02:00 +0100 Subject: [PATCH 2/4] changed styling and added a chart --- .gitignore | 22 ++++++++++++++- code/chart.js | 37 ++++++------------------ code/index.html | 17 ++++++++---- code/script.js | 17 ++++++------ code/style.css | 71 +++++++++++++++++++++++++++++++++++------------ package-lock.json | 24 ++++++++++++++++ package.json | 5 ++++ 7 files changed, 133 insertions(+), 60 deletions(-) create mode 100644 package-lock.json create mode 100644 package.json diff --git a/.gitignore b/.gitignore index 758e5a85..af56aa87 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,22 @@ //.gitignore file -code/secret.js \ No newline at end of file +code/secret.js + +# Ignore Mac system files +.DS_store + +# Ignore node_modules folder +node_modules + +# Ignore all text files +*.txt + +# Ignore files related to API keys +.env + +# misc +/.pnp +.pnp.js +npm-debug.log* +yarn-debug.log* +yarn-error.log* + diff --git a/code/chart.js b/code/chart.js index 2b8a2065..1496cf3e 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,38 +1,19 @@ //DOM-selector for the canvas 👇 const ctx = document.getElementById('chart').getContext('2d') -const technigoProjects = 21 +const technigoProjects = 22 //"Draw" the chart here 👇 + const drawBarChart = (repos) => { new Chart(ctx, { type: 'doughnut', - data: { - labels: [ - 'Projects to do', - 'Finished projects' - ], - datasets: [ - { - data: [ - technigoProjects - repos.length, - repos.length, - ], - backgroundColor: [ - '#d5a7b6', - '#5c7fe9' - ] - } - ] - }, - options: { - plugins: { - legend: { - display: true, - labels: { - color: 'rgb(0, 0, 0)' - } - } - }, + data: { labels: ['Projects to do', 'Finished projects'], + datasets: [ { data: [ technigoProjects - repos.length, repos.length,], + backgroundColor: ['#747474','#ffbb00']}] }, + display: true, + labels: { + color: 'rgb(0, 0, 0)' + } }) } \ No newline at end of file diff --git a/code/index.html b/code/index.html index fd671679..05abe916 100644 --- a/code/index.html +++ b/code/index.html @@ -6,6 +6,10 @@ Project GitHub Tracker + + @@ -14,26 +18,29 @@
All repos
+ +
-
+
- + + + -
-
+ + - diff --git a/code/script.js b/code/script.js index 1e4bdae2..f8c4f4f7 100644 --- a/code/script.js +++ b/code/script.js @@ -17,6 +17,7 @@ const options = { //Object } } + const showProfile = () => { fetch(PROFILE_URL, options) .then(res => res.json()) //Converting the response to a JSON object @@ -30,13 +31,14 @@ const showProfile = () => {

${data.login}

-

Public repositories: ${data.public_repos}.

+

Public repositories: ${data.public_repos}

` }) } showProfile() + const showRepos = () => { fetch(REPO_URL, options) .then((response) => response.json()) @@ -46,9 +48,9 @@ const showRepos = () => { myRepos.forEach(repo => { repoWrapper.innerHTML += `
-

${repo.name} (${repo.default_branch})

-

Most recent push: ${new Date(repo.pushed_at).toDateString()}

-

Number of commits:

+

${repo.name}
${repo.default_branch}

+

Recent push: ${new Date(repo.pushed_at).toDateString()}

+

Commits:

Main language: ${repo.language}

` @@ -68,24 +70,23 @@ const showPullRequestsArray = (allRepos) => { (pull) => pull.user.login === repo.owner.login ) if (myPullRequest) { - fetchCommits(myPullRequest.commits_url, repo.name) + showCommits(myPullRequest.commits_url, repo.name) } else { document.getElementById(`commit_${repo.name}`) - .innerHTML = 'Pull request unavailable, or closed.'; + .innerHTML = 'Commits: No Pull request available.'; } }) }) } -const fetchCommits = (myCommitsUrl, myRepoName) => { +const showCommits = (myCommitsUrl, myRepoName) => { fetch(myCommitsUrl) .then((response) => response.json()) .then((data) => { document.getElementById(`commit_${myRepoName}`).innerHTML += data.length }) } - showRepos() diff --git a/code/style.css b/code/style.css index d0f156fb..7f72a8ea 100644 --- a/code/style.css +++ b/code/style.css @@ -1,7 +1,20 @@ +*{ + margin: 0 auto; + padding: 0; + box-sizing: border-box; + list-style: none; + text-decoration: none; + font-family: 'Open Sans', sans-serif; + font-family: 'Roboto', sans-serif; + scroll-behavior: smooth; + scroll-padding-top: 0; +} + body { - background: #FFECE9; + background: #252525; font-family: 'Nunito', sans-serif; margin: 0 auto; + display: flex; } @@ -11,63 +24,79 @@ html { h1 { font-size: 1.4rem; + color: #f2f2f2; } h2 { font-size: 1.2rem; text-align: center; + color: #f2f2f2; } h3 { text-align: center; - background-color: rgba(130, 60, 60, 0.2); border-radius: 0.4rem; - margin-top: 0; - padding: 1rem 0rem; + margin-top: 10; + padding: 1rem 1rem; + color: #f2f2f2; +} + +p{ + font-size: 1rem; + margin-top: 15px; + color: #f2f2f2; } #profile-wrapper { - display: block; - text-align: center; - justify-content: center; display: flex; + text-align: center; position: absolute; left: 50%; top: 50%; width: 100%; max-width: 300px; transform: translate(-50%, -50%); - margin: auto; + margin: 2px; + padding: 20px; width: 63%; + box-shadow: 6px 6px 39px -4px rgba(0,0,0,0.75); } #profile { display: inline-block; justify-content: center; + margin-top: 10px; } /*/ --- BUTTON --- /*/ .button{ background: #00aa2b; color: #fff; - padding: 10px 40px; + padding: 10px 20px; box-shadow: 6px 6px 39px -4px rgba(0,0,0,0.75); border-radius: 3px; cursor: pointer; - transition: 0.4s; + text-align: center; + align-items: center; position: absolute; - margin-top: 100px; + left: 50%; + top: 50%; + width: 100%; + max-width: 200px; + transform: translate(-50%, -50%); + transition: 0.4s; + margin-top: 100%; } /*/ --- BUTTON --- /*/ .profile-image { display: inline-block; - width: 160px; - height: 160px; + width: 200px; + height: 200px; border-radius: 50%; border: 2px solid whitesmoke; overflow: hidden; - margin-bottom: 0; + margin-bottom: 40px; } .profile-image > a > img { @@ -79,20 +108,22 @@ h3 { flex-flow: row wrap; justify-content: center; left: 50%; - top: 40%; + top: 130%; width: 100%; transform: translate(-50%, -50%); position: absolute; gap: 1rem; margin-bottom: 1rem; - } .projects-card { width: 320px; - background-color: #f2f2f2; + height: 230px; + background-color: #1d1d1d; box-shadow: rgba(0, 0, 0, 0.6) 0 0.065rem 0.25rem; border-radius: 0.4rem; + text-align: center; + margin: 0; padding: 1rem; } @@ -101,6 +132,10 @@ h3 { max-width: 512px; margin: 0 auto; position: absolute; + left: 50%; + top: 200%; + width: 100%; + transform: translate(-50%, -50%); } header { @@ -120,7 +155,7 @@ header, footer { } footer, a { - color: rgb(130, 60, 60) + color: #ffbb00; } footer > p > a { diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 00000000..8627f416 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,24 @@ +{ + "name": "project-github-tracker", + "lockfileVersion": 2, + "requires": true, + "packages": { + "": { + "dependencies": { + "chart.js": "^3.7.1" + } + }, + "node_modules/chart.js": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.7.1.tgz", + "integrity": "sha512-8knRegQLFnPQAheZV8MjxIXc5gQEfDFD897BJgv/klO/vtIyFFmgMXrNfgrXpbTr/XbTturxRgxIXx/Y+ASJBA==" + } + }, + "dependencies": { + "chart.js": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.7.1.tgz", + "integrity": "sha512-8knRegQLFnPQAheZV8MjxIXc5gQEfDFD897BJgv/klO/vtIyFFmgMXrNfgrXpbTr/XbTturxRgxIXx/Y+ASJBA==" + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 00000000..832728d9 --- /dev/null +++ b/package.json @@ -0,0 +1,5 @@ +{ + "dependencies": { + "chart.js": "^3.7.1" + } +} From 38c9e95cc343d0449f14656bd6fe245958b21237 Mon Sep 17 00:00:00 2001 From: Jacob Date: Sun, 27 Feb 2022 22:34:04 +0100 Subject: [PATCH 3/4] changed API key settings --- code/script.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/script.js b/code/script.js index f8c4f4f7..aa646652 100644 --- a/code/script.js +++ b/code/script.js @@ -8,7 +8,7 @@ const USER = 'JaEngd' const PROFILE_URL = `https://api.github.com/users/${USER}` const REPO_URL = `https://api.github.com/users/${USER}/repos` -const API_TOKEN = TOKEN || process.env.API_KEY; +const API_TOKEN = TOKEN const options = { //Object method: 'GET', //POST, PATCH, DELETE From b807f7e5526fe60b0d0c70a4b727f5c1d67ec476 Mon Sep 17 00:00:00 2001 From: Jacob Date: Sun, 27 Feb 2022 23:23:33 +0100 Subject: [PATCH 4/4] changed styling --- README.md | 3 +-- code/index.html | 9 +++---- code/script.js | 25 -------------------- code/style.css | 62 +++++++++++++++++++++++++++++++++++-------------- 4 files changed, 48 insertions(+), 51 deletions(-) diff --git a/README.md b/README.md index 1613a3b0..f805e233 100644 --- a/README.md +++ b/README.md @@ -9,5 +9,4 @@ Start by briefly describing the assignment in a sentence or two. Keep it short a 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? ## 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://hopeful-pasteur-51eb45.netlify.app/ diff --git a/code/index.html b/code/index.html index 05abe916..f1344930 100644 --- a/code/index.html +++ b/code/index.html @@ -9,17 +9,16 @@ +
- All repos + All repos
- - +
@@ -31,8 +30,6 @@
- - diff --git a/code/script.js b/code/script.js index aa646652..b71da810 100644 --- a/code/script.js +++ b/code/script.js @@ -88,28 +88,3 @@ const showCommits = (myCommitsUrl, myRepoName) => { }) } showRepos() - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/code/style.css b/code/style.css index 7f72a8ea..328cb35c 100644 --- a/code/style.css +++ b/code/style.css @@ -17,9 +17,13 @@ body { display: flex; } - html { scroll-behavior: smooth; + overflow-x: hidden; +} + +html, body { + overflow-x: hidden; } h1 { @@ -52,7 +56,7 @@ p{ text-align: center; position: absolute; left: 50%; - top: 50%; + top: 30%; width: 100%; max-width: 300px; transform: translate(-50%, -50%); @@ -68,9 +72,10 @@ p{ margin-top: 10px; } + /*/ --- BUTTON --- /*/ .button{ - background: #00aa2b; + background: #5154ff; color: #fff; padding: 10px 20px; box-shadow: 6px 6px 39px -4px rgba(0,0,0,0.75); @@ -87,6 +92,11 @@ p{ transition: 0.4s; margin-top: 100%; } + +.button:hover{ + background: #34495e; + color: #fff; +} /*/ --- BUTTON --- /*/ .profile-image { @@ -108,12 +118,12 @@ p{ flex-flow: row wrap; justify-content: center; left: 50%; - top: 130%; + top: 190%; width: 100%; transform: translate(-50%, -50%); position: absolute; gap: 1rem; - margin-bottom: 1rem; + margin-bottom: 100rem; } .projects-card { @@ -128,18 +138,18 @@ p{ } #chart-wrapper { - width: 90vw; + width: 90px; max-width: 512px; margin: 0 auto; position: absolute; left: 50%; - top: 200%; + top: 330%; width: 100%; + margin: 100 100px; transform: translate(-50%, -50%); } header { - position: sticky; top: 0; } @@ -147,20 +157,36 @@ footer { margin-top: 1rem; } -header, footer { - background-color: #f2f2f2; - text-align: center; - padding: 1rem 0rem; - width: 100%; -} - footer, a { color: #ffbb00; } -footer > p > a { - text-decoration: none; -} +@media (min-width:1281px) { + #repo-wrapper { + top: 110%; + } + #chart-wrapper { + top: 170%; + } + } + + @media (min-width:1025px) { + #repo-wrapper { + top: 110%; + } + #chart-wrapper { + top: 170%; + } + } + + @media (min-width:801px) { + #repo-wrapper { + top: 120%; + } + #chart-wrapper { + top: 190%; + } + }