From 2dc3bc34da94b9417f28566248e21e7a6651a7a2 Mon Sep 17 00:00:00 2001 From: Neaa99 Date: Tue, 22 Feb 2022 16:10:16 +0100 Subject: [PATCH 01/25] All the data, no styling --- code/index.html | 15 ++++++-- code/script.js | 96 +++++++++++++++++++++++++++++++++++++++++++++++++ code/style.css | 5 +++ 3 files changed, 114 insertions(+), 2 deletions(-) diff --git a/code/index.html b/code/index.html index 2fb5e0ae..331b9f9a 100644 --- a/code/index.html +++ b/code/index.html @@ -4,13 +4,23 @@ - Project GitHub Tracker + Project GitHub Tracker Neaa99

GitHub Tracker

Projects:

+
+
+
+
+
+
+
+
+
+
@@ -18,4 +28,5 @@

Projects:

- \ No newline at end of file + + diff --git a/code/script.js b/code/script.js index e69de29b..5a99a864 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,96 @@ +// DOM SELECTORS +const USER = 'Neaa99' +const userName = document.getElementById('userName') +const myName = document.getElementById('myName') +const userPic = document.getElementById('userPic') +const userBio = document.getElementById('userBio') +const technigoRepos = document.getElementById('technigoRepos') +const repoPush = document.getElementById('repoPush') +const defaultBranch = document.getElementById('defaultBranch') +const repoURL = document.getElementById('repoURL') +const repoCommits = document.getElementById('repoCommits') +const allPullReq = document.getElementById('allPullReq') + +// API +const API_USER = `https://api.github.com/users/${USER}` +const API_REPOS = `https://api.github.com/users/${USER}/repos` + +// Authorization +const options = { + method: 'GET', + headers: { + Authorization: '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' + } + } + + +fetch(API_USER, options) + .then ((res) => { + return res.json() + }) + .then ((data) => { + console.log(data) + userName.innerHTML = `

${data.login}

` + myName.innerHTML = `

${data.name}

` + userPic.innerHTML = `User image` + userBio.innerHTML = `

${data.bio}

` + }) + + fetch(API_REPOS, options) + .then ((res) => { + return res.json() + }) + .then((data) => { + console.log(data) + const technigoRepositories = data.filter(repo => + repo.name.includes('project-') && repo.fork === true) + + console.log(technigoRepositories) + technigoRepositories.forEach((repo) => { + technigoRepos.innerHTML += ` +
+

${repo.name}

+

${repo.description}

+

Last push: ${repo.pushed_at}

+

Branch: ${repo.default_branch}

+

Main language: ${repo.language}

+

Number of commits:

+

Link to Repo

+ +
+ ` + + + }) + getPullRequests(technigoRepositories) + }) + + + //Remember to pass along your filtered repos as an argument when +//you are calling this function + +const getPullRequests = (repos) => { + //Get all the PRs for each project. + repos.forEach(repo => { + fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`, options) + .then(res => res.json()) + .then(data => { + const commits = document.getElementById(`commit-${repo.name}`) + console.log('hey') + //TODO + //1. Find only the PR that you made by comparing pull.user.login + // with repo.owner.login + const pulls = data.find((pull) => pull.user.login === repo.owner.login); + console.log(pulls) + commits.innerHTML += ` + ${pulls.number} + ` + //2. Now you're able to get the commits for each repo by using + // the commits_url as an argument to call another function + + //3. You can also get the comments for each PR by calling + // another function with the review_comments_url as argument + }) + }) + } + \ No newline at end of file diff --git a/code/style.css b/code/style.css index 7c8ad447..dbba7fe4 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,8 @@ body { background: #FFECE9; +} + +.technigo-repos { + background: rgba(255, 182, 47, 0.377); + border: 1px solid black; } \ No newline at end of file From d341be97ca13e534eb879f07ece842c7d6a5a980 Mon Sep 17 00:00:00 2001 From: Neaa99 Date: Tue, 22 Feb 2022 17:12:17 +0100 Subject: [PATCH 02/25] added correct commits --- code/script.js | 26 ++++++++++++++++++++------ 1 file changed, 20 insertions(+), 6 deletions(-) diff --git a/code/script.js b/code/script.js index 5a99a864..f680355b 100644 --- a/code/script.js +++ b/code/script.js @@ -76,15 +76,19 @@ const getPullRequests = (repos) => { .then(res => res.json()) .then(data => { const commits = document.getElementById(`commit-${repo.name}`) - console.log('hey') //TODO //1. Find only the PR that you made by comparing pull.user.login // with repo.owner.login const pulls = data.find((pull) => pull.user.login === repo.owner.login); - console.log(pulls) - commits.innerHTML += ` - ${pulls.number} - ` + // console.log(pulls) + // commits.innerHTML += ` + // ${pulls.number} + // ` + fetchCommits(pulls.commits_url, repo.name) + console.log(pulls.commits_url) + + + //2. Now you're able to get the commits for each repo by using // the commits_url as an argument to call another function @@ -93,4 +97,14 @@ const getPullRequests = (repos) => { }) }) } - \ No newline at end of file + + const fetchCommits = (myCommitsUrl, myRepoName) => { + fetch(myCommitsUrl, options) + .then((res) => { + return res.json() + }) + .then((data) => { + document.getElementById(`commit-${myRepoName}`).innerHTML += data.length + + }) + } \ No newline at end of file From 051e5d2eed563757b36dea4fda3e7d930beaee24 Mon Sep 17 00:00:00 2001 From: Neaa99 Date: Wed, 23 Feb 2022 12:18:22 +0100 Subject: [PATCH 03/25] Token and gitignore --- code/.gitignore | 5 +++++ code/index.html | 1 + code/script.js | 4 +++- 3 files changed, 9 insertions(+), 1 deletion(-) create mode 100644 code/.gitignore diff --git a/code/.gitignore b/code/.gitignore new file mode 100644 index 00000000..665dadbc --- /dev/null +++ b/code/.gitignore @@ -0,0 +1,5 @@ +# Ignore files related to API keys +.env + +# other +token.js \ No newline at end of file diff --git a/code/index.html b/code/index.html index 331b9f9a..32e78bac 100644 --- a/code/index.html +++ b/code/index.html @@ -26,6 +26,7 @@

Projects:

+ diff --git a/code/script.js b/code/script.js index f680355b..b8b9ce7e 100644 --- a/code/script.js +++ b/code/script.js @@ -11,6 +11,8 @@ const repoURL = document.getElementById('repoURL') const repoCommits = document.getElementById('repoCommits') const allPullReq = document.getElementById('allPullReq') +const API_TOKEN = TOKEN || process.env.API_KEY; + // API const API_USER = `https://api.github.com/users/${USER}` const API_REPOS = `https://api.github.com/users/${USER}/repos` @@ -19,7 +21,7 @@ const API_REPOS = `https://api.github.com/users/${USER}/repos` const options = { method: 'GET', headers: { - Authorization: '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' + Authorization: `token ${API_TOKEN}` } } From 0dcd2c636b88fda3ff813b594475e4d04c1e7533 Mon Sep 17 00:00:00 2001 From: Neaa99 Date: Wed, 23 Feb 2022 14:20:17 +0100 Subject: [PATCH 04/25] token --- code/chart.js | 29 +++++++++++++++++++++++++++++ code/index.html | 6 ++++-- code/style.css | 2 +- package-lock.json | 6 ++++++ 4 files changed, 40 insertions(+), 3 deletions(-) create mode 100644 package-lock.json diff --git a/code/chart.js b/code/chart.js index 92e85a30..f66a2c06 100644 --- a/code/chart.js +++ b/code/chart.js @@ -2,3 +2,32 @@ const ctx = document.getElementById('chart').getContext('2d') //"Draw" the chart here 👇 +const labels = [ + 'January', + 'February', + 'March', + 'April', + 'May', + 'June', + ]; + + const data = { + labels: labels, + datasets: [{ + label: 'My First dataset', + backgroundColor: 'rgb(255, 99, 132)', + borderColor: 'rgb(255, 99, 132)', + data: [0, 10, 5, 2, 20, 30, 45], + }] + }; + + const config = { + type: 'doughnut', + data: data, + options: {} + }; + + const myChart = new Chart( + document.getElementById('chart'), + config + ); \ No newline at end of file diff --git a/code/index.html b/code/index.html index 32e78bac..59c74793 100644 --- a/code/index.html +++ b/code/index.html @@ -25,9 +25,11 @@

Projects:

- - + + + + diff --git a/code/style.css b/code/style.css index dbba7fe4..9a67583f 100644 --- a/code/style.css +++ b/code/style.css @@ -1,5 +1,5 @@ body { - background: #FFECE9; + background: linear-gradient(330deg, #EBC8C4, #B6766D) } .technigo-repos { diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 00000000..670014a8 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "project-github-tracker", + "lockfileVersion": 2, + "requires": true, + "packages": {} +} From 1a304937bd5ff23ee6355335cb25623c28881960 Mon Sep 17 00:00:00 2001 From: Neaa99 Date: Wed, 23 Feb 2022 16:53:38 +0100 Subject: [PATCH 05/25] lots of styling --- code/index.html | 24 ++++++--- code/script.js | 34 ++++++++----- code/style.css | 133 ++++++++++++++++++++++++++++++++++++++++++++++-- 3 files changed, 170 insertions(+), 21 deletions(-) diff --git a/code/index.html b/code/index.html index 59c74793..cc57a26d 100644 --- a/code/index.html +++ b/code/index.html @@ -4,26 +4,38 @@ + + + + + Project GitHub Tracker Neaa99 + -

GitHub Tracker

-

Projects:

-
+ + +
-
+ + + +
+
+ +
- + diff --git a/code/script.js b/code/script.js index b8b9ce7e..5e6f6e62 100644 --- a/code/script.js +++ b/code/script.js @@ -10,6 +10,8 @@ const defaultBranch = document.getElementById('defaultBranch') const repoURL = document.getElementById('repoURL') const repoCommits = document.getElementById('repoCommits') const allPullReq = document.getElementById('allPullReq') +const container = document.getElementById('container') +const projects = document.getElementById('projects') const API_TOKEN = TOKEN || process.env.API_KEY; @@ -32,10 +34,16 @@ fetch(API_USER, options) }) .then ((data) => { console.log(data) - userName.innerHTML = `

${data.login}

` - myName.innerHTML = `

${data.name}

` - userPic.innerHTML = `User image` - userBio.innerHTML = `

${data.bio}

` + projects.innerHTML = ` + User image +
+

${data.name}

+

${data.login}

+

GitHub Tracker

+

${data.bio}

+
+ + ` }) fetch(API_REPOS, options) @@ -49,15 +57,17 @@ fetch(API_USER, options) console.log(technigoRepositories) technigoRepositories.forEach((repo) => { - technigoRepos.innerHTML += ` + container.innerHTML += `
-

${repo.name}

-

${repo.description}

-

Last push: ${repo.pushed_at}

-

Branch: ${repo.default_branch}

-

Main language: ${repo.language}

-

Number of commits:

-

Link to Repo

+

${repo.name}

 +

${repo.description}

+
+

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

+

• Branch: ${repo.default_branch}

+

• Main language: ${repo.language}

+

• Number of commits:

+
+

Link to Repo

` diff --git a/code/style.css b/code/style.css index 9a67583f..96857da6 100644 --- a/code/style.css +++ b/code/style.css @@ -1,8 +1,135 @@ body { - background: linear-gradient(330deg, #EBC8C4, #B6766D) + width: 100vh; + height: 100%; + background: linear-gradient(330deg, #B6766D, #EBC8C4); + font-family: poppins; + font-weight: 300; +} + +.myDiv { + position: absolute; + top: 500px; + left: 100px; + padding: 600px 800px; /*Utöka första vid fler reops */ + background: linear-gradient(100deg, #f7e9e7, #B6766D); + z-index: -1; +} + +.projects { + width: 100vw; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + gap: 50px; + margin-top: 100px; +} + +.header-text { + display: flex; + flex-direction: column; + line-height: 10px; + font-size: x-large; + color: #3d1611; +} + +.header-text span { + color: white; + text-shadow: 4px 5px 8px rgba(0, 0, 0, 0.308); +} + +.projects img { + border-radius: 50%; + width: 300px; + border: solid .5em #BE847C; + padding: .5em; + +} + +.projects img:hover { + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + animation-name: colorChange; + animation-duration: 4s; + cursor: pointer; +} + +.container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + justify-content: space-around; + grid-gap: 5px; + padding: 20px; + margin: 150px; + width: 93rem; + /* border: 1px solid black; */ + } .technigo-repos { - background: rgba(255, 182, 47, 0.377); - border: 1px solid black; + display: flex; + flex-direction: column; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + margin-top: 10px; + margin-bottom: 10px; + padding: 20px; + align-items: center; + background-color: #E0B8B3; + min-width: 200px; + max-width: 400px; + width: 80%; + color: black; + gap: 1px; +} + + .info { + line-height: 20px; + margin: 20px; + } + + .info span { + font-weight: 400; + } + + #description, #repoName { + color: #3d1611; + } + + .netlify-link { + padding: 0 10px; + background-color: rgba(255, 255, 255, 0.37); + border-radius: 30px; + } + + .netlify-link:hover { + box-shadow: 6px 6px 20px rgba(122,122,122,0.212); + animation-name: colorChange; + animation-duration: 5s; + } + + .repo-link { + padding: 20px; + border-radius: 50px; + background-color: rgba(255, 255, 255, 0.37); + + } + + .repo-link:hover { + + box-shadow: 6px 6px 20px rgba(122,122,122,0.212); + animation-name: colorChange; + animation-duration: 5s; +} + +a:visited, a:link { + color: #3d1611; + text-decoration: none; +} + +@keyframes colorChange { + 0% {background-color: #f7f1f0;} + 25% {background-color: #e1c8c4;} + 50% {background-color: #cb9f98;} + 100% {background-color: #BE847C;} } \ No newline at end of file From ff8160233595833d74fe349f66cb4511c69bf930 Mon Sep 17 00:00:00 2001 From: Neaa99 Date: Wed, 23 Feb 2022 17:14:01 +0100 Subject: [PATCH 06/25] Todays changes --- code/index.html | 20 +++----------------- code/script.js | 2 +- code/style.css | 2 +- 3 files changed, 5 insertions(+), 19 deletions(-) diff --git a/code/index.html b/code/index.html index cc57a26d..7867e287 100644 --- a/code/index.html +++ b/code/index.html @@ -14,28 +14,14 @@ - -
-
-
-
-
- - +
-
- -
+
- + diff --git a/code/script.js b/code/script.js index 5e6f6e62..6a0b18d7 100644 --- a/code/script.js +++ b/code/script.js @@ -59,7 +59,7 @@ fetch(API_USER, options) technigoRepositories.forEach((repo) => { container.innerHTML += `
-

${repo.name}

 +

${repo.name}

${repo.description}

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

diff --git a/code/style.css b/code/style.css index 96857da6..65e70ad4 100644 --- a/code/style.css +++ b/code/style.css @@ -98,7 +98,7 @@ body { .netlify-link { padding: 0 10px; - background-color: rgba(255, 255, 255, 0.37); + background-color: rgba(255, 255, 255, 0.192); border-radius: 30px; } From b672f03bda36fd115ebface4653180a9c3ee81f9 Mon Sep 17 00:00:00 2001 From: Neaa99 Date: Wed, 23 Feb 2022 17:19:06 +0100 Subject: [PATCH 07/25] token update --- code/script.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/code/script.js b/code/script.js index 6a0b18d7..70fdfdae 100644 --- a/code/script.js +++ b/code/script.js @@ -23,7 +23,8 @@ const API_REPOS = `https://api.github.com/users/${USER}/repos` const options = { method: 'GET', headers: { - Authorization: `token ${API_TOKEN}` + // Authorization: `token ${API_TOKEN}` + Authorization: `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` } } From 4bebff4882ea15d5d10626d1ccb535f748bd6f75 Mon Sep 17 00:00:00 2001 From: Neaa99 Date: Wed, 23 Feb 2022 17:20:09 +0100 Subject: [PATCH 08/25] token --- code/.gitignore | 2 +- code/script.js | 4 ++-- code/token.js | 1 + 3 files changed, 4 insertions(+), 3 deletions(-) create mode 100644 code/token.js diff --git a/code/.gitignore b/code/.gitignore index 665dadbc..b0251c50 100644 --- a/code/.gitignore +++ b/code/.gitignore @@ -2,4 +2,4 @@ .env # other -token.js \ No newline at end of file +# token.js \ No newline at end of file diff --git a/code/script.js b/code/script.js index 70fdfdae..99209f1d 100644 --- a/code/script.js +++ b/code/script.js @@ -23,8 +23,8 @@ const API_REPOS = `https://api.github.com/users/${USER}/repos` const options = { method: 'GET', headers: { - // Authorization: `token ${API_TOKEN}` - Authorization: `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` + Authorization: `token ${API_TOKEN}` + // Authorization: `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` } } diff --git a/code/token.js b/code/token.js new file mode 100644 index 00000000..60f45e7c --- /dev/null +++ b/code/token.js @@ -0,0 +1 @@ +const TOKEN = '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' \ No newline at end of file From ef4e9efd48b55d9fcb265606a909f1d0e7e04d35 Mon Sep 17 00:00:00 2001 From: Neaa99 Date: Wed, 23 Feb 2022 17:27:23 +0100 Subject: [PATCH 09/25] token test --- code/.gitignore | 23 +++++++++++++++++++++-- code/script.js | 4 ++-- 2 files changed, 23 insertions(+), 4 deletions(-) diff --git a/code/.gitignore b/code/.gitignore index b0251c50..ecd8b37d 100644 --- a/code/.gitignore +++ b/code/.gitignore @@ -1,5 +1,24 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. +​ +​ +# 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* +​ # other -# token.js \ No newline at end of file +token.js diff --git a/code/script.js b/code/script.js index 99209f1d..70fdfdae 100644 --- a/code/script.js +++ b/code/script.js @@ -23,8 +23,8 @@ const API_REPOS = `https://api.github.com/users/${USER}/repos` const options = { method: 'GET', headers: { - Authorization: `token ${API_TOKEN}` - // Authorization: `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` + // Authorization: `token ${API_TOKEN}` + Authorization: `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` } } From dfb8323c41353b3a4606b2c34024d19716eeb86e Mon Sep 17 00:00:00 2001 From: Neaa99 Date: Thu, 24 Feb 2022 10:58:25 +0100 Subject: [PATCH 10/25] mobile responsive --- code/.gitignore => .gitignore | 8 +---- code/index.html | 4 +-- code/script.js | 4 +-- code/style.css | 60 ++++++++++++++++++++++++++++++++--- 4 files changed, 61 insertions(+), 15 deletions(-) rename code/.gitignore => .gitignore (91%) diff --git a/code/.gitignore b/.gitignore similarity index 91% rename from code/.gitignore rename to .gitignore index ecd8b37d..1256c669 100644 --- a/code/.gitignore +++ b/.gitignore @@ -1,24 +1,18 @@ # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. -​ -​ # 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* -​ + # other token.js diff --git a/code/index.html b/code/index.html index 7867e287..7ec5b2f4 100644 --- a/code/index.html +++ b/code/index.html @@ -14,7 +14,7 @@ -
+
@@ -25,8 +25,8 @@ - + diff --git a/code/script.js b/code/script.js index 70fdfdae..007b6c1e 100644 --- a/code/script.js +++ b/code/script.js @@ -11,7 +11,7 @@ const repoURL = document.getElementById('repoURL') const repoCommits = document.getElementById('repoCommits') const allPullReq = document.getElementById('allPullReq') const container = document.getElementById('container') -const projects = document.getElementById('projects') +const header = document.getElementById('header') const API_TOKEN = TOKEN || process.env.API_KEY; @@ -35,7 +35,7 @@ fetch(API_USER, options) }) .then ((data) => { console.log(data) - projects.innerHTML = ` + header.innerHTML = ` User image

${data.name}

diff --git a/code/style.css b/code/style.css index 65e70ad4..57ea5634 100644 --- a/code/style.css +++ b/code/style.css @@ -1,7 +1,7 @@ body { width: 100vh; height: 100%; - background: linear-gradient(330deg, #B6766D, #EBC8C4); + background: linear-gradient(to left, #B6766D, #EBC8C4); font-family: poppins; font-weight: 300; } @@ -15,7 +15,7 @@ body { z-index: -1; } -.projects { +.header { width: 100vw; display: flex; flex-direction: row; @@ -38,7 +38,7 @@ body { text-shadow: 4px 5px 8px rgba(0, 0, 0, 0.308); } -.projects img { +.header img { border-radius: 50%; width: 300px; border: solid .5em #BE847C; @@ -46,7 +46,7 @@ body { } -.projects img:hover { +.headers img:hover { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); animation-name: colorChange; animation-duration: 4s; @@ -132,4 +132,56 @@ a:visited, a:link { 25% {background-color: #e1c8c4;} 50% {background-color: #cb9f98;} 100% {background-color: #BE847C;} +} + +@media (max-width:667px) { + body { + background-repeat: no-repeat; + width: 100vw; + height: 100%; + } + + .myDiv { + left: 0; + right: 0; + padding: 500px 0; + + + } + + .container { + width: 90vw; + flex-direction: column; + align-items: center; + justify-content: center; + margin: 110px 0; + + + } + + .header { + width: 90vw; + flex-direction: column; + } + + .header img { + width: 200px; + margin-top: -80px; + } + + .header-text { + line-height: 30px; + margin-top: -60px; + font-size: 120%; + text-align: center; + } + + .header-text h1 { + line-height: 10px; + margin: 20px; + } + + .header p { + margin: 10px; + } } \ No newline at end of file From 6c8661a868bb95d73a954f223092dd0e5ab8ee78 Mon Sep 17 00:00:00 2001 From: Neaa99 Date: Thu, 24 Feb 2022 11:19:45 +0100 Subject: [PATCH 11/25] responsive tablet --- code/index.html | 6 +++-- code/style.css | 58 +++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 62 insertions(+), 2 deletions(-) diff --git a/code/index.html b/code/index.html index 7ec5b2f4..3460bd54 100644 --- a/code/index.html +++ b/code/index.html @@ -21,9 +21,11 @@
- + + + - + diff --git a/code/style.css b/code/style.css index 57ea5634..eba278fc 100644 --- a/code/style.css +++ b/code/style.css @@ -127,6 +127,7 @@ a:visited, a:link { text-decoration: none; } + @keyframes colorChange { 0% {background-color: #f7f1f0;} 25% {background-color: #e1c8c4;} @@ -134,11 +135,14 @@ a:visited, a:link { 100% {background-color: #BE847C;} } +/* MOBILE LANDSCAPE */ + @media (max-width:667px) { body { background-repeat: no-repeat; width: 100vw; height: 100%; + margin: 0; } .myDiv { @@ -160,7 +164,61 @@ a:visited, a:link { } .header { + flex-direction: column; + } + + .header img { + width: 200px; + margin-top: -80px; + } + + .header-text { + line-height: 30px; + margin-top: -60px; + font-size: 120%; + text-align: center; + } + + .header-text h1 { + line-height: 10px; + margin: 20px; + } + + .header p { + margin: 10px; + } +} + +/* TABLET LANDSCAPE */ +@media (min-width:668px) and (max-width:1024px) { + body { + background-repeat: no-repeat; + width: 100vw; + height: 100%; + margin: 0; + } + + .myDiv { + left: 0; + right: 0; + padding: 900px 0; + + + } + + .container { + width: 95vw; + align-items: center; + justify-content: center; + margin: 110px 0; + gap: 20px; + } + + .technigo-repos { width: 90vw; + } + + .header { flex-direction: column; } From 9b783f38f275621c3821e1a03927f565ccc517a2 Mon Sep 17 00:00:00 2001 From: Neaa99 Date: Thu, 24 Feb 2022 12:54:13 +0100 Subject: [PATCH 12/25] Smaller screen responsive --- code/chart.js | 14 +++++--------- code/index.html | 10 ++++++---- code/style.css | 19 +++++++++++++------ 3 files changed, 24 insertions(+), 19 deletions(-) diff --git a/code/chart.js b/code/chart.js index f66a2c06..9bf0a43c 100644 --- a/code/chart.js +++ b/code/chart.js @@ -3,21 +3,17 @@ const ctx = document.getElementById('chart').getContext('2d') //"Draw" the chart here 👇 const labels = [ - 'January', - 'February', - 'March', - 'April', - 'May', - 'June', + 'Compleated Projects', + 'Remaining Projects', ]; const data = { labels: labels, datasets: [{ label: 'My First dataset', - backgroundColor: 'rgb(255, 99, 132)', - borderColor: 'rgb(255, 99, 132)', - data: [0, 10, 5, 2, 20, 30, 45], + backgroundColor: ['#B6766D', '#F8E8DE'], + borderColor: '#f7e9e7', + data: [5, 1], }] }; diff --git a/code/index.html b/code/index.html index 3460bd54..2b60177d 100644 --- a/code/index.html +++ b/code/index.html @@ -4,7 +4,7 @@ - + @@ -21,9 +21,11 @@
- - - + +
+ +
+ diff --git a/code/style.css b/code/style.css index eba278fc..630cf439 100644 --- a/code/style.css +++ b/code/style.css @@ -10,7 +10,9 @@ body { position: absolute; top: 500px; left: 100px; - padding: 600px 800px; /*Utöka första vid fler reops */ + /* padding: 600px 800px; Utöka första vid fler reops */ + width: 90vw; + height: 120rem; background: linear-gradient(100deg, #f7e9e7, #B6766D); z-index: -1; } @@ -62,7 +64,7 @@ body { grid-gap: 5px; padding: 20px; margin: 150px; - width: 93rem; + width: 80vw; /* border: 1px solid black; */ } @@ -127,6 +129,13 @@ a:visited, a:link { text-decoration: none; } +/* .chart-container { + width: 600px; + height: auto; + padding: 100px; + border: 1px solid black; +} */ + @keyframes colorChange { 0% {background-color: #f7f1f0;} @@ -147,8 +156,7 @@ a:visited, a:link { .myDiv { left: 0; - right: 0; - padding: 500px 0; + width: 100vw; } @@ -200,8 +208,7 @@ a:visited, a:link { .myDiv { left: 0; - right: 0; - padding: 900px 0; + width: 100vw;; } From 8cc1f4ce9f95fcd5da8e60175158e9d2a0cddf2c Mon Sep 17 00:00:00 2001 From: Neaa99 Date: Thu, 24 Feb 2022 13:02:42 +0100 Subject: [PATCH 13/25] x --- .gitignore | 2 +- code/token.js | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) delete mode 100644 code/token.js diff --git a/.gitignore b/.gitignore index 1256c669..b4579b3a 100644 --- a/.gitignore +++ b/.gitignore @@ -15,4 +15,4 @@ yarn-debug.log* yarn-error.log* # other -token.js +token.js \ No newline at end of file diff --git a/code/token.js b/code/token.js deleted file mode 100644 index 60f45e7c..00000000 --- a/code/token.js +++ /dev/null @@ -1 +0,0 @@ -const TOKEN = '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' \ No newline at end of file From 19cc32364d9317472cb45b1ab3760541cebb235d Mon Sep 17 00:00:00 2001 From: Neaa99 Date: Thu, 24 Feb 2022 13:03:18 +0100 Subject: [PATCH 14/25] token test --- code/script.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/script.js b/code/script.js index 007b6c1e..cbfc39b3 100644 --- a/code/script.js +++ b/code/script.js @@ -23,8 +23,8 @@ const API_REPOS = `https://api.github.com/users/${USER}/repos` const options = { method: 'GET', headers: { - // Authorization: `token ${API_TOKEN}` - Authorization: `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` + Authorization: `token ${API_TOKEN}` + // Authorization: `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` } } From b4bfb3aeb1c7d8172c97b3e4ac184d0953358dbb Mon Sep 17 00:00:00 2001 From: Neaa99 Date: Thu, 24 Feb 2022 13:27:59 +0100 Subject: [PATCH 15/25] x --- code/script.js | 1 - 1 file changed, 1 deletion(-) diff --git a/code/script.js b/code/script.js index cbfc39b3..50f732e4 100644 --- a/code/script.js +++ b/code/script.js @@ -24,7 +24,6 @@ const options = { method: 'GET', headers: { Authorization: `token ${API_TOKEN}` - // Authorization: `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` } } From d61d311d688d42f1ed3cf68490ce158936dd6d84 Mon Sep 17 00:00:00 2001 From: Neaa99 Date: Thu, 24 Feb 2022 13:59:01 +0100 Subject: [PATCH 16/25] token --- .gitignore | 2 +- code/style.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.gitignore b/.gitignore index b4579b3a..6947b93e 100644 --- a/.gitignore +++ b/.gitignore @@ -15,4 +15,4 @@ yarn-debug.log* yarn-error.log* # other -token.js \ No newline at end of file +code/token.js \ No newline at end of file diff --git a/code/style.css b/code/style.css index 630cf439..d4e86a29 100644 --- a/code/style.css +++ b/code/style.css @@ -48,7 +48,7 @@ body { } -.headers img:hover { +.header img:hover { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); animation-name: colorChange; animation-duration: 4s; From 5677eaa7e86dfaba8167c8a9eee41484d1fa02ce Mon Sep 17 00:00:00 2001 From: Neaa99 Date: Thu, 24 Feb 2022 15:34:01 +0100 Subject: [PATCH 17/25] Done for the day --- code/chart.js | 9 +++++++-- code/index.html | 6 +++--- code/script.js | 28 ++++++++++++---------------- code/style.css | 31 +++++++++++++++++-------------- 4 files changed, 39 insertions(+), 35 deletions(-) diff --git a/code/chart.js b/code/chart.js index 9bf0a43c..6369b90d 100644 --- a/code/chart.js +++ b/code/chart.js @@ -2,6 +2,9 @@ const ctx = document.getElementById('chart').getContext('2d') //"Draw" the chart here 👇 +const drawChart = (repos) => { + + const labels = [ 'Compleated Projects', 'Remaining Projects', @@ -13,7 +16,7 @@ const labels = [ label: 'My First dataset', backgroundColor: ['#B6766D', '#F8E8DE'], borderColor: '#f7e9e7', - data: [5, 1], + data: [repos, 19-repos], }] }; @@ -26,4 +29,6 @@ const labels = [ const myChart = new Chart( document.getElementById('chart'), config - ); \ No newline at end of file + ); + +} diff --git a/code/index.html b/code/index.html index 2b60177d..38ca6eca 100644 --- a/code/index.html +++ b/code/index.html @@ -22,9 +22,9 @@ -
- -
+
+ +
diff --git a/code/script.js b/code/script.js index 50f732e4..86b2376f 100644 --- a/code/script.js +++ b/code/script.js @@ -74,7 +74,8 @@ fetch(API_USER, options) }) - getPullRequests(technigoRepositories) + drawChart(technigoRepositories.length) // Calling the chart + getPullRequests(technigoRepositories) // Calling the pull req and commits function }) @@ -88,24 +89,12 @@ const getPullRequests = (repos) => { .then(res => res.json()) .then(data => { const commits = document.getElementById(`commit-${repo.name}`) - //TODO - //1. Find only the PR that you made by comparing pull.user.login - // with repo.owner.login + const pulls = data.find((pull) => pull.user.login === repo.owner.login); - // console.log(pulls) - // commits.innerHTML += ` - // ${pulls.number} - // ` + fetchCommits(pulls.commits_url, repo.name) console.log(pulls.commits_url) - - - //2. Now you're able to get the commits for each repo by using - // the commits_url as an argument to call another function - - //3. You can also get the comments for each PR by calling - // another function with the review_comments_url as argument }) }) } @@ -119,4 +108,11 @@ const getPullRequests = (repos) => { document.getElementById(`commit-${myRepoName}`).innerHTML += data.length }) - } \ No newline at end of file + } + + // Center canvas/chart + window.onload = window.onresize = function() { + const canvas = document.getElementById('canvas'); + canvas.width = window.innerWidth * 0.8; + canvas.height = window.innerHeight * 0.8; +} \ No newline at end of file diff --git a/code/style.css b/code/style.css index d4e86a29..0847dad2 100644 --- a/code/style.css +++ b/code/style.css @@ -12,7 +12,7 @@ body { left: 100px; /* padding: 600px 800px; Utöka första vid fler reops */ width: 90vw; - height: 120rem; + height: 230rem; background: linear-gradient(100deg, #f7e9e7, #B6766D); z-index: -1; } @@ -129,13 +129,14 @@ a:visited, a:link { text-decoration: none; } -/* .chart-container { - width: 600px; - height: auto; - padding: 100px; - border: 1px solid black; -} */ - +.chart-container { + position: absolute; + left: 0; + right: 0; + margin:auto; + width: 600px; + +} @keyframes colorChange { 0% {background-color: #f7f1f0;} @@ -157,8 +158,6 @@ a:visited, a:link { .myDiv { left: 0; width: 100vw; - - } .container { @@ -167,8 +166,6 @@ a:visited, a:link { align-items: center; justify-content: center; margin: 110px 0; - - } .header { @@ -195,6 +192,10 @@ a:visited, a:link { .header p { margin: 10px; } + + .chart-container { + width: 400px; + } } /* TABLET LANDSCAPE */ @@ -209,8 +210,6 @@ a:visited, a:link { .myDiv { left: 0; width: 100vw;; - - } .container { @@ -249,4 +248,8 @@ a:visited, a:link { .header p { margin: 10px; } + + .chart-container { + width: 600px; + } } \ No newline at end of file From b89cf186876e7275df4f51cdfb1395f739ed51ac Mon Sep 17 00:00:00 2001 From: Neaa99 Date: Thu, 24 Feb 2022 15:39:01 +0100 Subject: [PATCH 18/25] Added github on the picture --- code/script.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/script.js b/code/script.js index 86b2376f..30a915c4 100644 --- a/code/script.js +++ b/code/script.js @@ -35,7 +35,7 @@ fetch(API_USER, options) .then ((data) => { console.log(data) header.innerHTML = ` - User image + User image

${data.name}

${data.login}

From 3ff933371badea744797047819c5a267fae5d4de Mon Sep 17 00:00:00 2001 From: Neaa99 Date: Fri, 25 Feb 2022 11:06:21 +0100 Subject: [PATCH 19/25] New tabs and linked link --- code/script.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/code/script.js b/code/script.js index 30a915c4..cc019a43 100644 --- a/code/script.js +++ b/code/script.js @@ -35,7 +35,7 @@ fetch(API_USER, options) .then ((data) => { console.log(data) header.innerHTML = ` - User image + User image

${data.name}

${data.login}

@@ -59,7 +59,7 @@ fetch(API_USER, options) technigoRepositories.forEach((repo) => { container.innerHTML += `
-

${repo.name}

 +

${repo.name}

${repo.description}

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

@@ -67,7 +67,7 @@ fetch(API_USER, options)

• Main language: ${repo.language}

• Number of commits:

-

Link to Repo

+

Link to Repo

` From d49c7307145ba64edf67cfff3ed430f964307fe0 Mon Sep 17 00:00:00 2001 From: Neaa99 Date: Fri, 25 Feb 2022 13:21:25 +0100 Subject: [PATCH 20/25] cleaned code for submition --- code/index.html | 14 +++++++------- code/script.js | 22 ++-------------------- code/style.css | 4 ++-- 3 files changed, 11 insertions(+), 29 deletions(-) diff --git a/code/index.html b/code/index.html index 38ca6eca..3b7562c2 100644 --- a/code/index.html +++ b/code/index.html @@ -4,10 +4,14 @@ + + + + - - + + Project GitHub Tracker Neaa99 @@ -16,19 +20,15 @@
-
- +
- - - diff --git a/code/script.js b/code/script.js index cc019a43..64d52dff 100644 --- a/code/script.js +++ b/code/script.js @@ -1,15 +1,6 @@ // DOM SELECTORS const USER = 'Neaa99' -const userName = document.getElementById('userName') -const myName = document.getElementById('myName') -const userPic = document.getElementById('userPic') -const userBio = document.getElementById('userBio') const technigoRepos = document.getElementById('technigoRepos') -const repoPush = document.getElementById('repoPush') -const defaultBranch = document.getElementById('defaultBranch') -const repoURL = document.getElementById('repoURL') -const repoCommits = document.getElementById('repoCommits') -const allPullReq = document.getElementById('allPullReq') const container = document.getElementById('container') const header = document.getElementById('header') @@ -41,9 +32,7 @@ fetch(API_USER, options)

${data.login}

GitHub Tracker

${data.bio}

-
- - ` +
` }) fetch(API_REPOS, options) @@ -55,9 +44,8 @@ fetch(API_USER, options) const technigoRepositories = data.filter(repo => repo.name.includes('project-') && repo.fork === true) - console.log(technigoRepositories) technigoRepositories.forEach((repo) => { - container.innerHTML += ` + container.innerHTML += `

${repo.name}

${repo.description}

@@ -68,20 +56,14 @@ fetch(API_USER, options)

• Number of commits:

Link to Repo

-
` - - }) drawChart(technigoRepositories.length) // Calling the chart getPullRequests(technigoRepositories) // Calling the pull req and commits function }) - //Remember to pass along your filtered repos as an argument when -//you are calling this function - const getPullRequests = (repos) => { //Get all the PRs for each project. repos.forEach(repo => { diff --git a/code/style.css b/code/style.css index 0847dad2..f7ca9bde 100644 --- a/code/style.css +++ b/code/style.css @@ -65,8 +65,6 @@ body { padding: 20px; margin: 150px; width: 80vw; - /* border: 1px solid black; */ - } .technigo-repos { @@ -138,6 +136,8 @@ a:visited, a:link { } +/* ANIMATIONS */ + @keyframes colorChange { 0% {background-color: #f7f1f0;} 25% {background-color: #e1c8c4;} From 1999c36d2e96af69c2cfca66235bbb93c5fc2591 Mon Sep 17 00:00:00 2001 From: Neaa99 Date: Fri, 25 Feb 2022 13:27:40 +0100 Subject: [PATCH 21/25] Updated ReadMe --- README.md | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 1613a3b0..c1293a57 100644 --- a/README.md +++ b/README.md @@ -2,12 +2,16 @@ 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 week I made a Github tracker, were you can through my Technigo repositories. It also includes a chart of compleated and remaining projects in the Bootcamp. + +Made with JS, using API and authorization keys. ## 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? +This week has been a good week were I found the project fun and fairly easy. I feel like I understand API and how to wotk with them. I had a bit issue with the authorization key/token, but managed to make it work! + ## 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://project-github-tracker-linnea-frisk.netlify.app/ From e8f3da3f0fca57582146c4df38193bfa8e489450 Mon Sep 17 00:00:00 2001 From: Linnea Frisk <86744042+Neaa99@users.noreply.github.com> Date: Fri, 25 Feb 2022 13:31:16 +0100 Subject: [PATCH 22/25] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index c1293a57..71d9e516 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ Replace this readme with your own information about your project. -This week I made a Github tracker, were you can through my Technigo repositories. It also includes a chart of compleated and remaining projects in the Bootcamp. +This week I made a Github tracker, were you can scroll through my Technigo repositories. It also includes a chart of compleated and remaining projects in the Bootcamp. Made with JS, using API and authorization keys. @@ -10,7 +10,7 @@ Made with JS, using API and authorization keys. 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? -This week has been a good week were I found the project fun and fairly easy. I feel like I understand API and how to wotk with them. I had a bit issue with the authorization key/token, but managed to make it work! +This week has been a good week were I found the project fun and fairly easy. I feel like I understand API and how to work with them. I had a bit issue with the authorization key/token, but managed to make it work! ## View it live From 00b4257526a92ed2b8e3fc98cfdf7c04db3c6d91 Mon Sep 17 00:00:00 2001 From: Neaa99 Date: Thu, 31 Mar 2022 14:25:50 +0200 Subject: [PATCH 23/25] updated readme --- README.md | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/README.md b/README.md index 71d9e516..e173a428 100644 --- a/README.md +++ b/README.md @@ -1,17 +1,11 @@ # GitHub Tracker -Replace this readme with your own information about your project. +Week 7 @ Technigo Bootcamp This week I made a Github tracker, were you can scroll through my Technigo repositories. It also includes a chart of compleated and remaining projects in the Bootcamp. Made with JS, using API and authorization keys. -## 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? - -This week has been a good week were I found the project fun and fairly easy. I feel like I understand API and how to work with them. I had a bit issue with the authorization key/token, but managed to make it work! - ## View it live https://project-github-tracker-linnea-frisk.netlify.app/ From 33f06f0b2578fe502feef5b29e22f0fe6d05b5d9 Mon Sep 17 00:00:00 2001 From: Neaa99 Date: Wed, 18 May 2022 13:40:34 +0200 Subject: [PATCH 24/25] Added OG tags --- code/index.html | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/code/index.html b/code/index.html index 3b7562c2..47923492 100644 --- a/code/index.html +++ b/code/index.html @@ -5,6 +5,13 @@ + + + + + + + From f3af10062b8659ba177bf4b4a179d4aa33ef5f69 Mon Sep 17 00:00:00 2001 From: Neaa99 Date: Tue, 16 Aug 2022 14:10:24 +0200 Subject: [PATCH 25/25] 19 rep to 18, weather gone, don't now why --- code/chart.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/chart.js b/code/chart.js index 6369b90d..68c2dc68 100644 --- a/code/chart.js +++ b/code/chart.js @@ -16,7 +16,7 @@ const labels = [ label: 'My First dataset', backgroundColor: ['#B6766D', '#F8E8DE'], borderColor: '#f7e9e7', - data: [repos, 19-repos], + data: [repos, 18-repos], }] };