From 2049291a173aa177cb549fe46da8f22cd8d15026 Mon Sep 17 00:00:00 2001 From: JessicaNordahl Date: Mon, 4 Oct 2021 14:50:16 +0200 Subject: [PATCH 1/6] first steps of the project --- code/Todo.txt | 7 +++++++ code/index.html | 5 +++-- code/script.js | 54 +++++++++++++++++++++++++++++++++++++++++++++++++ code/style.css | 13 ++++++++++-- code/token.js | 0 5 files changed, 75 insertions(+), 4 deletions(-) create mode 100644 code/Todo.txt create mode 100644 code/token.js diff --git a/code/Todo.txt b/code/Todo.txt new file mode 100644 index 00000000..20175c01 --- /dev/null +++ b/code/Todo.txt @@ -0,0 +1,7 @@ +To do: + +1) Fetch the repos and console.log them +2) get them in the browser +3) filter out the Technigo repos, so only Technigo is shown +4) test chart-library +5) learn tgo make a token.js \ No newline at end of file diff --git a/code/index.html b/code/index.html index 2fb5e0ae..f675d4e2 100644 --- a/code/index.html +++ b/code/index.html @@ -15,7 +15,8 @@

Projects:

- - + + + \ No newline at end of file diff --git a/code/script.js b/code/script.js index e69de29b..a54adb0e 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,54 @@ +const USER = 'JessicaNordahl'; +const REPOS_URL = `https://api.github.com/users/${USER}/repos`; +const projectsContainer = document.getElementById('projects'); + +/* const getRepos = () => { + fetch(REPOS_URL) + .then(response => response.json()) + .then(data => { + console.log(data) + //data.forEach(repo => console.log(repo.name)) + const forkedRepos = data.filter(repo => repo.fork && repo.name.startsWith('project-')=== true) + forkedRepos.forEach(repo => console.log(repo.name)) + }); + +}; + +getRepos(); */ //From the video with Jennie + +const fetchRepositories = () => { + fetch(REPOS_URL) + .then((res) => res.json()) + .then((data) => { + const myTechnigo = data.filter((repo => + repo.name.includes("project-") && + repo.fork) + ); + + myTechnigo.forEach((repo => { + projectsContainer.innerHTML += /*html*/` +
+ ${repo.name} with default branch ${repo.default_branch} +

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

+

Commits amount:

+
+ `; + + })); + fetchPullRequests(myTechnigo); + + }); +}; + +const fetchPullRequests = (allRepositories) => /*html*/{ + console.log('allRepositories', allRepositories); + allRepositories.forEach(repo => { + fetch(repo) + }); +} + +fetchRepositories(); + +//Above is according to M video + + diff --git a/code/style.css b/code/style.css index 7c8ad447..e505107c 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,12 @@ body { - background: #FFECE9; -} \ No newline at end of file + background: #caffed; +} + + + + + + + + + diff --git a/code/token.js b/code/token.js new file mode 100644 index 00000000..e69de29b From f5f184fa08ddf7f97ecba8ca98452267e66f1d32 Mon Sep 17 00:00:00 2001 From: JessicaNordahl Date: Thu, 7 Oct 2021 13:55:40 +0200 Subject: [PATCH 2/6] added some styling and drew a doughnut chart --- code/chart.js | 22 ++++++++++++++++++ code/index.html | 2 +- code/script.js | 61 ++++++++++++++++++++++++++++++++++--------------- code/style.css | 53 ++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 119 insertions(+), 19 deletions(-) diff --git a/code/chart.js b/code/chart.js index 92e85a30..4cf26eeb 100644 --- a/code/chart.js +++ b/code/chart.js @@ -2,3 +2,25 @@ const ctx = document.getElementById('chart').getContext('2d') //"Draw" the chart here 👇 +const drawChart = (amount) =>{ + const config = { + type:'doughnut', + data: { + labels: [ + 'Completed Projects', + 'Remaining Projects', + ], + datasets: [{ + label: 'My First Dataset', + data: [amount , 20-amount], + backgroundColor: [ + 'rgb(255, 192, 203)', + 'rgb(135,190,231)' + ], + hoverOffset: 4 + }] + }, + + }; +const myChart = new Chart(ctx, config) +} diff --git a/code/index.html b/code/index.html index f675d4e2..540c7a0f 100644 --- a/code/index.html +++ b/code/index.html @@ -15,7 +15,7 @@

Projects:

- + diff --git a/code/script.js b/code/script.js index a54adb0e..6c505f21 100644 --- a/code/script.js +++ b/code/script.js @@ -1,20 +1,30 @@ const USER = 'JessicaNordahl'; +const USER_URL = `https://api.github.com/users/${USER}` const REPOS_URL = `https://api.github.com/users/${USER}/repos`; -const projectsContainer = document.getElementById('projects'); - -/* const getRepos = () => { - fetch(REPOS_URL) - .then(response => response.json()) - .then(data => { - console.log(data) - //data.forEach(repo => console.log(repo.name)) - const forkedRepos = data.filter(repo => repo.fork && repo.name.startsWith('project-')=== true) - forkedRepos.forEach(repo => console.log(repo.name)) - }); -}; +const projectsContainer = document.getElementById('projects'); +const profileContainer = document.getElementById('profile-container') -getRepos(); */ //From the video with Jennie +const userProfile = () => { + fetch(USER_URL) + .then((res) => res.json()) + .then((data) => { + profileContainer.innerHTML+= /*html*/` +
+
+ Profile Picture of User +
+
+
Username: ${data.login}
+
Name: ${data.name}
+
+
+
+

${data.bio}

+
` + }) + } +userProfile() const fetchRepositories = () => { fetch(REPOS_URL) @@ -27,27 +37,42 @@ const fetchRepositories = () => { myTechnigo.forEach((repo => { projectsContainer.innerHTML += /*html*/` -
+
${repo.name} with default branch ${repo.default_branch}

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

Commits amount:

`; - })); fetchPullRequests(myTechnigo); - }); }; const fetchPullRequests = (allRepositories) => /*html*/{ console.log('allRepositories', allRepositories); allRepositories.forEach(repo => { - fetch(repo) + fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`) + .then((res) => res.json ()) + .then((data) => { + const myPullRequest = data.find(pull => pull.user.login===repo.owner.login + ); + + fetchCommits(myPullRequest.commits_url, repo.name); + }); }); -} +}; + +const fetchCommits = (myCommitsUrl, myRepoName) => { + fetch(myCommitsUrl) + .then((res) => res.json ()) + .then(data => { + document.getElementById(`commit-${myRepoName}`).innerHTML += data.length; + }); + console.log(fetchCommits) +}; fetchRepositories(); +drawChart(allRepositories.length); //Above is according to M video diff --git a/code/style.css b/code/style.css index e505107c..4e76dc2e 100644 --- a/code/style.css +++ b/code/style.css @@ -2,6 +2,59 @@ body { background: #caffed; } +.projectsContainer { + width: 90%; + display: flex; + flex-direction: column; + margin: 0 auto; +} + +.profile-card { + display: flex; + flex-direction: row; + align-items: center; + max-width: 500px; + margin: 20px auto 40px auto; +} + +.profile-photo { + width:30%; +} + +.profile-photo img{ + width: 100%; + border-radius: 50%; + border: 2px solid black; +} + +.profile-username{ + width: 50%; + margin-left: 25px; + box-shadow: 2px 2px 4px; +} + +.user-name { + margin: 6px 0 0 0; + padding: 6px 0 0 0; + border-bottom: 3px solid rgb(255, 192, 203); +} + +p { +display: block; +margin-block-start: 1em; +margin-block-end: 1em; +margin-inline-start: 0px; +margin-inline-end: 0px; +} + +.repos { +display: grid; +grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); +gap: 1rem; +border: 1px solid; +padding: 3px 3px 3px 3px; +} + From 903c585c500581644bd783b41d18b6f6eb6764fd Mon Sep 17 00:00:00 2001 From: JessicaNordahl Date: Thu, 7 Oct 2021 21:04:55 +0200 Subject: [PATCH 3/6] added html element in index.html to show profile picture and connected doughnut chart --- code/chart.js | 38 ++++++++++++++++++++------------------ code/index.html | 14 +++++++++++--- code/script.js | 7 ++++--- code/style.css | 2 +- 4 files changed, 36 insertions(+), 25 deletions(-) diff --git a/code/chart.js b/code/chart.js index 4cf26eeb..7503fb43 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,26 +1,28 @@ //DOM-selector for the canvas 👇 -const ctx = document.getElementById('chart').getContext('2d') +const ctx = document.getElementById('myChart').getContext('2d') //"Draw" the chart here 👇 -const drawChart = (amount) =>{ +const drawChart = (amount) => { const config = { - type:'doughnut', + type: "doughnut", data: { - labels: [ - 'Completed Projects', - 'Remaining Projects', - ], - datasets: [{ - label: 'My First Dataset', - data: [amount , 20-amount], + labels: ["Completed projects", "Remaining projects"], + datasets: [ + { + label: "My First Dataset", + data: [amount, 20-amount], backgroundColor: [ - 'rgb(255, 192, 203)', - 'rgb(135,190,231)' + "rgb(255, 192, 203)", + "rgb(135,190,231)", ], - hoverOffset: 4 - }] - }, + hoverOffset: 4, + }, + ], + }, + }; + + const myChart = new Chart(ctx, config); + }; + + - }; -const myChart = new Chart(ctx, config) -} diff --git a/code/index.html b/code/index.html index 540c7a0f..cba3b6e6 100644 --- a/code/index.html +++ b/code/index.html @@ -5,16 +5,24 @@ Project GitHub Tracker +

GitHub Tracker

Projects:

-
+
+ +
+
+
+
+
- - +
+ +
diff --git a/code/script.js b/code/script.js index 6c505f21..e69748bd 100644 --- a/code/script.js +++ b/code/script.js @@ -44,7 +44,8 @@ const fetchRepositories = () => {
`; })); - fetchPullRequests(myTechnigo); + fetchPullRequests(myTechnigo); + drawChart(myTechnigo.length); }); }; @@ -72,8 +73,8 @@ const fetchCommits = (myCommitsUrl, myRepoName) => { }; fetchRepositories(); -drawChart(allRepositories.length); -//Above is according to M video + + diff --git a/code/style.css b/code/style.css index 4e76dc2e..7496c27b 100644 --- a/code/style.css +++ b/code/style.css @@ -36,7 +36,7 @@ body { .user-name { margin: 6px 0 0 0; padding: 6px 0 0 0; - border-bottom: 3px solid rgb(255, 192, 203); + border-bottom: 3px solid rgb(93, 208, 243); } p { From 819a812b559156c6925a31c361249774b08517d8 Mon Sep 17 00:00:00 2001 From: JessicaNordahl Date: Fri, 8 Oct 2021 11:27:41 +0200 Subject: [PATCH 4/6] read me file updated --- README.md | 8 +++----- code/style.css | 2 +- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 1613a3b0..98c657dd 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,11 @@ # GitHub Tracker -Replace this readme with your own information about your project. - -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. +Github tracker project - This projects purpose is to show my accomplishments during the bootcamp. Every finished project will be documented in a graph(with the design of a doughnut). ## 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? +Every week has been a struggle for me, due to personal obsticles. I spent a lot of time at hospital, have moved two times, and personal matters. My focus is doing one thing at the time, and catch up with every criteria for each project to finish everything. ## View it live -Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about. +https://adoring-liskov-03c237.netlify.app/ diff --git a/code/style.css b/code/style.css index 7496c27b..8e7e96ba 100644 --- a/code/style.css +++ b/code/style.css @@ -52,7 +52,7 @@ display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; border: 1px solid; -padding: 3px 3px 3px 3px; +padding: 5px 5px 5px 5px; } From d550857b43542361a7f462ad2bcf23c73fddc64d Mon Sep 17 00:00:00 2001 From: JessicaNordahl Date: Fri, 22 Oct 2021 18:05:47 +0200 Subject: [PATCH 5/6] Updated css --- code/index.html | 8 +++---- code/package-lock.json | 3 +++ code/script.js | 48 +++++++++++++++++++++--------------------- code/style.css | 15 +++++++++++-- 4 files changed, 44 insertions(+), 30 deletions(-) create mode 100644 code/package-lock.json diff --git a/code/index.html b/code/index.html index cba3b6e6..7e048b94 100644 --- a/code/index.html +++ b/code/index.html @@ -9,19 +9,19 @@ -

GitHub Tracker

-

Projects:

- +

My GitHub-Tracker

+

This site displays my projects from GitHub, and updates whenever I complete a new project

+

Projects:

- +
diff --git a/code/package-lock.json b/code/package-lock.json new file mode 100644 index 00000000..48e341a0 --- /dev/null +++ b/code/package-lock.json @@ -0,0 +1,3 @@ +{ + "lockfileVersion": 1 +} diff --git a/code/script.js b/code/script.js index e69748bd..9bf1823c 100644 --- a/code/script.js +++ b/code/script.js @@ -9,21 +9,21 @@ const userProfile = () => { fetch(USER_URL) .then((res) => res.json()) .then((data) => { - profileContainer.innerHTML+= /*html*/` + profileContainer.innerHTML+= /*html*/`
Profile Picture of User
-
-
Username: ${data.login}
-
Name: ${data.name}
+
+
GitHub username: ${data.login}
+
Name: ${data.name}
-

${data.bio}

+

${data.bio}

` - }) - } + }); +}; userProfile() const fetchRepositories = () => { @@ -35,31 +35,31 @@ const fetchRepositories = () => { repo.fork) ); - myTechnigo.forEach((repo => { - projectsContainer.innerHTML += /*html*/` -
- ${repo.name} with default branch ${repo.default_branch} -

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

-

Commits amount:

-
- `; - })); - fetchPullRequests(myTechnigo); - drawChart(myTechnigo.length); + myTechnigo.forEach((repo => { + projectsContainer.innerHTML += /*html*/` +
+ ${repo.name} with default branch ${repo.default_branch} +

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

+

Commits amount:

+
+ `; + })); +fetchPullRequests(myTechnigo); +drawChart(myTechnigo.length); }); }; const fetchPullRequests = (allRepositories) => /*html*/{ - console.log('allRepositories', allRepositories); - allRepositories.forEach(repo => { +console.log('allRepositories', allRepositories); + allRepositories.forEach(repo => { fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`) .then((res) => res.json ()) .then((data) => { const myPullRequest = data.find(pull => pull.user.login===repo.owner.login - ); + ); - fetchCommits(myPullRequest.commits_url, repo.name); - }); +fetchCommits(myPullRequest.commits_url, repo.name); + }); }); }; @@ -67,7 +67,7 @@ const fetchCommits = (myCommitsUrl, myRepoName) => { fetch(myCommitsUrl) .then((res) => res.json ()) .then(data => { - document.getElementById(`commit-${myRepoName}`).innerHTML += data.length; + document.getElementById(`commit-${myRepoName}`).innerHTML += data.length; }); console.log(fetchCommits) }; diff --git a/code/style.css b/code/style.css index 8e7e96ba..88625fa0 100644 --- a/code/style.css +++ b/code/style.css @@ -34,11 +34,22 @@ body { } .user-name { - margin: 6px 0 0 0; - padding: 6px 0 0 0; + margin: 10px; + padding: 10px; border-bottom: 3px solid rgb(93, 208, 243); } +.real-name { + margin: 10px; + padding: 10px; +} + +.doughnut { + width: 50%; + height: 50%; + padding: 75px; +} + p { display: block; margin-block-start: 1em; From c64142936684b8c22a7acb757018a7918900a00e Mon Sep 17 00:00:00 2001 From: Jessica <80691341+JessicaNordahl@users.noreply.github.com> Date: Fri, 22 Oct 2021 18:13:39 +0200 Subject: [PATCH 6/6] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 98c657dd..c9c5c88d 100644 --- a/README.md +++ b/README.md @@ -8,4 +8,4 @@ Every week has been a struggle for me, due to personal obsticles. I spent a lot ## View it live -https://adoring-liskov-03c237.netlify.app/ +https://jessicas-github-tracker.netlify.app/