From c874af1d62f2ad3f56b9715971d617d6347206f1 Mon Sep 17 00:00:00 2001 From: Katarina Elgerus Date: Fri, 25 Feb 2022 14:52:57 +0100 Subject: [PATCH 01/11] API-setup --- code/index.html | 6 ++- code/script.js | 123 ++++++++++++++++++++++++++++++++++++++++++++++++ code/style.css | 7 ++- 3 files changed, 134 insertions(+), 2 deletions(-) diff --git a/code/index.html b/code/index.html index 2fb5e0ae..dae19ced 100644 --- a/code/index.html +++ b/code/index.html @@ -9,9 +9,13 @@

GitHub Tracker

+ +

+

Projects:

-
+
+
diff --git a/code/script.js b/code/script.js index e69de29b..9c71c5c9 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,123 @@ +const avatar = document.getElementById('avatar') +const fullName = document.getElementById('full-name') +const githubname = document.getElementById('githubname') +const projects = document.getElementById('projects') +const projects2 = document.getElementById('projects2') +const username = 'Katarina821' +let repoName + +const API_URL_REPOS =`https://api.github.com/users/${username}/repos` +const API_URL_ID =`https://api.github.com/users/${username}` + +const getIntro=()=>{ +fetch(API_URL_ID) +.then(res=>res.json()) +.then(data =>{ + +console.log(data.login) +console.log(data.avatar_url) +console.log(data.name) +fullName.innerHTML = `Name: ${data.name}.` +githubname.innerHTML = `Username: ${data.login}` +avatar.src = data.avatar_url +getRepos() +}) +} + + +const getRepos = () => { + fetch(API_URL_REPOS) + .then(res => res.json()) + .then(data => { + console.log(data) + + const forkedRepos = data.filter((repo) => repo.fork && repo.name.startsWith("project-")) + console.log(forkedRepos) + + forkedRepos.forEach((repo)=>projects.innerHTML+=` + +
+

${repo.name }

 +

Defaultbranch ${repo.default_branch}

+

Most resent update: ${new Date(repo.updated_at).toLocaleDateString("en-UK")}

+

Commits amount:

+
+ + `) + + getPullRequests(forkedRepos) + }) +} + + +const getPullRequests = (forkedRepos) => { + forkedRepos.forEach(repo => { + fetch(`https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=100`) + .then(res => res.json()) + .then(data2 => + { + const myPullRequests = data2.filter(item => item.user.login === repo.owner.login) + console.log(myPullRequests) + if (myPullRequests.length>0) {fetchCommits(myPullRequests[0].commits_url, repo.name) + + } else {document.getElementById(`${repo.name}`).innerHTML = + `No pull request done, commits not avalible` + console.log("hejdΓ₯") + }} + )}) +} + + +const fetchCommits = (myCommitsUrl, myRepoName) => { + fetch(myCommitsUrl) + .then((res) => res.json()) + .then((data) => { + document.getElementById(`${myRepoName}`).innerHTML += data.length + console.log(`${data.length}`) + }) +} +getIntro() + + + + + +// console.log(data[1].name) +//console.log(data.name.filter((item)=>item.startsWith("P"))) +//console.log('data',data) +//data.forEach((repo) =>{console.log(repo.name)}) + + +//data.forEach((element) => { console.log (element.name) +//}) + +/*fetch(API_URL_REPOS) +.then(res=>res.json()) +.then(data =>{ + +console.log(data) +const forkedRepos = data.filter((repo) => repo.fork && repo.name.startsWith("project-")) +console.log(forkedRepos) +forkedRepos.forEach((repo) =>{console.log(repo.name)}) +})*/ + + + + +/*repoName=data[7].name + + +API_URL_PR=`https://api.github.com/repos/Technigo/${repoName}/pulls` + fetch(API_URL_PR) + .then(res=>res.json()) + .then(data =>{ + console.log(data) + + })*/ + + + + + // This function fetch all my repos and then filters() out the ones forked = true and starts with "project-" + + \ No newline at end of file diff --git a/code/style.css b/code/style.css index 7c8ad447..0c28ddc4 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,8 @@ body { background: #FFECE9; -} \ No newline at end of file +} + +.repo{border:2px solid black; padding:20px; margin:30px} +.projects{display:flex; flex-wrap: wrap;} +a{text-decoration:none;} +.picture{width:20%; border-radius:50% ;} \ No newline at end of file From 2879bd11960ac5e191e3132cd91cb1bd558f50c5 Mon Sep 17 00:00:00 2001 From: Katarina Elgerus Date: Sat, 26 Feb 2022 10:16:40 +0100 Subject: [PATCH 02/11] styling added --- code/GitHubMark.png | Bin 0 -> 2330 bytes code/chart.js | 28 +++++++++++++++++++++++++++ code/index.html | 16 ++++++++++------ code/script.js | 21 ++++++++++++--------- code/style.css | 45 ++++++++++++++++++++++++++++++++++++++++---- 5 files changed, 91 insertions(+), 19 deletions(-) create mode 100644 code/GitHubMark.png diff --git a/code/GitHubMark.png b/code/GitHubMark.png new file mode 100644 index 0000000000000000000000000000000000000000..73db1f61f3aa55fcaecbca896dbea067706bb7bd GIT binary patch literal 2330 zcmaJ@dpy&7A0KVQT+TU3iOLKmvh6n;HrL%O6)ohFIM()K!!EXAIjO}-B}W%^)GMS^ zbRj&Vi`ep%r%r`PE0rauRMJE)p`NWn=lP@Od|$8M_wsqY-=EL>bNS=9n;FC~MOYyq z5Qu5ON?Ne?^wWKYaP5AUm;6k7ER@nCq#?pMX&OrmLdYE9CJ-6GXT^iTAd9m(`4;E} zfy}Yzg+@pt0@sk(LOz-_L`>RbTB#+~b3MT|& z14UGj%UhW)21C+=LfPqwY$6Bc>x1-?k+cr@pp=D_@sk7+lFS?R)h|hV*O@UW6`Ai_H`049j)JozV)4d8r`BUo7M!zgCCD`;G!S0dV&q zp8LL%~Ba#6Eg$iKtZe$N47EeRXa5>+}e1_})f4LZ~7>us9|I_MOlXiY|*KdQX zeS8~zP@tW6v39VXfr*USwp~rS`=B$j`)nk?@}kq(ClF4d>YOz8hkr;=W~kkm zCW7a<(pcz5X#A0R<9Z{E*BfJ?`u2(tHC?l!+(h-PRUM^q=-1CbjbNI^81U7VyU;3( zT2f^?#ma%q8;EN&iz|Pk@=)pdaMq3d25mbDNrIP#bi|hqP`3*fT}kuvR+%ng#;F!o z!3#SBB2F;iNzfJ(L`*fNFT`NdGQiAH|Ej|Hc2f5bF>p2ufwkUZTFe}(dJ$`MX;C(0 z-V{r-E2m(c5BI}drL(~k6SEswne#fEUdvi&3FiZh%N)80&$C_2kh}Zs$!WSMT5)2L z->t!4_PuW(@0iMUf!tM3EXsxR=8aqQJS!tI77vxXD$Q$NZ1vCFp)TCJPPKgJ6$dq6 z6AvwIT>T_kTfhs9Ro&hblgcP`#)4Y!f6RfcKKz5}fFeLswhx__Ru z`f>qsFw=AMC$D2)!n`KC&FVyxLH=oq<|UuIL`hLk2jvOa!Qq_R3CqNXSp|NlZhBlh z@V0BxvHNAmtK__)^rv^SNw9j3M7}#zg*ToWtbKT~2{x#g2)k9TC|R>Dzhq!T-pA~R z>ZL3u2sdInHHePlU?n!;#-16SNWGJd=j+gQ4vI}N_YbJpa3kc$Q-$nCw8DusXXMl4 z*nJS|qzj=rNJpZI; z$vRbg>YS|lmxjj--{P0zyGBQ?yoS4%MX$EkOMqE$O+Pm%_1o-3WM-q=b4f2dQfTt> zOFR@zTq!4JBAQzKEZEFs#YOE+WUR@=e`!;~PCh-+ddeAuP%>I*Cd8Cb%!1YNZFKDIJTra-- zG#+}%TS;ZSZaqDK8^0CL=AU{B|LU>Hu0mU~}a9D5U= zlszxG=SokFC;8liaQHBlh z2BUO}iYG`REj!%$Xj-syeaVfwq3hF5*L>e!Jm^2?Jo?@}>G*`TrXZHmap&CnfJ4u^ zk68!bvsByruv+!zzl{#!R8}8y9^Ra-sENMbl68A9w_o}?z5eO*E&If08t#Rq+K#s{ zb}mq^_${jVjmeHhTXNWUoFMIe)lJ26`vXz zWvk~HR@whs?OF8cKV8YyEs1et|A`i*;GS`_+RH=ns17TKJg|lJv;Y(H<+2}hIXsat z5ANw;3-!HT?J@e?t>VkCV$sSaXTfoVh-!;h=kN@TPi^X~Dlo@yIP4fl2 z#pt2|1Jj>Ov$71^ei~h1H$uM|R6wY=ZG3Q99U>X|mV`BoS9`4vYw~J@(FazM_8hI9o-&aIo@yE| z6xi92RAt7!kM;6HVQV)mjXu!6Snn}L!YlYRm7CF)XL~-WsBd9Uk6GUDFm8S4@oR}s z!f_@&&0G2FHTy?nQd8F&@&}*SrC)xRgU!h6eepUXk}}=;?q@wX1aZ#AJc}avS@*XR MKo6o-Qerdz3wwRZj{pDw literal 0 HcmV?d00001 diff --git a/code/chart.js b/code/chart.js index 92e85a30..5ba6588d 100644 --- a/code/chart.js +++ b/code/chart.js @@ -2,3 +2,31 @@ const ctx = document.getElementById('chart').getContext('2d') //"Draw" the chart here πŸ‘‡ +const drawChart = (repos) => { + +const labels = [ + 'Completed projects', + 'Remaining projects', + + ]; + + const data = { + labels: labels, + datasets: [{ + label: 'My First dataset', + backgroundColor: ['#A9C9FF', '#fde3fb'], + borderColor:'pink', + data: [repos, 19-repos], + }] + }; + + const config = { + type: 'pie', + data: data, + }; + + const myChart = new Chart( + document.getElementById('chart'), + config + ); +} \ No newline at end of file diff --git a/code/index.html b/code/index.html index dae19ced..b7d1555b 100644 --- a/code/index.html +++ b/code/index.html @@ -8,17 +8,21 @@ +

GitHub Tracker

+
-

-

-

Projects:

+
+
+

Projects:

+
-
+ - - + +
+ diff --git a/code/script.js b/code/script.js index 9c71c5c9..e269d68e 100644 --- a/code/script.js +++ b/code/script.js @@ -1,8 +1,8 @@ const avatar = document.getElementById('avatar') -const fullName = document.getElementById('full-name') -const githubname = document.getElementById('githubname') +//const fullName = document.getElementById('full-name') +//const githubname = document.getElementById('githubname') const projects = document.getElementById('projects') -const projects2 = document.getElementById('projects2') +const userInfo = document.getElementById('userinfo') const username = 'Katarina821' let repoName @@ -17,8 +17,8 @@ fetch(API_URL_ID) console.log(data.login) console.log(data.avatar_url) console.log(data.name) -fullName.innerHTML = `Name: ${data.name}.` -githubname.innerHTML = `Username: ${data.login}` +userInfo.innerHTML = `

Name: ${data.name}

Username: ${data.login}

` +//githubname.innerHTML = `` avatar.src = data.avatar_url getRepos() }) @@ -35,17 +35,20 @@ const getRepos = () => { console.log(forkedRepos) forkedRepos.forEach((repo)=>projects.innerHTML+=` - -
-

${repo.name }

 -

Defaultbranch ${repo.default_branch}

+ +
+ +

${repo.name }

 +

Defaultbranch ${repo.default_branch}

Most resent update: ${new Date(repo.updated_at).toLocaleDateString("en-UK")}

Commits amount:

+
`) getPullRequests(forkedRepos) + drawChart(forkedRepos.length) }) } diff --git a/code/style.css b/code/style.css index 0c28ddc4..ecc636c7 100644 --- a/code/style.css +++ b/code/style.css @@ -1,8 +1,45 @@ +@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300&family=Roboto:wght@300&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap'); +*{box-sizing: border-box;} + body { - background: #FFECE9; + background-repeat: no-repeat; + background-attachment: fixed; + background-color: #A9C9FF; + background-image: linear-gradient(180deg, #A9C9FF 0%, #FFBBEC 100%); + font-family: 'Oswald', sans-serif; } - -.repo{border:2px solid black; padding:20px; margin:30px} +.intro{width:80%; margin:auto; text-align:center} +h1{font-size: 70px; text-align: center;} +h2{text-align:center} +.repo{width:80%; margin:auto; background-color:#fde3fb; border:1px solid white; padding:20px; margin:30px; border-radius:5%} .projects{display:flex; flex-wrap: wrap;} + a{text-decoration:none;} -.picture{width:20%; border-radius:50% ;} \ No newline at end of file +h3{font-size: 30px;} +h3:hover{color:rgb(141, 190, 233);font-family: 'Bebas Neue', cursive;;} + +.picture{width:80%; border-radius:50%;} + +.logo{width:30px;} +.chart{ position: absolute; + left: 0; + right: 0; + margin:auto; + width: auto} +.userinfo{padding:40px;} + + +@media only screen and (min-width: 992px) { +.repo{width:20%} +.picture{width:20%;} +.intro{display:flex; align-items:center; justify-content: center;} +h2{font-size:35px; text-align:left; margin-left:10px;} +.chart{ position: absolute; + left: 0; + right: 0; + margin:auto; + width: 40% + + }} + From 0036b4974528557192e2ece21d8dc8249b2a7be6 Mon Sep 17 00:00:00 2001 From: Katarina Elgerus Date: Sat, 26 Feb 2022 19:11:01 +0100 Subject: [PATCH 03/11] mediaquieries added --- README.md | 8 ++------ code/chart.js | 4 ++++ code/script.js | 2 +- code/style.css | 26 +++++++++++++------------- 4 files changed, 20 insertions(+), 20 deletions(-) diff --git a/README.md b/README.md index 1613a3b0..d625324e 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,8 @@ # 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. +Assigment: To create a place to keep track of the GitHub repos that I am using at Technigo using JavaScript and API:s. ## The problem - -Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next? +I had problems with fetching teh commitsamount for my repos since all of them didnt have a pullrequest done by me. I solved it by adding conditional statment to sort out the repos with a pullrequest and only fetcinh the commitamount for them. ## View it live diff --git a/code/chart.js b/code/chart.js index 5ba6588d..de64de14 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,3 +1,7 @@ + + + + //DOM-selector for the canvas πŸ‘‡ const ctx = document.getElementById('chart').getContext('2d') diff --git a/code/script.js b/code/script.js index e269d68e..cfc19f72 100644 --- a/code/script.js +++ b/code/script.js @@ -17,7 +17,7 @@ fetch(API_URL_ID) console.log(data.login) console.log(data.avatar_url) console.log(data.name) -userInfo.innerHTML = `

Name: ${data.name}

Username: ${data.login}

` +userInfo.innerHTML = `

${data.name}

${data.login}

` //githubname.innerHTML = `` avatar.src = data.avatar_url getRepos() diff --git a/code/style.css b/code/style.css index ecc636c7..90886745 100644 --- a/code/style.css +++ b/code/style.css @@ -11,9 +11,9 @@ body { } .intro{width:80%; margin:auto; text-align:center} h1{font-size: 70px; text-align: center;} -h2{text-align:center} +h2{text-align:center; } .repo{width:80%; margin:auto; background-color:#fde3fb; border:1px solid white; padding:20px; margin:30px; border-radius:5%} -.projects{display:flex; flex-wrap: wrap;} +.projects{display:flex; flex-wrap: wrap; justify-content: center;} a{text-decoration:none;} h3{font-size: 30px;} @@ -26,20 +26,20 @@ h3:hover{color:rgb(141, 190, 233);font-family: 'Bebas Neue', cursive;;} left: 0; right: 0; margin:auto; - width: auto} -.userinfo{padding:40px;} - + width: 400px} + +.userinfo{padding:20px; } + + @media only screen and (min-width: 600px) { +.repo{width:40%} +.chart{width:600px} + } @media only screen and (min-width: 992px) { .repo{width:20%} .picture{width:20%;} .intro{display:flex; align-items:center; justify-content: center;} h2{font-size:35px; text-align:left; margin-left:10px;} -.chart{ position: absolute; - left: 0; - right: 0; - margin:auto; - width: 40% - - }} - +.chart{ + width: 40% } +} From c0fd47fdce37e28b37b877f71ace874ac50a5ebf Mon Sep 17 00:00:00 2001 From: Katarina Elgerus Date: Sat, 26 Feb 2022 19:33:54 +0100 Subject: [PATCH 04/11] cleaned up code+ added comments --- code/chart.js | 4 -- code/index.html | 46 +++++++---------- code/script.js | 135 ++++++++++++++---------------------------------- code/style.css | 120 +++++++++++++++++++++++++++++------------- 4 files changed, 143 insertions(+), 162 deletions(-) diff --git a/code/chart.js b/code/chart.js index de64de14..5ba6588d 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,7 +1,3 @@ - - - - //DOM-selector for the canvas πŸ‘‡ const ctx = document.getElementById('chart').getContext('2d') diff --git a/code/index.html b/code/index.html index b7d1555b..382d73f7 100644 --- a/code/index.html +++ b/code/index.html @@ -1,29 +1,23 @@ - - - - - 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 cfc19f72..e235341a 100644 --- a/code/script.js +++ b/code/script.js @@ -1,126 +1,67 @@ const avatar = document.getElementById('avatar') -//const fullName = document.getElementById('full-name') -//const githubname = document.getElementById('githubname') const projects = document.getElementById('projects') const userInfo = document.getElementById('userinfo') const username = 'Katarina821' -let repoName -const API_URL_REPOS =`https://api.github.com/users/${username}/repos` -const API_URL_ID =`https://api.github.com/users/${username}` +const API_URL_REPOS = `https://api.github.com/users/${username}/repos` +const API_URL_ID = `https://api.github.com/users/${username}` -const getIntro=()=>{ -fetch(API_URL_ID) -.then(res=>res.json()) -.then(data =>{ - -console.log(data.login) -console.log(data.avatar_url) -console.log(data.name) -userInfo.innerHTML = `

${data.name}

${data.login}

` -//githubname.innerHTML = `` -avatar.src = data.avatar_url -getRepos() -}) +//First function, fetches userdata and displays them in userinfo +const getIntro = () => { + fetch(API_URL_ID).then(res => res.json()).then(data => { + userInfo.innerHTML = `

${data.name}

${data.login}

` + avatar.src = data.avatar_url + getRepos() + }) } - - +//second function, fetches my repos and filters the ones that are forked and stars with project. Displays info. const getRepos = () => { - fetch(API_URL_REPOS) - .then(res => res.json()) - .then(data => { - console.log(data) - - const forkedRepos = data.filter((repo) => repo.fork && repo.name.startsWith("project-")) - console.log(forkedRepos) - - forkedRepos.forEach((repo)=>projects.innerHTML+=` - + fetch(API_URL_REPOS).then(res => res.json()).then(data => { + console.log(data) + const forkedRepos = data.filter((repo) => repo.fork && repo.name.startsWith("project-")) + console.log(forkedRepos) + forkedRepos.forEach((repo) => projects.innerHTML += `

${repo.name }

Defaultbranch ${repo.default_branch}

Most resent update: ${new Date(repo.updated_at).toLocaleDateString("en-UK")}

Commits amount:

-
- `) - - getPullRequests(forkedRepos) - drawChart(forkedRepos.length) - }) + getPullRequests(forkedRepos) + drawChart(forkedRepos.length)//Evokes chartfunction with total amount of forked repos as argument + }) } - - +//third function Fetches all techningos pullrequests and filters the one done by me const getPullRequests = (forkedRepos) => { - forkedRepos.forEach(repo => { - fetch(`https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=100`) - .then(res => res.json()) - .then(data2 => - { - const myPullRequests = data2.filter(item => item.user.login === repo.owner.login) - console.log(myPullRequests) - if (myPullRequests.length>0) {fetchCommits(myPullRequests[0].commits_url, repo.name) - - } else {document.getElementById(`${repo.name}`).innerHTML = - `No pull request done, commits not avalible` - console.log("hejdΓ₯") - }} - )}) + forkedRepos.forEach(repo => { + fetch(`https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=100`).then(res => res.json()).then(data2 => { + const myPullRequests = data2.filter(item => item.user.login === repo.owner.login) + console.log(myPullRequests) + //conditional statement to sort out the repos that have a pullrequest done + // if pullrequest is done, evoke fetch commit function + if (myPullRequests.length > 0) { + fetchCommits(myPullRequests[0].commits_url, repo.name) + //if not dipslay message with info + } else { + document.getElementById(`${repo.name}`).innerHTML = `No pull request done, commits not avalible` + } + }) + }) } - - +// 4th function, fetches the ammount of commits const fetchCommits = (myCommitsUrl, myRepoName) => { - fetch(myCommitsUrl) - .then((res) => res.json()) - .then((data) => { - document.getElementById(`${myRepoName}`).innerHTML += data.length + fetch(myCommitsUrl).then((res) => res.json()).then((data) => { + document.getElementById(`${myRepoName}`).innerHTML += data.length console.log(`${data.length}`) - }) + }) } -getIntro() - - - - - -// console.log(data[1].name) -//console.log(data.name.filter((item)=>item.startsWith("P"))) -//console.log('data',data) -//data.forEach((repo) =>{console.log(repo.name)}) - - -//data.forEach((element) => { console.log (element.name) -//}) - -/*fetch(API_URL_REPOS) -.then(res=>res.json()) -.then(data =>{ - -console.log(data) -const forkedRepos = data.filter((repo) => repo.fork && repo.name.startsWith("project-")) -console.log(forkedRepos) -forkedRepos.forEach((repo) =>{console.log(repo.name)}) -})*/ - - +getIntro() -/*repoName=data[7].name -API_URL_PR=`https://api.github.com/repos/Technigo/${repoName}/pulls` - fetch(API_URL_PR) - .then(res=>res.json()) - .then(data =>{ - console.log(data) - })*/ - - - - // This function fetch all my repos and then filters() out the ones forked = true and starts with "project-" - \ No newline at end of file diff --git a/code/style.css b/code/style.css index 90886745..29c79345 100644 --- a/code/style.css +++ b/code/style.css @@ -1,7 +1,8 @@ @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300&family=Roboto:wght@300&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap'); -*{box-sizing: border-box;} - +* { + box-sizing: border-box; +} body { background-repeat: no-repeat; background-attachment: fixed; @@ -9,37 +10,86 @@ body { background-image: linear-gradient(180deg, #A9C9FF 0%, #FFBBEC 100%); font-family: 'Oswald', sans-serif; } -.intro{width:80%; margin:auto; text-align:center} -h1{font-size: 70px; text-align: center;} -h2{text-align:center; } -.repo{width:80%; margin:auto; background-color:#fde3fb; border:1px solid white; padding:20px; margin:30px; border-radius:5%} -.projects{display:flex; flex-wrap: wrap; justify-content: center;} - -a{text-decoration:none;} -h3{font-size: 30px;} -h3:hover{color:rgb(141, 190, 233);font-family: 'Bebas Neue', cursive;;} - -.picture{width:80%; border-radius:50%;} - -.logo{width:30px;} -.chart{ position: absolute; - left: 0; - right: 0; - margin:auto; - width: 400px} - -.userinfo{padding:20px; } - - @media only screen and (min-width: 600px) { -.repo{width:40%} -.chart{width:600px} - } - -@media only screen and (min-width: 992px) { -.repo{width:20%} -.picture{width:20%;} -.intro{display:flex; align-items:center; justify-content: center;} -h2{font-size:35px; text-align:left; margin-left:10px;} -.chart{ - width: 40% } +.intro { + width: 80%; + margin: auto; + text-align: center +} +h1 { + font-size: 70px; + text-align: center; +} +h2 { + text-align: center; +} +.repo { + width: 80%; + margin: auto; + background-color: #fde3fb; + border: 1px solid white; + padding: 20px; + margin: 30px; + border-radius: 5% +} +.projects { + display: flex; + flex-wrap: wrap; + justify-content: center; +} +a { + text-decoration: none; +} +h3 { + font-size: 30px; } +h3:hover { + color: rgb(141, 190, 233); + font-family: 'Bebas Neue', cursive; + ; +} +.picture { + width: 80%; + border-radius: 50%; +} +.logo { + width: 30px; +} +.chart { + position: absolute; + left: 0; + right: 0; + margin: auto; + width: 400px +} +.userinfo { + padding: 20px; +} +@media only screen and (min-width: 600px) { + .repo { + width: 40% + } + .chart { + width: 600px + } +} +@media only screen and (min-width: 992px) { + .repo { + width: 20% + } + .picture { + width: 20%; + } + .intro { + display: flex; + align-items: center; + justify-content: center; + } + h2 { + font-size: 35px; + text-align: left; + margin-left: 10px; + } + .chart { + width: 40% + } +} \ No newline at end of file From fa0593be65457728c66502036df4119d48072a72 Mon Sep 17 00:00:00 2001 From: Katarina Elgerus Date: Sat, 26 Feb 2022 19:41:47 +0100 Subject: [PATCH 05/11] updated readme --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index d625324e..acaf0266 100644 --- a/README.md +++ b/README.md @@ -6,4 +6,4 @@ I had problems with fetching teh commitsamount for my repos since all of them di ## 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://cranky-wing-8c4bce.netlify.app/ From 9d2031b31058cb27012ca4b6f9cbe2df3bf778f0 Mon Sep 17 00:00:00 2001 From: Katarina Elgerus Date: Sun, 27 Feb 2022 10:28:49 +0100 Subject: [PATCH 06/11] final changes --- code/script.js | 8 ++++---- code/style.css | 7 +++++-- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/code/script.js b/code/script.js index e235341a..87b08e4a 100644 --- a/code/script.js +++ b/code/script.js @@ -9,8 +9,9 @@ const API_URL_ID = `https://api.github.com/users/${username}` //First function, fetches userdata and displays them in userinfo const getIntro = () => { fetch(API_URL_ID).then(res => res.json()).then(data => { - userInfo.innerHTML = `

${data.name}

${data.login}

` + userInfo.innerHTML = `

${data.name}

${data.login}

` avatar.src = data.avatar_url + console.log(data.html_url) getRepos() }) } @@ -36,8 +37,8 @@ const getRepos = () => { //third function Fetches all techningos pullrequests and filters the one done by me const getPullRequests = (forkedRepos) => { forkedRepos.forEach(repo => { - fetch(`https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=100`).then(res => res.json()).then(data2 => { - const myPullRequests = data2.filter(item => item.user.login === repo.owner.login) + fetch(`https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=100`).then(res => res.json()).then(data => { + const myPullRequests = data.filter(item => item.user.login === repo.owner.login) console.log(myPullRequests) //conditional statement to sort out the repos that have a pullrequest done // if pullrequest is done, evoke fetch commit function @@ -54,7 +55,6 @@ const getPullRequests = (forkedRepos) => { const fetchCommits = (myCommitsUrl, myRepoName) => { fetch(myCommitsUrl).then((res) => res.json()).then((data) => { document.getElementById(`${myRepoName}`).innerHTML += data.length - console.log(`${data.length}`) }) } diff --git a/code/style.css b/code/style.css index 29c79345..887b33e5 100644 --- a/code/style.css +++ b/code/style.css @@ -38,19 +38,22 @@ h2 { } a { text-decoration: none; + color:black } h3 { font-size: 30px; } -h3:hover { - color: rgb(141, 190, 233); +a:hover { + color: rgb(247, 91, 208); font-family: 'Bebas Neue', cursive; ; } .picture { width: 80%; border-radius: 50%; + opacity: 0.8 } +.picture:hover{opacity: 1.0} .logo { width: 30px; } From 8e50986be6b4ffdf3995ed6a72aa8af5105a0a4f Mon Sep 17 00:00:00 2001 From: Katarina Elgerus Date: Sun, 27 Feb 2022 18:02:39 +0100 Subject: [PATCH 07/11] w gitignore --- .gitignore | 2 ++ code/script.js | 18 +++++++++++++++--- 2 files changed, 17 insertions(+), 3 deletions(-) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..58702a2e --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +// .gitignore file +code/secret.js \ No newline at end of file diff --git a/code/script.js b/code/script.js index 87b08e4a..78b7b8df 100644 --- a/code/script.js +++ b/code/script.js @@ -6,9 +6,21 @@ const username = 'Katarina821' const API_URL_REPOS = `https://api.github.com/users/${username}/repos` const API_URL_ID = `https://api.github.com/users/${username}` +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 + +const options = { + method: 'GET', + headers: { + Authorization: '' // Token + } +} + + + + //First function, fetches userdata and displays them in userinfo const getIntro = () => { - fetch(API_URL_ID).then(res => res.json()).then(data => { + fetch(API_URL_ID, options).then(res => res.json()).then(data => { userInfo.innerHTML = `

${data.name}

${data.login}

` avatar.src = data.avatar_url console.log(data.html_url) @@ -17,7 +29,7 @@ const getIntro = () => { } //second function, fetches my repos and filters the ones that are forked and stars with project. Displays info. const getRepos = () => { - fetch(API_URL_REPOS).then(res => res.json()).then(data => { + fetch(API_URL_REPOS, options).then(res => res.json()).then(data => { console.log(data) const forkedRepos = data.filter((repo) => repo.fork && repo.name.startsWith("project-")) console.log(forkedRepos) @@ -37,7 +49,7 @@ const getRepos = () => { //third function Fetches all techningos pullrequests and filters the one done by me const getPullRequests = (forkedRepos) => { forkedRepos.forEach(repo => { - fetch(`https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=100`).then(res => res.json()).then(data => { + fetch(`https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=100`, options).then(res => res.json()).then(data => { const myPullRequests = data.filter(item => item.user.login === repo.owner.login) console.log(myPullRequests) //conditional statement to sort out the repos that have a pullrequest done From 879e3cc352126d99ca291fc028ee699cfb0c019d Mon Sep 17 00:00:00 2001 From: Katarina Elgerus Date: Sun, 27 Feb 2022 18:22:52 +0100 Subject: [PATCH 08/11] token added --- code/index.html | 1 + code/script.js | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/code/index.html b/code/index.html index 382d73f7..5dd4644b 100644 --- a/code/index.html +++ b/code/index.html @@ -17,6 +17,7 @@

Projects:

+ diff --git a/code/script.js b/code/script.js index 78b7b8df..5b1dfa55 100644 --- a/code/script.js +++ b/code/script.js @@ -6,12 +6,12 @@ const username = 'Katarina821' const API_URL_REPOS = `https://api.github.com/users/${username}/repos` const API_URL_ID = `https://api.github.com/users/${username}` -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 + const options = { method: 'GET', headers: { - Authorization: '' // Token + Authorization: 'token ${API_TOKEN}' // Token } } From afc29da2b44c229e8c11a72d7bc47af6c23ae130 Mon Sep 17 00:00:00 2001 From: Katarina Elgerus Date: Sun, 27 Feb 2022 18:32:58 +0100 Subject: [PATCH 09/11] new token --- code/script.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/code/script.js b/code/script.js index 5b1dfa55..86d483f2 100644 --- a/code/script.js +++ b/code/script.js @@ -8,16 +8,17 @@ const API_URL_ID = `https://api.github.com/users/${username}` +const API_TOKEN = TOKEN || process.env.API_KEY; + const options = { - method: 'GET', - headers: { - Authorization: 'token ${API_TOKEN}' // Token - } + method: 'GET', + headers: { + Authorization: `token ${API_TOKEN}` + } } - //First function, fetches userdata and displays them in userinfo const getIntro = () => { fetch(API_URL_ID, options).then(res => res.json()).then(data => { From e90073a062dfa9903c68216f9ca96ee7670380ae Mon Sep 17 00:00:00 2001 From: Katarina Elgerus Date: Sun, 27 Feb 2022 18:42:11 +0100 Subject: [PATCH 10/11] uppdated deployed version --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index acaf0266..40753ace 100644 --- a/README.md +++ b/README.md @@ -6,4 +6,4 @@ I had problems with fetching teh commitsamount for my repos since all of them di ## View it live -https://cranky-wing-8c4bce.netlify.app/ +https://cocky-lovelace-ac89bc.netlify.app \ No newline at end of file From bd1e553ba59fe6f5ba617faf88cd60052751a89f Mon Sep 17 00:00:00 2001 From: Katarina Elgerus Date: Sun, 17 Apr 2022 19:29:39 +0200 Subject: [PATCH 11/11] removed key --- code/script.js | 2 +- code/style.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/code/script.js b/code/script.js index 86d483f2..3ba22e33 100644 --- a/code/script.js +++ b/code/script.js @@ -13,7 +13,7 @@ const API_TOKEN = TOKEN || process.env.API_KEY; const options = { method: 'GET', headers: { - Authorization: `token ${API_TOKEN}` + // Authorization: `token ${API_TOKEN}` } } diff --git a/code/style.css b/code/style.css index 887b33e5..37ccc723 100644 --- a/code/style.css +++ b/code/style.css @@ -25,7 +25,7 @@ h2 { .repo { width: 80%; margin: auto; - background-color: #fde3fb; + background-color: rgb(255,255,255,0.5); border: 1px solid white; padding: 20px; margin: 30px;