From 556b3a95a6a8437ebe8a041f52febbc9f97026ee Mon Sep 17 00:00:00 2001 From: Bruna Santos Araujo Date: Tue, 28 Sep 2021 18:34:09 +0200 Subject: [PATCH 01/10] initial data --- code/chart.js | 23 ++++++++++++++++- code/index.html | 37 ++++++++++++++------------- code/script.js | 66 +++++++++++++++++++++++++++++++++++++++++++++++++ code/style.css | 12 ++++++--- 4 files changed, 117 insertions(+), 21 deletions(-) diff --git a/code/chart.js b/code/chart.js index 92e85a30..c717466a 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,25 @@ //DOM-selector for the canvas 👇 -const ctx = document.getElementById('chart').getContext('2d') +const ctx = document.getElementById("chart").getContext("2d"); //"Draw" the chart here 👇 + +const drawChart = (amount) => { + const data = { + labels: ["Fineshed Projects", "Total Projects"], + datasets: [ + { + label: "My First Dataset", + data: [amount, 20 - amount], + backgroundColor: ["rgb(255, 99, 132)", "rgb(54, 162, 235)"], + hoverOffset: 4, + }, + ], + }; + + const config = { + type: "doughnut", + data: data, + }; + + const myChart = new Chart(ctx, config); +}; diff --git a/code/index.html b/code/index.html index 2fb5e0ae..e9298e44 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:

+
- - + +

Progress:

+ - - - - \ No newline at end of file + + + + diff --git a/code/script.js b/code/script.js index e69de29b..d2505a37 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,66 @@ +// -- DOM SELECTORS -- // +const projectsContainer = document.getElementById("projects"); +const profileInfo = document.getElementById("profileInfo"); + +// -- GLOBAL VARIABLES -- // +const USER = "brunsant"; +const REPOS_URL = `https://api.github.com/users/${USER}/repos`; +const USER_API = `https://api.github.com/users/${USER}`; + +// -- REPOS -- // +const getRepos = () => { + fetch(REPOS_URL) + .then((response) => { + return response.json(); + }) + .then((json) => { + console.log("DATA", json); + const forkedRepos = json.filter( + (repo) => repo.fork && repo.name.startsWith("project-") + ); + + forkedRepos.forEach((repo) => { + let currentProject = repo.name; + const COMMIT_URL = `https://api.github.com/repos/${USER}/${currentProject}/commits`; + fetch(COMMIT_URL) + .then((response) => { + return response.json(); + }) + .then((json) => { + console.log("COMMITS", json); + const filteredCommits = json.filter( + (repo) => repo.commit.committer.name === "Bruna Santos" + ); + // let commitDate = filteredCommits[0].commit.author.date; + // let commitMessage = filteredCommits[0].commit.message; + + projectsContainer.innerHTML += ` +
+

Project Name: ${repo.name}

+ ${repo.name} +

Main branch: ${repo.default_branch}

+
+ `; + }); + }); + drawChart(forkedRepos.length); + }); +}; + +// -- PROFILE INFO -- // +const getUser = () => { + fetch(USER_API) + .then((response) => response.json()) + .then((data) => { + console.log("USER DATA", data); + profileInfo.innerHTML = ` +

Profile Info

+ +

${data.name}

+

${data.login}

+ `; + }); +}; + +getRepos(); +getUser(); diff --git a/code/style.css b/code/style.css index 7c8ad447..3fcc28b6 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,9 @@ -body { - background: #FFECE9; -} \ No newline at end of file +* { + border: 1px solid black; +} + +img { + width: 150px; + display: block; + border-radius: 50%; +} From 972f0c4650ebd1f6e03d4a41c2bb01ff47f96511 Mon Sep 17 00:00:00 2001 From: Bruna Santos Araujo Date: Tue, 28 Sep 2021 22:52:28 +0200 Subject: [PATCH 02/10] commit data --- code/script.js | 55 ++++++++++++++++++++++++++++++++++++++------------ 1 file changed, 42 insertions(+), 13 deletions(-) diff --git a/code/script.js b/code/script.js index d2505a37..707a99d1 100644 --- a/code/script.js +++ b/code/script.js @@ -16,12 +16,11 @@ const getRepos = () => { .then((json) => { console.log("DATA", json); const forkedRepos = json.filter( - (repo) => repo.fork && repo.name.startsWith("project-") + (project) => project.fork && project.name.startsWith("project-") ); - forkedRepos.forEach((repo) => { - let currentProject = repo.name; - const COMMIT_URL = `https://api.github.com/repos/${USER}/${currentProject}/commits`; + forkedRepos.forEach((project) => { + const COMMIT_URL = `https://api.github.com/repos/${USER}/${project.name}/commits`; fetch(COMMIT_URL) .then((response) => { return response.json(); @@ -29,24 +28,54 @@ const getRepos = () => { .then((json) => { console.log("COMMITS", json); const filteredCommits = json.filter( - (repo) => repo.commit.committer.name === "Bruna Santos" + (project) => project.commit.author.name === "Bruna Santos Araujo" ); - // let commitDate = filteredCommits[0].commit.author.date; - // let commitMessage = filteredCommits[0].commit.message; + console.log("FILTERED", filteredCommits); + console.log("NUMBER OF COMMITS", filteredCommits.length); + // console.log("COMMIT MESSAGE", filteredCommits.commit.message); + //TRYING TO PUT THE MESSAGE ON THE LAST COMMIT// projectsContainer.innerHTML += ` -
-

Project Name: ${repo.name}

- ${repo.name} -

Main branch: ${repo.default_branch}

-
- `; +
+

Project Name: ${project.name}

+ ${project.name} +

Main branch: ${project.default_branch}

+

Number of commits: ${filteredCommits.length}

+

Latest push: ${project.pushed_at.slice( + 0, + 10 + )}, ${project.pushed_at.slice(11, 16)} +

+
+ `; + + // const getPulls = (forkedRepos) => { + // forkedRepos.forEach((project) => { + // fetch( + // `https://api.github.com/repos/technigo/${project.name}/pulls` + // ) + // .then((response) => response.json()) + // .then((data) => { + // console.log("PULLS", data); + // }); + // }); + // }; }); }); drawChart(forkedRepos.length); }); }; +// const getPulls = (forkedRepos) => { +// forkedRepos.forEach((project) => { +// fetch(`https://api.github.com/repos/technigo/${project.name}/pulls`) +// .then((response) => response.json()) +// .then((data) => { +// console.log("PULLS", data); +// }); +// }); +// }; + // -- PROFILE INFO -- // const getUser = () => { fetch(USER_API) From 7ab1cadaba6717df83d26cb04a48f570ddb817a5 Mon Sep 17 00:00:00 2001 From: Bruna Santos Araujo Date: Wed, 29 Sep 2021 18:17:05 +0200 Subject: [PATCH 03/10] JS blue requeriments --- code/chart.js | 4 +-- code/index.html | 25 ++++++++----- code/script.js | 94 +++++++++++++++++++++++++++---------------------- code/style.css | 36 +++++++++++++++++-- 4 files changed, 105 insertions(+), 54 deletions(-) diff --git a/code/chart.js b/code/chart.js index c717466a..6178e00d 100644 --- a/code/chart.js +++ b/code/chart.js @@ -5,12 +5,12 @@ const ctx = document.getElementById("chart").getContext("2d"); const drawChart = (amount) => { const data = { - labels: ["Fineshed Projects", "Total Projects"], + labels: ["Finished Projects", "Total Projects"], datasets: [ { label: "My First Dataset", data: [amount, 20 - amount], - backgroundColor: ["rgb(255, 99, 132)", "rgb(54, 162, 235)"], + backgroundColor: ["#8AA2A0", "#D6A495"], hoverOffset: 4, }, ], diff --git a/code/index.html b/code/index.html index e9298e44..72db09c2 100644 --- a/code/index.html +++ b/code/index.html @@ -9,15 +9,24 @@ -

GitHub Tracker

-

-

Projects:

-
- - -

Progress:

- +
+
+

GitHub Tracker

+
+
+ +
+
+

Progress:

+ +
+
+

Projects:

+
+
+ +
diff --git a/code/script.js b/code/script.js index 707a99d1..f9f792e3 100644 --- a/code/script.js +++ b/code/script.js @@ -2,11 +2,26 @@ const projectsContainer = document.getElementById("projects"); const profileInfo = document.getElementById("profileInfo"); -// -- GLOBAL VARIABLES -- // +// -- API -- // const USER = "brunsant"; const REPOS_URL = `https://api.github.com/users/${USER}/repos`; const USER_API = `https://api.github.com/users/${USER}`; +// -- PROFILE INFO -- // +const getUser = () => { + fetch(USER_API) + .then((response) => response.json()) + .then((data) => { + // console.log("USER DATA", data); + profileInfo.innerHTML += ` +

Profile Info

+ Profile picture +

${data.name}

+

${data.login}

+ `; + }); +}; + // -- REPOS -- // const getRepos = () => { fetch(REPOS_URL) @@ -14,11 +29,12 @@ const getRepos = () => { return response.json(); }) .then((json) => { - console.log("DATA", json); + // console.log("DATA", json); const forkedRepos = json.filter( (project) => project.fork && project.name.startsWith("project-") ); + // -- COMMIT -- forkedRepos.forEach((project) => { const COMMIT_URL = `https://api.github.com/repos/${USER}/${project.name}/commits`; fetch(COMMIT_URL) @@ -26,18 +42,22 @@ const getRepos = () => { return response.json(); }) .then((json) => { - console.log("COMMITS", json); + // console.log("COMMITS", json); const filteredCommits = json.filter( (project) => project.commit.author.name === "Bruna Santos Araujo" ); - console.log("FILTERED", filteredCommits); - console.log("NUMBER OF COMMITS", filteredCommits.length); - // console.log("COMMIT MESSAGE", filteredCommits.commit.message); - //TRYING TO PUT THE MESSAGE ON THE LAST COMMIT// + + const upperCaseName = + project.name.charAt(0).toUpperCase() + project.name.slice(1); + + // console.log("FILTERED", filteredCommits); + // console.log("NUMBER OF COMMITS", filteredCommits.length); projectsContainer.innerHTML += ` -
+
+

Project Name: ${project.name}

+
${project.name}

Main branch: ${project.default_branch}

Number of commits: ${filteredCommits.length}

@@ -46,49 +66,39 @@ const getRepos = () => { 10 )}, ${project.pushed_at.slice(11, 16)}

+

Pull request:

`; - - // const getPulls = (forkedRepos) => { - // forkedRepos.forEach((project) => { - // fetch( - // `https://api.github.com/repos/technigo/${project.name}/pulls` - // ) - // .then((response) => response.json()) - // .then((data) => { - // console.log("PULLS", data); - // }); - // }); - // }; }); }); + getPulls(forkedRepos); drawChart(forkedRepos.length); }); }; -// const getPulls = (forkedRepos) => { -// forkedRepos.forEach((project) => { -// fetch(`https://api.github.com/repos/technigo/${project.name}/pulls`) -// .then((response) => response.json()) -// .then((data) => { -// console.log("PULLS", data); -// }); -// }); -// }; +const getPulls = (forkedRepos) => { + forkedRepos.forEach((project) => { + fetch( + `https://api.github.com/repos/Technigo/${project.name}/pulls?per_page=100` + ) + .then((response) => response.json()) + .then((pulldata) => { + // console.log("PULLS", pulldata); + const myPullRequest = pulldata.find( + (pull) => pull.user.login === project.owner.login + ); + // console.log("MY PULL", myPullRequest); + // console.log("MY URL", myPullRequest.url); -// -- PROFILE INFO -- // -const getUser = () => { - fetch(USER_API) - .then((response) => response.json()) - .then((data) => { - console.log("USER DATA", data); - profileInfo.innerHTML = ` -

Profile Info

- -

${data.name}

-

${data.login}

- `; - }); + if (myPullRequest) { + document.getElementById(`pull-${project.name}`).innerHTML = ` + Pull request`; + } else { + document.getElementById(`pull-${project.name}`).innerHTML = ` + No pull request available`; + } + }); + }); }; getRepos(); diff --git a/code/style.css b/code/style.css index 3fcc28b6..6bd05ceb 100644 --- a/code/style.css +++ b/code/style.css @@ -1,9 +1,41 @@ -* { - border: 1px solid black; +body { + background-color: #d5dad6; +} + +h1 { + text-align: center; + color: #d6a495; +} + +.profile-container { + text-align: center; + color: #8aa2a0; } img { width: 150px; display: block; border-radius: 50%; + margin-left: 42%; + border: 1px solid white; +} + +h2 { + color: #d6a495; } + +.chart { + width: 30%; + align-items: center; +} + +/* .projects { + background-color: crimson; + span: 2; + border: 1px solid black; +} + +.chart { + margin: auto; + width: 80%; +} */ From 80430963cbf972bac6a86cd13620bd745019d714 Mon Sep 17 00:00:00 2001 From: Bruna Santos Araujo Date: Wed, 29 Sep 2021 20:44:00 +0200 Subject: [PATCH 04/10] mobile version --- code/index.html | 14 ++++++++---- code/script.js | 4 ++-- code/style.css | 59 +++++++++++++++++++++++++++++++++++++++---------- 3 files changed, 59 insertions(+), 18 deletions(-) diff --git a/code/index.html b/code/index.html index 72db09c2..13919b63 100644 --- a/code/index.html +++ b/code/index.html @@ -7,6 +7,12 @@ Project GitHub Tracker + + +
@@ -17,12 +23,12 @@

GitHub Tracker

-
-

Progress:

- +
+

Progress

+
-

Projects:

+

Projects

diff --git a/code/script.js b/code/script.js index f9f792e3..fcad8310 100644 --- a/code/script.js +++ b/code/script.js @@ -56,9 +56,9 @@ const getRepos = () => { projectsContainer.innerHTML += `
-

Project Name: ${project.name}

+

Project Name: ${upperCaseName}

- ${project.name} + ${upperCaseName}

Main branch: ${project.default_branch}

Number of commits: ${filteredCommits.length}

Latest push: ${project.pushed_at.slice( diff --git a/code/style.css b/code/style.css index 6bd05ceb..bd124edf 100644 --- a/code/style.css +++ b/code/style.css @@ -1,10 +1,18 @@ body { background-color: #d5dad6; + font-family: "Roboto Mono", monospace; + min-width: 325px; +} + +.big-container { + margin-bottom: 5%; } h1 { text-align: center; + font-size: 30px; color: #d6a495; + margin-top: 10%; } .profile-container { @@ -12,30 +20,57 @@ h1 { color: #8aa2a0; } +h4 { + font-size: 28px; + margin: 2% 0; +} + img { - width: 150px; - display: block; + width: 50%; + height: 50%; border-radius: 50%; - margin-left: 42%; border: 1px solid white; + filter: grayscale(40%); } h2 { color: #d6a495; + text-align: center; +} + +.chart-container { + width: 100%; + margin-bottom: 20%; } .chart { - width: 30%; + width: 20%; align-items: center; } -/* .projects { - background-color: crimson; - span: 2; - border: 1px solid black; +.projects { + border: 1px solid #b8c3bd; + color: #4a707a; + font-size: 17px; } -.chart { - margin: auto; - width: 80%; -} */ +/* unvisited link */ +a:link { + color: #8aa2a0; +} + +/* visited link */ +a:visited { + color: #8aa2a0; +} + +/* mouse over link */ +a:hover { + color: #d6a495; +} + +@media (min-width: 668px) and (max-width: 1024px) { +} + +@media (min-width: 1025px) { +} From f5225eb71c8cc964f453d65875472174eb7dcdf4 Mon Sep 17 00:00:00 2001 From: Bruna Santos Araujo Date: Wed, 29 Sep 2021 21:23:29 +0200 Subject: [PATCH 05/10] final mobile version --- code/index.html | 4 +++- code/style.css | 25 ++++++++++++++++++------- 2 files changed, 21 insertions(+), 8 deletions(-) diff --git a/code/index.html b/code/index.html index 13919b63..be3bf56d 100644 --- a/code/index.html +++ b/code/index.html @@ -29,7 +29,9 @@

Progress

Projects

-
+
+
+
diff --git a/code/style.css b/code/style.css index bd124edf..b78882db 100644 --- a/code/style.css +++ b/code/style.css @@ -5,7 +5,7 @@ body { } .big-container { - margin-bottom: 5%; + margin: 5% 0; } h1 { @@ -39,19 +39,19 @@ h2 { } .chart-container { - width: 100%; - margin-bottom: 20%; + width: 70%; + margin: 0 0 10% 15%; } -.chart { - width: 20%; - align-items: center; +.projects { + border-bottom: 1px solid #b8c3bd; } -.projects { +.projects-list { border: 1px solid #b8c3bd; color: #4a707a; font-size: 17px; + padding: 4%; } /* unvisited link */ @@ -72,5 +72,16 @@ a:hover { @media (min-width: 668px) and (max-width: 1024px) { } +.projects { + display: flex; + flex-direction: column; +} + +.projects-list { + display: flex; + flex-direction: row; + flex-wrap: wrap; +} + @media (min-width: 1025px) { } From c0e11b37d5e7c22015cfe16289f98567251ca327 Mon Sep 17 00:00:00 2001 From: Bruna Santos Araujo Date: Thu, 30 Sep 2021 11:34:17 +0200 Subject: [PATCH 06/10] tablet version --- code/index.html | 4 ++-- code/script.js | 4 +++- code/style.css | 43 +++++++++++++++++++++++++++++++++++++++---- 3 files changed, 44 insertions(+), 7 deletions(-) diff --git a/code/index.html b/code/index.html index be3bf56d..3298f1ce 100644 --- a/code/index.html +++ b/code/index.html @@ -27,8 +27,8 @@

GitHub Tracker

Progress

-
-

Projects

+

Projects

+
diff --git a/code/script.js b/code/script.js index fcad8310..d322fa40 100644 --- a/code/script.js +++ b/code/script.js @@ -58,6 +58,7 @@ const getRepos = () => {

Project Name: ${upperCaseName}

+
${upperCaseName}

Main branch: ${project.default_branch}

Number of commits: ${filteredCommits.length}

@@ -66,7 +67,8 @@ const getRepos = () => { 10 )}, ${project.pushed_at.slice(11, 16)}

-

Pull request:

+

+
`; }); diff --git a/code/style.css b/code/style.css index b78882db..c8b0cdb0 100644 --- a/code/style.css +++ b/code/style.css @@ -70,18 +70,53 @@ a:hover { } @media (min-width: 668px) and (max-width: 1024px) { + +h1{ + font-size: 45px; +} + +h4{ + font-size: 38px; +} + +img{ + width: 40%; + height: 40%; +} + +h2{ + font-size: 40px; +} + +.chart-container { + width: 50%; + margin: 5% 0 5% 27%; } .projects { - display: flex; - flex-direction: column; + display: grid; + grid-template-columns: 1fr 1fr; + border: 1px solid #b8c3bd; +} + +.project-header{ + font-size: 20px; } .projects-list { + display: grid; + grid-template-columns: 1fr; + width:100%; + height: 100%; + padding: 0; + font-size: 16px; +} + +.project-info{ display: flex; - flex-direction: row; - flex-wrap: wrap; + flex-direction: column; } + @media (min-width: 1025px) { } From 208eb73540bff26934e3ed9464a3ac4f3c79acde Mon Sep 17 00:00:00 2001 From: Bruna Santos Araujo Date: Thu, 30 Sep 2021 16:47:35 +0200 Subject: [PATCH 07/10] tablet version --- code/index.html | 24 +++++----- code/script.js | 7 +-- code/style.css | 123 ++++++++++++++++++++++++++++++------------------ 3 files changed, 92 insertions(+), 62 deletions(-) diff --git a/code/index.html b/code/index.html index 3298f1ce..35c26299 100644 --- a/code/index.html +++ b/code/index.html @@ -15,20 +15,22 @@ /> +
+

GitHub Tracker

+
-
-

GitHub Tracker

-
- -
- -
-
-

Progress

- +
+
+ +
+
+

Progress

+ +
-

Projects

+
+

Projects

diff --git a/code/script.js b/code/script.js index d322fa40..37047931 100644 --- a/code/script.js +++ b/code/script.js @@ -14,7 +14,7 @@ const getUser = () => { .then((data) => { // console.log("USER DATA", data); profileInfo.innerHTML += ` -

Profile Info

+

Profile Info

Profile picture

${data.name}

${data.login}

@@ -55,10 +55,7 @@ const getRepos = () => { projectsContainer.innerHTML += `
-

Project Name: ${upperCaseName}

-
-
${upperCaseName}

Main branch: ${project.default_branch}

Number of commits: ${filteredCommits.length}

@@ -68,7 +65,7 @@ const getRepos = () => { )}, ${project.pushed_at.slice(11, 16)}

-
+
`; }); diff --git a/code/style.css b/code/style.css index c8b0cdb0..3ee08688 100644 --- a/code/style.css +++ b/code/style.css @@ -52,6 +52,7 @@ h2 { color: #4a707a; font-size: 17px; padding: 4%; + height: 100%; } /* unvisited link */ @@ -70,53 +71,83 @@ a:hover { } @media (min-width: 668px) and (max-width: 1024px) { - -h1{ - font-size: 45px; -} - -h4{ - font-size: 38px; + h1 { + font-size: 45px; + } + + h4 { + font-size: 38px; + } + + img { + width: 40%; + height: 40%; + } + + h2 { + font-size: 40px; + } + + .chart-container { + width: 50%; + margin: 5% 0 5% 27%; + } + + .project-wrapper { + display: grid; + grid-template-columns: 1fr; + } + + .projects { + width: 100%; + border: 1px solid #b8c3bd; + display: grid; + grid-template-columns: 1fr; + text-align: center; + } } -img{ - width: 40%; - height: 40%; -} - -h2{ - font-size: 40px; -} - -.chart-container { - width: 50%; - margin: 5% 0 5% 27%; -} - -.projects { - display: grid; - grid-template-columns: 1fr 1fr; - border: 1px solid #b8c3bd; -} - -.project-header{ - font-size: 20px; -} - -.projects-list { - display: grid; - grid-template-columns: 1fr; - width:100%; - height: 100%; - padding: 0; - font-size: 16px; -} - -.project-info{ - display: flex; - flex-direction: column; -} - - @media (min-width: 1025px) { + .big-container { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + } + + h1 { + font-size: 60px; + margin-top: 4%; + } + + h4, + h2 { + font-size: 40px; + } + + .info-wrapper { + grid-column: span 1; + } + + .project-wrapper { + grid-column: span 2; + display: grid; + } + + .projects { + display: grid; + grid-template-columns: 1fr 1fr; + border: 1px solid #b8c3bd; + } + + .projects-list { + display: grid; + grid-template-columns: 1fr; + width: 200%; + padding: 0; + font-size: 16px; + } + + .project-info { + display: flex; + flex-direction: column; + } } From 5a016e30d2afe576a9dadfe2d90b373e80e00651 Mon Sep 17 00:00:00 2001 From: Bruna Santos Araujo Date: Fri, 1 Oct 2021 00:14:56 +0200 Subject: [PATCH 08/10] desktop version - blue requirements --- code/index.html | 4 ++-- code/script.js | 5 ++--- code/style.css | 48 ++++++++++++------------------------------------ 3 files changed, 16 insertions(+), 41 deletions(-) diff --git a/code/index.html b/code/index.html index 35c26299..79227601 100644 --- a/code/index.html +++ b/code/index.html @@ -19,7 +19,7 @@

GitHub Tracker

-
+
@@ -29,7 +29,7 @@

Progress

-
+

Projects

diff --git a/code/script.js b/code/script.js index 37047931..8fcf2d32 100644 --- a/code/script.js +++ b/code/script.js @@ -54,7 +54,7 @@ const getRepos = () => { // console.log("NUMBER OF COMMITS", filteredCommits.length); projectsContainer.innerHTML += ` -
+

Project Name: ${upperCaseName}

${upperCaseName}

Main branch: ${project.default_branch}

@@ -65,9 +65,8 @@ const getRepos = () => { )}, ${project.pushed_at.slice(11, 16)}

-
- `; + `; }); }); getPulls(forkedRepos); diff --git a/code/style.css b/code/style.css index 3ee08688..aebb1d95 100644 --- a/code/style.css +++ b/code/style.css @@ -1,6 +1,7 @@ body { background-color: #d5dad6; font-family: "Roboto Mono", monospace; + box-sizing: border-box; min-width: 325px; } @@ -43,10 +44,6 @@ h2 { margin: 0 0 10% 15%; } -.projects { - border-bottom: 1px solid #b8c3bd; -} - .projects-list { border: 1px solid #b8c3bd; color: #4a707a; @@ -54,6 +51,9 @@ h2 { padding: 4%; height: 100%; } +.projects-individual { + border-bottom: 1px solid #b8c3bd; +} /* unvisited link */ a:link { @@ -93,16 +93,7 @@ a:hover { margin: 5% 0 5% 27%; } - .project-wrapper { - display: grid; - grid-template-columns: 1fr; - } - - .projects { - width: 100%; - border: 1px solid #b8c3bd; - display: grid; - grid-template-columns: 1fr; + .projects-list { text-align: center; } } @@ -110,7 +101,8 @@ a:hover { @media (min-width: 1025px) { .big-container { display: grid; - grid-template-columns: 1fr 1fr 1fr; + grid-template-columns: 1fr 2fr; + margin: 2%; } h1 { @@ -123,31 +115,15 @@ a:hover { font-size: 40px; } - .info-wrapper { - grid-column: span 1; - } - - .project-wrapper { - grid-column: span 2; - display: grid; + .projects-list { + padding: 0 0 0 5%; + font-size: 16px; + border-bottom: 1px solid #b8c3bd; } .projects { display: grid; grid-template-columns: 1fr 1fr; - border: 1px solid #b8c3bd; - } - - .projects-list { - display: grid; - grid-template-columns: 1fr; - width: 200%; - padding: 0; - font-size: 16px; - } - - .project-info { - display: flex; - flex-direction: column; + /* text-align: center; */ } } From a9925a946f01a09604268c8e6820178e5034a02e Mon Sep 17 00:00:00 2001 From: Bruna Santos Araujo Date: Fri, 1 Oct 2021 11:37:00 +0200 Subject: [PATCH 09/10] fixed links --- code/script.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/code/script.js b/code/script.js index 8fcf2d32..80204f80 100644 --- a/code/script.js +++ b/code/script.js @@ -12,12 +12,12 @@ const getUser = () => { fetch(USER_API) .then((response) => response.json()) .then((data) => { - // console.log("USER DATA", data); + console.log("USER DATA", data); profileInfo.innerHTML += `

Profile Info

Profile picture

${data.name}

-

${data.login}

+

${data.login}

`; }); }; @@ -90,7 +90,7 @@ const getPulls = (forkedRepos) => { if (myPullRequest) { document.getElementById(`pull-${project.name}`).innerHTML = ` - Pull request`; + Pull request`; } else { document.getElementById(`pull-${project.name}`).innerHTML = ` No pull request available`; From d6064fd25597f735ec4a75130c6d1742ab9138de Mon Sep 17 00:00:00 2001 From: Bruna Santos Araujo Date: Fri, 1 Oct 2021 23:52:08 +0200 Subject: [PATCH 10/10] final version --- README.md | 8 +++----- code/index.html | 7 ++----- code/script.js | 13 +++---------- code/style.css | 30 +++++++++++++++++++++--------- 4 files changed, 29 insertions(+), 29 deletions(-) diff --git a/README.md b/README.md index 1613a3b0..4fb7d605 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,11 @@ # 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 assingment was to create a tracker for the projects we have done in the boot camp and pushed into Github. We should fetch multiple informations through API and display it in a responsive way for different sizes. ## 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 listing all the info we should fetch into small tasks and then I went through it step by step. The JavaScript part was challenging but I managed it without major problems. The styling was a little bit more complicated, being the biggest challange of the project for me. Having the HTML file and HTML inside the JavaScript made the styling more confusing, but with the help of my teammates I was able to complete the design I invisioned from the beginning. Another part that made it complicated was that the API kept having errors on the last days which made it more complicated to edit the code. If I had more time, I would probably try to add more information and features. ## 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://brunsant-githubtracker.netlify.app/ diff --git a/code/index.html b/code/index.html index 79227601..cd542f0b 100644 --- a/code/index.html +++ b/code/index.html @@ -4,7 +4,7 @@ - Project GitHub Tracker + GitHub Tracker @@ -20,9 +20,7 @@

GitHub Tracker

-
- -
+

Progress

@@ -35,7 +33,6 @@

Projects

-
diff --git a/code/script.js b/code/script.js index 80204f80..94a1a862 100644 --- a/code/script.js +++ b/code/script.js @@ -12,7 +12,6 @@ const getUser = () => { fetch(USER_API) .then((response) => response.json()) .then((data) => { - console.log("USER DATA", data); profileInfo.innerHTML += `

Profile Info

Profile picture @@ -29,12 +28,11 @@ const getRepos = () => { return response.json(); }) .then((json) => { - // console.log("DATA", json); const forkedRepos = json.filter( (project) => project.fork && project.name.startsWith("project-") ); - // -- COMMIT -- + // -- COMMIT -- // forkedRepos.forEach((project) => { const COMMIT_URL = `https://api.github.com/repos/${USER}/${project.name}/commits`; fetch(COMMIT_URL) @@ -42,17 +40,14 @@ const getRepos = () => { return response.json(); }) .then((json) => { - // console.log("COMMITS", json); const filteredCommits = json.filter( (project) => project.commit.author.name === "Bruna Santos Araujo" ); + // makes the first letter an upper case const upperCaseName = project.name.charAt(0).toUpperCase() + project.name.slice(1); - // console.log("FILTERED", filteredCommits); - // console.log("NUMBER OF COMMITS", filteredCommits.length); - projectsContainer.innerHTML += `

Project Name: ${upperCaseName}

@@ -74,6 +69,7 @@ const getRepos = () => { }); }; +// -- PULL REQUEST -- // const getPulls = (forkedRepos) => { forkedRepos.forEach((project) => { fetch( @@ -81,12 +77,9 @@ const getPulls = (forkedRepos) => { ) .then((response) => response.json()) .then((pulldata) => { - // console.log("PULLS", pulldata); const myPullRequest = pulldata.find( (pull) => pull.user.login === project.owner.login ); - // console.log("MY PULL", myPullRequest); - // console.log("MY URL", myPullRequest.url); if (myPullRequest) { document.getElementById(`pull-${project.name}`).innerHTML = ` diff --git a/code/style.css b/code/style.css index aebb1d95..e2aa90b6 100644 --- a/code/style.css +++ b/code/style.css @@ -1,29 +1,31 @@ body { - background-color: #d5dad6; - font-family: "Roboto Mono", monospace; box-sizing: border-box; min-width: 325px; + background-color: #d5dad6; + font-family: "Roboto Mono", monospace; } .big-container { margin: 5% 0; } +/* HEADER */ h1 { + margin-top: 10%; + color: #d6a495; text-align: center; font-size: 30px; - color: #d6a495; - margin-top: 10%; } +/* PROFILE INFO */ .profile-container { text-align: center; color: #8aa2a0; } h4 { - font-size: 28px; margin: 2% 0; + font-size: 28px; } img { @@ -35,21 +37,23 @@ img { } h2 { - color: #d6a495; text-align: center; + color: #d6a495; } +/* CHART */ .chart-container { width: 70%; margin: 0 0 10% 15%; } +/* PROJECTS */ .projects-list { border: 1px solid #b8c3bd; - color: #4a707a; - font-size: 17px; padding: 4%; height: 100%; + color: #4a707a; + font-size: 17px; } .projects-individual { border-bottom: 1px solid #b8c3bd; @@ -70,11 +74,14 @@ a:hover { color: #d6a495; } +/* TABLET LAYOUT */ @media (min-width: 668px) and (max-width: 1024px) { + /* HEADER */ h1 { font-size: 45px; } + /* PROFILE */ h4 { font-size: 38px; } @@ -88,16 +95,19 @@ a:hover { font-size: 40px; } + /* CHART */ .chart-container { width: 50%; margin: 5% 0 5% 27%; } + /* PROJECTS */ .projects-list { text-align: center; } } +/* DESKTOP LAYOUT */ @media (min-width: 1025px) { .big-container { display: grid; @@ -105,16 +115,19 @@ a:hover { margin: 2%; } + /* HEADER */ h1 { font-size: 60px; margin-top: 4%; } + /* PROFILE */ h4, h2 { font-size: 40px; } + /* PROJECTS */ .projects-list { padding: 0 0 0 5%; font-size: 16px; @@ -124,6 +137,5 @@ a:hover { .projects { display: grid; grid-template-columns: 1fr 1fr; - /* text-align: center; */ } }