From 400819cc1bb4dfa1ffe71c4b4f019463a52ce187 Mon Sep 17 00:00:00 2001
From: Sandler All projects
`;
+
+ //Hur kan jag lägga in listelementen i en ul?
+
+ repos.forEach((repo) => {
+ projectSection.innerHTML += `
+ GitHub Tracker
- Projects:
-
+ User info
User name: ${user.login}
${repo}
+ //Most recent update: ${repo.pushed_at}
+Default branch: ${repo.default_branch}
+URL: ${repo.html_url}
+Number of commits:
+ ` + getCommits(repo.name); + }) + + projectSection.innerHTML += htmlTechnigoRepos; - console.log(reposStartingWithFilter); }); +} + + +fetchUserInfo(); +fetchRepos(); + \ No newline at end of file diff --git a/code/style.css b/code/style.css index 7c8ad447..7c5c7f01 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,31 @@ +* { + box-sizing: border-box; +} + +html { + background-color: #FFECE9; + background-image: linear-gradient(135deg, lightgreen, violet); +} + body { - background: #FFECE9; + background-color: white; + width: 80%; + margin: 10px auto; + padding: 20px; +} + +h1 { + text-align: center; +} + +img { + height: 200px; + width: 200px; + border-radius: 50%; +} + +.flex-wrapper { + display: flex; + justify-content: space-around; + align-content: center; } \ No newline at end of file From 3199be44d1eb0cf6d97cccf1f83bc2a84b39d784 Mon Sep 17 00:00:00 2001 From: Jessica Sandler<=X3-4yC&n!m8-3K#P z{X@0zRuQsy$+N ziSCoLJU{Z$nQy4A4Y5UJ07$5FA~qL2%Q+cLaqDU?Lz3?=BC5;Nk6BbTmmceEaM>-Z zi>O&-dSE=%ex;vcvCOk{*JQ5^_ 4M z4lW7%l9IqY(z7pV(?I@@8=KPFO82)O{VDI18-*d-k$YmI^XiuPs_LuFw<^ZcD}yP5 c*NrbeloN*74g`U%%F6r~k%+>C^#XapzmV0H-2eap literal 0 HcmV?d00001 diff --git a/code/assets/GitHub-Mark-64px.png b/code/assets/GitHub-Mark-64px.png new file mode 100644 index 0000000000000000000000000000000000000000..182a1a3f734fc1b7d712c68b04c29bad9460d6cd GIT binary patch literal 2625 zcmaJ@dpuNWA3rl=+= }acf|9E@P=bZCA&+qg7et*|Lo`cMQ4SL!u zv;hFnqx;f=RIA70r>U;`S924)Rm*a*H%lB0$B2{JLJ07ThNB>m&SUR{f*^KuO5#1p z6#!6H+z^(S#qg(aU>=seh`~yD0u>toT-_xCHYXkugHg~ ylAk{k$56lW5JxEB2QU{v0O z(J_=Dn$JgHsuL9xD;5hVI9zgaGB()}3k!GR2xKyOQG-ZyP$3*dDSR x+6H zxzS&ah4w`*P8AGpv9 Q5%s{48!i53cI)dGsN^YTkva!Csa-!~y{IALumC5XsY* z;oO9fP-D5HNp6GjVXS9_c1V2u^I_zB1-k6a`@n;|eN2-wq}`FLV<<0w=RlfKU9(3Z z?Vv$*-_m{) R9A=k2=5$ JrJ5 zd(x-6(zYwCSQA3wWMBj;Lem(jL~x}3pjUMga+Tt=q9Zf4cjQq+R^GwOxB}onmdyq9 zYa}1po)-)mjV-^ZRfS$nm0JP%%2J6zkxp^p8J$PEwHnnPw39eZX}|bwVDI+Gee`@Y zbah4{SeoLiGPW@75vPCvM=#55zb)v1eNE+tfD*T%9$`a#UqDqP6flo7k-aV>IQ3KL z?3H`(H3`?q)i9}4YoPsfZeLPwKtG(KQ-oT2jcN(B%hrz*1V7UCp6GY!F4e!okh(0O znQ=jWE*4#p8`djsr?kI5jXKJRYt>(U){i0emy7~ePChu6oUwefQNQixI-(=d{P1%3 zhx=v2`Ry0lVKW&Jksh#X2ZBp#{a!;N+otQU!S}lvS5Tvvl5Ubd2b5Jj5-;BoY_WOF z_XCPI9rvwO_zYof?DOK%D7k0_M-eMq1#4^uYW@wUg*5e?z1mhW|GkISQ*)gK!lPx| zhZQN7o3b?xTTW$o)&y=wPN6(!-WiNpD#qR}nK9og7lxJS9YRlhEp9)yU^-uiJhow- z`8UtZ449xibZb6f>W1(}6}*;8Q}D4jvc47_zV#=gHPpIg&^BV=sY7Dmal^rQ{Rb1n zUwQSwn=K>Hdns)-UfJcmNaEkVZt&=3p#x^9uRr~)MJC(+R7*|u#l#|6Oe!OSxM_Eu zmB;$ 9eNW8?oI@Ao1juH&%}d;U z?#98zrD2Iola(vNeqXDEj5{li7yeqImbZr^`ax#dw1QXei_~7G_g(WFx2Du3&m=l? z7h;1<#irByqG9b@3u(qlI+?8(e{@D`x>QxAscV^@j}^G0H9KoHh*`OVvLl5^wL?J< z7)$I5W&Q|c2 #?m>)|0U<*(h6S(odPBl0+QpHsP-r8hDCI;Xy;ZB-GTjC{Lh z)^{?@)XZUvU2)|rYeZga0RK+{;)>14TJ^#VgLD29(mB!`H~7S*Fw{zJ%hPczWn=cg z8jH%4)vX%o*KhVWOn7IlqI@$mJZW&H8;wZubZI_Uwrk`&rADaRwb@W?@%Lq;XVYdZ zzbfh08?cyaez+qbJi_UZNiw(*%k&9+amj>L{ED$OWuQs3t3SxwFrj;;X7JtUOggr3 z9_gyPyNb>f4!Q6KY~O5*EcJ8lx!Eo+mu1XJ+Yaf*g#ElRyLa`VS#Nr;#Tl#HQCW>m z{&_c0soAKyl5Hh_n6KLo+?X66U)GDrzLZ!MuKsS1=~Z-jmeYyn9r@L5{%zdITF>DU zc(z0NN5gMd71f1LPTcD_?PI}M(r1raF|bl_rTXz3>u}j*j^Bmd){0~OhHAcdT%96T zl^I$j>vYCuJ?O7Db;K6G{^kavEh#naE`IOB!FIb6?Rl2b>{14>p?RueVYk~ro9y;T zIrcx#*ZIGkiL#&hR%UZ~U8&hb7!h+vGUz&Kgw@+NpF@^rzAM$3da`Mn#XcKJdEb+n z%Ja~1JE|B-plr+1ckkS)J%8tndxzxYNf*b|;HiBz2ekdat!a4bi8!V6uKj*dC6Dra z#ewE =I4u9YXWc$ zFQ)EwjtXc}@pjCV#OF{`{F&M=E0)#J@Tkkfv83XA7q4{3`Po^?`^#!I#t(`mS z?yFbdpa! *s0@tn$0{a DCQgU)Bq;savHLt4{2qzE7+ W4I>>0bz>}E>ge79v aGRl~FEHV3FIF9Vfr0h$`Nq8%zL{iAU z#5hVRL@G>)Ls=v09p|m{{{A@E`&`%ae82a7eLna7xtD*QbH| f zc{v_4BT~tRgdL0_n@r=g1q3Xt*)#$%6kve@fS?eHC3vy11q=!yS%N){9ifgi3=kZ0 zB$@%ZMmxC?qeF=(64=@bWWhG$2OtA10*FlxqcF|bmf*kQn(^;DZU`9k7lajR3I2~L zFUR8`43z O{XGJ+s56bc1_!Xa?D0Uu$&jH0jzYy%2Y<7Wgc zz$7w4Xsi$_1+){95I_xQS%UdW|5E~)=IHo$U<&g`qxda@un9B>%n%A8lXvR+3(aJ? z0RNTok7%Y_6b*p508DB)gUFvppvF%!zjyyT(GHNW#tcg(hLZsb%N}b9=6eiDAtW;_ z)&^z+MI%g+7#s|SL!i;da2yVSFot7cHW(x1Pp& mv_#18&|;&a6L-1gm36j4%xkt~@|aub48UIJ z$zhq@B7I*@K=JsszBQ|u#fgozh3$<;UrW}%K3KOv47M8PGaoHmt(#jfMh*TN&0?`K zaI H*Nnf((zUiD`J>uX-|Jvf&~@?201A-;Py(xizM0Ra%x1Qld{N{* z;L_VqaCaRIZyty_w^4SdaP+hY@}fFdmut^mu5C&u?4oYNd9u80uF1{Tt|=mSmRnVL zmAHA{fSb(S;QD#^QyVf+oG4T+T-}mjzAVKpg_YhH3@V*>1YYZ9S7-`l*M2Q qJt-O0hICdOjT6Jmm^OAW)J9SfEpQ35%9yW<_^$%0UD}6$*XHEs5@&0!5WZQRd0BMQ1O^6a}xk-$MhuEM3<(S~K0oKEDl VyOServwIXUu+-_H3Wpowmr_xrReUt=aPWcm ^)}_>9sT`pv}A (3VbdIy7J(!}o@UgBT z2l(wFsMA~1>G_0xg<1foUY$JTDt}VBr)R>N6d3be2i541tFFAu!3e)rSKZl(>uZlH zFa4D(S-dB4F3PjoM6u{Q2VB5z&0domdfcvzlrH%!!LYEuimCop1}NwDMg(<;a9cKY z>bwKVI*Ox$ccRh_?wrKM3c-$T i%3{L9CsyA2yk5kKuuDY8b%wBp>#8=*ov?7Ood-N0~ zDAu~)M&)u&&vd$~(x J-p?{)z6{>DAz%S+TaZjMaW-3 fT+iihW6z+m7%vauQmXtn=!h+dC_Gw(c8g z_;6rqUp({E*uFC(y{d&Lx)rzpmpJ46%rv9IDLc&n(WJ~7e14VWhO%cHezCU9gZE1{ zJOvhs(1wK;ypl8t%PVULi8bK8dvwSL`0bmG=c_iMDHAo>1v?v$<*;A5*}8+qVYp*@ ze}K0g?m`P~hMqLMj #5d#)=tuR-b(zvsL@U7 zh4kwU&aUyQz9%UMyRZ_GikkzroQdlzA_seV%XhEOzpXzuebfqdxI>z2lF{Dic >*{^O;}%mk6~@5$}WdW&(-m9)pbkKk_$ z3az`+BVT`Obr)0J-(TL??IY{?lA?2$uCD FyP|<#+Yus*)@N@v{Xa;?$qzB31;WO zx&b3151u%^el}?Dy6X8%$bdB%I$vL~JEqq3O4F6I;cvIVFHXPb=`Lb |wk&JDLZc(ZU6VHXw7wOo22x-k*8)F=r? z#@_d^LRf?2tz~N(XlARcU&p(OP1(+Q*0K98T+H-7g#^*Re4b9qtfr?Ujy&0b i3J+HR+a876j%v8>FZqq9cA~{aE-5bp;y_qUAm&EEB zX}I>w`!ow-*_D5N(l9#>4DEkW6snmtN)q?Akj}bcu!8!0l&BMR5j5*sMqNM`zC46< z|9v)bbi`*%es(e +=2C=Gx3u%xod_HOXh9<_ zv8-{Mx3&SD^gIi@uo~U-;vL7RNpJ2Q%#thlLQ+cOAWLnX;xNJaDY(oQ@$7TDcQw6y zMcd!uhjBwZGQslzkN_91QAf@xFCE;Mos@G-rGgwh#XMn&eXjK3jds@_n=h60c}8x} z_w@+j!H>oRZk#%xq3%ywjwo`LgA@@KD<2#UT=u$k<-^^_8h7i|Q@^zQ@*cn3XR3s_ zAo#C%$+fE9(ayuPUC0BphK+t7r(II~Uaou-Sqd!c@dmwnBxk45?d{KzRZKL<`Fv)V ZsK8ky_?39l4gAjkwLQ)WTW#Z?@NW_mBhUZ< literal 0 HcmV?d00001 diff --git a/code/assets/GitHub-Mark-Light-32px.png b/code/assets/GitHub-Mark-Light-32px.png new file mode 100644 index 0000000000000000000000000000000000000000..628da97c70890c73e59204f5b140c4e67671e92d GIT binary patch literal 1571 zcmaJ>c~BE~6izDPQq)#Nu*KOf(n^(VHY9;fiINM65``pc+9*v(mL$bw fCjbc%v9V{8r9iX|O%>Nr%pLD2qT{mty}c=LVleeamv znz3SOSm@kP8jThvOOq(56Yzh*fz(booe!uZij=BJC6+_lbvQ~B8nA2>kXdv_RDtRY z`5QXWWEySCe6vbTs^#f?J!WC*{1~RgVx!nJTJjQyO{dRANgx|FnymtG bD9%JmCh9^y)##j7{Dcqfn*1ta$rG89pJF6w-S7Z037$rr|y0;1Onp_ zGFJdT6Q!1C0AdVB0WOmpuV=AgAQ550Tn+-mivTtYPJmz*#75#_n9oV%!#rSOfmAfy zki%C ~=fTp1{O#BLpJ|0 jj#m6#|LRWit-vq3PE1z9ZqyvET4sX$-Icqy7t z<=aq5ff86AuBZBu6EjJsYWM0uejufWFTwPA7Su}0Bm$7KFb!q{Um_8~A{LUG#1l(l zSehUda@kU8LIRg9fkk2tZ;~ss5~R+mM<==F7hLHpxqLB>>PQS%Vc7b~?q!%T5+h8Q z4G=4Nzyi5WZ?^gkasJ{?Xhm`JC#WG6$1K2jb@=9&D3EgD#3UhGh#*21rJjulVXjCF zvp76q62jt0zzMG5C7DlfMgPl%C^3+~wf|}Lq=}jz|MmIcQjh1Ok6NjD$Em^Iv26D> z8tt_TnM9~^Tt8mflRGPOrrX|HtT3gG4LEuuk{g2Rn}QgJIa?gZo))!!=o_l9bvD%A zZ`aHajl8#~u?!4f7F#*b*->A =R2L)6!>saz?h>#wTXT-I(XmQ zx{84skS>k=i~i`(6k4C7;Zpfx%dCPVjPayMf8pugtGM=~s=Id1l#8MZJ1-73wV#Q3 zR3>v3%}jbQs1f_Z0xo;%=LILlA+nTpKI4ha%xWW}uqHrNao~&T4AY6m`P$_n-6h*g zhoX+e4n%~gl_lhe#s+AMb7d{5WzvYTa%6Q~si@@4{;s(0zU|H&P3fE+t{7X`S#Cj@ zC#vd}^4pcBD*77Ny5=j$h8EL2_t$O38$SQiJ6fPjJMimypr~MB2(&P0aI|h}$64<0 z>_~duqNjaT=DM^6+N{&B_lED;F2wrl?!4Lk*2((x!fmrcsw+=cI^qttuZ9C}-m~5E z-ryYVpL%^xR#&(0YI5hz<(}F7-p)?FPcyJO-zVO>%9ZDXJH8pnY;GJYFDQ>vd#j_* zRrd}L(r=!g+1#nQwsO?kpS`Qq8`NxE+Zy{gf7*_7J*U2V_|NpLo{iasj7VCg_V9&| ShohtYzipXxh2)4xTk 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@UW 6`Ai_H`049j)JozV)4d8r`BUo7M!zgCCD`;G!S0dV&q z p8LL%~Ba#6Eg$iKtZe$N47EeRXa5>+}e1_})f4LZ~7>us9|I_MOlXiY|*KdQX zeS8~zP@tW6v39VXf r*USwp~rS`=B$j`)nk?@
` - userSection.innerHTML += `}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!4JBAQzK EZEFs#YOE+WUR@=e`!;~PCh-+ddeAuP%>I*Cd8Cb%!1YNZFKDIJTra-- zG#+}%TS;ZSZa qDK8^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)lJ2 6`vXz zWvk~HR@whs?OF8cKV8YyEs1et|A`i*;GS`_+RH=ns17TKJg|lJv;Y(H<+2}hIXsat z5ANw;3-!HT?J@e?t>V kCV$sSaXTfoVh-!;h=kN@TPi^X~Dlo@yIP4fl2 z#pt2|1Jj>Ov$71^ei~h1H$uM|R6wY=ZG3 Q99U>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/assets/sunglasses.svg b/code/assets/sunglasses.svg new file mode 100644 index 00000000..a1fcd7e8 --- /dev/null +++ b/code/assets/sunglasses.svg @@ -0,0 +1,23 @@ + diff --git a/code/index.html b/code/index.html index 2507e946..9add35d2 100644 --- a/code/index.html +++ b/code/index.html @@ -5,18 +5,25 @@ Project GitHub Tracker + -GitHub Tracker
-- - -++ + +GitHub Tracker
++
+ + + + + diff --git a/code/script.js b/code/script.js index ed704941..ed8ba56d 100644 --- a/code/script.js +++ b/code/script.js @@ -1,61 +1,127 @@ const userSection = document.getElementById("user"); const projectSection = document.getElementById("projects"); -const API_USER_INFO = "https://api.github.com/users/jessand77"; -const API_REPOS = "https://api.github.com/users/jessand77/repos"; +const username = 'jessand77'; +const API_USER_INFO = `https://api.github.com/users/${username}`; +const API_REPOS = `${API_USER_INFO}/repos`; + +// const hardCodeApi = "https://api.github.com/users/jessand77/repos"; + // Läs lite här: https://www.digitalocean.com/community/tutorials/how-to-use-the-javascript-fetch-api-to-get-data +const getPullRequests = (repos) => { + repos.forEach(repo => { + // const repoName = repo.name; + fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls`) + .then(res => res.json()) + .then(pullRequests => { + + const myPullRequests = pullRequests + .filter(pullRequest => pullRequest.user.login === username); + + myPullRequests.forEach(myPullRequest => { + // console.log(myPullRequest.commits_url); + getPRCommits(myPullRequest.commits_url, repo.name); + getPRComments(myPullRequest.review_comments_url, repo.name); + }) + }) + }) +} + +const getPRCommits = (pullRequestCommitsUrl, repoName) => { + fetch(pullRequestCommitsUrl) + .then(res => res.json()) + .then(commits => { + + // console.log(commits) + // Print number of commits + // console.log(`Number of commits: ${commits.length}`) + + let commitSpan = document.createElement('span'); + + commitSpan.innerHTML = `${commits.length}`; + + document.getElementById(repoName).appendChild(commitSpan); + + // // Print commit messages + // commits.forEach(commit => console.log(commit.commit.message)) + // // + + }) +} + +const getPRComments = (pullRequestCommentsUrl, repoName) => { + fetch(pullRequestCommentsUrl) + .then(res => res.json()) + .then(comments => { + console.log(`The comments for ${repoName} are: `) + comments.forEach(comment => console.log(comment.body)); + //Printa kommentarerna på något sätt på sidan + }) +} + +const formatDate = (dateToFormat) => { + const year = dateToFormat.getFullYear(); + const month = dateToFormat.getMonth() + 1; + const day = dateToFormat.getDate(); + const formattedDate = `${year}-${month}-${day}`; + return formattedDate; +} + const fetchUserInfo = () => { - fetch(API_USER_INFO) - .then((response) => response.json()) - .then((user) => { + fetch(API_USER_INFO, options) + .then(res => res.json()) + .then(user => { console.log(user) - userSection.innerHTML = 'User info
User name: ${user.login}` + userSection.innerHTML = ` +
User info
User name: ${user.login} +Full name: ${user.name}
++ ` }) + //Fungerar det här överhuvudtaget? .catch(err => console.error(err)); } const fetchRepos = () => { - fetch(API_REPOS) - // we ask for the response from the API - .then((response) => response.json()) - // we say what we want to be done with the response - .then((repos) => { - console.log(repos); - - /* - projectSection.innerHTML = '
Projects
' - let htmlAllRepos = 'All my projects
' - repos.forEach((repo) => { - htmlAllRepos += `
' - projectSection.innerHTML += htmlAllRepos + fetch(API_REPOS, options) + // we ask for the res from the API + .then(res => res.json()) + // we say what we want to be done with the res + .then(repos => { + //console.log(repos); + + // projectSection.innerHTML = '- ${repo.name}
` - }); - htmlAllRepos += 'Projects
' + // let htmlAllRepos = 'All my projects
' + // repos.forEach((repo) => { + // htmlAllRepos += `
' + // projectSection.innerHTML += htmlAllRepos - // Returns an array of the forked repos - const forkedRepos = repos - .filter((repo) => repo.fork === true) - .map((repo) => repo.name); - console.log(forkedRepos); + // // Returns an array of the forked repos + // const forkedRepos = repos + // .filter((repo) => repo.fork === true) + // .map((repo) => repo.name); - let htmlForkedRepos = '- ${repo.name}
` + // }); + // htmlAllRepos += 'All forked repos
'; - forkedRepos.forEach((repo) => { - htmlForkedRepos += `
'; + // console.log(forkedRepos); - console.log('Forked repos: ' + htmlForkedRepos) + // let htmlForkedRepos = '- ${repo}
` - }); - htmlForkedRepos += 'All forked repos
'; + // forkedRepos.forEach((repo) => { + // htmlForkedRepos += `
'; - projectSection.innerHTML += htmlForkedRepos - */ + // console.log('Forked repos: ' + htmlForkedRepos) + // projectSection.innerHTML += htmlForkedRepos + // Returns an array of the forked repos from Technigo // const reposStartingWithFilter = repos @@ -74,41 +140,37 @@ const fetchRepos = () => { // ` // }); - const getCommits = (repoName) => { - fetch('https://api.github.com/repos/jessand77/' + repoName + '/commits') - .then(res => res.json()) - .then((commits) => { - console.log(commits); - const numberOfCommits = commits.map(item => item.commit).length; - console.log(repoName + ' has ' + numberOfCommits + ' commits.'); - let commitSpan = document.createElement('span'); - commitSpan.innerHTML = `${numberOfCommits}` - document.getElementById(repoName).appendChild(commitSpan); - - }) - } - - let htmlTechnigoRepos = '- ${repo}
` + // }); + // htmlForkedRepos += 'Repos forked from Technigo
'; + projectSection.innerHTML = ` +Repos forked from Technigo
+ + `; - const technigoRepos = repos.filter((repo) => repo.name.startsWith("project")); - - console.log(`Number of repos forked from Technigo: ${technigoRepos.length}`); + //The Technigo repos are forked and their names start with project + const technigoRepos = repos + .filter(repo => repo.fork === true) + .filter(repo => repo.name.startsWith("project")); + + getPullRequests(technigoRepos); technigoRepos.forEach((repo) => { - console.log(repo.name) - const commits = 4; - htmlTechnigoRepos += ` -${repo.name}
-Most recent update: ${repo.pushed_at}
-Default branch: ${repo.default_branch}
-URL: ${repo.html_url}
-Number of commits:
+ + const mostRecentPush = new Date(repo.pushed_at); + + // Not necessary because repoGrid is created in projectSection.innerHTML injection above? + // const repoGrid = document.getElementById('repoGrid'); + + repoGrid.innerHTML += ` ++${repo.name}
+Most recent update: ${formatDate(mostRecentPush)}
+Default branch: ${repo.default_branch}
+URL: ${repo.html_url}
+Number of commits:
+` - getCommits(repo.name); + }) - projectSection.innerHTML += htmlTechnigoRepos; - }); } diff --git a/code/style.css b/code/style.css index 7c5c7f01..7477637f 100644 --- a/code/style.css +++ b/code/style.css @@ -1,31 +1,100 @@ +@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap'); + * { box-sizing: border-box; + margin: 0; + padding: 0; } html { - background-color: #FFECE9; - background-image: linear-gradient(135deg, lightgreen, violet); + background-color: grey; + font-size: 16px; + font-family: 'Nunito', sans-serif; } body { background-color: white; - width: 80%; + background-image: linear-gradient(135deg, lightgreen, violet); + width: 90%; margin: 10px auto; - padding: 20px; } h1 { text-align: center; } -img { +.header { + display: flex; + justify-content: center; + align-items: center; + background-color: violet; +} + +.logo { + height: 50px; + width: auto; + margin: 2rem; +} + +.main { + display: flex; + flex-direction: column; + justify-content: space-around; + align-content: center; + gap: 4rem; + padding: 20px; +} + +.user-section { + border: 1px solid black; + padding: 1rem; + display: flex; + flex-direction: column; + align-items: center; + gap: 0.4rem; +} + +.avatar { height: 200px; width: 200px; border-radius: 50%; + filter: grayscale(100%); } -.flex-wrapper { +.project-wrapper { display: flex; - justify-content: space-around; - align-content: center; + flex-direction: column; + align-items: center; +} + +.repo-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 2rem; +} + +.repo-div { + border: 1px solid black; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); + padding: 10px; + margin: 10px; + transition: 0.2s; /*The delay of the scale change below*/ +} + +.repo-div:hover { + transform: scale(1.1); +} + +.footer { + background-color: lightgreen; + height: 4rem; + display: flex; + justify-content: center; + align-items: center; +} + +@media only screen and (max-width: 992px) { + .repo-grid { + grid-template-columns: 1fr; + } } \ No newline at end of file From 32a3a0c3d2b52f459deef18b2af942f566735450 Mon Sep 17 00:00:00 2001 From: Jessica SandlerDate: Thu, 24 Feb 2022 16:23:26 +0100 Subject: [PATCH 05/21] Added some styling and comment/commit message lists --- code/index.html | 2 +- code/script.js | 212 ++++++++++++++++++++++-------------------------- code/style.css | 51 +++++++++--- 3 files changed, 137 insertions(+), 128 deletions(-) diff --git a/code/index.html b/code/index.html index 9add35d2..bcf28fc1 100644 --- a/code/index.html +++ b/code/index.html @@ -16,7 +16,7 @@ GitHub Tracker
- + diff --git a/code/script.js b/code/script.js index ed8ba56d..bdea41fb 100644 --- a/code/script.js +++ b/code/script.js @@ -5,176 +5,154 @@ const username = 'jessand77'; const API_USER_INFO = `https://api.github.com/users/${username}`; const API_REPOS = `${API_USER_INFO}/repos`; -// const hardCodeApi = "https://api.github.com/users/jessand77/repos"; - - +//Global variable to be used by the chart +let technigoRepos; +// const hardCodeApi = "https://api.github.com/users/jessand77/repos"; // Läs lite här: https://www.digitalocean.com/community/tutorials/how-to-use-the-javascript-fetch-api-to-get-data -const getPullRequests = (repos) => { - repos.forEach(repo => { - // const repoName = repo.name; - fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls`) - .then(res => res.json()) - .then(pullRequests => { - - const myPullRequests = pullRequests - .filter(pullRequest => pullRequest.user.login === username); +//Should not be included in git push?? +// const options = { +// method: 'GET', +// headers: { +// Authorization: 'token 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' +// } +// } - myPullRequests.forEach(myPullRequest => { - // console.log(myPullRequest.commits_url); - getPRCommits(myPullRequest.commits_url, repo.name); - getPRComments(myPullRequest.review_comments_url, repo.name); - }) - }) +const fetchUserInfo = () => { + fetch(API_USER_INFO) + .then(res => res.json()) + .then(user => { + // console.log(user) + userSection.innerHTML = ` +${user.name}
+Username: ${user.login}
++ ` }) } -const getPRCommits = (pullRequestCommitsUrl, repoName) => { +const getPRCommits = (pullRequestCommitsUrl, reponame) => { fetch(pullRequestCommitsUrl) .then(res => res.json()) .then(commits => { - // console.log(commits) - // Print number of commits - // console.log(`Number of commits: ${commits.length}`) + let commitParagraph = document.getElementById(reponame); + let commitMessageList = document.createElement('ol'); - let commitSpan = document.createElement('span'); - - commitSpan.innerHTML = `${commits.length}`; + commitParagraph.innerHTML = `Number of commits: ${commits.length}`; + commitParagraph.appendChild(commitMessageList); - document.getElementById(repoName).appendChild(commitSpan); - - // // Print commit messages - // commits.forEach(commit => console.log(commit.commit.message)) - // // + commits.forEach(commit => { + // console.log(commit.commit.message); + let listElement = document.createElement('li'); + listElement.innerHTML = commit.commit.message; + commitMessageList.appendChild(listElement) + }) }) } -const getPRComments = (pullRequestCommentsUrl, repoName) => { +// Hur kan jag ta fram bara huvudkommentaren i stället? + +const getPRComments = (pullRequestCommentsUrl, reponame) => { fetch(pullRequestCommentsUrl) .then(res => res.json()) .then(comments => { - console.log(`The comments for ${repoName} are: `) - comments.forEach(comment => console.log(comment.body)); - //Printa kommentarerna på något sätt på sidan + // console.log(comments) + // console.log(`The comments for ${reponame} are: `) + + let commentList = document.createElement('ul'); + let commitParagraph = document.getElementById(reponame); + commitParagraph.appendChild(commentList) + + comments.forEach(comment => { + // console.log(comment.body) + let listElement = document.createElement('li'); + listElement.innerHTML = comment.body; + commentList.appendChild(listElement); + }); + }) } -const formatDate = (dateToFormat) => { - const year = dateToFormat.getFullYear(); - const month = dateToFormat.getMonth() + 1; - const day = dateToFormat.getDate(); - const formattedDate = `${year}-${month}-${day}`; - return formattedDate; -} +const getPullRequests = (repos) => { + repos.forEach(repo => { + // const repoName = repo.name; + fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls`) + .then(res => res.json()) + .then(pullRequests => { -const fetchUserInfo = () => { - fetch(API_USER_INFO, options) - .then(res => res.json()) - .then(user => { - console.log(user) - userSection.innerHTML = ` -
User info
User name: ${user.login} -Full name: ${user.name}
-- ` + const myPullRequests = pullRequests + .filter(pullRequest => pullRequest.user.login === username); + + // console.log(myPullRequests.length) + //If the length is 1 I have done a pull request + //If the length is 0 it is an ongoing project or a group project where I haven't done the pull request + + if (myPullRequests.length === 0) { + document.getElementById(repo.name).innerHTML = `No pull request done by my username`; + document.getElementById(repo.name).className = 'no-pullrequest'; + } + // console.log(myPullRequests) + + myPullRequests.forEach(myPullRequest => { + + // console.log(myPullRequest.review_comments_url); + + getPRCommits(myPullRequest.commits_url, repo.name); + getPRComments(myPullRequest.review_comments_url, repo.name); + }) + }) }) - //Fungerar det här överhuvudtaget? - .catch(err => console.error(err)); } +const getTechnigoRepos = (repos) => { + return repos + .filter(repo => repo.fork === true) + .filter(repo => repo.name.startsWith("project")); +} + + const fetchRepos = () => { - fetch(API_REPOS, options) - // we ask for the res from the API + fetch(API_REPOS) .then(res => res.json()) - // we say what we want to be done with the res .then(repos => { //console.log(repos); - // projectSection.innerHTML = '
Projects
' - // let htmlAllRepos = 'All my projects
' - // repos.forEach((repo) => { - // htmlAllRepos += `
' - // projectSection.innerHTML += htmlAllRepos - - - // // Returns an array of the forked repos - // const forkedRepos = repos - // .filter((repo) => repo.fork === true) - // .map((repo) => repo.name); - - // console.log(forkedRepos); - - // let htmlForkedRepos = '- ${repo.name}
` - // }); - // htmlAllRepos += 'All forked repos
'; - // forkedRepos.forEach((repo) => { - // htmlForkedRepos += `
'; - - // console.log('Forked repos: ' + htmlForkedRepos) - - // projectSection.innerHTML += htmlForkedRepos - + technigoRepos = getTechnigoRepos(repos) - // Returns an array of the forked repos from Technigo - // const reposStartingWithFilter = repos - // .filter((repo) => repo.name.startsWith("project")) - // .map((repo) => repo.name); - - // console.log(reposStartingWithFilter); - - // let htmlTechnigoRepos = '- ${repo}
` - // }); - // htmlForkedRepos += 'Repos forked from Technigo
'; - // reposStartingWithFilter.forEach((repo) => { - // htmlTechnigoRepos += ` - //- //- // ` - // }); + getPullRequests(technigoRepos); projectSection.innerHTML = ` -${repo}
- //
${repo}
- //Repos forked from Technigo
- +Technigo projects
+ `; - - //The Technigo repos are forked and their names start with project - const technigoRepos = repos - .filter(repo => repo.fork === true) - .filter(repo => repo.name.startsWith("project")); - - getPullRequests(technigoRepos); technigoRepos.forEach((repo) => { - const mostRecentPush = new Date(repo.pushed_at); - - // Not necessary because repoGrid is created in projectSection.innerHTML injection above? - // const repoGrid = document.getElementById('repoGrid'); + const mostRecentPush = new Date(repo.pushed_at).toLocaleDateString('en-GB'); - repoGrid.innerHTML += ` + repoContainer.innerHTML += `-${repo.name}
-Most recent update: ${formatDate(mostRecentPush)}
+${repo.name}
+Most recent push: ${mostRecentPush}
Default branch: ${repo.default_branch}
-URL: ${repo.html_url}
-Number of commits:
+` + }) }); } + + fetchUserInfo(); fetchRepos(); \ No newline at end of file diff --git a/code/style.css b/code/style.css index 7477637f..7aa0adcc 100644 --- a/code/style.css +++ b/code/style.css @@ -17,12 +17,31 @@ body { background-image: linear-gradient(135deg, lightgreen, violet); width: 90%; margin: 10px auto; + min-width: 290px; } h1 { text-align: center; } +h2 { + font-size: 2rem; + margin-bottom: 2rem; +} + +h4 { + font-size: 1.5rem; +} + +ul { + list-style-type: none; +} + +ol { + font-size: xx-small; + margin-top: 2rem; +} + .header { display: flex; justify-content: center; @@ -46,7 +65,6 @@ h1 { } .user-section { - border: 1px solid black; padding: 1rem; display: flex; flex-direction: column; @@ -61,23 +79,26 @@ h1 { filter: grayscale(100%); } -.project-wrapper { +.project-section { display: flex; flex-direction: column; - align-items: center; + align-items: stretch; + text-align: center; } -.repo-grid { - display: grid; - grid-template-columns: 1fr 1fr; +.repo-container { + display: flex; + flex-wrap: wrap; + justify-content: center; gap: 2rem; } .repo-div { + flex: 25%; border: 1px solid black; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); - padding: 10px; - margin: 10px; + padding: 2.5rem; + margin: 0.5rem; transition: 0.2s; /*The delay of the scale change below*/ } @@ -85,6 +106,11 @@ h1 { transform: scale(1.1); } +.no-pullrequest { + color: blue; + font-style: italic; +} + .footer { background-color: lightgreen; height: 4rem; @@ -94,7 +120,12 @@ h1 { } @media only screen and (max-width: 992px) { - .repo-grid { - grid-template-columns: 1fr; + .repo-container { + flex-direction: column; + flex-wrap: nowrap; + } + + .repo-div { + flex: 100%; } } \ No newline at end of file From 7db2bec66f3320ec3f09c82bbc270f283cdffa79 Mon Sep 17 00:00:00 2001 From: Jessica SandlerDate: Fri, 25 Feb 2022 09:16:50 +0100 Subject: [PATCH 06/21] Added gitignore --- .gitignore | 1 + code/index.html | 1 + code/script.js | 61 ++++++++++++++++++++++++++++--------------------- 3 files changed, 37 insertions(+), 26 deletions(-) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..143f9792 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +code/secret.js diff --git a/code/index.html b/code/index.html index bcf28fc1..d3fc1173 100644 --- a/code/index.html +++ b/code/index.html @@ -24,6 +24,7 @@ GitHub Tracker
+