From e7e5069e43fd80b3ca7b0d64fb7bf1dee355bc56 Mon Sep 17 00:00:00 2001 From: Birgit Nehrwein Date: Mon, 27 Sep 2021 17:43:32 +0200 Subject: [PATCH 01/19] Getting started with the first functions getRepos(), getPushBranchURL() and getCommits(). getCommits() isn't working yet. --- code/script.js | 52 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 52 insertions(+) diff --git a/code/script.js b/code/script.js index e69de29b..c2be3612 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,52 @@ +const REPO_API = "https://api.github.com/users/nehrwein/repos"; + + +const getRepos = () => { + fetch(REPO_API) + .then((res) => res.json()) + .then((data) => { + + //forkedRepos shows a list of all repos that are forked ones from Technigo + const forkedRepos = data.filter(repo => repo.fork && repo.name.startsWith('project-')) + console.log('List of forked Repos: ', forkedRepos) + + //My username and profile picture + const userName = data[0].owner.login + const profilePic = data[0].owner.avatar_url + console.log('Username & Pic: ', userName, profilePic) + + + getPushBranchURL(forkedRepos); + getCommits(forkedRepos); + }) +} + +const getPushBranchURL = (filteredArray) => { + //Most recent update (push) for each repo + console.log('Most recent update (push) for each repo:') + filteredArray.forEach(repo => { + console.log(repo.pushed_at) + }); + + //Name of my default branch for each repo + console.log('Name of my default branch for each repo:') + filteredArray.forEach(repo => { + console.log(repo.default_branch) + }); + + //URL to the actual GitHub repo + console.log('URL to the actual GitHub repo:') + filteredArray.forEach(repo => { + console.log(repo.html_url) + }); +} + +const getCommits = (filteredArray) => { + //Number of commit messages for each repo + //First make a new array with all the needed APIs of the commit_urls + const allCommitUrls = filteredArray.map(repo => repo.commits_url) + console.log('Here is the array with all the commits: ', allCommitUrls) +} + +getRepos(); + From f4c5e0a11f422563417fb2cc1e113bff08111a29 Mon Sep 17 00:00:00 2001 From: Birgit Nehrwein Date: Wed, 29 Sep 2021 08:16:36 +0200 Subject: [PATCH 02/19] fetched commits and drew the chart for 'done projects' --- code/chart.js | 26 +++++++++++++++++++++++++- code/index.html | 6 ++++-- code/script.js | 29 ++++++++++++++++++++++++++--- code/style.css | 3 ++- 4 files changed, 57 insertions(+), 7 deletions(-) diff --git a/code/chart.js b/code/chart.js index 92e85a30..724cec62 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,28 @@ //DOM-selector for the canvas 👇 const ctx = document.getElementById('chart').getContext('2d') + +const drawChart = (doneProjects) => { -//"Draw" the chart here 👇 + //config for the the doughnut-chart: + const config = { + type: 'doughnut', + data: { + labels: [ + 'Finished Projects', + 'Projects left' + ], + datasets: [{ + label: 'My First Dataset', + data: [doneProjects, totalProjects - doneProjects], + backgroundColor: [ + 'rgb(255, 99, 132)', + 'rgb(54, 162, 235)', + ], + hoverOffset: 4 + }] + }, + }; + + //rendering the chart in the browser/ newChart(where to put it, what to put) + const chart = new Chart(ctx, config); +} \ No newline at end of file diff --git a/code/index.html b/code/index.html index 2fb5e0ae..852885d8 100644 --- a/code/index.html +++ b/code/index.html @@ -6,6 +6,7 @@ Project GitHub Tracker +

GitHub Tracker

@@ -13,8 +14,9 @@

Projects:

- - +
+ +
diff --git a/code/script.js b/code/script.js index c2be3612..70cf1516 100644 --- a/code/script.js +++ b/code/script.js @@ -1,5 +1,5 @@ const REPO_API = "https://api.github.com/users/nehrwein/repos"; - +const totalProjects = 19; const getRepos = () => { fetch(REPO_API) @@ -18,6 +18,7 @@ const getRepos = () => { getPushBranchURL(forkedRepos); getCommits(forkedRepos); + drawChart(forkedRepos.length) }) } @@ -42,11 +43,33 @@ const getPushBranchURL = (filteredArray) => { } const getCommits = (filteredArray) => { - //Number of commit messages for each repo - //First make a new array with all the needed APIs of the commit_urls + + //First make a new array with all the needed APIs (found under commit_urls in forkedRepos) const allCommitUrls = filteredArray.map(repo => repo.commits_url) console.log('Here is the array with all the commits: ', allCommitUrls) + + //the URLs end with {/sha}, therefore the last 6 chars need to be sliced + allCommitUrls.forEach(commitAPI => { + commitAPI = commitAPI.slice(0, -6) + console.log(commitAPI) + + //now the URLs can be passed on to get data about number and content of commits + fetch(commitAPI) + .then((res) => res.json()) + .then((data) => { + const authorCommits = data.filter(commits => commits.author.login === 'nehrwein') + //Number of commit messages for each repo + const noOfCommits = authorCommits.length + console.log('These are my commits: ',authorCommits) + console.log('Number of commits: ', noOfCommits) + authorCommits.forEach(entry => { + const textOfCommit = entry.commit.message + console.log('This is the commit-text: ', textOfCommit) + }) + }) + }); } + getRepos(); diff --git a/code/style.css b/code/style.css index 7c8ad447..095d8e75 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,4 @@ body { background: #FFECE9; -} \ No newline at end of file +} + From 123aec716f4411d79fa8949a8b69036a15d14803 Mon Sep 17 00:00:00 2001 From: Birgit Nehrwein Date: Wed, 29 Sep 2021 11:24:33 +0200 Subject: [PATCH 03/19] started styling the header and user-section --- code/index.html | 14 +++++++++++--- code/script.js | 8 ++++++++ code/style.css | 46 +++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 64 insertions(+), 4 deletions(-) diff --git a/code/index.html b/code/index.html index 852885d8..91d9b2df 100644 --- a/code/index.html +++ b/code/index.html @@ -6,15 +6,23 @@ Project GitHub Tracker + -

GitHub Tracker

-

Projects:

+
+ + + +
+
+ + +
-
+
diff --git a/code/script.js b/code/script.js index 70cf1516..4062386a 100644 --- a/code/script.js +++ b/code/script.js @@ -1,6 +1,11 @@ +//DOM SELECTORS +const userSection = document.getElementById("user-section") + +//GLOBAL VARIABLES const REPO_API = "https://api.github.com/users/nehrwein/repos"; const totalProjects = 19; +//FUNCTIONS const getRepos = () => { fetch(REPO_API) .then((res) => res.json()) @@ -14,6 +19,9 @@ const getRepos = () => { const userName = data[0].owner.login const profilePic = data[0].owner.avatar_url console.log('Username & Pic: ', userName, profilePic) + userSection.innerHTML = ` + Github Avatar + ` getPushBranchURL(forkedRepos); diff --git a/code/style.css b/code/style.css index 095d8e75..2d490658 100644 --- a/code/style.css +++ b/code/style.css @@ -1,4 +1,48 @@ +/* GLOBAL STYLES */ + +:root { + --border-width: 1px; + --border-style: solid; + --font-size-small: 12px; + --font-weight-semibold: 500; + --size-2: 20px; +} + +html { + box-sizing: border-box; +} +*, *:before, *:after { + box-sizing: inherit; +} + body { - background: #FFECE9; + background: white; + margin: 0; +} + +/* HEADER */ + +header { + display: flex; + padding: 16px; + font-size: 14px; + line-height: 1.5; + color: white; + background-color: black; + justify-content: space-between; + align-items: center; +} + +.fab { + color: white; + font-size: 32px; +} + +.far { + font-size: 16px; } +.chart { + width: 250px; + height: 250px; +} \ No newline at end of file From 3214658a0211dc7a9e664af45960c8149e41a840 Mon Sep 17 00:00:00 2001 From: Birgit Nehrwein Date: Wed, 29 Sep 2021 20:13:33 +0200 Subject: [PATCH 04/19] worked on no. of commits --- code/index.html | 9 +++--- code/script.js | 77 +++++++++++++++++++++++++++---------------------- code/style.css | 46 +++++++++++++++++++++++++++++ 3 files changed, 92 insertions(+), 40 deletions(-) diff --git a/code/index.html b/code/index.html index 91d9b2df..9fb0f45c 100644 --- a/code/index.html +++ b/code/index.html @@ -16,15 +16,14 @@
- -
-
+
+
- -
+ +
diff --git a/code/script.js b/code/script.js index 4062386a..1e44c9e9 100644 --- a/code/script.js +++ b/code/script.js @@ -15,66 +15,73 @@ const getRepos = () => { const forkedRepos = data.filter(repo => repo.fork && repo.name.startsWith('project-')) console.log('List of forked Repos: ', forkedRepos) - //My username and profile picture + //My name, username and profile picture const userName = data[0].owner.login const profilePic = data[0].owner.avatar_url - console.log('Username & Pic: ', userName, profilePic) - userSection.innerHTML = ` - Github Avatar - ` - - getPushBranchURL(forkedRepos); - getCommits(forkedRepos); + userSection.innerHTML += /* html */` +
+ Github Avatar +
+
+

Birgit

+

${userName}

+
+ ` + drawProjects(forkedRepos); drawChart(forkedRepos.length) }) } -const getPushBranchURL = (filteredArray) => { - //Most recent update (push) for each repo - console.log('Most recent update (push) for each repo:') - filteredArray.forEach(repo => { - console.log(repo.pushed_at) - }); +const drawProjects = (forkedRepositories) => { - //Name of my default branch for each repo - console.log('Name of my default branch for each repo:') - filteredArray.forEach(repo => { - console.log(repo.default_branch) - }); - - //URL to the actual GitHub repo - console.log('URL to the actual GitHub repo:') - filteredArray.forEach(repo => { - console.log(repo.html_url) + forkedRepositories.forEach((repo) => { + document.getElementById('projects-section').innerHTML += ` +
+ ${repo.name} +

default branch: ${repo.default_branch}

+

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

+

Commits:

+
+ ` + getCommits(forkedRepositories, repo.name); }); } -const getCommits = (filteredArray) => { - +const getCommits = (filteredArray, myRepoName) => { + console.log('Reponame: ', myRepoName) //First make a new array with all the needed APIs (found under commit_urls in forkedRepos) const allCommitUrls = filteredArray.map(repo => repo.commits_url) - console.log('Here is the array with all the commits: ', allCommitUrls) - - //the URLs end with {/sha}, therefore the last 6 chars need to be sliced + allCommitUrls.forEach(commitAPI => { + //the URLs end with {/sha}, therefore the last 6 chars need to be sliced commitAPI = commitAPI.slice(0, -6) - console.log(commitAPI) //now the URLs can be passed on to get data about number and content of commits fetch(commitAPI) .then((res) => res.json()) .then((data) => { const authorCommits = data.filter(commits => commits.author.login === 'nehrwein') - //Number of commit messages for each repo const noOfCommits = authorCommits.length - console.log('These are my commits: ',authorCommits) + console.log('authorCommits: ', authorCommits) console.log('Number of commits: ', noOfCommits) + + document.getElementById(`commit-${myRepoName}`).innerHTML += ` + ${noOfCommits} + ` + + //Number of commit messages for each repo + + + + authorCommits.forEach(entry => { - const textOfCommit = entry.commit.message - console.log('This is the commit-text: ', textOfCommit) + document.getElementById(`commit-${myRepoName}`).innerHTML += ` + ${entry.length} + ` + //console.log('This is the commit-text: ', textOfCommit) }) - }) + }) }); } diff --git a/code/style.css b/code/style.css index 2d490658..48656a02 100644 --- a/code/style.css +++ b/code/style.css @@ -17,6 +17,7 @@ html { body { background: white; + font-family: Arial, Helvetica, sans-serif; margin: 0; } @@ -42,6 +43,51 @@ header { font-size: 16px; } + +/* USER-SECTION */ +.user { + padding: 16px; + display: flex; + align-items: center; +} + +.userImageDiv { + display: inline-block; +} + +.userImage { + border-radius: 50%; + width: 57px; + margin-right: 10px; +} + +.userTextDiv { + display: inline-flex; + flex-direction: column; +} + +.userTextDiv p { + margin: 0; +} + +/* PROJECTS-SECTION */ +.projects { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + gap: 1rem; +} + +.projects-div { + border: 1px solid lightgray; + padding-left: 16px; +} + +.projects-div a { + color: #0969DA; + font-size: 20px; +} + +/* CHART */ .chart { width: 250px; height: 250px; From f7ef0f54355df6eaa0f80bb5dcac491b3efb1948 Mon Sep 17 00:00:00 2001 From: Birgit Nehrwein Date: Thu, 30 Sep 2021 09:25:24 +0200 Subject: [PATCH 05/19] fixed problems with getting no of commits --- code/index.html | 1 + code/script.js | 37 +++++++++++++++---------------------- 2 files changed, 16 insertions(+), 22 deletions(-) diff --git a/code/index.html b/code/index.html index 9fb0f45c..6d21e551 100644 --- a/code/index.html +++ b/code/index.html @@ -24,6 +24,7 @@
+ diff --git a/code/script.js b/code/script.js index 1e44c9e9..47ea89b1 100644 --- a/code/script.js +++ b/code/script.js @@ -2,12 +2,18 @@ const userSection = document.getElementById("user-section") //GLOBAL VARIABLES +const options = { + method: 'GET', + headers: { + Authorization: `token xxx` + }, +}; const REPO_API = "https://api.github.com/users/nehrwein/repos"; const totalProjects = 19; //FUNCTIONS const getRepos = () => { - fetch(REPO_API) + fetch(REPO_API, options) .then((res) => res.json()) .then((data) => { @@ -41,7 +47,7 @@ const drawProjects = (forkedRepositories) => { ${repo.name}

default branch: ${repo.default_branch}

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

-

Commits:

+

No commits yet

` getCommits(forkedRepositories, repo.name); @@ -58,29 +64,16 @@ const getCommits = (filteredArray, myRepoName) => { commitAPI = commitAPI.slice(0, -6) //now the URLs can be passed on to get data about number and content of commits - fetch(commitAPI) + fetch(commitAPI, options) .then((res) => res.json()) .then((data) => { - const authorCommits = data.filter(commits => commits.author.login === 'nehrwein') - const noOfCommits = authorCommits.length - console.log('authorCommits: ', authorCommits) - console.log('Number of commits: ', noOfCommits) - - document.getElementById(`commit-${myRepoName}`).innerHTML += ` - ${noOfCommits} - ` - - //Number of commit messages for each repo + const authorCommits = data.filter(commits => commits.author.login === 'nehrwein' && commits.url.includes(myRepoName)) - - - - authorCommits.forEach(entry => { - document.getElementById(`commit-${myRepoName}`).innerHTML += ` - ${entry.length} - ` - //console.log('This is the commit-text: ', textOfCommit) - }) + if (authorCommits.length > 0) { + document.getElementById(`commit-${myRepoName}`).innerHTML = ` + Commits: ${authorCommits.length} + ` + } }) }); } From d630a84a331b697d8bf1fe408f23174347ffd1cc Mon Sep 17 00:00:00 2001 From: Birgit Nehrwein Date: Thu, 30 Sep 2021 12:18:22 +0200 Subject: [PATCH 06/19] more attempts to get the toggle work (no succeed) --- code/script.js | 32 ++++++++++++++++++++++++++++++-- code/style.css | 31 +++++++++++++++++++++---------- 2 files changed, 51 insertions(+), 12 deletions(-) diff --git a/code/script.js b/code/script.js index 47ea89b1..a75a3564 100644 --- a/code/script.js +++ b/code/script.js @@ -12,6 +12,12 @@ const REPO_API = "https://api.github.com/users/nehrwein/repos"; const totalProjects = 19; //FUNCTIONS + +function toggle() { + this.classList.toggle("active"); + console.log(this) +} + const getRepos = () => { fetch(REPO_API, options) .then((res) => res.json()) @@ -19,7 +25,6 @@ const getRepos = () => { //forkedRepos shows a list of all repos that are forked ones from Technigo const forkedRepos = data.filter(repo => repo.fork && repo.name.startsWith('project-')) - console.log('List of forked Repos: ', forkedRepos) //My name, username and profile picture const userName = data[0].owner.login @@ -47,10 +52,21 @@ const drawProjects = (forkedRepositories) => { ${repo.name}

default branch: ${repo.default_branch}

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

-

No commits yet

+

Commits: 0

+
    ` + console.log(document.getElementById(`commit-${repo.name}`)) + getCommits(forkedRepositories, repo.name); + const click = () => { + console.log('clicked') + document.getElementById(`commitMessages-${repo.name}`).classList.toggle('active') + } + /* document.getElementById(`commit-${repo.name}`).addEventListener('click', () => { + console.log('clicked') + document.getElementById(`commitMessages-${repo.name}`).classList.toggle('active') + }) */ }); } @@ -73,11 +89,23 @@ const getCommits = (filteredArray, myRepoName) => { document.getElementById(`commit-${myRepoName}`).innerHTML = ` Commits: ${authorCommits.length} ` + authorCommits.forEach(element => { + document.getElementById(`commitMessages-${myRepoName}`).innerHTML += ` +
  • ${element.commit.message}
    • + ` + }) } }) }); } +/* const toggleCommits = (myRepoName) => { + document.getElementById(`commitMessages-${myRepoName}`).onclick = toggle; +} */ + + + + getRepos(); diff --git a/code/style.css b/code/style.css index 48656a02..943384d9 100644 --- a/code/style.css +++ b/code/style.css @@ -1,13 +1,5 @@ /* GLOBAL STYLES */ -:root { - --border-width: 1px; - --border-style: solid; - --font-size-small: 12px; - --font-weight-semibold: 500; - --size-2: 20px; -} - html { box-sizing: border-box; } @@ -56,6 +48,7 @@ header { } .userImage { + border: 1px solid lightgray; border-radius: 50%; width: 57px; margin-right: 10px; @@ -79,12 +72,30 @@ header { .projects-div { border: 1px solid lightgray; - padding-left: 16px; + padding: 5px 16px; } .projects-div a { + display: block; + margin-bottom: 8px; color: #0969DA; - font-size: 20px; + font-size: 18px; + margin-bottom: 4px; +} + +.projects p, ul { + font-size: 12px; + margin: 0; +} + +.projects ul { + /* display: none; */ + padding-left: 16px; + margin-top: 2px; +} + +.active + .projects ul { + display: block; } /* CHART */ From 07ca34dcf1903ac9a7ce5850a5b4d4168cd28995 Mon Sep 17 00:00:00 2001 From: Birgit Nehrwein Date: Thu, 30 Sep 2021 15:08:51 +0200 Subject: [PATCH 07/19] fixed commits accordion, added media queries & styling --- code/chart.js | 6 ++-- code/index.html | 26 +++++++++------- code/script.js | 51 +++++++++++++------------------ code/style.css | 81 +++++++++++++++++++++++++++++++++++++++++++------ 4 files changed, 110 insertions(+), 54 deletions(-) diff --git a/code/chart.js b/code/chart.js index 724cec62..906702ba 100644 --- a/code/chart.js +++ b/code/chart.js @@ -15,10 +15,10 @@ const drawChart = (doneProjects) => { label: 'My First Dataset', data: [doneProjects, totalProjects - doneProjects], backgroundColor: [ - 'rgb(255, 99, 132)', - 'rgb(54, 162, 235)', + 'rgb(120, 129, 131)', + 'rgb(198, 207, 215)', ], - hoverOffset: 4 + hoverOffset: 2 }] }, }; diff --git a/code/index.html b/code/index.html index 6d21e551..0eea0830 100644 --- a/code/index.html +++ b/code/index.html @@ -6,24 +6,28 @@ Project GitHub Tracker + + +
    - + - +
    -
    -
    -
    - - - -
    - -
    +
    +
    +
    +
    + +
    + +
    + +
    diff --git a/code/script.js b/code/script.js index a75a3564..95f04093 100644 --- a/code/script.js +++ b/code/script.js @@ -5,7 +5,7 @@ const userSection = document.getElementById("user-section") const options = { method: 'GET', headers: { - Authorization: `token xxx` + Authorization: `token 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` }, }; const REPO_API = "https://api.github.com/users/nehrwein/repos"; @@ -13,10 +13,6 @@ const totalProjects = 19; //FUNCTIONS -function toggle() { - this.classList.toggle("active"); - console.log(this) -} const getRepos = () => { fetch(REPO_API, options) @@ -34,9 +30,9 @@ const getRepos = () => {
    Github Avatar
    -
    -

    Birgit

    -

    ${userName}

    +
    +

    Birgit

    +

    ${userName}

    ` drawProjects(forkedRepos); @@ -45,30 +41,30 @@ const getRepos = () => { } const drawProjects = (forkedRepositories) => { - forkedRepositories.forEach((repo) => { document.getElementById('projects-section').innerHTML += `
    ${repo.name}

    default branch: ${repo.default_branch}

    -

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

    -

    Commits: 0

    +

    Last push: ${new Date(repo.pushed_at).toDateString([], { Style: "short" })}

    +

    Commits: 0

      - ` - console.log(document.getElementById(`commit-${repo.name}`)) - + `; + getCommits(forkedRepositories, repo.name); - const click = () => { - console.log('clicked') - document.getElementById(`commitMessages-${repo.name}`).classList.toggle('active') - } - /* document.getElementById(`commit-${repo.name}`).addEventListener('click', () => { - console.log('clicked') - document.getElementById(`commitMessages-${repo.name}`).classList.toggle('active') - }) */ - }); -} + }); + + forkedRepositories.forEach((repo) => { + document + .getElementById(`commit-${repo.name}`) + .addEventListener('click', () => { + document + .getElementById(`commitMessages-${repo.name}`) + .classList.toggle('active'); + }); + }); +}; const getCommits = (filteredArray, myRepoName) => { console.log('Reponame: ', myRepoName) @@ -88,6 +84,7 @@ const getCommits = (filteredArray, myRepoName) => { if (authorCommits.length > 0) { document.getElementById(`commit-${myRepoName}`).innerHTML = ` Commits: ${authorCommits.length} + ` authorCommits.forEach(element => { document.getElementById(`commitMessages-${myRepoName}`).innerHTML += ` @@ -99,12 +96,6 @@ const getCommits = (filteredArray, myRepoName) => { }); } -/* const toggleCommits = (myRepoName) => { - document.getElementById(`commitMessages-${myRepoName}`).onclick = toggle; -} */ - - - getRepos(); diff --git a/code/style.css b/code/style.css index 943384d9..983c3812 100644 --- a/code/style.css +++ b/code/style.css @@ -9,7 +9,7 @@ html { body { background: white; - font-family: Arial, Helvetica, sans-serif; + font-family: 'Roboto', sans-serif; margin: 0; } @@ -22,7 +22,7 @@ header { line-height: 1.5; color: white; background-color: black; - justify-content: space-between; + justify-content: center; align-items: center; } @@ -31,10 +31,6 @@ header { font-size: 32px; } -.far { - font-size: 16px; -} - /* USER-SECTION */ .user { @@ -63,7 +59,18 @@ header { margin: 0; } +.myName { + font-size: 26px; +} + +.userName { + font-size: 20px; + font-style: lighter; + font-weight: 100; +} + /* PROJECTS-SECTION */ + .projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); @@ -73,6 +80,7 @@ header { .projects-div { border: 1px solid lightgray; padding: 5px 16px; + margin: 0 16px; } .projects-div a { @@ -88,18 +96,71 @@ header { margin: 0; } +.fas { + color:#0969DA; + cursor: pointer; + margin-left: 3px; +} + +/* Toggle between show/hide the Commit-messages */ .projects ul { - /* display: none; */ + display: none; padding-left: 16px; margin-top: 2px; } -.active + .projects ul { +.projects ul.active { display: block; } /* CHART */ .chart { - width: 250px; - height: 250px; + width: 210px; + height: 210px; +} + +/* ***********MEDIA QUERIES*************** */ + +/* TABLET */ +@media (min-width: 667px) { + + main { + display:flex; + + } + + .user { + flex-direction: column; + align-items: flex-start; + + } + + .userImage { + width: 168px; + } + + .projects { + flex-grow: 2; + padding-top: 16px; + padding-right: 16px; + } + + .projects-div { + margin: 0; + } + +} + +/* DESKTOP */ +@media (min-width: 1024px) { + + .userImage { + width: 216px; + } + + .chart { + width: 258px; + height: 258px; + } + } \ No newline at end of file From 831bf7d76f5e90841e1aedb679a14ab688d42179 Mon Sep 17 00:00:00 2001 From: Birgit Nehrwein Date: Thu, 30 Sep 2021 15:38:11 +0200 Subject: [PATCH 08/19] some styling --- code/script.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/script.js b/code/script.js index 95f04093..7d068ee0 100644 --- a/code/script.js +++ b/code/script.js @@ -5,7 +5,7 @@ const userSection = document.getElementById("user-section") const options = { method: 'GET', headers: { - Authorization: `token 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` + Authorization: `token xxx` }, }; const REPO_API = "https://api.github.com/users/nehrwein/repos"; From a017a8111f8ddd806c6332d6c5c129a256ac6422 Mon Sep 17 00:00:00 2001 From: Birgit Nehrwein Date: Fri, 1 Oct 2021 12:24:06 +0200 Subject: [PATCH 09/19] styled header and chart legend --- code/chart.js | 11 +++++++++-- code/index.html | 3 +-- code/script.js | 6 +++--- code/style.css | 25 ++++++++++++++++--------- 4 files changed, 29 insertions(+), 16 deletions(-) diff --git a/code/chart.js b/code/chart.js index 906702ba..73b5b270 100644 --- a/code/chart.js +++ b/code/chart.js @@ -18,9 +18,16 @@ const drawChart = (doneProjects) => { 'rgb(120, 129, 131)', 'rgb(198, 207, 215)', ], - hoverOffset: 2 - }] + /* hoverOffset: 5 */ + }], }, + options: { + plugins: { + legend: { + position: 'right', + } + } + } }; //rendering the chart in the browser/ newChart(where to put it, what to put) diff --git a/code/index.html b/code/index.html index 0eea0830..5fada63e 100644 --- a/code/index.html +++ b/code/index.html @@ -14,9 +14,8 @@
      - - +

      GitHub Tracker

      diff --git a/code/script.js b/code/script.js index 7d068ee0..c320f7a2 100644 --- a/code/script.js +++ b/code/script.js @@ -5,7 +5,7 @@ const userSection = document.getElementById("user-section") const options = { method: 'GET', headers: { - Authorization: `token xxx` + Authorization: `token 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` }, }; const REPO_API = "https://api.github.com/users/nehrwein/repos"; @@ -46,9 +46,9 @@ const drawProjects = (forkedRepositories) => {
      ${repo.name}

      default branch: ${repo.default_branch}

      -

      Last push: ${new Date(repo.pushed_at).toDateString([], { Style: "short" })}

      +

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

      Commits: 0

      -
        +
          `; diff --git a/code/style.css b/code/style.css index 983c3812..54dbfab9 100644 --- a/code/style.css +++ b/code/style.css @@ -17,8 +17,7 @@ body { header { display: flex; - padding: 16px; - font-size: 14px; + font-size: 9px; line-height: 1.5; color: white; background-color: black; @@ -28,7 +27,8 @@ header { .fab { color: white; - font-size: 32px; + font-size: 22px; + margin-right: 4px; } @@ -115,8 +115,9 @@ header { /* CHART */ .chart { - width: 210px; - height: 210px; + margin-left: 16px; + width: 330px; + height: 165px; } /* ***********MEDIA QUERIES*************** */ @@ -124,9 +125,15 @@ header { /* TABLET */ @media (min-width: 667px) { + header { + justify-content: flex-start; + padding-left: 16px; + } + + + main { - display:flex; - + display:flex; } .user { @@ -159,8 +166,8 @@ header { } .chart { - width: 258px; - height: 258px; + width: 380px; + height: 190px; } } \ No newline at end of file From c88e40228463e5dc45684c36c309a7223d820462 Mon Sep 17 00:00:00 2001 From: Birgit Nehrwein Date: Sat, 2 Oct 2021 12:12:41 +0200 Subject: [PATCH 10/19] fixed sort --- code/index.html | 2 +- code/script.js | 66 +++++++++++++++++++++++++++++++++++++++++-------- code/style.css | 43 ++++++++++++++++++++++++++------ 3 files changed, 93 insertions(+), 18 deletions(-) diff --git a/code/index.html b/code/index.html index 5fada63e..2e82cb14 100644 --- a/code/index.html +++ b/code/index.html @@ -15,7 +15,7 @@
          -

          GitHub Tracker

          +

          GitHub Tracker
          diff --git a/code/script.js b/code/script.js index c320f7a2..e7b25e1c 100644 --- a/code/script.js +++ b/code/script.js @@ -5,11 +5,13 @@ const userSection = document.getElementById("user-section") const options = { method: 'GET', headers: { - Authorization: `token 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` + Authorization: `token xxx` }, }; + const REPO_API = "https://api.github.com/users/nehrwein/repos"; const totalProjects = 19; +let commitslength = [] //FUNCTIONS @@ -22,31 +24,75 @@ const getRepos = () => { //forkedRepos shows a list of all repos that are forked ones from Technigo const forkedRepos = data.filter(repo => repo.fork && repo.name.startsWith('project-')) + //show the newest repos first (default) + forkedRepos.sort((a, b) => { + return new Date(b.pushed_at) - new Date(a.pushed_at); + }); + //My name, username and profile picture const userName = data[0].owner.login const profilePic = data[0].owner.avatar_url userSection.innerHTML += /* html */` -
          - Github Avatar -
          -
          -

          Birgit

          -

          ${userName}

          -
          +
          +
          + Github Avatar +
          +
          +

          Birgit

          +

          ${userName}

          +
          +
          + + + ` + // + //couldn't make it work... + + const sortBtn = document.getElementById('sort') + sortBtn.addEventListener('change', () => sort(sortBtn.value, forkedRepos, commitslength)) + drawProjects(forkedRepos); drawChart(forkedRepos.length) }) } +//sorting the projects by name, last updated or no. of commits +const sort = (value, repos, mycommits) => { + if (value === "name") { + repos.sort((a, b) => { + return (a.name) > (b.name); + }); + drawProjects(repos) + } else if (value === "updated") { + repos.sort((a, b) => { + return new Date(b.pushed_at) - new Date(a.pushed_at); + }); + drawProjects(repos) + } /* else if (value === "commits") { + console.log('Commits: ', mycommits) + console.log('Commitslänge: ', mycommits.length) + mycommits.sort((a, b) => { + return (a.mycommits.length) > (b.mycommits.length); + }); + drawProjects(repos) + }*/ +} + const drawProjects = (forkedRepositories) => { + document.getElementById('projects-section').innerHTML = ` + ` + console.log('From drawProjects()', forkedRepositories) forkedRepositories.forEach((repo) => { document.getElementById('projects-section').innerHTML += `
          ${repo.name}

          default branch: ${repo.default_branch}

          -

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

          +

          Last push: ${new Date(repo.pushed_at).toLocaleDateString('en-GB')}

          Commits: 0

            @@ -80,8 +126,8 @@ const getCommits = (filteredArray, myRepoName) => { .then((res) => res.json()) .then((data) => { const authorCommits = data.filter(commits => commits.author.login === 'nehrwein' && commits.url.includes(myRepoName)) - if (authorCommits.length > 0) { + commitslength.push(authorCommits) document.getElementById(`commit-${myRepoName}`).innerHTML = ` Commits: ${authorCommits.length} diff --git a/code/style.css b/code/style.css index 54dbfab9..afedfc47 100644 --- a/code/style.css +++ b/code/style.css @@ -17,14 +17,21 @@ body { header { display: flex; - font-size: 9px; - line-height: 1.5; - color: white; background-color: black; justify-content: center; align-items: center; } +h1 { + color: white; + text-decoration: none; + font-size: 22px; +} + +header a { + text-decoration: none; +} + .fab { color: white; font-size: 22px; @@ -32,15 +39,23 @@ header { } + + /* USER-SECTION */ .user { padding: 16px; display: flex; - align-items: center; + justify-content: space-between; + align-items: flex-end; +} + +.userImage_Text { + display: flex; + align-items: flex-end; } .userImageDiv { - display: inline-block; + display: inline-flex; } .userImage { @@ -69,6 +84,15 @@ header { font-weight: 100; } +.sort { + margin-left: 25px; + height: 25px; + background-color: #F3F4F6; + border: 0.75px solid lightgray; + border-radius: 4px; +} + + /* PROJECTS-SECTION */ .projects { @@ -78,7 +102,8 @@ header { } .projects-div { - border: 1px solid lightgray; + border: 0.75px solid lightgray; + border-radius: 4px; padding: 5px 16px; margin: 0 16px; } @@ -115,6 +140,7 @@ header { /* CHART */ .chart { + margin-top: -60px; margin-left: 16px; width: 330px; height: 165px; @@ -137,9 +163,12 @@ header { } .user { - flex-direction: column; align-items: flex-start; + } + .userImage_Text { + flex-direction: column; + align-items: flex-start; } .userImage { From 3a5bfd7d22e51289541a2006cecda238c00165f8 Mon Sep 17 00:00:00 2001 From: Birgit Nehrwein Date: Sat, 2 Oct 2021 12:17:07 +0200 Subject: [PATCH 11/19] commented out token section --- code/script.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/code/script.js b/code/script.js index e7b25e1c..2b05a23c 100644 --- a/code/script.js +++ b/code/script.js @@ -2,12 +2,12 @@ const userSection = document.getElementById("user-section") //GLOBAL VARIABLES -const options = { +/* const options = { method: 'GET', headers: { Authorization: `token xxx` }, -}; +}; */ const REPO_API = "https://api.github.com/users/nehrwein/repos"; const totalProjects = 19; @@ -17,7 +17,7 @@ let commitslength = [] const getRepos = () => { - fetch(REPO_API, options) + fetch(REPO_API, /* options */) .then((res) => res.json()) .then((data) => { @@ -122,7 +122,7 @@ const getCommits = (filteredArray, myRepoName) => { commitAPI = commitAPI.slice(0, -6) //now the URLs can be passed on to get data about number and content of commits - fetch(commitAPI, options) + fetch(commitAPI, /* options */) .then((res) => res.json()) .then((data) => { const authorCommits = data.filter(commits => commits.author.login === 'nehrwein' && commits.url.includes(myRepoName)) From deecb8702ae0341de2c51e818646c9aab64c8bf4 Mon Sep 17 00:00:00 2001 From: Birgit Nehrwein Date: Sat, 2 Oct 2021 18:00:35 +0200 Subject: [PATCH 12/19] updated Read.me --- README.md | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 1613a3b0..494f4d16 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,25 @@ # GitHub Tracker -Replace this readme with your own information about your project. +This project is all about working with the Github-API. + +The tracker shows +- username/pic +- all the repos that are done by me during the Technigo bootcamp +- no. of commits and commit messages for each repository +- a doughnut pie from chart.js + + -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. ## 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 focussed in this project on gaining data from the API and filter/sort it in a way that I get all the entries I want to show in my tracker. + +I kept the design simple and made it look close to the original GitHub-website. + +If I would have more time, I would like to add "no. of commits" to the sort field and maybe add a search field also. + ## 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. +Take a look at the project here: https://github-tracker-nehrwein.netlify.app/ From d234e0512a04b720bea842e87c8280aa34e20fc9 Mon Sep 17 00:00:00 2001 From: Birgit Nehrwein Date: Sun, 3 Oct 2021 14:54:03 +0200 Subject: [PATCH 13/19] adjusting font-size --- code/script.js | 21 ++++++++++----------- code/style.css | 11 ++++++++++- 2 files changed, 20 insertions(+), 12 deletions(-) diff --git a/code/script.js b/code/script.js index 2b05a23c..5a77af0f 100644 --- a/code/script.js +++ b/code/script.js @@ -126,17 +126,16 @@ const getCommits = (filteredArray, myRepoName) => { .then((res) => res.json()) .then((data) => { const authorCommits = data.filter(commits => commits.author.login === 'nehrwein' && commits.url.includes(myRepoName)) - if (authorCommits.length > 0) { - commitslength.push(authorCommits) - document.getElementById(`commit-${myRepoName}`).innerHTML = ` - Commits: ${authorCommits.length} - - ` - authorCommits.forEach(element => { - document.getElementById(`commitMessages-${myRepoName}`).innerHTML += ` -
          • ${element.commit.message}
            • - ` - }) + if (authorCommits.length > 0) { + commitslength.push(authorCommits) + document.getElementById(`commit-${myRepoName}`).innerHTML = ` + Commits: ${authorCommits.length} + ` + authorCommits.forEach(element => { + document.getElementById(`commitMessages-${myRepoName}`).innerHTML += ` +
          • ${element.commit.message}
            • + ` + }) } }) }); diff --git a/code/style.css b/code/style.css index afedfc47..5129e58e 100644 --- a/code/style.css +++ b/code/style.css @@ -90,6 +90,7 @@ header a { background-color: #F3F4F6; border: 0.75px solid lightgray; border-radius: 4px; + font-size: 16px; } @@ -117,7 +118,7 @@ header a { } .projects p, ul { - font-size: 12px; + font-size: 16px; margin: 0; } @@ -175,6 +176,14 @@ header a { width: 168px; } + .myName { + font-size: 29px; + } + + .userName { + font-size: 26px; + } + .projects { flex-grow: 2; padding-top: 16px; From e4b840319962724b36ce8b71bd824f8b8a2d316a Mon Sep 17 00:00:00 2001 From: Birgit Nehrwein Date: Tue, 12 Oct 2021 11:21:20 +0200 Subject: [PATCH 14/19] test pushing without prettier extension --- code/script.js | 45 ++++++++++++++++++++++----------------------- 1 file changed, 22 insertions(+), 23 deletions(-) diff --git a/code/script.js b/code/script.js index 5a77af0f..796fde9b 100644 --- a/code/script.js +++ b/code/script.js @@ -2,22 +2,21 @@ const userSection = document.getElementById("user-section") //GLOBAL VARIABLES -/* const options = { +const options = { method: 'GET', headers: { - Authorization: `token xxx` + Authorization: `token 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` }, -}; */ +}; const REPO_API = "https://api.github.com/users/nehrwein/repos"; const totalProjects = 19; -let commitslength = [] //FUNCTIONS const getRepos = () => { - fetch(REPO_API, /* options */) + fetch(REPO_API, options) .then((res) => res.json()) .then((data) => { @@ -50,41 +49,41 @@ const getRepos = () => { ` - // - //couldn't make it work... - - const sortBtn = document.getElementById('sort') - sortBtn.addEventListener('change', () => sort(sortBtn.value, forkedRepos, commitslength)) + + const sortBtn = document.getElementById('sort') + sortBtn.addEventListener('change', () => sort(sortBtn.value, forkedRepos)) drawProjects(forkedRepos); drawChart(forkedRepos.length) }) } -//sorting the projects by name, last updated or no. of commits -const sort = (value, repos, mycommits) => { +//sorting the projects by name, last updated +const sort = (value, repos) => { + console.log('Value: ', value) if (value === "name") { repos.sort((a, b) => { return (a.name) > (b.name); }); + repos.forEach((repo) => { + console.log('Repos after sorting name: ', repo.name) + }) drawProjects(repos) } else if (value === "updated") { + console.log('Wert: ', value) repos.sort((a, b) => { return new Date(b.pushed_at) - new Date(a.pushed_at); }); - drawProjects(repos) - } /* else if (value === "commits") { - console.log('Commits: ', mycommits) - console.log('Commitslänge: ', mycommits.length) - mycommits.sort((a, b) => { - return (a.mycommits.length) > (b.mycommits.length); - }); - drawProjects(repos) - }*/ + repos.forEach((repo) => { + console.log('Repos after sorting updated: ', repo.pushed_at) + }) + drawProjects(repos) + } } const drawProjects = (forkedRepositories) => { document.getElementById('projects-section').innerHTML = ` + ` console.log('From drawProjects()', forkedRepositories) forkedRepositories.forEach((repo) => { @@ -122,12 +121,12 @@ const getCommits = (filteredArray, myRepoName) => { commitAPI = commitAPI.slice(0, -6) //now the URLs can be passed on to get data about number and content of commits - fetch(commitAPI, /* options */) + fetch(commitAPI, options) .then((res) => res.json()) .then((data) => { const authorCommits = data.filter(commits => commits.author.login === 'nehrwein' && commits.url.includes(myRepoName)) + console.log(authorCommits) if (authorCommits.length > 0) { - commitslength.push(authorCommits) document.getElementById(`commit-${myRepoName}`).innerHTML = ` Commits: ${authorCommits.length} ` From 70a84d423b4f55d0533455d995f4636062822730 Mon Sep 17 00:00:00 2001 From: Birgit Nehrwein Date: Tue, 12 Oct 2021 17:00:08 +0200 Subject: [PATCH 15/19] changed tab size to 4 --- code/chart.js | 45 ++++++++++++++++++++++----------------------- code/script.js | 6 +++--- 2 files changed, 25 insertions(+), 26 deletions(-) diff --git a/code/chart.js b/code/chart.js index 73b5b270..5a399638 100644 --- a/code/chart.js +++ b/code/chart.js @@ -2,33 +2,32 @@ const ctx = document.getElementById('chart').getContext('2d') const drawChart = (doneProjects) => { - //config for the the doughnut-chart: const config = { - type: 'doughnut', - data: { - labels: [ - 'Finished Projects', - 'Projects left' - ], - datasets: [{ - label: 'My First Dataset', - data: [doneProjects, totalProjects - doneProjects], - backgroundColor: [ - 'rgb(120, 129, 131)', - 'rgb(198, 207, 215)', - ], - /* hoverOffset: 5 */ - }], - }, - options: { - plugins: { - legend: { - position: 'right', - } + type: 'doughnut', + data: { + labels: [ + 'Finished Projects', + 'Projects left' + ], + datasets: [{ + label: 'My First Dataset', + data: [doneProjects, totalProjects - doneProjects], + backgroundColor: [ + 'rgb(120, 129, 131)', + 'rgb(198, 207, 215)', + ], + hoverOffset: 5 + }], + }, + options: { + plugins: { + legend: { + position: 'right', } } - }; + } + }; //rendering the chart in the browser/ newChart(where to put it, what to put) const chart = new Chart(ctx, config); diff --git a/code/script.js b/code/script.js index 796fde9b..deeaddc5 100644 --- a/code/script.js +++ b/code/script.js @@ -2,12 +2,12 @@ const userSection = document.getElementById("user-section") //GLOBAL VARIABLES -const options = { +/* const options = { method: 'GET', headers: { - Authorization: `token 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` + Authorization: `token xxx` }, -}; +}; */ const REPO_API = "https://api.github.com/users/nehrwein/repos"; const totalProjects = 19; From 264b648b378d74c6a0063bff521a23f8210e1760 Mon Sep 17 00:00:00 2001 From: Birgit Nehrwein Date: Tue, 12 Oct 2021 17:06:06 +0200 Subject: [PATCH 16/19] fixed intendation --- code/script.js | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/code/script.js b/code/script.js index deeaddc5..049980a2 100644 --- a/code/script.js +++ b/code/script.js @@ -33,25 +33,25 @@ const getRepos = () => { const profilePic = data[0].owner.avatar_url userSection.innerHTML += /* html */` -
            -
            - Github Avatar -
            -
            -

            Birgit

            -

            ${userName}

            -
            -
            - - - +
            +
            + Github Avatar +
            +
            +

            Birgit

            +

            ${userName}

            +
            +
            + + + ` const sortBtn = document.getElementById('sort') - sortBtn.addEventListener('change', () => sort(sortBtn.value, forkedRepos)) + sortBtn.addEventListener('change', () => sort(sortBtn.value, forkedRepos)) drawProjects(forkedRepos); drawChart(forkedRepos.length) From 427e2089a82278f82bcfc9491c434efde875871f Mon Sep 17 00:00:00 2001 From: Birgit Nehrwein Date: Wed, 13 Oct 2021 16:08:53 +0200 Subject: [PATCH 17/19] fixed indentation --- code/script.js | 202 ++++++++++++++++++++++++------------------------- 1 file changed, 101 insertions(+), 101 deletions(-) diff --git a/code/script.js b/code/script.js index 049980a2..bd0fd0bb 100644 --- a/code/script.js +++ b/code/script.js @@ -3,10 +3,10 @@ const userSection = document.getElementById("user-section") //GLOBAL VARIABLES /* const options = { - method: 'GET', - headers: { - Authorization: `token xxx` - }, + method: 'GET', + headers: { + Authorization: `token xxx` + }, }; */ const REPO_API = "https://api.github.com/users/nehrwein/repos"; @@ -16,128 +16,128 @@ const totalProjects = 19; const getRepos = () => { - fetch(REPO_API, options) - .then((res) => res.json()) - .then((data) => { - - //forkedRepos shows a list of all repos that are forked ones from Technigo - const forkedRepos = data.filter(repo => repo.fork && repo.name.startsWith('project-')) - - //show the newest repos first (default) - forkedRepos.sort((a, b) => { - return new Date(b.pushed_at) - new Date(a.pushed_at); - }); - - //My name, username and profile picture - const userName = data[0].owner.login - const profilePic = data[0].owner.avatar_url - - userSection.innerHTML += /* html */` -
            -
            - Github Avatar -
            -
            -

            Birgit

            -

            ${userName}

            -
            -
            - - - - ` + fetch(REPO_API, options) + .then((res) => res.json()) + .then((data) => { + + //forkedRepos shows a list of all repos that are forked ones from Technigo + const forkedRepos = data.filter(repo => repo.fork && repo.name.startsWith('project-')) + + //show the newest repos first (default) + forkedRepos.sort((a, b) => { + return new Date(b.pushed_at) - new Date(a.pushed_at); + }); + + //My name, username and profile picture + const userName = data[0].owner.login + const profilePic = data[0].owner.avatar_url + + userSection.innerHTML += /* html */` +
            +
            + Github Avatar +
            +
            +

            Birgit

            +

            ${userName}

            +
            +
            + + + + ` - const sortBtn = document.getElementById('sort') - sortBtn.addEventListener('change', () => sort(sortBtn.value, forkedRepos)) + const sortBtn = document.getElementById('sort') + sortBtn.addEventListener('change', () => sort(sortBtn.value, forkedRepos)) - drawProjects(forkedRepos); - drawChart(forkedRepos.length) - }) + drawProjects(forkedRepos); + drawChart(forkedRepos.length) + }) } //sorting the projects by name, last updated const sort = (value, repos) => { - console.log('Value: ', value) + console.log('Value: ', value) if (value === "name") { repos.sort((a, b) => { return (a.name) > (b.name); }); - repos.forEach((repo) => { - console.log('Repos after sorting name: ', repo.name) - }) + repos.forEach((repo) => { + console.log('Repos after sorting name: ', repo.name) + }) drawProjects(repos) } else if (value === "updated") { - console.log('Wert: ', value) + console.log('Wert: ', value) repos.sort((a, b) => { return new Date(b.pushed_at) - new Date(a.pushed_at); }); - repos.forEach((repo) => { - console.log('Repos after sorting updated: ', repo.pushed_at) - }) + repos.forEach((repo) => { + console.log('Repos after sorting updated: ', repo.pushed_at) + }) drawProjects(repos) } } const drawProjects = (forkedRepositories) => { - document.getElementById('projects-section').innerHTML = ` + document.getElementById('projects-section').innerHTML = ` - ` + ` console.log('From drawProjects()', forkedRepositories) - forkedRepositories.forEach((repo) => { - document.getElementById('projects-section').innerHTML += ` -
            - ${repo.name} -

            default branch: ${repo.default_branch}

            -

            Last push: ${new Date(repo.pushed_at).toLocaleDateString('en-GB')}

            -

            Commits: 0

            -
              -
              - `; - - getCommits(forkedRepositories, repo.name); - }); - - forkedRepositories.forEach((repo) => { - document - .getElementById(`commit-${repo.name}`) - .addEventListener('click', () => { - document - .getElementById(`commitMessages-${repo.name}`) - .classList.toggle('active'); - }); - }); + forkedRepositories.forEach((repo) => { + document.getElementById('projects-section').innerHTML += ` +
              + ${repo.name} +

              default branch: ${repo.default_branch}

              +

              Last push: ${new Date(repo.pushed_at).toLocaleDateString('en-GB')}

              +

              Commits: 0

              +
                +
                + `; + + getCommits(forkedRepositories, repo.name); + }); + + forkedRepositories.forEach((repo) => { + document + .getElementById(`commit-${repo.name}`) + .addEventListener('click', () => { + document + .getElementById(`commitMessages-${repo.name}`) + .classList.toggle('active'); + }); + }); }; const getCommits = (filteredArray, myRepoName) => { - console.log('Reponame: ', myRepoName) - //First make a new array with all the needed APIs (found under commit_urls in forkedRepos) - const allCommitUrls = filteredArray.map(repo => repo.commits_url) - - allCommitUrls.forEach(commitAPI => { - //the URLs end with {/sha}, therefore the last 6 chars need to be sliced - commitAPI = commitAPI.slice(0, -6) - - //now the URLs can be passed on to get data about number and content of commits - fetch(commitAPI, options) - .then((res) => res.json()) - .then((data) => { - const authorCommits = data.filter(commits => commits.author.login === 'nehrwein' && commits.url.includes(myRepoName)) - console.log(authorCommits) - if (authorCommits.length > 0) { - document.getElementById(`commit-${myRepoName}`).innerHTML = ` - Commits: ${authorCommits.length} - ` - authorCommits.forEach(element => { - document.getElementById(`commitMessages-${myRepoName}`).innerHTML += ` -
              • ${element.commit.message}
                • - ` - }) - } - }) - }); + console.log('Reponame: ', myRepoName) + //First make a new array with all the needed APIs (found under commit_urls in forkedRepos) + const allCommitUrls = filteredArray.map(repo => repo.commits_url) + + allCommitUrls.forEach(commitAPI => { + //the URLs end with {/sha}, therefore the last 6 chars need to be sliced + commitAPI = commitAPI.slice(0, -6) + + //now the URLs can be passed on to get data about number and content of commits + fetch(commitAPI, options) + .then((res) => res.json()) + .then((data) => { + const authorCommits = data.filter(commits => commits.author.login === 'nehrwein' && commits.url.includes(myRepoName)) + console.log(authorCommits) + if (authorCommits.length > 0) { + document.getElementById(`commit-${myRepoName}`).innerHTML = ` + Commits: ${authorCommits.length} + ` + authorCommits.forEach(element => { + document.getElementById(`commitMessages-${myRepoName}`).innerHTML += ` +
              • ${element.commit.message}
                • + ` + }) + } + }) + }); } From dbeaf80dbdd8ff83c158b7c4887a164363d91b8b Mon Sep 17 00:00:00 2001 From: Birgit Nehrwein Date: Sun, 17 Oct 2021 15:03:35 +0200 Subject: [PATCH 18/19] commented out authorization --- code/script.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/code/script.js b/code/script.js index bd0fd0bb..3bc4f7bc 100644 --- a/code/script.js +++ b/code/script.js @@ -16,7 +16,7 @@ const totalProjects = 19; const getRepos = () => { - fetch(REPO_API, options) + fetch(REPO_API, /* options */) .then((res) => res.json()) .then((data) => { @@ -51,7 +51,7 @@ const getRepos = () => { ` const sortBtn = document.getElementById('sort') - sortBtn.addEventListener('change', () => sort(sortBtn.value, forkedRepos)) + sortBtn.addEventListener('change', () => sort(sortBtn.value, forkedRepos)) drawProjects(forkedRepos); drawChart(forkedRepos.length) @@ -93,7 +93,7 @@ const drawProjects = (forkedRepositories) => {

                default branch: ${repo.default_branch}

                Last push: ${new Date(repo.pushed_at).toLocaleDateString('en-GB')}

                Commits: 0

                -
                  +
                    `; @@ -121,7 +121,7 @@ const getCommits = (filteredArray, myRepoName) => { commitAPI = commitAPI.slice(0, -6) //now the URLs can be passed on to get data about number and content of commits - fetch(commitAPI, options) + fetch(commitAPI, /* options */) .then((res) => res.json()) .then((data) => { const authorCommits = data.filter(commits => commits.author.login === 'nehrwein' && commits.url.includes(myRepoName)) From 5abde44cc366536e7b2deda8dc44b61e1cdebd7d Mon Sep 17 00:00:00 2001 From: Birgit Nehrwein Date: Sat, 23 Oct 2021 09:41:47 +0200 Subject: [PATCH 19/19] fixed sorting bug --- code/script.js | 19 ++++--------------- 1 file changed, 4 insertions(+), 15 deletions(-) diff --git a/code/script.js b/code/script.js index 3bc4f7bc..85f192c8 100644 --- a/code/script.js +++ b/code/script.js @@ -45,6 +45,7 @@ const getRepos = () => { @@ -60,32 +61,21 @@ const getRepos = () => { //sorting the projects by name, last updated const sort = (value, repos) => { - console.log('Value: ', value) if (value === "name") { repos.sort((a, b) => { - return (a.name) > (b.name); + return (a.name) > (b.name) ? 1 : -1; }); - repos.forEach((repo) => { - console.log('Repos after sorting name: ', repo.name) - }) drawProjects(repos) } else if (value === "updated") { - console.log('Wert: ', value) repos.sort((a, b) => { return new Date(b.pushed_at) - new Date(a.pushed_at); }); - repos.forEach((repo) => { - console.log('Repos after sorting updated: ', repo.pushed_at) - }) drawProjects(repos) } } const drawProjects = (forkedRepositories) => { - document.getElementById('projects-section').innerHTML = ` - - ` - console.log('From drawProjects()', forkedRepositories) + document.getElementById('projects-section').innerHTML = ` ` forkedRepositories.forEach((repo) => { document.getElementById('projects-section').innerHTML += `
                    @@ -112,7 +102,7 @@ const drawProjects = (forkedRepositories) => { }; const getCommits = (filteredArray, myRepoName) => { - console.log('Reponame: ', myRepoName) + //First make a new array with all the needed APIs (found under commit_urls in forkedRepos) const allCommitUrls = filteredArray.map(repo => repo.commits_url) @@ -125,7 +115,6 @@ const getCommits = (filteredArray, myRepoName) => { .then((res) => res.json()) .then((data) => { const authorCommits = data.filter(commits => commits.author.login === 'nehrwein' && commits.url.includes(myRepoName)) - console.log(authorCommits) if (authorCommits.length > 0) { document.getElementById(`commit-${myRepoName}`).innerHTML = ` Commits: ${authorCommits.length}