From a2b25f1fcaaf51d9306107f1bff017f15206e1cd Mon Sep 17 00:00:00 2001 From: Mimmisen Date: Tue, 22 Feb 2022 13:02:15 +0100 Subject: [PATCH 01/17] started with the project, added what we went through on live session monday --- code/script.js | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/code/script.js b/code/script.js index e69de29b..6178363b 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,21 @@ +const username = "Mimmisen"; +let reponame = ""; + +const API_URL = `https://api.github.com/users/${username}/repos`; + +fetch(API_URL) + .then((res) => res.json()) + .then((data) => { + console.log(data); + reponame = data[1].name; + + const API_URL_PR = `https://api.github.com/repos/Technigo/${reponame}/pulls`; + + fetch(API_URL_PR) + .then((res) => res.json()) + .then((data) => { + console.log(data); + }); + }); + +//Array.map((item, index) => {}) From c8ed0da9f76d750759dd71b37fc1e305f3ae97e0 Mon Sep 17 00:00:00 2001 From: Mimmisen Date: Wed, 23 Feb 2022 15:57:58 +0100 Subject: [PATCH 02/17] added my token, created a varable for it in script.js, added the token to a new secret.js and put it in the gitignore --- code/.gitignore | 28 ++++++++++++++++++++++++++++ code/index.html | 35 ++++++++++++++++++----------------- code/script.js | 15 ++++++++++++--- 3 files changed, 58 insertions(+), 20 deletions(-) create mode 100644 code/.gitignore diff --git a/code/.gitignore b/code/.gitignore new file mode 100644 index 00000000..09401e89 --- /dev/null +++ b/code/.gitignore @@ -0,0 +1,28 @@ +# Personal token +secret.js + + +# # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. +# ​ +# ​ +# # Ignore Mac system files +# .DS_store +# ​ +# # Ignore node_modules folder +# node_modules +# ​ +# # Ignore all text files +# *.txt +# ​ +# # Ignore files related to API keys +# .env +# ​ +# # misc +# /.pnp +# .pnp.js +# npm-debug.log* +# yarn-debug.log* +# yarn-error.log* +# ​ +# # other +# token.js \ No newline at end of file diff --git a/code/index.html b/code/index.html index 2fb5e0ae..a532c9ae 100644 --- a/code/index.html +++ b/code/index.html @@ -1,21 +1,22 @@ - - - - - Project GitHub Tracker - - - -

GitHub Tracker

-

Projects:

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

GitHub Tracker

+

Projects:

+
- - + + - - - - \ No newline at end of file + + + + + diff --git a/code/script.js b/code/script.js index 6178363b..2211da08 100644 --- a/code/script.js +++ b/code/script.js @@ -1,9 +1,18 @@ const username = "Mimmisen"; let reponame = ""; - const API_URL = `https://api.github.com/users/${username}/repos`; -fetch(API_URL) +const API_TOKEN = TOKEN || process.env.API_KEY; // variable called TOKEN is local OR API_KEY is on the deployed site +console.log(TOKEN); + +const options = { + method: "GET", + headers: { + Authorization: `token ${API_TOKEN}`, // you need to paste your token over here. + }, +}; + +fetch(API_URL, options) .then((res) => res.json()) .then((data) => { console.log(data); @@ -11,7 +20,7 @@ fetch(API_URL) const API_URL_PR = `https://api.github.com/repos/Technigo/${reponame}/pulls`; - fetch(API_URL_PR) + fetch(API_URL_PR, options) .then((res) => res.json()) .then((data) => { console.log(data); From 1fe3a5380a77844832014e7e67b0858ed411ec3a Mon Sep 17 00:00:00 2001 From: Mimmisen Date: Wed, 23 Feb 2022 16:07:39 +0100 Subject: [PATCH 03/17] called out the token varable --- code/script.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/script.js b/code/script.js index 2211da08..08bb3690 100644 --- a/code/script.js +++ b/code/script.js @@ -2,7 +2,7 @@ const username = "Mimmisen"; let reponame = ""; const API_URL = `https://api.github.com/users/${username}/repos`; -const API_TOKEN = TOKEN || process.env.API_KEY; // variable called TOKEN is local OR API_KEY is on the deployed site +//const API_TOKEN = TOKEN || process.env.API_KEY; // variable called TOKEN is local OR API_KEY is on the deployed site console.log(TOKEN); const options = { From 8a3a065fbd09397531e67f8646b8a2c47c23da00 Mon Sep 17 00:00:00 2001 From: Mimmisen Date: Wed, 23 Feb 2022 16:10:06 +0100 Subject: [PATCH 04/17] called out the token varable --- code/script.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/script.js b/code/script.js index 08bb3690..60fa0087 100644 --- a/code/script.js +++ b/code/script.js @@ -3,7 +3,7 @@ let reponame = ""; const API_URL = `https://api.github.com/users/${username}/repos`; //const API_TOKEN = TOKEN || process.env.API_KEY; // variable called TOKEN is local OR API_KEY is on the deployed site -console.log(TOKEN); +//console.log(TOKEN); const options = { method: "GET", From b5ef50ece2cc8f0e0933b966883478fea8df9f6e Mon Sep 17 00:00:00 2001 From: Mimmisen Date: Wed, 23 Feb 2022 17:35:34 +0100 Subject: [PATCH 05/17] test --- code/chart.js | 23 ++++++++++++++++++++++- code/index.html | 4 +++- code/script.js | 5 ++--- 3 files changed, 27 insertions(+), 5 deletions(-) diff --git a/code/chart.js b/code/chart.js index 92e85a30..6f271063 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,25 @@ //DOM-selector for the canvas 👇 -const ctx = document.getElementById('chart').getContext('2d') +const ctx = document.getElementById("chart").getContext("2d"); //"Draw" the chart here 👇 +const labels = ["January", "February", "March", "April", "May", "June"]; + +const data = { + labels: labels, + datasets: [ + { + label: "My First dataset", + backgroundColor: "rgb(255, 99, 132)", + borderColor: "rgb(255, 99, 132)", + data: [0, 10, 5, 2, 20, 30, 45], + }, + ], +}; + +const config = { + type: "line", + data: data, + options: {}, +}; + +const myChart = new Chart(document.getElementById("Chart"), config); diff --git a/code/index.html b/code/index.html index a532c9ae..e8ac1380 100644 --- a/code/index.html +++ b/code/index.html @@ -6,17 +6,19 @@ Project GitHub Tracker +

GitHub Tracker

Projects:

+

test

+ - diff --git a/code/script.js b/code/script.js index 60fa0087..965e10e3 100644 --- a/code/script.js +++ b/code/script.js @@ -3,7 +3,6 @@ let reponame = ""; const API_URL = `https://api.github.com/users/${username}/repos`; //const API_TOKEN = TOKEN || process.env.API_KEY; // variable called TOKEN is local OR API_KEY is on the deployed site -//console.log(TOKEN); const options = { method: "GET", @@ -22,8 +21,8 @@ fetch(API_URL, options) fetch(API_URL_PR, options) .then((res) => res.json()) - .then((data) => { - console.log(data); + .then((data2) => { + console.log(data2); }); }); From 364ac99e75b1f654248790f7b67e1cbf1e0d3de2 Mon Sep 17 00:00:00 2001 From: Mimmisen Date: Thu, 24 Feb 2022 10:58:05 +0100 Subject: [PATCH 06/17] changed display of token --- code/script.js | 1 + 1 file changed, 1 insertion(+) diff --git a/code/script.js b/code/script.js index 965e10e3..756711de 100644 --- a/code/script.js +++ b/code/script.js @@ -10,6 +10,7 @@ const options = { Authorization: `token ${API_TOKEN}`, // you need to paste your token over here. }, }; +//console.log(API_TOKEN); fetch(API_URL, options) .then((res) => res.json()) From 46431c938e4ec844b3416a8db0c3f5fe72df9914 Mon Sep 17 00:00:00 2001 From: Mimmisen Date: Thu, 24 Feb 2022 11:25:17 +0100 Subject: [PATCH 07/17] started with the project, added what we went through on live session monday --- code/.gitignore | 3 ++- code/index.html | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/code/.gitignore b/code/.gitignore index 09401e89..9a0d7760 100644 --- a/code/.gitignore +++ b/code/.gitignore @@ -1,5 +1,6 @@ # Personal token -secret.js +secret.js +# why can't I put code/ boefore secret.js lite the tutorial ? # # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. diff --git a/code/index.html b/code/index.html index e8ac1380..130076df 100644 --- a/code/index.html +++ b/code/index.html @@ -17,8 +17,8 @@

Projects:

- + From c1cf5ba55ad2330a7454218493977fba63fb4666 Mon Sep 17 00:00:00 2001 From: Mimmisen Date: Thu, 24 Feb 2022 11:42:38 +0100 Subject: [PATCH 08/17] started over with gitognore --- code/.gitignore => .gitignore | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename code/.gitignore => .gitignore (96%) diff --git a/code/.gitignore b/.gitignore similarity index 96% rename from code/.gitignore rename to .gitignore index 9a0d7760..cba4731e 100644 --- a/code/.gitignore +++ b/.gitignore @@ -1,5 +1,5 @@ # Personal token -secret.js +/code/secret.js # why can't I put code/ boefore secret.js lite the tutorial ? From bdc526b3c2fbb9e07e8ca2277e25e546baa3e6aa Mon Sep 17 00:00:00 2001 From: Mimmisen Date: Thu, 24 Feb 2022 18:27:13 +0100 Subject: [PATCH 09/17] filtered my preojects and some more --- .gitignore => code/.gitignore | 2 +- code/chart.js | 4 +-- code/index.html | 13 ++++--- code/script.js | 65 ++++++++++++++++++++++++++++++----- 4 files changed, 68 insertions(+), 16 deletions(-) rename .gitignore => code/.gitignore (96%) diff --git a/.gitignore b/code/.gitignore similarity index 96% rename from .gitignore rename to code/.gitignore index cba4731e..9a0d7760 100644 --- a/.gitignore +++ b/code/.gitignore @@ -1,5 +1,5 @@ # Personal token -/code/secret.js +secret.js # why can't I put code/ boefore secret.js lite the tutorial ? diff --git a/code/chart.js b/code/chart.js index 6f271063..25635467 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,5 +1,5 @@ //DOM-selector for the canvas 👇 -const ctx = document.getElementById("chart").getContext("2d"); +const ctx = document.getElementById("myChart").getContext("2d"); //"Draw" the chart here 👇 const labels = ["January", "February", "March", "April", "May", "June"]; @@ -22,4 +22,4 @@ const config = { options: {}, }; -const myChart = new Chart(document.getElementById("Chart"), config); +const myChart = new Chart(document.getElementById("myChart"), config); diff --git a/code/index.html b/code/index.html index 130076df..49387e64 100644 --- a/code/index.html +++ b/code/index.html @@ -9,16 +9,19 @@ -

GitHub Tracker

+
+

GitHub Tracker

+
+
+ +

Projects:

-
-

test

- + - + diff --git a/code/script.js b/code/script.js index 756711de..9b5015ca 100644 --- a/code/script.js +++ b/code/script.js @@ -1,5 +1,5 @@ const username = "Mimmisen"; -let reponame = ""; +//let reponame = ""; const API_URL = `https://api.github.com/users/${username}/repos`; //const API_TOKEN = TOKEN || process.env.API_KEY; // variable called TOKEN is local OR API_KEY is on the deployed site @@ -10,21 +10,70 @@ const options = { Authorization: `token ${API_TOKEN}`, // you need to paste your token over here. }, }; -//console.log(API_TOKEN); fetch(API_URL, options) .then((res) => res.json()) .then((data) => { console.log(data); - reponame = data[1].name; - const API_URL_PR = `https://api.github.com/repos/Technigo/${reponame}/pulls`; + let forkedProjects = data.filter((element) => element.fork === true); + console.log("Forked projects:", forkedProjects); - fetch(API_URL_PR, options) + let technigoProjects = forkedProjects.filter((element) => + element.name.startsWith("project") + ); + console.log("Technigo projects", technigoProjects); + + //function to display profile picture and username + const userData = (data) => { + document.getElementById("profile-picture").innerHTML = ` + image of Mimmisen at GitHub + `; + document.getElementById("username").innerHTML = ` + username: ${data[0].owner.login} + `; + }; + console.log("userData", data); + }); +//getPullRequests(technigoProjects); + +//Remember to pass along your filtered repos as an argument when +//you are calling this function + +const getPullRequests = (repos) => { + // //Get all the PRs for each project. + repos.forEach((repo) => { + fetch("https://api.github.com/repos/Technigo/${reponame}/pulls", options) .then((res) => res.json()) - .then((data2) => { - console.log(data2); + .then((data) => { + // //1. Find only the PR that you made by comparing pull.user.login + // // with repo.owner.login + const myPullRequests = data.filter( + (element) => element.user.login === username + ); + console.log("my pull requests", myPullRequests); + // // //2. Now you're able to get the commits for each repo by using + // // // the commits_url as an argument to call another function + // let commitsUrl = myPullRequests[0].commits_url; + // console.log("commits url", commitsUrl); + // myCommits(commitsUrl); + // // //3. You can also get the comments for each PR by calling + // // // another function with the review_comments_url as argument + // let reviewCommentsUrl = myPullRequests[0].review_comments_url; + // console.log("review comments url", reviewCommentsUrl); + // reviewCommentsUrl(reviewCommentsUrl); + // document.getElementById("projects").innerHTML += ` + //

${repo.name}

+ // `; }); }); +}; +// reponame = data[5].name; + +// const API_URL_PR = `https://api.github.com/repos/Technigo/${reponame}/pulls`; -//Array.map((item, index) => {}) +// fetch(API_URL_PR, options) +// .then((res) => res.json()) +// .then((data2) => { +// console.log(data2); +// }); From f59cb31789ab2dc052497d0103eba3b491f0d1d2 Mon Sep 17 00:00:00 2001 From: Mimmisen Date: Sun, 27 Feb 2022 21:06:26 +0100 Subject: [PATCH 10/17] created the chart and almost done with tracker, started with css --- .DS_Store | Bin 0 -> 6148 bytes code/chart.js | 42 ++++++------ code/index.html | 28 ++++++-- code/script.js | 167 +++++++++++++++++++++++++++++++----------------- code/style.css | 66 ++++++++++++++++++- 5 files changed, 213 insertions(+), 90 deletions(-) create mode 100644 .DS_Store diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..01625912d654f181b4393c80d202bb2d9e546436 GIT binary patch literal 6148 zcmeH~F^LWILo3EBZM)-ySy`wq8Z(Te9ES6D!Ft zGBE%h|QedILw&$at|7ZGN^Z%knsT7a` zZ>E3^r?1nIFO_HO%j)FR3$i9#Co44l2!sp@Qs7?| Fcmh=m5}*J8 literal 0 HcmV?d00001 diff --git a/code/chart.js b/code/chart.js index 25635467..7963ead0 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,25 +1,25 @@ -//DOM-selector for the canvas 👇 -const ctx = document.getElementById("myChart").getContext("2d"); +const showChart = (countRepos) => { + const ctx = document.getElementById("chart").getContext("2d"); -//"Draw" the chart here 👇 -const labels = ["January", "February", "March", "April", "May", "June"]; + const labels = [`Finished projects`, `Projects left`]; -const data = { - labels: labels, - datasets: [ - { - label: "My First dataset", - backgroundColor: "rgb(255, 99, 132)", - borderColor: "rgb(255, 99, 132)", - data: [0, 10, 5, 2, 20, 30, 45], - }, - ], -}; + const data = { + labels: labels, + datasets: [ + { + label: "My Technigo projects", + backgroundColor: ["#9E9FCF", "#484B76"], + borderColor: "rgb(66, 66, 66)", + data: [countRepos, 19 - countRepos], + }, + ], + }; -const config = { - type: "line", - data: data, - options: {}, -}; + const config = { + type: "pie", + data: data, + options: {}, + }; -const myChart = new Chart(document.getElementById("myChart"), config); + const myChart = new Chart(ctx, config); +}; diff --git a/code/index.html b/code/index.html index 49387e64..d05d6534 100644 --- a/code/index.html +++ b/code/index.html @@ -4,21 +4,35 @@ - Project GitHub Tracker + Mimmis Project GitHub Tracker + + + + + -
+

GitHub Tracker

-
+

Technigo Student Spring 2022

-
-

Projects:

+
+
+
+
- - + + +
diff --git a/code/script.js b/code/script.js index 9b5015ca..a93c8069 100644 --- a/code/script.js +++ b/code/script.js @@ -1,8 +1,8 @@ const username = "Mimmisen"; -//let reponame = ""; -const API_URL = `https://api.github.com/users/${username}/repos`; - -//const API_TOKEN = TOKEN || process.env.API_KEY; // variable called TOKEN is local OR API_KEY is on the deployed site +const API_URL = `https://api.github.com/users/${username}`; +const REPOS_URL = `https://api.github.com/users/${username}/repos`; +//const API_URL_PR = `https://api.github.com/repos/Technigo/${reponame}/pulls`; +const numberOfProjects = document.getElementById("numberOfProjects"); const options = { method: "GET", @@ -10,70 +10,117 @@ const options = { Authorization: `token ${API_TOKEN}`, // you need to paste your token over here. }, }; - +//----------------------------------FETCH 1------------------------------------- fetch(API_URL, options) .then((res) => res.json()) .then((data) => { console.log(data); - - let forkedProjects = data.filter((element) => element.fork === true); - console.log("Forked projects:", forkedProjects); - - let technigoProjects = forkedProjects.filter((element) => - element.name.startsWith("project") + headerBox.innerHTML += ` + + `; + }); +//----------------------------------FETCH 2------------------------------------- +fetch(REPOS_URL, options) + .then((res) => res.json()) + .then((data) => { + console.log("repos", data); + //To get my projects and filter them so only the ones starting with projects are displayed + const technigoProjects = data.filter( + (repo) => repo.name.startsWith("project-") && repo.fork ); console.log("Technigo projects", technigoProjects); - //function to display profile picture and username - const userData = (data) => { - document.getElementById("profile-picture").innerHTML = ` - image of Mimmisen at GitHub - `; - document.getElementById("username").innerHTML = ` - username: ${data[0].owner.login} - `; - }; - console.log("userData", data); - }); -//getPullRequests(technigoProjects); + technigoProjects.forEach((repo) => { + //Get the name of the repo + const reponame = repo.name; -//Remember to pass along your filtered repos as an argument when -//you are calling this function + //get the url fo each repo + const projectUrl = repo.html_url; -const getPullRequests = (repos) => { - // //Get all the PRs for each project. - repos.forEach((repo) => { - fetch("https://api.github.com/repos/Technigo/${reponame}/pulls", options) - .then((res) => res.json()) - .then((data) => { - // //1. Find only the PR that you made by comparing pull.user.login - // // with repo.owner.login - const myPullRequests = data.filter( - (element) => element.user.login === username - ); - console.log("my pull requests", myPullRequests); - // // //2. Now you're able to get the commits for each repo by using - // // // the commits_url as an argument to call another function - // let commitsUrl = myPullRequests[0].commits_url; - // console.log("commits url", commitsUrl); - // myCommits(commitsUrl); - // // //3. You can also get the comments for each PR by calling - // // // another function with the review_comments_url as argument - // let reviewCommentsUrl = myPullRequests[0].review_comments_url; - // console.log("review comments url", reviewCommentsUrl); - // reviewCommentsUrl(reviewCommentsUrl); - // document.getElementById("projects").innerHTML += ` - //

${repo.name}

- // `; - }); - }); -}; -// reponame = data[5].name; + //get the latest push/update of the repo + const latestPushRepo = new Date(repo.updated_at).toLocaleDateString( + "sv-SE", + { + year: "numeric", + month: "long", + day: "numeric", + } + ); + + document.getElementById("section-projects").innerHTML += ` +
+
+

${reponame}

+

Latest update: ${latestPushRepo}

+

+
+
+ `; + }); -// const API_URL_PR = `https://api.github.com/repos/Technigo/${reponame}/pulls`; + //Count the repos and show the chart + showChart(technigoProjects.length); + numberOfProjects.innerHTML = `I have finished ${countRepos} projects and have ${ + 19 - countRepos + } left.`; + showChart(countRepos); + //----------------------------------FETCH 3------------------------------------- -// fetch(API_URL_PR, options) -// .then((res) => res.json()) -// .then((data2) => { -// console.log(data2); -// }); + data.forEach((repo) => { + reponame = repo.name; + fetch( + `https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`, + options + ) + .then((res) => res.json()) + .then((data) => { + console.log("forked", data); + // if (repo.user.login === username) { + // let reponame = repo.base.repo.name; + // console.log(reponame); + // //get url for commits to use in new fetch + // const commitsUrl = repo.commits_url; + // displayCommits(commitsUrl, reponame); + // //get url for netlify + // //const netlifyUrl = repo.body; + // // displayLink(netlifyUrl, reponame); + // } else if ( + // repo.user.login === "sukiphan97" && + // reponame === "project-chatbot" + // ) { + // displayCommits(repo.commits_url, reponame); + // // displayLink("https://dr-strange-chatbot.netlify.app", reponame); + // } else if ( + // repo.user.login === "kolkri" && + // reponame === "project-weather-app" + // ) { + // displayCommits(repo.commits_url, reponame); + // // displayLink("https://hippos1-weatherapp.netlify.app/", reponame); + // } else { + // document.getElementById(`commits-${reponame}`).innerHTML = ""; + // } + // const displayCommits = (commitsUrl, reponame) => { + // fetch(commitsUrl, options) + // .then((res) => res.json()) + // .then((data) => { + // document.getElementById(`commits-${reponame}`).innerHTML = ` + //

Amount of commits: ${data.length} + //

`; + // }); + // const displayLink = (netlifyUrl, reponame) => { + // document.getElementById(`website-${reponame}`).innerHTML = ` + // + // + // + // `; + }); + }); // forEach + //}); // then from fetch 3 + }); // fetch from the repos diff --git a/code/style.css b/code/style.css index 7c8ad447..47b69e32 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,65 @@ +* { + box-sizing: border-box; + margin: 0; +} + body { - background: #FFECE9; -} \ No newline at end of file + background: #ffece9; + font-family: "Source Serif Pro", serif; + background-image: linear-gradient(#ccccff, #ffff); +} + +header { + display: grid; + justify-items: center; +} + +/* header text */ +h1 { + color: #ffffff; + font-size: 3.5rem; +} + +/* description text */ +h3 { + color: #ffffff; +} + +.username { + font-size: 30px; +} + +img { + width: 300px; + border-radius: 50%; + + margin-block: 2em; +} + +.section-projects { + /* position: relative; */ +} + +.section-projects__container { + padding: 2em 0; + min-height: 100%; + display: grid; + gap: 1em; + grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); +} + +.section-projects__card { + background: #f9f8ff; + border-radius: 0.5em; + width: 350px; + padding: 1em; + margin: 1em; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +/* chart */ +.chart { + /* background: #223b3f; */ +} From 29784b9c9d3400fa3f752fb0dd2bcdaddc1db01e Mon Sep 17 00:00:00 2001 From: Mimmisen Date: Mon, 28 Feb 2022 12:47:28 +0100 Subject: [PATCH 11/17] working on the js --- README.md | 30 ++++++++++-- code/chart.js | 4 ++ code/index.html | 8 ++-- code/script.js | 120 +++++++++++++++++++++++++----------------------- code/style.css | 30 ++++++++++-- 5 files changed, 120 insertions(+), 72 deletions(-) diff --git a/README.md b/README.md index 1613a3b0..f4aa2ba0 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,35 @@ # GitHub Tracker -Replace this readme with your own information about your project. +This week, we have created a place to keep track of the GitHub repos that we are crating at Technigo. We have continued practicing on JavaScript and API. +🔵 Blue Level (Minimum Requirements) +Your page should include: -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. +A list of all repos that are forked from Technigo +Your username and profile picture +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 +It should be responsive (mobile first) +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] ## 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? +Process +designed page using figma +Fetched data from API and displayed it to fulfill the requirements. +Created a chart for the progress. +Styled the page. + +This has been a hard project to finish with a lot of problems a long the way. How to fetches within fetches, create a chart and a token have all been new things +to learn this week. +I always like to do some research before I start with a new project to get inspiration and a better understand for how to create what I'm building. I like to look +at other peoples code to get better knowledge of what I will do and truly understand what I'm going to build. +I have looked for solutions on stackoverflow, townhall and the help chanel. Me and my team have also meet up during the week and helped each other with +problems. + +If I had more time I would add more information about every repo: languages used for the project, review comments and link to netlify. ## 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. +link to netlify diff --git a/code/chart.js b/code/chart.js index 7963ead0..1cef237c 100644 --- a/code/chart.js +++ b/code/chart.js @@ -15,6 +15,10 @@ const showChart = (countRepos) => { ], }; + Chart.defaults.font.family = "Source Serif Pro"; + Chart.defaults.font.size = "20"; + Chart.defaults.color = "#000000"; + const config = { type: "pie", data: data, diff --git a/code/index.html b/code/index.html index d05d6534..f3cbd0a3 100644 --- a/code/index.html +++ b/code/index.html @@ -7,10 +7,6 @@ Mimmis Project GitHub Tracker - @@ -31,7 +27,9 @@

Technigo Student Spring 2022

- + +

+ diff --git a/code/script.js b/code/script.js index a93c8069..f9dd88ff 100644 --- a/code/script.js +++ b/code/script.js @@ -24,8 +24,9 @@ fetch(API_URL, options)

${data.name}

- `; + `; }); + //----------------------------------FETCH 2------------------------------------- fetch(REPOS_URL, options) .then((res) => res.json()) @@ -37,6 +38,14 @@ fetch(REPOS_URL, options) ); console.log("Technigo projects", technigoProjects); + //Count the repos and show the chart + countRepos = technigoProjects.length; + // numberOfProjects.innerHTML = `I have finished ${countRepos} projects and have ${ + // 19 - countRepos + // } left.`; + showChart(countRepos); + + // repo info technigoProjects.forEach((repo) => { //Get the name of the repo const reponame = repo.name; @@ -64,63 +73,58 @@ fetch(REPOS_URL, options) `; }); - - //Count the repos and show the chart - showChart(technigoProjects.length); - numberOfProjects.innerHTML = `I have finished ${countRepos} projects and have ${ - 19 - countRepos - } left.`; - showChart(countRepos); //----------------------------------FETCH 3------------------------------------- - data.forEach((repo) => { - reponame = repo.name; - fetch( - `https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`, - options - ) - .then((res) => res.json()) - .then((data) => { - console.log("forked", data); - // if (repo.user.login === username) { - // let reponame = repo.base.repo.name; - // console.log(reponame); - // //get url for commits to use in new fetch - // const commitsUrl = repo.commits_url; - // displayCommits(commitsUrl, reponame); - // //get url for netlify - // //const netlifyUrl = repo.body; - // // displayLink(netlifyUrl, reponame); - // } else if ( - // repo.user.login === "sukiphan97" && - // reponame === "project-chatbot" - // ) { - // displayCommits(repo.commits_url, reponame); - // // displayLink("https://dr-strange-chatbot.netlify.app", reponame); - // } else if ( - // repo.user.login === "kolkri" && - // reponame === "project-weather-app" - // ) { - // displayCommits(repo.commits_url, reponame); - // // displayLink("https://hippos1-weatherapp.netlify.app/", reponame); - // } else { - // document.getElementById(`commits-${reponame}`).innerHTML = ""; - // } - // const displayCommits = (commitsUrl, reponame) => { - // fetch(commitsUrl, options) - // .then((res) => res.json()) - // .then((data) => { - // document.getElementById(`commits-${reponame}`).innerHTML = ` - //

Amount of commits: ${data.length} - //

`; - // }); - // const displayLink = (netlifyUrl, reponame) => { - // document.getElementById(`website-${reponame}`).innerHTML = ` - // - // - // - // `; - }); - }); // forEach - //}); // then from fetch 3 + fetch( + `https://api.github.com/repos/Technigo/${reponame}/pulls?per_page=100`, + options + ) + .then((res) => res.json()) + .then((pullData) => { + console.log("repos", pullData); + let myPullRequest = pullData.find( + (pull) => pull.user.login === repo.owner.login + ); + technigoProjects.forEach((repo) => { + if (repo.user.login === username) { + let reponame = repo.base.repo.name; + console.log(reponame); + // //get url for commits to use in new fetch + const commitsUrl = repo.commits_url; + displayCommits(commitsUrl, reponame); + // //get url for netlify + // //const netlifyUrl = repo.body; + // // displayLink(netlifyUrl, reponame); + } else if ( + repo.user.login === "sukiphan97" && + reponame === "project-chatbot" + ) { + displayCommits(repo.commits_url, reponame); + // displayLink("https://dr-strange-chatbot.netlify.app", reponame); + } else if ( + repo.user.login === "kolkri" && + reponame === "project-weather-app" + ) { + displayCommits(repo.commits_url, reponame); + // // displayLink("https://hippos1-weatherapp.netlify.app/", reponame); + } else { + document.getElementById(`commits-${reponame}`).innerHTML = ""; + } + const displayCommits = (commitsUrl, reponame) => { + fetch(commitsUrl, options) + .then((res) => res.json()) + .then((data) => { + document.getElementById(`commits-${reponame}`).innerHTML = ` + //

Amount of commits: ${data.length} + //

`; + }); + // const displayLink = (netlifyUrl, reponame) => { + // document.getElementById(`website-${reponame}`).innerHTML = ` + // + // + // + // `; + }; + }); // forEach + }); // then from fetch 3 }); // fetch from the repos diff --git a/code/style.css b/code/style.css index 47b69e32..cce08759 100644 --- a/code/style.css +++ b/code/style.css @@ -16,12 +16,14 @@ header { /* header text */ h1 { + margin: 0.5rem; color: #ffffff; - font-size: 3.5rem; + font-size: 3rem; } /* description text */ h3 { + margin: 0.5rem; color: #ffffff; } @@ -32,10 +34,21 @@ h3 { img { width: 300px; border-radius: 50%; - margin-block: 2em; } +/* link to my github and repos */ +a, +a:active { + text-decoration: none; +} + +a.nav-link, +a.nav-link:active { + position: relative; + color: black; +} + .section-projects { /* position: relative; */ } @@ -45,13 +58,15 @@ img { min-height: 100%; display: grid; gap: 1em; - grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); + justify-content: center; + justify-items: center; } .section-projects__card { background: #f9f8ff; border-radius: 0.5em; - width: 350px; + width: 300px; padding: 1em; margin: 1em; display: flex; @@ -61,5 +76,10 @@ img { /* chart */ .chart { - /* background: #223b3f; */ + max-height: 60vh; +} + +@media screen and (min-width: 768px) { + .chart { + } } From 30837d97b391a6a009ed922074f0458fc5a91272 Mon Sep 17 00:00:00 2001 From: Mimmisen Date: Mon, 28 Feb 2022 13:58:02 +0100 Subject: [PATCH 12/17] js --- code/script.js | 117 ++++++++++++++++++++++++------------------------- code/style.css | 2 +- 2 files changed, 58 insertions(+), 61 deletions(-) diff --git a/code/script.js b/code/script.js index f9dd88ff..ee251483 100644 --- a/code/script.js +++ b/code/script.js @@ -1,8 +1,9 @@ const username = "Mimmisen"; const API_URL = `https://api.github.com/users/${username}`; const REPOS_URL = `https://api.github.com/users/${username}/repos`; -//const API_URL_PR = `https://api.github.com/repos/Technigo/${reponame}/pulls`; +// const API_URL_PR = `https://api.github.com/repos/Technigo/${reponame}/pulls`; const numberOfProjects = document.getElementById("numberOfProjects"); +let reponame = ""; const options = { method: "GET", @@ -39,20 +40,17 @@ fetch(REPOS_URL, options) console.log("Technigo projects", technigoProjects); //Count the repos and show the chart - countRepos = technigoProjects.length; + showChart(technigoProjects.length); // numberOfProjects.innerHTML = `I have finished ${countRepos} projects and have ${ // 19 - countRepos // } left.`; - showChart(countRepos); - // repo info + // repo + link to pull request and date for latest update technigoProjects.forEach((repo) => { //Get the name of the repo const reponame = repo.name; - //get the url fo each repo const projectUrl = repo.html_url; - //get the latest push/update of the repo const latestPushRepo = new Date(repo.updated_at).toLocaleDateString( "sv-SE", @@ -73,58 +71,57 @@ fetch(REPOS_URL, options) `; }); - //----------------------------------FETCH 3------------------------------------- - - fetch( - `https://api.github.com/repos/Technigo/${reponame}/pulls?per_page=100`, - options - ) - .then((res) => res.json()) - .then((pullData) => { - console.log("repos", pullData); - let myPullRequest = pullData.find( - (pull) => pull.user.login === repo.owner.login - ); - technigoProjects.forEach((repo) => { - if (repo.user.login === username) { - let reponame = repo.base.repo.name; - console.log(reponame); - // //get url for commits to use in new fetch - const commitsUrl = repo.commits_url; - displayCommits(commitsUrl, reponame); - // //get url for netlify - // //const netlifyUrl = repo.body; - // // displayLink(netlifyUrl, reponame); - } else if ( - repo.user.login === "sukiphan97" && - reponame === "project-chatbot" - ) { - displayCommits(repo.commits_url, reponame); - // displayLink("https://dr-strange-chatbot.netlify.app", reponame); - } else if ( - repo.user.login === "kolkri" && - reponame === "project-weather-app" - ) { - displayCommits(repo.commits_url, reponame); - // // displayLink("https://hippos1-weatherapp.netlify.app/", reponame); - } else { - document.getElementById(`commits-${reponame}`).innerHTML = ""; - } - const displayCommits = (commitsUrl, reponame) => { - fetch(commitsUrl, options) - .then((res) => res.json()) - .then((data) => { - document.getElementById(`commits-${reponame}`).innerHTML = ` - //

Amount of commits: ${data.length} - //

`; - }); - // const displayLink = (netlifyUrl, reponame) => { - // document.getElementById(`website-${reponame}`).innerHTML = ` - // - // - // - // `; - }; - }); // forEach - }); // then from fetch 3 }); // fetch from the repos +//----------------------------------FETCH 3------------------------------------- + +fetch( + `https://api.github.com/repos/Technigo/${reponame}/pulls?per_page=100`, + options +) + .then((res) => res.json()) + .then((data) => { + console.log("repos", data); + + data.forEach((repo) => { + if (repo.user.login === username) { + let reponame = repo.base.repo.name; + console.log(reponame); + // //get url for commits to use in new fetch + const commitsUrl = repo.commits_url; + displayCommits(commitsUrl, reponame); + // //get url for netlify + // //const netlifyUrl = repo.body; + // // displayLink(netlifyUrl, reponame); + } else if ( + repo.user.login === "sukiphan97" && + reponame === "project-chatbot" + ) { + displayCommits(repo.commits_url, reponame); + // displayLink("https://dr-strange-chatbot.netlify.app", reponame); + } else if ( + repo.user.login === "kolkri" && + reponame === "project-weather-app" + ) { + displayCommits(repo.commits_url, reponame); + // // displayLink("https://hippos1-weatherapp.netlify.app/", reponame); + } else { + document.getElementById(`commits-${reponame}`).innerHTML = + "No commits for this repo"; + } + const displayCommits = (commitsUrl, reponame) => { + fetch(commitsUrl, options) + .then((res) => res.json()) + .then((data) => { + document.getElementById(`commits-${reponame}`).innerHTML = ` +

Amount of commits: ${data.length} +

`; + }); + // const displayLink = (netlifyUrl, reponame) => { + // document.getElementById(`website-${reponame}`).innerHTML = ` + // + // + // + // `; + }; + }); // forEach + }); // then from fetch 3 diff --git a/code/style.css b/code/style.css index cce08759..25533caf 100644 --- a/code/style.css +++ b/code/style.css @@ -76,10 +76,10 @@ a.nav-link:active { /* chart */ .chart { - max-height: 60vh; } @media screen and (min-width: 768px) { .chart { + max-height: 60vh; } } From 1b2fa6da250c57a2731c0dd51b968b0c27e31a7c Mon Sep 17 00:00:00 2001 From: Mimmisen Date: Mon, 28 Feb 2022 15:07:16 +0100 Subject: [PATCH 13/17] latest push function is now working --- code/index.html | 2 +- code/script.js | 112 +++++++++++++++++++++--------------------------- code/style.css | 8 ---- 3 files changed, 49 insertions(+), 73 deletions(-) diff --git a/code/index.html b/code/index.html index f3cbd0a3..8f011e04 100644 --- a/code/index.html +++ b/code/index.html @@ -21,7 +21,7 @@

GitHub Tracker

Technigo Student Spring 2022

-
+
diff --git a/code/script.js b/code/script.js index ee251483..d4445302 100644 --- a/code/script.js +++ b/code/script.js @@ -1,30 +1,27 @@ const username = "Mimmisen"; const API_URL = `https://api.github.com/users/${username}`; const REPOS_URL = `https://api.github.com/users/${username}/repos`; -// const API_URL_PR = `https://api.github.com/repos/Technigo/${reponame}/pulls`; -const numberOfProjects = document.getElementById("numberOfProjects"); -let reponame = ""; +// function for token const options = { method: "GET", headers: { - Authorization: `token ${API_TOKEN}`, // you need to paste your token over here. + Authorization: `token ${API_TOKEN}`, }, }; //----------------------------------FETCH 1------------------------------------- +// getting profile pic,user name and link to my github fetch(API_URL, options) .then((res) => res.json()) .then((data) => { - console.log(data); headerBox.innerHTML += ` -
-
+

${data.name}

-

+ `; }); @@ -32,23 +29,21 @@ fetch(API_URL, options) fetch(REPOS_URL, options) .then((res) => res.json()) .then((data) => { - console.log("repos", data); //To get my projects and filter them so only the ones starting with projects are displayed const technigoProjects = data.filter( (repo) => repo.name.startsWith("project-") && repo.fork ); - console.log("Technigo projects", technigoProjects); //Count the repos and show the chart showChart(technigoProjects.length); - // numberOfProjects.innerHTML = `I have finished ${countRepos} projects and have ${ - // 19 - countRepos - // } left.`; // repo + link to pull request and date for latest update technigoProjects.forEach((repo) => { //Get the name of the repo const reponame = repo.name; + + //declaring reponame to the function to display amount of push I have done for each project + fetchTechnigo(reponame); //get the url fo each repo const projectUrl = repo.html_url; //get the latest push/update of the repo @@ -61,6 +56,7 @@ fetch(REPOS_URL, options) } ); + //displaying project url, name and latest push document.getElementById("section-projects").innerHTML += `
@@ -71,57 +67,45 @@ fetch(REPOS_URL, options)
`; }); - }); // fetch from the repos -//----------------------------------FETCH 3------------------------------------- + }); -fetch( - `https://api.github.com/repos/Technigo/${reponame}/pulls?per_page=100`, - options -) - .then((res) => res.json()) - .then((data) => { - console.log("repos", data); +// function for the commits url and name +const displayCommits = (commitsUrl, reponame) => { + fetch(commitsUrl, options) + .then((res) => res.json()) + .then((data) => { + document.getElementById(`commits-${reponame}`).innerHTML = ` +

Amount of commits: ${data.length} +

`; + }); +}; - data.forEach((repo) => { - if (repo.user.login === username) { - let reponame = repo.base.repo.name; - console.log(reponame); - // //get url for commits to use in new fetch +//function to get the latest push to repo +const fetchTechnigo = (reponame) => { + fetch( + `https://api.github.com/repos/Technigo/${reponame}/pulls?per_page=100`, + options + ) + .then((res) => res.json()) + .then((data) => { + data.forEach((repo) => { const commitsUrl = repo.commits_url; - displayCommits(commitsUrl, reponame); - // //get url for netlify - // //const netlifyUrl = repo.body; - // // displayLink(netlifyUrl, reponame); - } else if ( - repo.user.login === "sukiphan97" && - reponame === "project-chatbot" - ) { - displayCommits(repo.commits_url, reponame); - // displayLink("https://dr-strange-chatbot.netlify.app", reponame); - } else if ( - repo.user.login === "kolkri" && - reponame === "project-weather-app" - ) { - displayCommits(repo.commits_url, reponame); - // // displayLink("https://hippos1-weatherapp.netlify.app/", reponame); - } else { - document.getElementById(`commits-${reponame}`).innerHTML = - "No commits for this repo"; - } - const displayCommits = (commitsUrl, reponame) => { - fetch(commitsUrl, options) - .then((res) => res.json()) - .then((data) => { - document.getElementById(`commits-${reponame}`).innerHTML = ` -

Amount of commits: ${data.length} -

`; - }); - // const displayLink = (netlifyUrl, reponame) => { - // document.getElementById(`website-${reponame}`).innerHTML = ` - // - // - // - // `; - }; - }); // forEach - }); // then from fetch 3 + if (repo.user.login === username) { + displayCommits(commitsUrl, reponame); + } else if ( + repo.user.login === "sukiphan97" && + reponame === "project-chatbot" + ) { + displayCommits(repo.commits_url, reponame); + } else if ( + repo.user.login === "kolkri" && + reponame === "project-weather-app" + ) { + displayCommits(repo.commits_url, reponame); + } else { + document.getElementById(`commits-${reponame}`).innerHTML = + "No commits for this repo"; + } + }); + }); +}; diff --git a/code/style.css b/code/style.css index 25533caf..0f0bb94d 100644 --- a/code/style.css +++ b/code/style.css @@ -49,10 +49,6 @@ a.nav-link:active { color: black; } -.section-projects { - /* position: relative; */ -} - .section-projects__container { padding: 2em 0; min-height: 100%; @@ -74,10 +70,6 @@ a.nav-link:active { justify-content: space-between; } -/* chart */ -.chart { -} - @media screen and (min-width: 768px) { .chart { max-height: 60vh; From 4c05fb048e4f4201f157b3d8e0ff2f39339ce975 Mon Sep 17 00:00:00 2001 From: Mimmisen Date: Mon, 28 Feb 2022 15:30:47 +0100 Subject: [PATCH 14/17] added margin to chart and changed token --- code/style.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/code/style.css b/code/style.css index 0f0bb94d..54b30d62 100644 --- a/code/style.css +++ b/code/style.css @@ -70,6 +70,10 @@ a.nav-link:active { justify-content: space-between; } +canvas { + margin: 2rem; +} + @media screen and (min-width: 768px) { .chart { max-height: 60vh; From 8b4559bd31a0e9c67a4f79141898099d3a450d79 Mon Sep 17 00:00:00 2001 From: Mimmisen Date: Mon, 28 Feb 2022 15:38:19 +0100 Subject: [PATCH 15/17] changed in redme --- README.md | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index f4aa2ba0..63c94268 100644 --- a/README.md +++ b/README.md @@ -4,14 +4,10 @@ This week, we have created a place to keep track of the GitHub repos that we are 🔵 Blue Level (Minimum Requirements) Your page should include: -A list of all repos that are forked from Technigo -Your username and profile picture -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 -It should be responsive (mobile first) -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] +A list of all repos that are forked from Technigo, Your username and profile picture, +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, +It should be responsive (mobile first),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] ## The problem @@ -32,4 +28,4 @@ If I had more time I would add more information about every repo: languages used ## View it live -link to netlify +https://github-tracker-bymimmi.netlify.app/ From 7b6ad6dfa2eb07b0bc61d3daff11495f3d186e72 Mon Sep 17 00:00:00 2001 From: Mimmisen Date: Wed, 2 Mar 2022 23:06:07 +0100 Subject: [PATCH 16/17] added the default branch and github name --- .DS_Store | Bin 6148 -> 6148 bytes code/script.js | 18 ++++++++++-------- code/style.css | 6 +++++- 3 files changed, 15 insertions(+), 9 deletions(-) diff --git a/.DS_Store b/.DS_Store index 01625912d654f181b4393c80d202bb2d9e546436..72a188b1e78b03b70a9d6751718f2098f0158871 100644 GIT binary patch delta 24 gcmZoMXfc@Jz{oJsQGR3MGWN;(BCMOaIezj30ARHTlK=n! delta 17 YcmZoMXfc@Jz{oh!QJ#@;W8z|Q04?7H`Tzg` diff --git a/code/script.js b/code/script.js index d4445302..6c714180 100644 --- a/code/script.js +++ b/code/script.js @@ -20,7 +20,8 @@ fetch(API_URL, options) Avatar of ${data.login}
-

${data.name}

+

${data.login}

+
Mimmi Fordal Uddin
`; }); @@ -33,20 +34,19 @@ fetch(REPOS_URL, options) const technigoProjects = data.filter( (repo) => repo.name.startsWith("project-") && repo.fork ); + console.log("repos", data); - //Count the repos and show the chart showChart(technigoProjects.length); - // repo + link to pull request and date for latest update technigoProjects.forEach((repo) => { - //Get the name of the repo const reponame = repo.name; - //declaring reponame to the function to display amount of push I have done for each project fetchTechnigo(reponame); - //get the url fo each repo + const projectUrl = repo.html_url; - //get the latest push/update of the repo + + const defaultBranch = repo.default_branch; + const latestPushRepo = new Date(repo.updated_at).toLocaleDateString( "sv-SE", { @@ -63,6 +63,7 @@ fetch(REPOS_URL, options)

${reponame}

Latest update: ${latestPushRepo}

+

default branch: ${defaultBranch}

`; @@ -76,7 +77,8 @@ const displayCommits = (commitsUrl, reponame) => { .then((data) => { document.getElementById(`commits-${reponame}`).innerHTML = `

Amount of commits: ${data.length} -

`; +

+ `; }); }; diff --git a/code/style.css b/code/style.css index 54b30d62..5d046fe3 100644 --- a/code/style.css +++ b/code/style.css @@ -28,7 +28,11 @@ h3 { } .username { - font-size: 30px; + font-size: 25px; +} + +.my-name { + font-size: 35px; } img { From b330f78e33212124d724e5df71045b4eed240d79 Mon Sep 17 00:00:00 2001 From: Mimmisen Date: Wed, 2 Mar 2022 23:32:07 +0100 Subject: [PATCH 17/17] uppdated readme --- README.md | 16 +++------------- code/script.js | 2 -- 2 files changed, 3 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index 63c94268..56e25191 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,6 @@ # GitHub Tracker This week, we have created a place to keep track of the GitHub repos that we are crating at Technigo. We have continued practicing on JavaScript and API. -🔵 Blue Level (Minimum Requirements) -Your page should include: - -A list of all repos that are forked from Technigo, Your username and profile picture, -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, -It should be responsive (mobile first),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] ## The problem @@ -17,12 +10,9 @@ Fetched data from API and displayed it to fulfill the requirements. Created a chart for the progress. Styled the page. -This has been a hard project to finish with a lot of problems a long the way. How to fetches within fetches, create a chart and a token have all been new things -to learn this week. -I always like to do some research before I start with a new project to get inspiration and a better understand for how to create what I'm building. I like to look -at other peoples code to get better knowledge of what I will do and truly understand what I'm going to build. -I have looked for solutions on stackoverflow, townhall and the help chanel. Me and my team have also meet up during the week and helped each other with -problems. +I started by adding my token to the project. I then collected all the info about my repos with the fetch() method. +I then builded functions to us the information I needed and displayed it on my page. I also created a chart showing +how many projects I have done and have left to do during my technigo education. If I had more time I would add more information about every repo: languages used for the project, review comments and link to netlify. diff --git a/code/script.js b/code/script.js index 6c714180..cedb37e2 100644 --- a/code/script.js +++ b/code/script.js @@ -34,8 +34,6 @@ fetch(REPOS_URL, options) const technigoProjects = data.filter( (repo) => repo.name.startsWith("project-") && repo.fork ); - console.log("repos", data); - showChart(technigoProjects.length); technigoProjects.forEach((repo) => {