From 37f39a913c01beeca5ffcc33cc9b6bbeb3c57317 Mon Sep 17 00:00:00 2001 From: Darya Date: Mon, 27 Sep 2021 20:02:54 +0200 Subject: [PATCH 01/14] added pull request API --- code/chart.js | 30 ++++++++++++++++++++++++++++ code/index.html | 6 ++++++ code/script.js | 53 +++++++++++++++++++++++++++++++++++++++++++++++++ code/style.css | 6 +++++- 4 files changed, 94 insertions(+), 1 deletion(-) diff --git a/code/chart.js b/code/chart.js index 92e85a30..02ae1ebb 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,34 @@ +// chart library + + //DOM-selector for the canvas 👇 const ctx = document.getElementById('chart').getContext('2d') + //"Draw" the chart here 👇 +const data = { + labels: [ + 'Red', + 'Blue', + 'Yellow' + ], + datasets: [{ + label: 'My First Dataset', + data: [300, 50, 100], + backgroundColor: [ + 'rgb(255, 99, 132)', + 'rgb(54, 162, 235)', + 'rgb(255, 205, 86)' + ], + hoverOffset: 4 + }] + }; + +const config = { + type: 'doughnut', + data: data, + }; + + + + var myChart = new Chart(ctx, config) \ No newline at end of file diff --git a/code/index.html b/code/index.html index 2fb5e0ae..02b38343 100644 --- a/code/index.html +++ b/code/index.html @@ -5,7 +5,11 @@ Project GitHub Tracker + + + +

GitHub Tracker

@@ -17,5 +21,7 @@

Projects:

+ + \ No newline at end of file diff --git a/code/script.js b/code/script.js index e69de29b..fc284eae 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,53 @@ +// main fetch and function and put the DOM here + +const projects = document.getElementById('projects') + +const ALL_MY_REPOS = `https://api.github.com/users/DALA746/repos` + +const getRepos = () => { + fetch(ALL_MY_REPOS) + .then((res) => { + return res.json() + }) + .then((data) => { + const forkedRepos = data.filter(repo => repo.fork && repo.name.startsWith('project-')) + forkedRepos.forEach(repo => projects.innerHTML += `

${repo.name}

`) + console.log(forkedRepos) + getPullRequests(forkedRepos) + }) +} + +getRepos() + +// GETTING MY COMMENTS FUNCTION +const getCommits = (commit) => { + const COMMITS = commit.commits_url + console.log(COMMITS) + + console.log(commit) +} + + + + +// GETTING ALL MY PULL REQUESTS +const getPullRequests = (repos) => { // repos är samma som forkedRepos + repos.forEach(repo => { + console.log(repo) // alla mina forked pull requests + fetch(`https://api.github.com/repos/technigo/${repo.name}/pulls`) // getting all pullrequest to the specific project + .then(res => res.json()) + .then(data => { + console.log(data) // + const myPullRequest = data.filter(pull => pull.user.login === repo.owner.login) // sorting data by comparing my user name + console.log(myPullRequest) + getCommits(myPullRequest) + }) + + }) +} + + + + + + diff --git a/code/style.css b/code/style.css index 7c8ad447..2f70468b 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,7 @@ +@import url('https://fonts.googleapis.com/css?family=Montserrat:100,100italic,200,200italic,300,300italic,regular,italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic'); + body { - background: #FFECE9; + background: #222222; + color: rgb(206, 206, 206); + font-family: 'Montserrat'; } \ No newline at end of file From 277fe975decad8ee7f613a79b82477dbf4197474 Mon Sep 17 00:00:00 2001 From: Darya Date: Tue, 28 Sep 2021 17:35:16 +0200 Subject: [PATCH 02/14] added getCommits function and drawChart function --- TODO | 0 code/chart.js | 71 ++++++++++++++++++++++++-------------- code/index.html | 2 ++ code/script.js | 91 +++++++++++++++++++++++++++++++++---------------- code/style.css | 5 +++ 5 files changed, 114 insertions(+), 55 deletions(-) create mode 100644 TODO diff --git a/TODO b/TODO new file mode 100644 index 00000000..e69de29b diff --git a/code/chart.js b/code/chart.js index 02ae1ebb..168d055d 100644 --- a/code/chart.js +++ b/code/chart.js @@ -6,29 +6,50 @@ const ctx = document.getElementById('chart').getContext('2d') //"Draw" the chart here 👇 -const data = { - labels: [ - 'Red', - 'Blue', - 'Yellow' - ], - datasets: [{ - label: 'My First Dataset', - data: [300, 50, 100], - backgroundColor: [ - 'rgb(255, 99, 132)', - 'rgb(54, 162, 235)', - 'rgb(255, 205, 86)' - ], - hoverOffset: 4 - }] +// const data = { +// labels: [ +// 'Red', +// 'Blue', +// 'Yellow' +// ], +// datasets: [{ +// label: 'My First Dataset', +// data: [400, 50, 100], +// backgroundColor: [ +// 'rgb(255, 99, 132)', +// 'rgb(54, 162, 235)', +// 'rgb(255, 205, 86)' +// ], +// hoverOffset: 4 +// }] +// }; + +// const config = { +// type: 'doughnut', +// data: data, +// }; + + + +// var myChart = new Chart(ctx, config) + + const drawChart = (number) => { + const config = { + type: 'doughnut', + data: { + labels: ["Projects done", "Still to do"], + datasets: [ + { + label: "My first Dataset", + data: [number, 20 - number], // divide donut to 2 different parts + backgroundColor: [ + "rgb(255, 99, 132)", + "rgb(54, 162, 235)", + ], + hoverOffset:4, + }, + ], + }, + } + const myChart = new Chart(ctx, config); }; - -const config = { - type: 'doughnut', - data: data, - }; - - - - var myChart = new Chart(ctx, config) \ No newline at end of file diff --git a/code/index.html b/code/index.html index 02b38343..043c61fd 100644 --- a/code/index.html +++ b/code/index.html @@ -13,6 +13,8 @@

GitHub Tracker

+ +

Projects:

diff --git a/code/script.js b/code/script.js index fc284eae..4b3c7314 100644 --- a/code/script.js +++ b/code/script.js @@ -1,51 +1,82 @@ // main fetch and function and put the DOM here +const projectsContainer = document.getElementById('projects') +const headerContainer = document.getElementById('header') +const ALL_MY_REPOS = `https://api.github.com/users/DALA746/repos` -const projects = document.getElementById('projects') -const ALL_MY_REPOS = `https://api.github.com/users/DALA746/repos` const getRepos = () => { fetch(ALL_MY_REPOS) - .then((res) => { - return res.json() - }) - .then((data) => { - const forkedRepos = data.filter(repo => repo.fork && repo.name.startsWith('project-')) - forkedRepos.forEach(repo => projects.innerHTML += `

${repo.name}

`) - console.log(forkedRepos) - getPullRequests(forkedRepos) + .then(res => res.json()) + .then((json) => { // This json shows all of my repos on GitHub + // console.log(json) + // filter repos so I can only get tehcnigos repos + const forkedRepos = json.filter(repo => repo.fork && repo.name.startsWith('project-')) + drawChart(forkedRepos.length) + console.log(forkedRepos.length) + + forkedRepos.forEach((repo) => { + // console.log(repo) + + // need to do convert to right format? + const pushUpdates = repo.pushed_at + const defaultBranch = repo.default_branch + const gitHubRepo = repo.clone_url + + // header container + headerContainer.innerHTML = ` +
+

${repo.owner.login}

+ +
` + + // project container + projectsContainer.innerHTML += ` + +

Project Name: ${repo.name}

+

Latest push update: ${pushUpdates}

+

Default branch: ${defaultBranch}

+

GitHub link: ${gitHubRepo}

+ ` + }) + // console.log(forkedRepos) + getPullRequests(forkedRepos) // passing all my forked repos to this function + }) } +// calling getRepos function getRepos() -// GETTING MY COMMENTS FUNCTION -const getCommits = (commit) => { - const COMMITS = commit.commits_url - console.log(COMMITS) - - console.log(commit) -} - - - - // GETTING ALL MY PULL REQUESTS -const getPullRequests = (repos) => { // repos är samma som forkedRepos - repos.forEach(repo => { - console.log(repo) // alla mina forked pull requests - fetch(`https://api.github.com/repos/technigo/${repo.name}/pulls`) // getting all pullrequest to the specific project +const getPullRequests = (forkedRepos) => { // repos är samma som forkedRepos + forkedRepos.forEach(repo => { + // console.log(repo) // alla mina forked pull requests + fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`) // getting all pullrequest to the specific project .then(res => res.json()) .then(data => { - console.log(data) // - const myPullRequest = data.filter(pull => pull.user.login === repo.owner.login) // sorting data by comparing my user name - console.log(myPullRequest) - getCommits(myPullRequest) + const myPullRequests = data.find(pull => pull.user.login === repo.owner.login) // there is a different between filter and find function + // console.log(myPullRequests) + getCommits(myPullRequests.commits_url) // link }) - }) } +const getCommits = (url) => { + console.log(url) + fetch(url) + .then(res => res.json()) + .then(data => { + console.log(data) + const numberOfCommits = data.length + projectsContainer.innerHTML += ` +

Number of commits ${numberOfCommits}

+ + ` + console.log(data.length) + }) +} + diff --git a/code/style.css b/code/style.css index 2f70468b..b65d7e79 100644 --- a/code/style.css +++ b/code/style.css @@ -4,4 +4,9 @@ body { background: #222222; color: rgb(206, 206, 206); font-family: 'Montserrat'; +} + +.profile-img { + width: 100px; + border-radius: 50%; } \ No newline at end of file From f78aebbd0facb1d98198d8246bdf2a4975b8c1ef Mon Sep 17 00:00:00 2001 From: Darya Date: Thu, 30 Sep 2021 12:21:48 +0200 Subject: [PATCH 03/14] added styling --- TODO | 20 ++++++ code/chart.js | 27 -------- code/index.html | 51 +++++++++++--- code/script.js | 66 +++++++++--------- code/style.css | 174 +++++++++++++++++++++++++++++++++++++++++++++++- 5 files changed, 271 insertions(+), 67 deletions(-) diff --git a/TODO b/TODO index e69de29b..1e999a22 100644 --- a/TODO +++ b/TODO @@ -0,0 +1,20 @@ +BLUE LEVEL: + +A list of all repos that are forked from Technigo - OK! + +Your username and profile picture - OK! + +Most recent update (push) for each repo + +Name of your default branch for each repo + +URL to the actual GitHub repo + +Number of commits for each repo + +Responsive + +A visualisation, for example through a pie chart, of how many projects you've done so far, +compared to how many you will do (in total it will be 19 weekly projects 🥳) using Chart.js. + + diff --git a/code/chart.js b/code/chart.js index 168d055d..b7b62976 100644 --- a/code/chart.js +++ b/code/chart.js @@ -4,33 +4,6 @@ //DOM-selector for the canvas 👇 const ctx = document.getElementById('chart').getContext('2d') - -//"Draw" the chart here 👇 -// const data = { -// labels: [ -// 'Red', -// 'Blue', -// 'Yellow' -// ], -// datasets: [{ -// label: 'My First Dataset', -// data: [400, 50, 100], -// backgroundColor: [ -// 'rgb(255, 99, 132)', -// 'rgb(54, 162, 235)', -// 'rgb(255, 205, 86)' -// ], -// hoverOffset: 4 -// }] -// }; - -// const config = { -// type: 'doughnut', -// data: data, -// }; - - - // var myChart = new Chart(ctx, config) const drawChart = (number) => { diff --git a/code/index.html b/code/index.html index 043c61fd..e08c4bc7 100644 --- a/code/index.html +++ b/code/index.html @@ -5,6 +5,7 @@ Project GitHub Tracker + @@ -12,14 +13,48 @@ -

GitHub Tracker

- - -

Projects:

-
- - - +
+
+ +

GitHub Tracker

+
+ + +
+ +
+
+ + +
+
+ + + +
+
+ + + + +
+ +
+
+
+

Project Statistics

+ +
+ + +
+ + + + + + + diff --git a/code/script.js b/code/script.js index 4b3c7314..69a21a08 100644 --- a/code/script.js +++ b/code/script.js @@ -1,7 +1,11 @@ // main fetch and function and put the DOM here const projectsContainer = document.getElementById('projects') const headerContainer = document.getElementById('header') -const ALL_MY_REPOS = `https://api.github.com/users/DALA746/repos` +const USER = 'DALA746' +const ALL_MY_REPOS = `https://api.github.com/users/${USER}/repos` + +const button = document.getElementById('button') + @@ -11,43 +15,38 @@ const getRepos = () => { .then((json) => { // This json shows all of my repos on GitHub // console.log(json) // filter repos so I can only get tehcnigos repos - const forkedRepos = json.filter(repo => repo.fork && repo.name.startsWith('project-')) + const forkedRepos = json.filter(repo => repo.fork && repo.name.startsWith('project-')) // or you can use includes method drawChart(forkedRepos.length) - console.log(forkedRepos.length) forkedRepos.forEach((repo) => { - // console.log(repo) - - // need to do convert to right format? - const pushUpdates = repo.pushed_at - const defaultBranch = repo.default_branch - const gitHubRepo = repo.clone_url - + console.log(repo) // header container headerContainer.innerHTML = ` -
-

${repo.owner.login}

+
+

Darya Lapata

+

${repo.owner.login}

+

Location: Stockholm

` - // project container projectsContainer.innerHTML += ` - -

Project Name: ${repo.name}

-

Latest push update: ${pushUpdates}

-

Default branch: ${defaultBranch}

-

GitHub link: ${gitHubRepo}

+
+

${repo.name}

 +

Commits amount:

+

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

+

Default branch: ${repo.default_branch}

+
` }) - // console.log(forkedRepos) - getPullRequests(forkedRepos) // passing all my forked repos to this function + getPullRequests(forkedRepos) // passing all my forked repos to this function }) } // calling getRepos function getRepos() + // GETTING ALL MY PULL REQUESTS const getPullRequests = (forkedRepos) => { // repos är samma som forkedRepos forkedRepos.forEach(repo => { @@ -55,28 +54,33 @@ const getPullRequests = (forkedRepos) => { // repos är samma som forkedRepos fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`) // getting all pullrequest to the specific project .then(res => res.json()) .then(data => { - const myPullRequests = data.find(pull => pull.user.login === repo.owner.login) // there is a different between filter and find function - // console.log(myPullRequests) - getCommits(myPullRequests.commits_url) // link + const myPullRequests = data.find(pull => pull.user.login === repo.owner.login) // there is a different between filter and find function, with find you get a sandwich with a name on + getCommits(myPullRequests.commits_url, repo.name) // link }) }) } -const getCommits = (url) => { - console.log(url) +const getCommits = (url, myRepoName) => { + // fetching url for commits fetch(url) .then(res => res.json()) .then(data => { - console.log(data) const numberOfCommits = data.length - projectsContainer.innerHTML += ` -

Number of commits ${numberOfCommits}

- - ` - console.log(data.length) + document.getElementById(`commit-${myRepoName}`).innerHTML += numberOfCommits }) } +const getInputValue = () => { + const userValue = document.getElementById('inputValue').value + + console.log(userValue) +} + + +button.addEventListener('click', (e) => { + e.preventDefault() + getInputValue() +}) diff --git a/code/style.css b/code/style.css index b65d7e79..6e78b720 100644 --- a/code/style.css +++ b/code/style.css @@ -1,12 +1,184 @@ @import url('https://fonts.googleapis.com/css?family=Montserrat:100,100italic,200,200italic,300,300italic,regular,italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic'); +@import url('https://fonts.googleapis.com/css?family=Bungee:regular'); +* { + box-sizing: border-box; +} body { - background: #222222; + background:#222222; color: rgb(206, 206, 206); font-family: 'Montserrat'; + margin:0; +} + +p { + font-size: 14px; +} + +a { + color:rgb(51, 44, 255) +} + +a:hover { + color:rgb(216, 216, 216) +} + + +/* navbar */ + +.topnav { + overflow: hidden; + background-color: #2c2c2c; + padding:10px; +} + +.logo-container { + float: left; + display: flex; + gap: 10px; + margin-top: 8px; + margin-left: 16px; +} + +/* seach section */ + +.search-container { + margin-bottom: 20px; +} + +form.example input[type=text] { + padding: 17px; + font-size: 17px; + border: 1px solid rgba(128, 128, 128, 0.683); + float: left; + width: 70%; + background-color: rgb(20, 20, 20); + color: white; +} + +/* Style the submit button */ +form.example button { + float: left; + width: 30%; + padding: 15px; + background: #363636; + color: white; + font-size: 21px; + border: 1px solid grey; + border-left: none; /* Prevent double borders */ + cursor: pointer; +} + +form.example button:hover { + background: #0b7dda; +} + +/* Clear floats */ +form.example::after { + content: ""; + clear: both; + display: table; +} + +/*user information */ +.user-information { + display: flex; + flex-direction: column; + align-items: center; +} + +.info-about-user { + display: flex; + flex-direction: column; + align-items: center; } .profile-img { width: 100px; border-radius: 50%; + margin:10px; +} + +.project-container { + display: flex; + flex-direction: column; + gap: 10px; +} + +.repo { + /* adding space between divs*/ + border: 2px solid rgb(63, 63, 63); + border-radius: 5px; + padding:10px; + +} + +.logo-img { + height: 30px; +} + +.chart-container { + width: 300px; +} + + + +/*** MEDIA QUERIES ***/ + +/*tablet*/ +@media (min-width:667px) and (max-width: 1024px) { + .project-container { + flex-direction: row; + flex-wrap:wrap; + justify-content: center; + } + + .repo { + width: 340px; + height: 200px; + } +} + +/*desktop*/ + +@media(min-width: 1025px) { + .container { + display: flex; + flex-direction: column; + margin: 40px 0; + align-items: center; + } + + .project-container { + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + } + + .statistics-container { + display: flex; + flex-direction: row; + max-width: 1500px; + min-width: 1000px; + align-items: center; + } + + .chart-container { + width: 30%; + } + + .repo { + width: 340px; + height: 200px; + + } + + .user-information { + height: auto; + } + + .profile-img { + height: 200px; + width: 200px; + } } \ No newline at end of file From 0676f53d5547f96c94e0dd3e1da639501a730662 Mon Sep 17 00:00:00 2001 From: Darya Date: Fri, 1 Oct 2021 07:55:18 +0200 Subject: [PATCH 04/14] some more styling --- README.md | 2 +- TODO | 20 ------------------ code/chart.js | 34 ++++++++++++++++++++++++------ code/index.html | 55 ++++++++++++++++++++++++++----------------------- code/script.js | 18 ++++++++++++++-- code/style.css | 30 ++++++++++++++++++++++++--- 6 files changed, 101 insertions(+), 58 deletions(-) delete mode 100644 TODO diff --git a/README.md b/README.md index 1613a3b0..e6ec9194 100644 --- a/README.md +++ b/README.md @@ -10,4 +10,4 @@ Describe how you approached to problem, and what tools and techniques you used t ## 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. +Demo: https://github-tracker-by-darya.netlify.app/ diff --git a/TODO b/TODO deleted file mode 100644 index 1e999a22..00000000 --- a/TODO +++ /dev/null @@ -1,20 +0,0 @@ -BLUE LEVEL: - -A list of all repos that are forked from Technigo - OK! - -Your username and profile picture - OK! - -Most recent update (push) for each repo - -Name of your default branch for each repo - -URL to the actual GitHub repo - -Number of commits for each repo - -Responsive - -A visualisation, for example through a pie chart, of how many projects you've done so far, -compared to how many you will do (in total it will be 19 weekly projects 🥳) using Chart.js. - - diff --git a/code/chart.js b/code/chart.js index b7b62976..ff446069 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,12 +1,10 @@ -// chart library - - -//DOM-selector for the canvas 👇 const ctx = document.getElementById('chart').getContext('2d') +const ctx2 = document.getElementById('chart2').getContext('2d') + +const myChart = new Chart(ctx, config); -// var myChart = new Chart(ctx, config) - const drawChart = (number) => { +const drawChart = (number) => { const config = { type: 'doughnut', data: { @@ -26,3 +24,27 @@ const ctx = document.getElementById('chart').getContext('2d') } const myChart = new Chart(ctx, config); }; + +drawChart.destroy() + + const showLanguages = (amountHTML, amountCSS, amountJS) => { + const config2 = { + type: 'doughnut', + data: { + labels: ["HTML", "CSS", "JavaScript"], + datasets: [ + { + label: "My first Dataset", + data: [amountHTML, amountCSS, amountJS], + backgroundColor: [ + "rgb(255, 99, 132)", + "rgb(54, 162, 235)", + "rgb(0, 0, 0)" + ], + hoverOffset:4, + }, + ], + }, + } + const myChart = new Chart(ctx2, config2); + } diff --git a/code/index.html b/code/index.html index e08c4bc7..3406221e 100644 --- a/code/index.html +++ b/code/index.html @@ -13,41 +13,44 @@ -
-
- -

GitHub Tracker

-
+ - -
- -
-
- - -
-
+
+

Find a repository

+
+ + +
+
-
+
- - - -
+ +
+ +
+
+
+

Project Statistics

+ + +
- -
-
-

Project Statistics

- -
+ + + + -
+ diff --git a/code/script.js b/code/script.js index 69a21a08..ac10b527 100644 --- a/code/script.js +++ b/code/script.js @@ -19,7 +19,7 @@ const getRepos = () => { drawChart(forkedRepos.length) forkedRepos.forEach((repo) => { - console.log(repo) + // header container headerContainer.innerHTML = `
@@ -35,17 +35,29 @@ const getRepos = () => {

Commits amount:

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

Default branch: ${repo.default_branch}

+
` + getLanguages(repo.languages_url) }) getPullRequests(forkedRepos) // passing all my forked repos to this function + }) } // calling getRepos function getRepos() +const getLanguages = (languageUrl) => { + fetch(languageUrl) + .then(res => res.json()) + .then(data => { + showLanguages(data.HTML, data.CSS, data.JavaScript) + console.log(data.CSS) + }) +} + // GETTING ALL MY PULL REQUESTS const getPullRequests = (forkedRepos) => { // repos är samma som forkedRepos @@ -54,8 +66,10 @@ const getPullRequests = (forkedRepos) => { // repos är samma som forkedRepos fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`) // getting all pullrequest to the specific project .then(res => res.json()) .then(data => { + const myPullRequests = data.find(pull => pull.user.login === repo.owner.login) // there is a different between filter and find function, with find you get a sandwich with a name on getCommits(myPullRequests.commits_url, repo.name) // link + }) }) } @@ -77,7 +91,7 @@ const getInputValue = () => { } -button.addEventListener('click', (e) => { +button.addEventListener('submit', (e) => { e.preventDefault() getInputValue() }) diff --git a/code/style.css b/code/style.css index 6e78b720..0894dc3b 100644 --- a/code/style.css +++ b/code/style.css @@ -46,6 +46,10 @@ a:hover { margin-bottom: 20px; } +.search-title { + margin-left: 10px; +} + form.example input[type=text] { padding: 17px; font-size: 17px; @@ -137,11 +141,21 @@ form.example::after { width: 340px; height: 200px; } + + .search-container { + display: flex; + flex-direction: column; + align-items: center; + } + + .example { + width: 70%; + } } /*desktop*/ -@media(min-width: 1025px) { +@media(min-width: 1266px) { .container { display: flex; flex-direction: column; @@ -163,9 +177,9 @@ form.example::after { align-items: center; } - .chart-container { + /* .chart-container { width: 30%; - } + } */ .repo { width: 340px; @@ -181,4 +195,14 @@ form.example::after { height: 200px; width: 200px; } + + .search-container { + display: flex; + flex-direction: column; + align-items: center; + } + + .example { + width: 50%; + } } \ No newline at end of file From 1cdc2c42a09b938239942d5a44375b8072d39c54 Mon Sep 17 00:00:00 2001 From: Darya Date: Fri, 1 Oct 2021 09:09:52 +0200 Subject: [PATCH 05/14] fixed bugs with styling --- code/chart.js | 47 +++++++++++++++++++++++------------------------ code/index.html | 38 ++++++++++---------------------------- code/script.js | 29 +++++++++-------------------- code/style.css | 32 ++++++++++++++++++++++++++------ 4 files changed, 68 insertions(+), 78 deletions(-) diff --git a/code/chart.js b/code/chart.js index ff446069..2997572a 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,7 +1,6 @@ const ctx = document.getElementById('chart').getContext('2d') -const ctx2 = document.getElementById('chart2').getContext('2d') -const myChart = new Chart(ctx, config); + const drawChart = (number) => { @@ -25,26 +24,26 @@ const drawChart = (number) => { const myChart = new Chart(ctx, config); }; -drawChart.destroy() - const showLanguages = (amountHTML, amountCSS, amountJS) => { - const config2 = { - type: 'doughnut', - data: { - labels: ["HTML", "CSS", "JavaScript"], - datasets: [ - { - label: "My first Dataset", - data: [amountHTML, amountCSS, amountJS], - backgroundColor: [ - "rgb(255, 99, 132)", - "rgb(54, 162, 235)", - "rgb(0, 0, 0)" - ], - hoverOffset:4, - }, - ], - }, - } - const myChart = new Chart(ctx2, config2); - } + + // const showLanguages = (amountHTML, amountCSS, amountJS) => { + // const config2 = { + // type: 'doughnut', + // data: { + // labels: ["HTML", "CSS", "JavaScript"], + // datasets: [ + // { + // label: "My first Dataset", + // data: [amountHTML, amountCSS, amountJS], + // backgroundColor: [ + // "rgb(255, 99, 132)", + // "rgb(54, 162, 235)", + // "rgb(0, 0, 0)" + // ], + // hoverOffset:4, + // }, + // ], + // }, + // } + // const myChart = new Chart(ctx2, config2); + // } diff --git a/code/index.html b/code/index.html index 3406221e..f231ab7d 100644 --- a/code/index.html +++ b/code/index.html @@ -10,7 +10,6 @@ - -
+
- -
- -
-
-
-

Project Statistics

- - -
- - - - - +
+ +
+

Project Statistics

+
+ +
+
- - - - - - - - \ No newline at end of file diff --git a/code/script.js b/code/script.js index ac10b527..a45c5357 100644 --- a/code/script.js +++ b/code/script.js @@ -7,8 +7,6 @@ const ALL_MY_REPOS = `https://api.github.com/users/${USER}/repos` const button = document.getElementById('button') - - const getRepos = () => { fetch(ALL_MY_REPOS) .then(res => res.json()) @@ -38,7 +36,7 @@ const getRepos = () => { ` - getLanguages(repo.languages_url) + // getLanguages(repo.languages_url) }) getPullRequests(forkedRepos) // passing all my forked repos to this function @@ -49,14 +47,14 @@ const getRepos = () => { // calling getRepos function getRepos() -const getLanguages = (languageUrl) => { - fetch(languageUrl) - .then(res => res.json()) - .then(data => { - showLanguages(data.HTML, data.CSS, data.JavaScript) - console.log(data.CSS) - }) -} +// const getLanguages = (languageUrl) => { +// fetch(languageUrl) +// .then(res => res.json()) +// .then(data => { +// showLanguages(data.HTML, data.CSS, data.JavaScript) +// console.log(data.CSS) +// }) +// } // GETTING ALL MY PULL REQUESTS @@ -84,17 +82,8 @@ const getCommits = (url, myRepoName) => { }) } -const getInputValue = () => { - const userValue = document.getElementById('inputValue').value - - console.log(userValue) -} -button.addEventListener('submit', (e) => { - e.preventDefault() - getInputValue() -}) diff --git a/code/style.css b/code/style.css index 0894dc3b..d4b25aa9 100644 --- a/code/style.css +++ b/code/style.css @@ -89,6 +89,7 @@ form.example::after { display: flex; flex-direction: column; align-items: center; + padding: 30px; } .info-about-user { @@ -98,7 +99,7 @@ form.example::after { } .profile-img { - width: 100px; + width: 150px; border-radius: 50%; margin:10px; } @@ -114,7 +115,10 @@ form.example::after { border: 2px solid rgb(63, 63, 63); border-radius: 5px; padding:10px; +} +.doughnut { + width: 100%; } .logo-img { @@ -122,15 +126,24 @@ form.example::after { } .chart-container { - width: 300px; + width: 100%; + display: flex; + flex-direction: column; + align-items: center; } + + /*** MEDIA QUERIES ***/ /*tablet*/ @media (min-width:667px) and (max-width: 1024px) { + .profile-img { + width: 200px; + } + .project-container { flex-direction: row; flex-wrap:wrap; @@ -138,8 +151,7 @@ form.example::after { } .repo { - width: 340px; - height: 200px; + width: 46%; } .search-container { @@ -151,11 +163,15 @@ form.example::after { .example { width: 70%; } + + .doughnut { + width: 60%; + } } /*desktop*/ -@media(min-width: 1266px) { +@media(min-width: 1025px) { .container { display: flex; flex-direction: column; @@ -184,11 +200,11 @@ form.example::after { .repo { width: 340px; height: 200px; - } .user-information { height: auto; + } .profile-img { @@ -205,4 +221,8 @@ form.example::after { .example { width: 50%; } + + .doughnut { + width: 30%; + } } \ No newline at end of file From 0d68dcf2b8eca93795441cf6be209b2f3aa205da Mon Sep 17 00:00:00 2001 From: Darya Lapata <79586101+DALA746@users.noreply.github.com> Date: Thu, 14 Oct 2021 21:01:04 +0200 Subject: [PATCH 06/14] Update README.md --- README.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index e6ec9194..8ab304ab 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,13 @@ # GitHub Tracker -Replace this readme with your own information about your project. +A GitHub-like page where you can track all of the projects which I will build at Technigos boot camp. For this project, I continued my journey with JavaScript and digging deeper into API. -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. +# What I learned -## The problem +- how to fetch data from API +- how to pass data to functions +- how to use filter/find functions -Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next? - -## View it live +# View it live Demo: https://github-tracker-by-darya.netlify.app/ From 7f651fd1a395a925cdee78287b2953c22e0601d4 Mon Sep 17 00:00:00 2001 From: Darya Date: Thu, 14 Oct 2021 21:04:20 +0200 Subject: [PATCH 07/14] cleaned the code --- code/index.html | 15 ++++++--------- code/script.js | 16 ---------------- code/style.css | 10 ++++++++-- 3 files changed, 14 insertions(+), 27 deletions(-) diff --git a/code/index.html b/code/index.html index f231ab7d..453773d5 100644 --- a/code/index.html +++ b/code/index.html @@ -17,16 +17,14 @@

GitHub Tracker

+
+
+ + +
+
- -
@@ -38,7 +36,6 @@

Project Statistics

-
diff --git a/code/script.js b/code/script.js index a45c5357..f0393511 100644 --- a/code/script.js +++ b/code/script.js @@ -11,7 +11,6 @@ const getRepos = () => { fetch(ALL_MY_REPOS) .then(res => res.json()) .then((json) => { // This json shows all of my repos on GitHub - // console.log(json) // filter repos so I can only get tehcnigos repos const forkedRepos = json.filter(repo => repo.fork && repo.name.startsWith('project-')) // or you can use includes method drawChart(forkedRepos.length) @@ -38,25 +37,13 @@ const getRepos = () => { ` // getLanguages(repo.languages_url) }) - getPullRequests(forkedRepos) // passing all my forked repos to this function - }) } // calling getRepos function getRepos() -// const getLanguages = (languageUrl) => { -// fetch(languageUrl) -// .then(res => res.json()) -// .then(data => { -// showLanguages(data.HTML, data.CSS, data.JavaScript) -// console.log(data.CSS) -// }) -// } - - // GETTING ALL MY PULL REQUESTS const getPullRequests = (forkedRepos) => { // repos är samma som forkedRepos forkedRepos.forEach(repo => { @@ -86,6 +73,3 @@ const getCommits = (url, myRepoName) => { - - - diff --git a/code/style.css b/code/style.css index d4b25aa9..5f26d8a8 100644 --- a/code/style.css +++ b/code/style.css @@ -50,6 +50,10 @@ a:hover { margin-left: 10px; } +.exampe { + width: 150px; +} + form.example input[type=text] { padding: 17px; font-size: 17px; @@ -157,7 +161,8 @@ form.example::after { .search-container { display: flex; flex-direction: column; - align-items: center; + align-items: end; + margin:10px; } .example { @@ -215,7 +220,8 @@ form.example::after { .search-container { display: flex; flex-direction: column; - align-items: center; + align-items: end; + margin:10px; } .example { From 8d76fd0b6744afaaa817fd7598ac82c3e000e13a Mon Sep 17 00:00:00 2001 From: Darya Date: Thu, 14 Oct 2021 21:07:50 +0200 Subject: [PATCH 08/14] cleaned code --- README.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index e6ec9194..8ab304ab 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,13 @@ # GitHub Tracker -Replace this readme with your own information about your project. +A GitHub-like page where you can track all of the projects which I will build at Technigos boot camp. For this project, I continued my journey with JavaScript and digging deeper into API. -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. +# What I learned -## The problem +- how to fetch data from API +- how to pass data to functions +- how to use filter/find functions -Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next? - -## View it live +# View it live Demo: https://github-tracker-by-darya.netlify.app/ From 86e459ec777ed8c466da8ba8f33497cc8678786f Mon Sep 17 00:00:00 2001 From: Darya Date: Sat, 29 Jan 2022 17:41:59 +0100 Subject: [PATCH 09/14] fixed indendation --- code/chart.js | 65 ++++++++++----------------------- code/index.html | 24 ++++++------- code/script.js | 96 ++++++++++++++++++++++++------------------------- code/style.css | 11 ++---- 4 files changed, 80 insertions(+), 116 deletions(-) diff --git a/code/chart.js b/code/chart.js index 2997572a..379b3d80 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,49 +1,22 @@ const ctx = document.getElementById('chart').getContext('2d') - - - const drawChart = (number) => { - const config = { - type: 'doughnut', - data: { - labels: ["Projects done", "Still to do"], - datasets: [ - { - label: "My first Dataset", - data: [number, 20 - number], // divide donut to 2 different parts - backgroundColor: [ - "rgb(255, 99, 132)", - "rgb(54, 162, 235)", - ], - hoverOffset:4, - }, - ], - }, - } - const myChart = new Chart(ctx, config); - }; - - - - // const showLanguages = (amountHTML, amountCSS, amountJS) => { - // const config2 = { - // type: 'doughnut', - // data: { - // labels: ["HTML", "CSS", "JavaScript"], - // datasets: [ - // { - // label: "My first Dataset", - // data: [amountHTML, amountCSS, amountJS], - // backgroundColor: [ - // "rgb(255, 99, 132)", - // "rgb(54, 162, 235)", - // "rgb(0, 0, 0)" - // ], - // hoverOffset:4, - // }, - // ], - // }, - // } - // const myChart = new Chart(ctx2, config2); - // } + const config = { + type: 'doughnut', + data: { + labels: ["Projects done", "Still to do"], + datasets: [ + { + label: "My first Dataset", + data: [number, 20 - number], // divide donut to 2 different parts + backgroundColor: [ + "rgb(255, 99, 132)", + "rgb(54, 162, 235)", + ], + hoverOffset:4, + }, + ], + }, + } + const myChart = new Chart(ctx, config); + }; \ No newline at end of file diff --git a/code/index.html b/code/index.html index 453773d5..146d35d2 100644 --- a/code/index.html +++ b/code/index.html @@ -12,18 +12,18 @@ - +
diff --git a/code/script.js b/code/script.js index f0393511..39679cee 100644 --- a/code/script.js +++ b/code/script.js @@ -6,67 +6,63 @@ const ALL_MY_REPOS = `https://api.github.com/users/${USER}/repos` const button = document.getElementById('button') - const getRepos = () => { - fetch(ALL_MY_REPOS) - .then(res => res.json()) - .then((json) => { // This json shows all of my repos on GitHub - // filter repos so I can only get tehcnigos repos - const forkedRepos = json.filter(repo => repo.fork && repo.name.startsWith('project-')) // or you can use includes method - drawChart(forkedRepos.length) - - forkedRepos.forEach((repo) => { - - // header container - headerContainer.innerHTML = ` -
- -

Darya Lapata

-

${repo.owner.login}

-

Location: Stockholm

-
` - // project container - projectsContainer.innerHTML += ` -
-

${repo.name}

 -

Commits amount:

-

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

-

Default branch: ${repo.default_branch}

- -
- ` - // getLanguages(repo.languages_url) - }) - getPullRequests(forkedRepos) // passing all my forked repos to this function - }) + fetch(ALL_MY_REPOS) + .then(res => res.json()) + .then((json) => { // This json shows all of my repos on GitHub + // filter repos so I can only get tehcnigos repos + const forkedRepos = json.filter(repo => repo.fork && repo.name.startsWith('project-')) // or you can use includes method + drawChart(forkedRepos.length) + + forkedRepos.forEach((repo) => { + // header container + headerContainer.innerHTML = ` +
+ +

Darya Lapata

+

${repo.owner.login}

+

Location: Stockholm

+
+ ` + // project container + projectsContainer.innerHTML += ` +
+

${repo.name}

 +

Commits amount:

+

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

+

Default branch: ${repo.default_branch}

+ +
+ ` + // getLanguages(repo.languages_url) + }) + getPullRequests(forkedRepos) // passing all my forked repos to this function + }) } - // calling getRepos function getRepos() // GETTING ALL MY PULL REQUESTS const getPullRequests = (forkedRepos) => { // repos är samma som forkedRepos - forkedRepos.forEach(repo => { - // console.log(repo) // alla mina forked pull requests - fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`) // getting all pullrequest to the specific project - .then(res => res.json()) - .then(data => { - - const myPullRequests = data.find(pull => pull.user.login === repo.owner.login) // there is a different between filter and find function, with find you get a sandwich with a name on - getCommits(myPullRequests.commits_url, repo.name) // link - - }) + forkedRepos.forEach(repo => { + // console.log(repo) // alla mina forked pull requests + fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`) // getting all pullrequest to the specific project + .then(res => res.json()) + .then(data => { + const myPullRequests = data.find(pull => pull.user.login === repo.owner.login) // there is a different between filter and find function, with find you get a sandwich with a name on + getCommits(myPullRequests.commits_url, repo.name) // link }) + }) } const getCommits = (url, myRepoName) => { - // fetching url for commits - fetch(url) - .then(res => res.json()) - .then(data => { - const numberOfCommits = data.length - document.getElementById(`commit-${myRepoName}`).innerHTML += numberOfCommits - }) +// fetching url for commits + fetch(url) + .then(res => res.json()) + .then(data => { + const numberOfCommits = data.length + document.getElementById(`commit-${myRepoName}`).innerHTML += numberOfCommits + }) } diff --git a/code/style.css b/code/style.css index 5f26d8a8..915ab008 100644 --- a/code/style.css +++ b/code/style.css @@ -136,17 +136,13 @@ form.example::after { align-items: center; } - - - - /*** MEDIA QUERIES ***/ /*tablet*/ @media (min-width:667px) and (max-width: 1024px) { - .profile-img { - width: 200px; - } + .profile-img { + width: 200px; + } .project-container { flex-direction: row; @@ -175,7 +171,6 @@ form.example::after { } /*desktop*/ - @media(min-width: 1025px) { .container { display: flex; From ebc0042f670b2a7dea09b21c27a04400c4f97630 Mon Sep 17 00:00:00 2001 From: Darya Date: Sat, 29 Jan 2022 17:42:56 +0100 Subject: [PATCH 10/14] fixed indendation --- code/script.js | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/code/script.js b/code/script.js index 39679cee..09107dec 100644 --- a/code/script.js +++ b/code/script.js @@ -18,23 +18,21 @@ const getRepos = () => { // header container headerContainer.innerHTML = `
- -

Darya Lapata

-

${repo.owner.login}

-

Location: Stockholm

+ +

Darya Lapata

+

${repo.owner.login}

+

Location: Stockholm

` // project container projectsContainer.innerHTML += `
-

${repo.name}

 -

Commits amount:

-

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

-

Default branch: ${repo.default_branch}

- +

${repo.name}

 +

Commits amount:

+

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

+

Default branch: ${repo.default_branch}

` - // getLanguages(repo.languages_url) }) getPullRequests(forkedRepos) // passing all my forked repos to this function }) From 534ced4903e2e36e29d0f3ca46893c01196728ee Mon Sep 17 00:00:00 2001 From: Darya Date: Sat, 29 Jan 2022 17:50:20 +0100 Subject: [PATCH 11/14] fixed indendation --- code/index.html | 24 ++++++++++++------------ code/script.js | 3 ++- code/style.css | 2 +- 3 files changed, 15 insertions(+), 14 deletions(-) diff --git a/code/index.html b/code/index.html index 146d35d2..de5bf338 100644 --- a/code/index.html +++ b/code/index.html @@ -12,18 +12,18 @@ - +
diff --git a/code/script.js b/code/script.js index 09107dec..0e0ded8a 100644 --- a/code/script.js +++ b/code/script.js @@ -9,7 +9,8 @@ const button = document.getElementById('button') const getRepos = () => { fetch(ALL_MY_REPOS) .then(res => res.json()) - .then((json) => { // This json shows all of my repos on GitHub + .then((json) => { + console.log(json) // This json shows all of my repos on GitHub // filter repos so I can only get tehcnigos repos const forkedRepos = json.filter(repo => repo.fork && repo.name.startsWith('project-')) // or you can use includes method drawChart(forkedRepos.length) diff --git a/code/style.css b/code/style.css index 915ab008..bdf71e96 100644 --- a/code/style.css +++ b/code/style.css @@ -35,7 +35,7 @@ a:hover { .logo-container { float: left; display: flex; - gap: 10px; + margin-top: 8px; margin-left: 16px; } From 4535e41f1cc6800a3c0ce350d18a04d50189eedd Mon Sep 17 00:00:00 2001 From: DALA746 Date: Tue, 15 Nov 2022 19:50:51 +0100 Subject: [PATCH 12/14] added some small changes to the project --- code/chart.js | 17 ++-- code/index.html | 87 ++++++++++--------- code/script.js | 145 ++++++++++++++++++------------- code/style.css | 222 ++++++++++++++++++------------------------------ 4 files changed, 222 insertions(+), 249 deletions(-) diff --git a/code/chart.js b/code/chart.js index 379b3d80..8dfb8629 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,22 +1,19 @@ -const ctx = document.getElementById('chart').getContext('2d') +const ctx = document.getElementById('chart').getContext('2d'); const drawChart = (number) => { const config = { type: 'doughnut', data: { - labels: ["Projects done", "Still to do"], + labels: ['Done', 'Todo'], datasets: [ { - label: "My first Dataset", + label: 'My first Dataset', data: [number, 20 - number], // divide donut to 2 different parts - backgroundColor: [ - "rgb(255, 99, 132)", - "rgb(54, 162, 235)", - ], - hoverOffset:4, + backgroundColor: ['rgb(255, 99, 132)', 'rgb(54, 162, 235)'], + hoverOffset: 4, }, ], }, - } + }; const myChart = new Chart(ctx, config); - }; \ No newline at end of file +}; diff --git a/code/index.html b/code/index.html index de5bf338..4078fe5a 100644 --- a/code/index.html +++ b/code/index.html @@ -1,46 +1,53 @@ - - - - - Project GitHub Tracker - - - - - - - - - -
-
- -
-
- -
-

Project Statistics

-
-
-
-
+ - - +
+ +
+
+

SOME FANCY STATS

+
+ +
+
+
+
+
- - \ No newline at end of file + + + + diff --git a/code/script.js b/code/script.js index 0e0ded8a..550a42e5 100644 --- a/code/script.js +++ b/code/script.js @@ -1,70 +1,97 @@ // main fetch and function and put the DOM here -const projectsContainer = document.getElementById('projects') -const headerContainer = document.getElementById('header') -const USER = 'DALA746' -const ALL_MY_REPOS = `https://api.github.com/users/${USER}/repos` +const projectsContainer = document.getElementById('projects'); +const headerContainer = document.getElementById('header'); +const USER = 'DALA746'; +const ALL_MY_REPOS = `https://api.github.com/users/${USER}/repos`; -const button = document.getElementById('button') +const button = document.getElementById('button'); -const getRepos = () => { - fetch(ALL_MY_REPOS) - .then(res => res.json()) - .then((json) => { - console.log(json) // This json shows all of my repos on GitHub - // filter repos so I can only get tehcnigos repos - const forkedRepos = json.filter(repo => repo.fork && repo.name.startsWith('project-')) // or you can use includes method - drawChart(forkedRepos.length) +const searchProject = () => { + let input = document.getElementById('searchbar').value; + input = input.toLowerCase(); + let repo = document.getElementsByClassName('repo'); - forkedRepos.forEach((repo) => { - // header container - headerContainer.innerHTML = ` -
- -

Darya Lapata

-

${repo.owner.login}

-

Location: Stockholm

-
- ` - // project container - projectsContainer.innerHTML += ` -
-

${repo.name}

 -

Commits amount:

-

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

-

Default branch: ${repo.default_branch}

-
- ` - }) - getPullRequests(forkedRepos) // passing all my forked repos to this function - }) -} -// calling getRepos function -getRepos() + for (i = 0; i < repo.length; i++) { + if (!repo[i].innerHTML.toLowerCase().includes(input)) { + repo[i].style.display = 'none'; + } else { + repo[i].style.display = 'block'; + } + } +}; -// GETTING ALL MY PULL REQUESTS -const getPullRequests = (forkedRepos) => { // repos är samma som forkedRepos - forkedRepos.forEach(repo => { - // console.log(repo) // alla mina forked pull requests - fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`) // getting all pullrequest to the specific project - .then(res => res.json()) - .then(data => { - const myPullRequests = data.find(pull => pull.user.login === repo.owner.login) // there is a different between filter and find function, with find you get a sandwich with a name on - getCommits(myPullRequests.commits_url, repo.name) // link - }) - }) -} +const renderHTML = (repos) => { + console.log(repos); + repos.forEach((repo) => { + headerContainer.innerHTML = ` +
+ +
+

${repo.owner.login}

+
SOME STATS
-const getCommits = (url, myRepoName) => { -// fetching url for commits - fetch(url) - .then(res => res.json()) - .then(data => { - const numberOfCommits = data.length - document.getElementById(`commit-${myRepoName}`).innerHTML += numberOfCommits - }) -} + `; + projectsContainer.innerHTML += ` +
+

${ + repo.name + }

 +

Commits amount:

+

Language: ${repo.language}

+

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

+

Default branch: ${repo.default_branch}

+
+ `; + }); +}; +const getRepos = () => { + fetch(ALL_MY_REPOS) + .then((res) => res.json()) + .then((json) => { + console.log(json); + const forkedRepos = json.filter( + (repo) => repo.fork && repo.name.startsWith('project-') + ); + drawChart(forkedRepos.length); + renderHTML(forkedRepos); + // getPullRequests(forkedRepos); + }); +}; +getRepos(); +// GETTING ALL MY PULL REQUESTS +// const getPullRequests = (forkedRepos) => { +// forkedRepos.forEach((repo) => { +// fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls`) +// .then((res) => res.json()) +// .then((data) => { +// console.log(data); +// const myPullRequests = data.find( +// (pull) => pull.user.login === repo.owner.login +// ); +// console.log(myPullRequests, 'data'); +// getCommits(myPullRequests.commits_url, repo.name); +// }); +// }); +// }; +const getCommits = (url, myRepoName) => { + fetch(url) + .then((res) => res.json()) + .then((data) => { + const numberOfCommits = data.length; + document.getElementById(`commit-${myRepoName}`).innerHTML += + numberOfCommits; + }); +}; +button.addEventListener('click', (e) => { + e.preventDefault(); + searchProject(); +}); diff --git a/code/style.css b/code/style.css index bdf71e96..9561c5e6 100644 --- a/code/style.css +++ b/code/style.css @@ -1,124 +1,129 @@ @import url('https://fonts.googleapis.com/css?family=Montserrat:100,100italic,200,200italic,300,300italic,regular,italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic'); -@import url('https://fonts.googleapis.com/css?family=Bungee:regular'); * { box-sizing: border-box; } +:root { + --dark: #161b22; + --darker: #0d1117; + --white: #fafafa; + --light-grey: #c9d1d9; + --grey: #8b949e; + --blue: #58a6ff; +} + body { - background:#222222; - color: rgb(206, 206, 206); + background: var(--darker); + color: var(--grey); font-family: 'Montserrat'; - margin:0; + margin: 0; } p { - font-size: 14px; + font-size: 16px; } a { - color:rgb(51, 44, 255) + color: var(--blue); + text-decoration: none; } a:hover { - color:rgb(216, 216, 216) + text-decoration: underline; } +.bold { + font-weight: 700; +} /* navbar */ - .topnav { overflow: hidden; - background-color: #2c2c2c; - padding:10px; + background-color: var(--dark); + padding: 10px 30px; + display: flex; + flex-direction: column; + gap: 10px; } .logo-container { - float: left; display: flex; - - margin-top: 8px; - margin-left: 16px; + gap: 15px; } -/* seach section */ - -.search-container { - margin-bottom: 20px; +.input-container { + display: flex; + width: 100%; + max-width: 250px; + margin: 10px auto; } -.search-title { - margin-left: 10px; +input { + width: 100%; + border-radius: 10px 0 0 10px; + border: none; } -.exampe { - width: 150px; +button { + border-radius: 0 10px 10px 0; + border: none; + background-color: var(--light-grey); } -form.example input[type=text] { - padding: 17px; - font-size: 17px; - border: 1px solid rgba(128, 128, 128, 0.683); - float: left; - width: 70%; - background-color: rgb(20, 20, 20); - color: white; +input, +button { + padding: 10px; } -/* Style the submit button */ -form.example button { - float: left; - width: 30%; +.statistics-container { padding: 15px; - background: #363636; - color: white; - font-size: 21px; - border: 1px solid grey; - border-left: none; /* Prevent double borders */ - cursor: pointer; -} - -form.example button:hover { - background: #0b7dda; -} - -/* Clear floats */ -form.example::after { - content: ""; - clear: both; - display: table; + display: flex; + flex-direction: column; + max-width: 1500px; + margin: 0 auto; } -/*user information */ .user-information { display: flex; flex-direction: column; align-items: center; + justify-content: center; padding: 30px; } .info-about-user { display: flex; flex-direction: column; - align-items: center; + align-items: start; } .profile-img { - width: 150px; + width: 200px; border-radius: 50%; - margin:10px; + margin: 10px; } .project-container { display: flex; - flex-direction: column; - gap: 10px; + flex-wrap: wrap; + gap: 20px; + justify-content: center; +} + +.stats-and-project-wrapper { + display: flex; + flex-wrap: wrap; + gap: 20px; + justify-content: center; + gap: 30px; } .repo { - /* adding space between divs*/ - border: 2px solid rgb(63, 63, 63); + border: 1px solid var(--grey); border-radius: 5px; - padding:10px; + padding: 10px; + width: 100%; + max-width: 491px; } .doughnut { @@ -129,6 +134,12 @@ form.example::after { height: 30px; } +.icon-container { + display: flex; + align-items: center; + gap: 18px; +} + .chart-container { width: 100%; display: flex; @@ -136,94 +147,25 @@ form.example::after { align-items: center; } -/*** MEDIA QUERIES ***/ - -/*tablet*/ -@media (min-width:667px) and (max-width: 1024px) { - .profile-img { - width: 200px; - } - - .project-container { +@media screen and (min-width: 610px) { + .topnav { flex-direction: row; - flex-wrap:wrap; - justify-content: center; + justify-content: space-between; } - .repo { - width: 46%; - } - - .search-container { - display: flex; - flex-direction: column; - align-items: end; - margin:10px; - } - - .example { - width: 70%; - } - - .doughnut { - width: 60%; - } -} - -/*desktop*/ -@media(min-width: 1025px) { - .container { + .input-container { display: flex; - flex-direction: column; - margin: 40px 0; align-items: center; + margin: 0; } +} - .project-container { - flex-direction: row; - flex-wrap: wrap; - justify-content: center; - } +@media screen and (min-width: 768px) { +} +@media screen and (min-width: 1115px) { .statistics-container { - display: flex; flex-direction: row; - max-width: 1500px; - min-width: 1000px; - align-items: center; + align-items: start; } - - /* .chart-container { - width: 30%; - } */ - - .repo { - width: 340px; - height: 200px; - } - - .user-information { - height: auto; - - } - - .profile-img { - height: 200px; - width: 200px; - } - - .search-container { - display: flex; - flex-direction: column; - align-items: end; - margin:10px; - } - - .example { - width: 50%; - } - - .doughnut { - width: 30%; - } -} \ No newline at end of file +} From 301b7dd92e4f6b309973ce3de448b74ae2dcd7e8 Mon Sep 17 00:00:00 2001 From: DALA746 Date: Tue, 15 Nov 2022 19:51:47 +0100 Subject: [PATCH 13/14] update readme --- .gitignore | 1 + README.md | 9 +++------ 2 files changed, 4 insertions(+), 6 deletions(-) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..600d2d33 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.vscode \ No newline at end of file diff --git a/README.md b/README.md index 8ab304ab..d7fd20e8 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,9 @@ # GitHub Tracker -A GitHub-like page where you can track all of the projects which I will build at Technigos boot camp. For this project, I continued my journey with JavaScript and digging deeper into API. +A simple copy of GitHub. With that project I learned how to fetch an API, how JavaScript functions communicate with each others and how to display data from API. -# What I learned - -- how to fetch data from API -- how to pass data to functions -- how to use filter/find functions +UPDATE 2.0 +For this update of ther project, I added a search functionality. # View it live From ab397b318abe98ce1fd32d3dc2ea3949d46a3a17 Mon Sep 17 00:00:00 2001 From: DALA746 Date: Tue, 15 Nov 2022 19:53:03 +0100 Subject: [PATCH 14/14] cleaned code --- .gitignore | 1 - .vscode/settings.json | 3 --- 2 files changed, 4 deletions(-) delete mode 100644 .gitignore delete mode 100644 .vscode/settings.json diff --git a/.gitignore b/.gitignore deleted file mode 100644 index 600d2d33..00000000 --- a/.gitignore +++ /dev/null @@ -1 +0,0 @@ -.vscode \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index e8783bfe..00000000 --- a/.vscode/settings.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "liveServer.settings.port": 5505 -} \ No newline at end of file