From aebb268492047ae16e12dbd9f08e233430013b0a Mon Sep 17 00:00:00 2001 From: Rephili <72921631+Rephili@users.noreply.github.com> Date: Wed, 29 Sep 2021 17:20:23 +0200 Subject: [PATCH 1/8] started with and finished the api parts --- .DS_Store | Bin 0 -> 6148 bytes code/script.js | 63 +++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 63 insertions(+) create mode 100644 .DS_Store diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..4133f64bac1c6646db447b3b0ea2eefe40acfe07 GIT binary patch literal 6148 zcmeHK!EVz)5S>j^Sf{GUp%Oj%!Y!)OHY(zPUXNp6%hu60byWy8SqD;UR&N*ls6Lwgn@s=0G|&blri#HJG4g!8e0MY`8U!EZ2RjE z4A}vUJk}23fhd;>bg9ah7|K@;%B5pG^6|Apmrlw)8T0rjD_@}~UwEj{hLegMN-GQq z1J@Z?aoslG{|9&1|JReGCkzM!{}ltOIfw^+EXm)kw-(2DZ3sPuvT$7OaFGJTUd4#z dt9TP?1^$o?VC1oO2oFSl1S}2G2m^nWfh%I^XQTiC literal 0 HcmV?d00001 diff --git a/code/script.js b/code/script.js index e69de29b..951b289b 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,63 @@ +const user = "Rephili"; +const REPOS_URL = `https://api.github.com/users/${user}/repos`; +const projectsContainer = document.getElementById("projects"); + +// Function to fetch all my repositories and then filter out the forked projects from Technigo +const fetchRepos = () => { + fetch(REPOS_URL) + .then((response) => response.json()) + .then((data) => { + const technigoProjects = data.filter( + (repo) => repo.name.startsWith("project-") && repo.fork + ); + + // InnerHTML to make all the projects show on the page + technigoProjects.forEach((repo) => { + projectsContainer.innerHTML += ` +
+ ${repo.name} +

Default branch for this project is ${ + repo.default_branch + }

+

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

+

Amount of Commits:

+
+ `; + }); + + fetchPullRequests(technigoProjects); + }); +}; + +const fetchPullRequests = (allRepositories) => { + allRepositories.forEach((repo) => { + const PULL_URL = `https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`; + + fetch(PULL_URL) + .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 = + "No pull request yet or group project"; + } + }); + }); +}; + +const fetchCommits = (myCommitsUrl, myRepoName) => { + fetch(myCommitsUrl) + .then((response) => response.json()) + .then((data) => { + document.getElementById(`commit-${myRepoName}`).innerHTML += data.length; + }); +}; + +fetchRepos(); From 341134bea65ade2380f4e433e2242228bc8b7af0 Mon Sep 17 00:00:00 2001 From: Rephili <72921631+Rephili@users.noreply.github.com> Date: Fri, 1 Oct 2021 14:54:22 +0200 Subject: [PATCH 2/8] added a chart --- .DS_Store | Bin 6148 -> 6148 bytes code/chart.js | 22 +++++++++++++++++++--- code/index.html | 37 ++++++++++++++++++++----------------- code/style.css | 30 ++++++++++++++++++++++++++++-- 4 files changed, 67 insertions(+), 22 deletions(-) diff --git a/.DS_Store b/.DS_Store index 4133f64bac1c6646db447b3b0ea2eefe40acfe07..4fee640ec52e7debe24992befdba1638f6587ebc 100644 GIT binary patch delta 46 zcmZoMXffE}&BSrAqYGbVp!l4qQ`S(Nz`%Vsu?fBXPi CmJad& delta 97 zcmZoMXffE}&BS(r$lwNiJ6Ixf|0pNt&T#qrICS-f{C$NZ7nBM8XF_ge hRdr2m-Ao2BU}S{Q4E#_UM$OtR!u*M4Gdss$egKr86uAHZ diff --git a/code/chart.js b/code/chart.js index 92e85a30..6eed9b9a 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,20 @@ -//DOM-selector for the canvas 👇 -const ctx = document.getElementById('chart').getContext('2d') +//DOM-selector +const ctx = document.getElementById("chart").getContext("2d"); -//"Draw" the chart here 👇 +//The chart +const config = { + type: "pie", + data: { + labels: ["Finished projects", "Projects left"], + datasets: [ + { + label: "My First Dataset", + data: [5, 19 - 5], + backgroundColor: ["#ee6c4d", "#3d5a80"], + hoverOffset: 4, + }, + ], + }, +}; + +const myChart = new Chart(ctx, config); diff --git a/code/index.html b/code/index.html index 2fb5e0ae..0aa690cd 100644 --- a/code/index.html +++ b/code/index.html @@ -1,21 +1,24 @@ - - - - - Project GitHub Tracker - - - -

GitHub Tracker

-

Projects:

-
+ + + + + Project GitHub Tracker + + + + +

GitHub Tracker

+

Projects:

+
- - + +
+ +
- - - - \ No newline at end of file + + + + diff --git a/code/style.css b/code/style.css index 7c8ad447..e9ae0b9c 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,29 @@ body { - background: #FFECE9; -} \ No newline at end of file + background: #e0fbfc; +} + +h1 { + color: #293241; +} + +h2 { + color: #88b7d3; +} + +.chart { + margin: auto; + width: 80%; + margin-bottom: 40px; +} + +@media (min-width: 768px) { + .chart { + width: 50%; + } +} + +@media (min-width: 999px) { + .chart { + width: 30%; + } +} From c2015709c63322d8f1eaacf6d68932f9dd49a47f Mon Sep 17 00:00:00 2001 From: Rephili <72921631+Rephili@users.noreply.github.com> Date: Fri, 1 Oct 2021 16:04:36 +0200 Subject: [PATCH 3/8] added user info --- code/index.html | 3 +++ code/script.js | 20 ++++++++++++++++++++ code/style.css | 4 ++++ 3 files changed, 27 insertions(+) diff --git a/code/index.html b/code/index.html index 0aa690cd..953a57dd 100644 --- a/code/index.html +++ b/code/index.html @@ -10,6 +10,9 @@

GitHub Tracker

+ + +

Projects:

diff --git a/code/script.js b/code/script.js index 951b289b..ccdf6570 100644 --- a/code/script.js +++ b/code/script.js @@ -1,6 +1,26 @@ const user = "Rephili"; const REPOS_URL = `https://api.github.com/users/${user}/repos`; const projectsContainer = document.getElementById("projects"); +const USER_URL = `https://api.github.com/users/${user}`; +const userContainer = document.getElementById("userProfile"); + +//Picture, name and location +const userProfile = () => { + fetch(USER_URL) + .then((res) => res.json()) + .then((data) => { + userContainer.innerHTML = ` +
+
+

${data.name}

+ @${data.login} +

${data.location}

+
+ `; + }); +}; + +userProfile(); // Function to fetch all my repositories and then filter out the forked projects from Technigo const fetchRepos = () => { diff --git a/code/style.css b/code/style.css index e9ae0b9c..4a1b6d55 100644 --- a/code/style.css +++ b/code/style.css @@ -6,6 +6,10 @@ h1 { color: #293241; } +.userimg img { + border-radius: 50%; +} + h2 { color: #88b7d3; } From eae880f08e54144913c3904147491dc383334a80 Mon Sep 17 00:00:00 2001 From: Rephili <72921631+Rephili@users.noreply.github.com> Date: Sun, 3 Oct 2021 15:09:04 +0200 Subject: [PATCH 4/8] added some styling --- README.md | 4 ++ code/index.html | 14 ++++-- code/script.js | 14 +++--- code/style.css | 125 ++++++++++++++++++++++++++++++++++++++++++++++-- 4 files changed, 144 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 1613a3b0..0e0c85f6 100644 --- a/README.md +++ b/README.md @@ -4,10 +4,14 @@ 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. +The assignment this week was to create a page that keeps track of the repositories that I have forked and worked on during the Technigo Bootcamp. + ## 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 out by breaking down the project in smaller pieces and focused on fetching all the API:s. It was sometimes hard to understand where to place the different chunks of code and where to call the functions. This week my goal was to meet the basic requirements. If I had more time I would add some more information to the repos, for example display the commit messages and/or the comments from each pull request. I would also do some more styling in CSS. + ## 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. diff --git a/code/index.html b/code/index.html index 953a57dd..2b094163 100644 --- a/code/index.html +++ b/code/index.html @@ -9,12 +9,18 @@ -

GitHub Tracker

- - +
+ +

GitHub Tracker

+
+

Projects:

-
+
diff --git a/code/script.js b/code/script.js index ccdf6570..82b9c735 100644 --- a/code/script.js +++ b/code/script.js @@ -4,7 +4,7 @@ const projectsContainer = document.getElementById("projects"); const USER_URL = `https://api.github.com/users/${user}`; const userContainer = document.getElementById("userProfile"); -//Picture, name and location +//User information: profile image, name and location const userProfile = () => { fetch(USER_URL) .then((res) => res.json()) @@ -13,8 +13,8 @@ const userProfile = () => {

${data.name}

- @${data.login} -

${data.location}

+ @${data.login} +

📍 ${data.location}

`; }); @@ -22,7 +22,7 @@ const userProfile = () => { userProfile(); -// Function to fetch all my repositories and then filter out the forked projects from Technigo +//Function to fetch all my repositories and then filter out the forked projects from Technigo const fetchRepos = () => { fetch(REPOS_URL) .then((response) => response.json()) @@ -34,8 +34,8 @@ const fetchRepos = () => { // InnerHTML to make all the projects show on the page technigoProjects.forEach((repo) => { projectsContainer.innerHTML += ` -
- ${repo.name} +
+ ${repo.name}

Default branch for this project is ${ repo.default_branch }

@@ -51,6 +51,7 @@ const fetchRepos = () => { }); }; +//Function to get the pull requests for each project const fetchPullRequests = (allRepositories) => { allRepositories.forEach((repo) => { const PULL_URL = `https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`; @@ -72,6 +73,7 @@ const fetchPullRequests = (allRepositories) => { }); }; +//Function to get the amount of commits const fetchCommits = (myCommitsUrl, myRepoName) => { fetch(myCommitsUrl) .then((response) => response.json()) diff --git a/code/style.css b/code/style.css index 4a1b6d55..ebd6e4eb 100644 --- a/code/style.css +++ b/code/style.css @@ -1,26 +1,100 @@ body { background: #e0fbfc; + font-family: "Sora", sans-serif; + color: #293241; + margin: 0; +} + +.githublogo { + width: 30px; + height: 30px; } h1 { - color: #293241; + text-align: center; +} + +.userinfo { + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; } .userimg img { border-radius: 50%; + width: 300px; + height: 300px; + object-fit: cover; } h2 { - color: #88b7d3; + text-align: center; +} + +.projectscontainer { + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; +} + +.projectinfo { + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; + background-color: #88b7d3; + width: 350px; + height: 200px; + margin-bottom: 20px; + box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%); + border-radius: 10px; + opacity: 0.85; + transition: 0.5s; +} + +.projectinfo:nth-child(6) { + margin-bottom: 40px; +} + +.repolink { + text-decoration: none; + color: #293241; + font-weight: bold; +} + +.repolink:visited { + text-decoration: none; + color: #293241; +} + +.repolink:hover { + text-decoration: underline; + color: #ee6c4d; } .chart { - margin: auto; width: 80%; margin-bottom: 40px; + margin: auto; } @media (min-width: 768px) { + .projectscontainer { + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .projectinfo:nth-last-child(-n + 2) { + margin-bottom: 60px; + } + + .projectinfo { + width: 40%; + } + .chart { width: 50%; } @@ -30,4 +104,49 @@ h2 { .chart { width: 30%; } + + .projectinfo:hover { + transform: scale(1.04); + } + + .heroimage { + background: linear-gradient(rgba(44, 40, 27, 0.39), rgba(41, 37, 25, 0.76)), + url("https://images.unsplash.com/photo-1607970669494-309137683be5?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1470&q=80"); + height: 60vh; + background-position: center; + background-repeat: no-repeat; + background-size: cover; + border: transparent; + position: relative; + } + + h1 { + color: #ee6c4d; + text-align: start; + display: inline; + letter-spacing: 2px; + position: absolute; + margin-left: 20px; + text-shadow: 1px 1px 1px #293241; + } + + .userinfo { + color: #ee6c4d; + } + + .userlink { + color: #ee6c4d; + } + + .userlink:visited { + color: #ee6c4d; + } + + .userlink:hover { + color: #88b7d3; + } + + .userinfo { + padding-top: 20px; + } } From 75b17e26fc348ea552a4d9288cf7fcd2ba55891c Mon Sep 17 00:00:00 2001 From: Rephili <72921631+Rephili@users.noreply.github.com> Date: Sun, 3 Oct 2021 18:27:03 +0200 Subject: [PATCH 5/8] improved the responsiveness --- code/index.html | 19 ++++++++++++++----- code/style.css | 28 +++++++++++++++++++++++----- 2 files changed, 37 insertions(+), 10 deletions(-) diff --git a/code/index.html b/code/index.html index 2b094163..45a8cbd0 100644 --- a/code/index.html +++ b/code/index.html @@ -9,20 +9,29 @@ + +
+

GitHub Tracker

+
+
+
+ + + +
-

GitHub Tracker

-
+

Projects:

-

Projects:

- + +
diff --git a/code/style.css b/code/style.css index ebd6e4eb..cd876608 100644 --- a/code/style.css +++ b/code/style.css @@ -28,8 +28,24 @@ h1 { object-fit: cover; } +hr { + width: 200px; + height: 2px; + background-color: #3d5a80; + border-radius: 5px; + line-height: 2px; + opacity: 0.85; +} + +.logowrapper { + display: flex; + justify-content: center; + align-items: center; +} + h2 { - text-align: center; + display: inline; + margin-left: 5px; } .projectscontainer { @@ -37,6 +53,7 @@ h2 { justify-content: center; flex-direction: column; align-items: center; + width: 100%; } .projectinfo { @@ -45,7 +62,7 @@ h2 { flex-direction: column; align-items: center; background-color: #88b7d3; - width: 350px; + width: 90%; height: 200px; margin-bottom: 20px; box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%); @@ -85,6 +102,7 @@ h2 { flex-direction: row; flex-wrap: wrap; justify-content: space-evenly; + margin-top: 20px; } .projectinfo:nth-last-child(-n + 2) { @@ -112,7 +130,7 @@ h2 { .heroimage { background: linear-gradient(rgba(44, 40, 27, 0.39), rgba(41, 37, 25, 0.76)), url("https://images.unsplash.com/photo-1607970669494-309137683be5?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1470&q=80"); - height: 60vh; + height: 65vh; background-position: center; background-repeat: no-repeat; background-size: cover; @@ -125,9 +143,9 @@ h2 { text-align: start; display: inline; letter-spacing: 2px; + text-shadow: 1px 1px 1px #293241; position: absolute; margin-left: 20px; - text-shadow: 1px 1px 1px #293241; } .userinfo { @@ -147,6 +165,6 @@ h2 { } .userinfo { - padding-top: 20px; + padding-top: 30px; } } From 4ff258a496e75392a77b08b4945e3686cd4ddaf7 Mon Sep 17 00:00:00 2001 From: Rephili <72921631+Rephili@users.noreply.github.com> Date: Sun, 3 Oct 2021 20:27:05 +0200 Subject: [PATCH 6/8] finished the last styling and readme --- README.md | 12 ++---------- code/index.html | 2 +- code/script.js | 2 +- code/style.css | 35 +++++++++++++++++++++++++++-------- 4 files changed, 31 insertions(+), 20 deletions(-) diff --git a/README.md b/README.md index 0e0c85f6..616d862b 100644 --- a/README.md +++ b/README.md @@ -1,17 +1,9 @@ # 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. - -The assignment this week was to create a page that keeps track of the repositories that I have forked and worked on during the Technigo Bootcamp. +The assignment this week was to create a page that keeps track of the repositories that I have forked and worked on during the Technigo Bootcamp. The project allowed me to get a deeper knowledge of how to use API:s. ## 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 out by breaking down the project in smaller pieces and focused on fetching all the API:s. It was sometimes hard to understand where to place the different chunks of code and where to call the functions. This week my goal was to meet the basic requirements. If I had more time I would add some more information to the repos, for example display the commit messages and/or the comments from each pull request. I would also do some more styling in CSS. +I started out by breaking down the project in smaller pieces and focused on fetching all the API:s. It was sometimes hard to understand where to place the different chunks of code in Javascript, for example where to call the functions and grasp how everything should be connected. If I had more time I would add some more information to the repos, for example display the commit messages and/or the comments from each pull request. ## 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. diff --git a/code/index.html b/code/index.html index 45a8cbd0..4c0dfe2f 100644 --- a/code/index.html +++ b/code/index.html @@ -31,7 +31,7 @@

Projects:

- +
diff --git a/code/script.js b/code/script.js index 82b9c735..e52c7ac9 100644 --- a/code/script.js +++ b/code/script.js @@ -31,7 +31,7 @@ const fetchRepos = () => { (repo) => repo.name.startsWith("project-") && repo.fork ); - // InnerHTML to make all the projects show on the page + // InnerHTML to make all the projects and the info show on the page technigoProjects.forEach((repo) => { projectsContainer.innerHTML += `
diff --git a/code/style.css b/code/style.css index cd876608..4bda5488 100644 --- a/code/style.css +++ b/code/style.css @@ -28,9 +28,24 @@ h1 { object-fit: cover; } +.userlink { + text-decoration: none; + color: #293241; +} + +.userlink:visited { + text-decoration: none; + color: #293241; +} + +.userlink:hover { + text-decoration: underline; + color: #ee6c4d; +} + hr { width: 200px; - height: 2px; + height: 1px; background-color: #3d5a80; border-radius: 5px; line-height: 2px; @@ -118,13 +133,9 @@ h2 { } } -@media (min-width: 999px) { - .chart { - width: 30%; - } - - .projectinfo:hover { - transform: scale(1.04); +@media (min-width: 992px) { + hr { + display: none; } .heroimage { @@ -167,4 +178,12 @@ h2 { .userinfo { padding-top: 30px; } + + .projectinfo:hover { + transform: scale(1.04); + } + + .chart { + width: 30%; + } } From 2c5a4ebc5577d347bd5ac038fb16a8f045197a06 Mon Sep 17 00:00:00 2001 From: Rephili <72921631+Rephili@users.noreply.github.com> Date: Fri, 15 Oct 2021 13:54:49 +0200 Subject: [PATCH 7/8] added a function for the chart --- code/chart.js | 31 ++++++++++++++++--------------- code/script.js | 1 + 2 files changed, 17 insertions(+), 15 deletions(-) diff --git a/code/chart.js b/code/chart.js index 6eed9b9a..12278464 100644 --- a/code/chart.js +++ b/code/chart.js @@ -2,19 +2,20 @@ const ctx = document.getElementById("chart").getContext("2d"); //The chart -const config = { - type: "pie", - data: { - labels: ["Finished projects", "Projects left"], - datasets: [ - { - label: "My First Dataset", - data: [5, 19 - 5], - backgroundColor: ["#ee6c4d", "#3d5a80"], - hoverOffset: 4, - }, - ], - }, +const drawChart = (number) => { + const config = { + type: "pie", + data: { + labels: ["Finished projects", "Projects left"], + datasets: [ + { + label: "My First Dataset", + data: [number, 19 - number], + backgroundColor: ["#ee6c4d", "#3d5a80"], + hoverOffset: 4, + }, + ], + }, + }; + const myChart = new Chart(ctx, config); }; - -const myChart = new Chart(ctx, config); diff --git a/code/script.js b/code/script.js index e52c7ac9..81e4e866 100644 --- a/code/script.js +++ b/code/script.js @@ -30,6 +30,7 @@ const fetchRepos = () => { const technigoProjects = data.filter( (repo) => repo.name.startsWith("project-") && repo.fork ); + drawChart(technigoProjects.length); // InnerHTML to make all the projects and the info show on the page technigoProjects.forEach((repo) => { From c525029b931ddb2f5625c533eae0744c5ea2723d Mon Sep 17 00:00:00 2001 From: Rephili <72921631+Rephili@users.noreply.github.com> Date: Fri, 15 Oct 2021 13:58:28 +0200 Subject: [PATCH 8/8] added the link to netlify --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 616d862b..d44952a8 100644 --- a/README.md +++ b/README.md @@ -7,3 +7,5 @@ The assignment this week was to create a page that keeps track of the repositori I started out by breaking down the project in smaller pieces and focused on fetching all the API:s. It was sometimes hard to understand where to place the different chunks of code in Javascript, for example where to call the functions and grasp how everything should be connected. If I had more time I would add some more information to the repos, for example display the commit messages and/or the comments from each pull request. ## View it live + +https://github-tracker-rephili.netlify.app/