From 750e99d0e406563676e6253e30f9af10bd408c8c Mon Sep 17 00:00:00 2001 From: Catsudemo Date: Tue, 27 Aug 2019 10:13:46 +0200 Subject: [PATCH 1/9] Added week 2 homework --- homework/week-2/.DS_Store | Bin 0 -> 6148 bytes homework/week-2/hyf.png | Bin 0 -> 6971 bytes homework/week-2/indexscript.js | 128 ++++++++++++++++++++++++++++++ homework/week-2/newStyle.css | 100 +++++++++++++++++++++++ homework/week-2/package-lock.json | 13 +++ homework/week-2/package.json | 14 ++++ 6 files changed, 255 insertions(+) create mode 100644 homework/week-2/.DS_Store create mode 100644 homework/week-2/hyf.png create mode 100644 homework/week-2/indexscript.js create mode 100644 homework/week-2/newStyle.css create mode 100644 homework/week-2/package-lock.json create mode 100644 homework/week-2/package.json diff --git a/homework/week-2/.DS_Store b/homework/week-2/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..12f93f1b5cb4f72f8b491452199bea638ef21235 GIT binary patch literal 6148 zcmeHKyG{c!5FA4UK}0B2P+mzxBx;&d6bkBm0FVda5poeBf^^sL5Bvh(#|Oadu8ESn zq(u?hmDaPicWmGIbUp(J&1vrpr~|0d1-JHCtT5>pFWFXX*&zlUV~i07m&2^v8J4oW zVG|XQz1zhdX1GNI3;UOK*dwpSC;jAGjS+Bwd+u@%eY|0UE}mH*1s|obRi^JLJl4IKv~$0cSfUE7Q8JmhotL z#W?2(9}7=gD~zy?Cn_!SSaov+Tme^LV-?_;Emqw(^wJe@1zdr-0`h%G=z?j)+)zIq zEc6OMtgu;)vHUa&CyAIw%njK?3q~axHN-1MFgn|ln3qP(4ULWvFCQV!9O4Zn=R0rV(>Pw$S`XKxOd475GyHegF!!XVL%w literal 0 HcmV?d00001 diff --git a/homework/week-2/hyf.png b/homework/week-2/hyf.png new file mode 100644 index 0000000000000000000000000000000000000000..a4626c91cc28dd92f3a8843aa3919c472d609984 GIT binary patch literal 6971 zcmd6sRZtw^x9vj$!4e!oa0?bBID>0&hv1OGT@qj*Fi3D12u^T!cZZ;ZyK8WF7{UO< zng4w|Z};9h59gt~tG?>$UA4P=t>0c>xVoy`TP!lH7cXACRgjm_L|zB~b6~tgp6P@D zLoZ&Czf_Qs)b>n2$-ov#SbBy+M@d6srIefszLi9AFcY_)IyolamYo(QM4Yi2m&mjb z^?%mXOwb8pmN68sVJ(+xZP8hdS&{!X)T#`5E~C2U9U1l9`}RBK*{ciIQ1yL0ecyW= zqBa4T@EX7O4PRSZ6U302{EOc93hxpX3;QK1GaCk8b~TNJf6vbsDE}K5Xv|8qW3s5p ziPxG|*GA&6gTpT`y;^>G6C>JfVuwcGue!ydwJZS!W(u!tgLrt!*qJ^ak8Swr>gu?= zPsv4-0SuJvk09?E2rx%>4?w!=+KUa&)S;;pnIchLzLaBj(PS;aYb!~gz;4v|>h*>B z!otEE_H$jmepy*C=c9?=%dDQ#l1iB1w|@pk>5y_ZagW7IK_(`|=heJW{nOLa4l%m; zA^7Xpb$g@tUYk-ZwzfE*C(kP@3kM|iEDH)kaRK1RfA~YJ%*=~U%gov5T))G1)JX{` zpK5Y8t$f=5uop2fRT;sKD=CG~Hk6LbSSfH8=I4{*GoDt$36n;ARXV(rC-#OFl}=Aj ze(Sh1GTS61kz`o~qf8Ng>4k;_H49SUymP;`^EOP&9-X$~6|lB$>J9zK`muWU`66e0 zuD^ezH*lY%Ur$FbR4Rv#Unuo+-lj`491i!_LOkFCE}iT0I>1dGPm%i*Qv?Lzynfv; z>-6hx2BNgIHR02%p}3rpk>^DPYf4J?<{0o_hD|t>fF9|{2JNG9$CckYyWa5n#bU*q zGd-24s7ry)vG2}|eed3pTsp&w)5z;e_eL|kMQJy)BS(~Zcw}@0DO5ESYztFT>dKB! z6A~z4Fw&w6Hm`@hb4tUe`Go~~{a3F7!wzgHjg33ILh)$LK;?h4v-i}pek&0WZb8A~ znbc{qo11sj(=qiyL49Y)?o{b@=ZJ;N)Ed-T?G$S~P*Qke4Bx@V(%$m(530Ot(ajL_ z()2x0H)-R{51XbeD{O_ssQqqOA9+3$+-CWCHr^xe#g>$`@tEiYr|SfB_l`R3pRKL( z>nascxwuH^$mXcG_iO0TF_sU8Vce+EefSW}fUtG!z$YK68~dAmosp3t|Kl?5LzjVp zS=apZuwD0rxOvsa;-rnUwXU&ol!XFA+=Rl$B_X5BlI4_yMUal^-R2iFx;VyIc@rkp zZ0dfKw)t*5+icTP){i{g)3G;r0KkK&cXLBEbPC^mjI(svN>@iG*rKa=cmcGPFtpmp z%o+x%u7vhwH6<#wlXmWm4BEMH7dTwI)PfB$N# z?DHZwH+LR18s8?lYijlpjX~wl_L_*ufXy$o*`x~^vL395ClGJP{5**QUU**~wBv$+ zK-67Ix`pqdvynu>#{T&4>; z=2w&npF^o*-K>7V+iJN_tjNj9S`XY9DzfvLCpqc{mgd~YamC+ANcZ?-V0`2jp-_mC zXDI3o^m$>-&-juyaGl)8NSxF84+I4D*)T_iHe`k#yxY+>mD8zf6veHG#oSi>LA)9L>(!y{sRfVnM+I zgaltI^sgzm$3tTcSatMe(Uiv4aBu`EIQSV~53Pqq^()EK1e=9lU>$SM80D9heWatK zcxV9THC#7yWy1xW>4fD)MMYFI0D)l1NYx_m);9D{j?sUWIUQ*+UFVWw zaDs_<&ojmS2CjE;&o-XXS4>igmCX;fS69Oe`N@E&%ax3Sn;a0C6pYrJFCZl*M-o=XZYdyV>o6=k0W2xUhR`=zO0-qyK!fF7?9Yl zpurvd1RX5H52KrSjmogmQs?}P@)Z7>?O3GKE2=cA!*}fdFth75i%Aut_!0vmja%qn6hdS4+4CvhbHgt0Z6@d{DrzYGM zmjDTxZ0BMb%A7RwHAtlNFQxLv#(`S9KaleB^4;M?`PTM!3h+c2TH0H3sh*zE(XpC0 z*{@%}rUe4a7Akg2y+{9E{-dX&nz8l~Ch|qBwgiz2c=9uAV`Nmv5qLAMAqC2Vo-=fe zJ&7an>q$WiDaGpSV%U>`v1kV&lUj&Lr-0(QxOPYT?%qs$LHzWA;QLNxvS{Crm*Kr`3O# z(~Em29Wm5GZr4c_e0-wki6wk|t5kvS^C~DwDU38sOw`rY@6U|Q&CNleyJ}!BuUr(F zxNrNwV5}Y_djq^!4WuYlh#wO3^J4YQx{X^h=|eE!@T)xdY%X;FhRLoqVGzMh~G)P3=BbK>epXe$vB$Z5@> zZJ3p>0MsWPm(LI^6?;TD#>m4nvpmfDXF{zw9Toq=bGQqLs7H$6#T`i8ht!>)gX(K) zDjo*vxfY@eafO|zc=~XNS+za&0*75TBosXp&}&5Zk-p94a;xQf@4fOFpy&b#3gx4t zVIMcM41PFSAz^wUH*a@$cL8&3bK-JCP0;U(}akKh~ou4RM>7PQ_HWwi7dG~R1x3A26qRk9;Z-najA>o>OqZp zg`>k(9D#ttDl-d9c#pf}yk?i6&c}`7AT@2c$Rre51=R#>2T<_`|1WLul@3P*KLp)V_bcAxt)mFhv*P~=~<3b)a&i4X=TdDvtOQiptW8rrWrf(S2L@S@fU3m&TijK=eiM z>&b++2U!(oMa$BV;hJ&T4|O_Wkz<%kg$E8~Bn|4y+~?@pomWEF@$g8zvib!Ca0> z$dn;QC_z)*++JUQGRh*pK3Z7hmu9Sz1&9}*H?6e1dfT^8NyLntKSqHDlg$!lFV5S@ zA%!U?U$54OlpT~E9N%(E%3!5XWY{A6yDC7*h%U{?$0xFaB4=%FEoHQd#PVg*PVBMK zF=*J7l60pCT;HJLN5btV;k15fZs!`e6k|%i&@n$DrJbFfeEIz7Do%xEucPo6UU!wN z{X^j`JEDmO1_sN^%MnR7Ha3D3UxnN7WdFGnw>Wp@?N*JT&8GNC9$mA>e8iBUQx#nA zL{?vWxK_g9^=A{5mzDbY+{NhePy4H)vnTJ&(@7iN8{a?IUn&BC z5jmSF*)&{QiIb-^mL}Nj`;4WQoWBJom|1XSVwBeP938=o%oygAL{n1DL6&0P{HeY@ zmXqjKzmrMbZU!#bI6Eg71pa+wLVt3eJDNL?QwR@lDCdWSp=1a3uV~KWijO77#Ys)G zfX=VlsXX>!j=YW{bHAlk2=ZEzl1NU{uqQ*`%tmr}@GmW;q@~dx?(OZ-hvHz)opDK` zDC)JJ>L!uXS=(8KAYrET=fq{LD4+1hV?O$E)^HiKXxg=8eEQC}(nudRb9fo0Au45w z+O$R=D-Uh&h=M?393&+rG4?*G(FM7@4K{T)5YIUbySN}Y+tvy(YW6Q=*DcrnD+o0+ z5kkI|cO(xPS;EvjxtPDEHZ5zSBxnSM0QjW7vAtDBES>>;o<+qpZat|$yV4<|e@iPP z*bkY;LK$bLhx$fF5R1fwkSgN|ejmo3{2{H$8|o$}puR7*;BIK8ooc!uzWK(FoXQ+v zhX-Zc+1Z&`wX>;?EShs+5Md4>Nv!`AV0!cOtRi;_k7=M>it0i5&n}ekt)<{c4O6U!?3R=ouqT=x1rs4u`+VDKBqd{OSG(#tP>Cwj+N-s;L3YiH;s0)L?@h zL{Rj!v39I<2QVnK!ucRHJ-y}Sq5Asr|C}Pq9qjGx$;()#@`vIx)>fOb-g7Svy7U&R zbVKx?_b0Npx3{*Iu%`rQc_ahQj5cM63fd^2FB9-uCKR&HRe$jr_+`r)w9~Vx_820xNx`Q@JfR< zE}ZiC=!gRi9eenShHkc}XVc}o-#=Pb{&|nykQ|CNiov0wipIw1@W{Hg=GZ1LT&iCn zLC*^Tad9yCl}H+js)oiC@EI|5JHsMMFblAa~tW#G&`;I-v8XQE4pu z;y&fg8T;&UlyHS13CBJ>Iq^Z<*mg%g4i96oCc;x-DH06KZ>cMDbGdD=ETqlNQE;gF z=H_tE*1T_zbX0V1lT#+~0CV{CkV4fApk2gMqDSBENXp^+LCuuBnQq_XeJg8Ith1B~ z9CH5AwGpj+bQ#hoWS#}2#-gRe`hUZ#|3+jkP5YuBdFnLrpc_egdNGz3@Cuk9Q&CIH zdjR3U$$S8hUzb;)AW^rc4$#-v(UJZ0b_Y%T(1{2xa%k>)wu1>q;GR|Y1^#z z=UXxoW~Y0Wg&Xqo^Fs;?I|Bj|>Ujr9G$u{Sv9GSA-$q3VYX4Q$YkK|{SXagb8BGzu zjjZNCeN6%u1uN#LS7U$N^&8sMlNYXCJO>AEin+~Un(p0hmj}$*gwu57GQZmyWbrhUnGkG~V=va{F zh~>z5)?12lF$rKeI}&D)RW`!H-zUrm-x+QC18p0=&94H$Ble|b6B(kB`AA`7)1$

yYR!c>hm$${Gy*N9&8XDjZ!65Rw_ciO4 z0&aFLEIenv__Nv_t*>({#yj`xE&E==WFBy2C{3B&xkGWnzEKCWENz0#Jwmk4zVlFkwA zUE)Mh&#vxEf;BeYy)nJloYs7`DnyjD`0Y^YQxyIS4d+#4vCtj@wK(UEa7cSZ{%+_S zF5bPJcnZ{2mGzB;1m2r>)!K>%2Gu6MG)9*tE%!%>7iF8elLW^N_ATFxu1g9EHe#TP zioN@YLEDN*VPJ4@2<(Btz*yzfz(+*aind)cZ;In-Ma_C>M7IU7bV^BSGjy@pn_Oiy zl(>YaYv~ZLZ6?2| zypqx#xM_@it9|v)xZLTBUY$2}F#h#dZw(FfZMj~GCAIsW9-ejAu^{m6fGn&mwBazA z$4SkC7#JSJ5ORgz?e8Za7blKG zizmAOF6s_0y+`YkEtdk66Bg{o)5UJp?R6bosX}uWa5r9Z;`c2J>xic=TTI`dXBr*WBCNn29fqV6ysrW=%FRy~JIbo7vs+uqhLB(6-tKNnYKpCmouZ+D4Ut!foH9vbFwA+LF zI7vtr2nkSgSy6J!bGN8T54?{ONFInoHx(5ujzh>RfnKf&aCZm;~Lq@38Pp8iO=Vl3`;QmS7? z>df*6iV+(X9gIBIsiWyB&yQYTtgLi&bp8{}c6k5psn*E*JjN>kJ>x?S?L9m?e5`+Yb*8W^Xi^TEM;a8OWq*Wp?nQa`5QB q{eMOe|IHi!$Di^1?!}AeXDJlZH8z|Z3FM~O3k6wKnM$dzKmQAHWO%^< literal 0 HcmV?d00001 diff --git a/homework/week-2/indexscript.js b/homework/week-2/indexscript.js new file mode 100644 index 000000000..1bb357147 --- /dev/null +++ b/homework/week-2/indexscript.js @@ -0,0 +1,128 @@ +'use strict'; + +const repoSelector = document.querySelector('#repoSelect'); +const contribDiv = document.querySelector('#contributorsDiv'); +const repoDiv = document.querySelector('#repo'); + +const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; + +//fetch the data from the URL and convert to json +// create the select element and populate with options. These should be the name of the repos in the json. +// when the user changes the selector go to the URL for that repo and get the json +// create a ul showing relevant data +// go to the URL of each contributor in the repo and fetch the data +// create a ul showing relevant data + + +function createAndAppend(name, parent, options = {}) { + const elem = document.createElement(name); + parent.appendChild(elem); + Object.keys(options).forEach(key => { + const value = options[key]; + if (key === 'text') { + elem.textContent = value; + } else { + elem.setAttribute(key, value); + } + }); + return elem; +} + +function buildSelect(data, repoSelector) { + data + .map(repo => repo.name) + .sort() + .forEach(name => { + createAndAppend('OPTION', repoSelector, { text: name, value: name }); + }); +} + +function main(url) { + + fetch(url) + .then(response => { + if (response.ok) return response + throw new Error(response.statusText) + }) + .then(response => response.json()) + .then(json => buildSelect(json, repoSelector)) + .catch(error => createAndAppend('div', root, { text: error, class: 'alert-error' })) +} + + +//ul contribDiv + +function displayContrib(contributor, contributions, avatar) { + + // createAndAppend(ul, contribDiv, { id = }) + let eachPersonUl = createAndAppend('ul', contribDiv) + + createAndAppend('IMG', eachPersonUl, { src: avatar, width: "42", id: 'avatar' }) + + createAndAppend('li', eachPersonUl, { class: "badge", id: 'contbadge', text: `${contributions}` }) + createAndAppend('li', eachPersonUl, { text: `${contributor}` }) + // createAndAppend('li', eachPersonUl, { text: `Contributions: ${contributions}`, id: 'contributionNumber' }) + +} + +function displayRepo(repository, description, forks, updated) { + + let eachRepoUl = createAndAppend('ul', repoDiv) + + + createAndAppend('li', eachRepoUl, { text: `Repository: ${repository}` }) + createAndAppend('li', eachRepoUl, { text: `Description: ${description}` }) + createAndAppend('li', eachRepoUl, { text: `Forks: ${forks}` }) + createAndAppend('li', eachRepoUl, { text: `Updated: ${updated}` }) + + +} + +const selectElement = document.querySelector('.selector'); + +selectElement.addEventListener('change', event => { + const result = document.querySelector('.result'); + let repo = document.getElementById('repoSelect').value; + let repoURL = `https://api.github.com/repos/HackYourFuture/${repo}`; + let contribURL = `https://api.github.com/repos/HackYourFuture/${repo}/contributors`; + + main(HYF_REPOS_URL); + + fetch(repoURL) + .then(response => { + if (response.ok) return response + throw new Error(response.statusText) + }) + .then(response => response.json()) + .then(data => { + repoDiv.innerHTML = ''; + let repository = data.name; + let description = data.description; + let forks = data.forks; + let updated = data.updated_at.split("T", 1); + displayRepo(repository, description, forks, updated); + }) + .catch(error => createAndAppend('div', root, { text: error, class: 'alert-error' })); + + fetch(contribURL) + .then(response => { + if (response.ok) return response + throw new Error(response.statusText) + }) + .then(response => response.json()) + .then(data => { + contribDiv.innerHTML = ''; + data.forEach(object => { + let contributor = object.login; + let contributions = object.contributions; + let avatar = object.avatar_url; + displayContrib(contributor, contributions, avatar); + }); + console.log('Here is the contribdata'); + }) + .catch(error => createAndAppend('div', root, { text: error, class: 'alert-error' })) +}) + + + +window.onload = () => main(HYF_REPOS_URL) diff --git a/homework/week-2/newStyle.css b/homework/week-2/newStyle.css new file mode 100644 index 000000000..e1b653a72 --- /dev/null +++ b/homework/week-2/newStyle.css @@ -0,0 +1,100 @@ +.header { + background-color: #176ab0; + color: white; + text-align: center; + padding: 5px; +} + +#main-content { + width: 350px; + float: left; + padding: 10px; +} + +#footer { + background-color: #176ab0; + color: white; + clear: both; + text-align: center; + padding: 5px; +} + +.badge { + background: grey; + float: right; + color: white; + width: 18px; + height: 18px; + text-align: center; + line-height: 18px; + border-radius: 50%; + padding: 10px; +} + +.flex-wrapper { + font-family: Abel; + background-color: grey; + text-align: left; + padding-top: 25px; + padding-bottom: 25px; + font-size: 20px; + display: flex; + flex-direction: row; + justify-content: center; + background-color: #2E2C2F; + color: #444; +} + +#contributorsDiv.li { + text-align: center; + padding: 10px; + margin: auto; + display: inline; +} + +#contributorsDiv.IMG { + padding: 20px; + margin: 20px; +} + +#repo { + background-color: whitesmoke; + border-color: #2E2C2F; + width: 40%; + border: 5px; + padding: 20px; + margin: 20px; +} + +#contribDiv { + background-color: whitesmoke; + border-color: #2E2C2F; + width: 40%; + border: 5px; + padding: 20px; + margin: 20px; +} + +/* #contributionNumber { + text-align: right; + color: white; + background-color: grey; +} */ + +ul { + list-style-type: none; + padding: 10px; +} + +@media screen and (max-width: 600px) { + .flex-wrapper { + -webkit-flex-direction: column; + flex-direction: column; + } + #repo { + width: 80%; + } + #contribDiv { + width: 80%; + } +} \ No newline at end of file diff --git a/homework/week-2/package-lock.json b/homework/week-2/package-lock.json new file mode 100644 index 000000000..3497c4396 --- /dev/null +++ b/homework/week-2/package-lock.json @@ -0,0 +1,13 @@ +{ + "name": "sadbox", + "version": "1.0.0", + "lockfileVersion": 1, + "requires": true, + "dependencies": { + "node-fetch": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.0.tgz", + "integrity": "sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA==" + } + } +} diff --git a/homework/week-2/package.json b/homework/week-2/package.json new file mode 100644 index 000000000..c7d57ef3c --- /dev/null +++ b/homework/week-2/package.json @@ -0,0 +1,14 @@ +{ + "name": "sadbox", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "", + "license": "ISC", + "dependencies": { + "node-fetch": "^2.6.0" + } +} From 61470a80de72b8f897da506a9035b2d8b4ce46c1 Mon Sep 17 00:00:00 2001 From: Catsudemo Date: Tue, 27 Aug 2019 10:26:30 +0200 Subject: [PATCH 2/9] Create index.html Forgot a critical file! --- homework/week-2/index.html | 37 +++++++++++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) create mode 100644 homework/week-2/index.html diff --git a/homework/week-2/index.html b/homework/week-2/index.html new file mode 100644 index 000000000..1106d3778 --- /dev/null +++ b/homework/week-2/index.html @@ -0,0 +1,37 @@ + + + + + + + + + + + + + Codestin Search App + + + + + +

+
+ +
+
+
+
+ Repo facts +
+
+ Contributions +
+
+
+
+ + + + \ No newline at end of file From e1416dab864c9bcda9a0a1338938ded82d13b295 Mon Sep 17 00:00:00 2001 From: Catsudemo Date: Wed, 28 Aug 2019 09:14:34 +0200 Subject: [PATCH 3/9] Fixed homework error Created 'displayPage' function and moved event listener into main. --- homework/week-2/index.html | 8 ++++-- homework/week-2/indexscript.js | 51 +++++++++++++--------------------- 2 files changed, 24 insertions(+), 35 deletions(-) diff --git a/homework/week-2/index.html b/homework/week-2/index.html index 1106d3778..f88dd5f4e 100644 --- a/homework/week-2/index.html +++ b/homework/week-2/index.html @@ -18,7 +18,7 @@
- +
@@ -30,8 +30,10 @@
-
- +
+
+ + \ No newline at end of file diff --git a/homework/week-2/indexscript.js b/homework/week-2/indexscript.js index 1bb357147..783dec521 100644 --- a/homework/week-2/indexscript.js +++ b/homework/week-2/indexscript.js @@ -1,11 +1,5 @@ 'use strict'; -const repoSelector = document.querySelector('#repoSelect'); -const contribDiv = document.querySelector('#contributorsDiv'); -const repoDiv = document.querySelector('#repo'); - -const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; - //fetch the data from the URL and convert to json // create the select element and populate with options. These should be the name of the repos in the json. // when the user changes the selector go to the URL for that repo and get the json @@ -13,6 +7,11 @@ const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page // go to the URL of each contributor in the repo and fetch the data // create a ul showing relevant data +const repoSelector = document.querySelector('#repoSelect'); +const contribDiv = document.querySelector('#contributorsDiv'); +const repoDiv = document.querySelector('#repo'); +const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; + function createAndAppend(name, parent, options = {}) { const elem = document.createElement(name); @@ -34,7 +33,7 @@ function buildSelect(data, repoSelector) { .sort() .forEach(name => { createAndAppend('OPTION', repoSelector, { text: name, value: name }); - }); + }) } function main(url) { @@ -47,47 +46,36 @@ function main(url) { .then(response => response.json()) .then(json => buildSelect(json, repoSelector)) .catch(error => createAndAppend('div', root, { text: error, class: 'alert-error' })) -} + const selectElement = document.querySelector('.selector'); -//ul contribDiv + selectElement.addEventListener('change', event => { + let repo = document.getElementById('repoSelect').value; + let repoURL = `https://api.github.com/repos/HackYourFuture/${repo}`; + let contribURL = `https://api.github.com/repos/HackYourFuture/${repo}/contributors`; -function displayContrib(contributor, contributions, avatar) { + displayPage(repoURL, contribURL); - // createAndAppend(ul, contribDiv, { id = }) - let eachPersonUl = createAndAppend('ul', contribDiv) + }) - createAndAppend('IMG', eachPersonUl, { src: avatar, width: "42", id: 'avatar' }) +} +function displayContrib(contributor, contributions, avatar) { + let eachPersonUl = createAndAppend('ul', contribDiv) + createAndAppend('IMG', eachPersonUl, { src: avatar, width: "42", id: 'avatar' }) createAndAppend('li', eachPersonUl, { class: "badge", id: 'contbadge', text: `${contributions}` }) createAndAppend('li', eachPersonUl, { text: `${contributor}` }) - // createAndAppend('li', eachPersonUl, { text: `Contributions: ${contributions}`, id: 'contributionNumber' }) - } function displayRepo(repository, description, forks, updated) { - let eachRepoUl = createAndAppend('ul', repoDiv) - - createAndAppend('li', eachRepoUl, { text: `Repository: ${repository}` }) createAndAppend('li', eachRepoUl, { text: `Description: ${description}` }) createAndAppend('li', eachRepoUl, { text: `Forks: ${forks}` }) createAndAppend('li', eachRepoUl, { text: `Updated: ${updated}` }) - - } -const selectElement = document.querySelector('.selector'); - -selectElement.addEventListener('change', event => { - const result = document.querySelector('.result'); - let repo = document.getElementById('repoSelect').value; - let repoURL = `https://api.github.com/repos/HackYourFuture/${repo}`; - let contribURL = `https://api.github.com/repos/HackYourFuture/${repo}/contributors`; - - main(HYF_REPOS_URL); - +function displayPage(repoURL, contribURL) { fetch(repoURL) .then(response => { if (response.ok) return response @@ -118,10 +106,9 @@ selectElement.addEventListener('change', event => { let avatar = object.avatar_url; displayContrib(contributor, contributions, avatar); }); - console.log('Here is the contribdata'); }) .catch(error => createAndAppend('div', root, { text: error, class: 'alert-error' })) -}) +} From 72d6c58c4ed360bc198d2ef50002d87dc8bcd442 Mon Sep 17 00:00:00 2001 From: Catsudemo Date: Fri, 30 Aug 2019 14:38:56 +0200 Subject: [PATCH 4/9] Fixed select element Fixed a bug that was causing the select element to replicate every time the page reloaded. Also upperCased everything so it's actually alphabetical --- homework/week-2/indexscript.js | 3 +++ homework/week-2/newStyle.css | 13 ------------- 2 files changed, 3 insertions(+), 13 deletions(-) diff --git a/homework/week-2/indexscript.js b/homework/week-2/indexscript.js index 783dec521..e334287ac 100644 --- a/homework/week-2/indexscript.js +++ b/homework/week-2/indexscript.js @@ -28,8 +28,10 @@ function createAndAppend(name, parent, options = {}) { } function buildSelect(data, repoSelector) { + data .map(repo => repo.name) + .map(repo => repo.toUpperCase()) .sort() .forEach(name => { createAndAppend('OPTION', repoSelector, { text: name, value: name }); @@ -44,6 +46,7 @@ function main(url) { throw new Error(response.statusText) }) .then(response => response.json()) + .then(repoSelector.innerHTML = '') .then(json => buildSelect(json, repoSelector)) .catch(error => createAndAppend('div', root, { text: error, class: 'alert-error' })) diff --git a/homework/week-2/newStyle.css b/homework/week-2/newStyle.css index e1b653a72..85a60f3de 100644 --- a/homework/week-2/newStyle.css +++ b/homework/week-2/newStyle.css @@ -45,13 +45,6 @@ color: #444; } -#contributorsDiv.li { - text-align: center; - padding: 10px; - margin: auto; - display: inline; -} - #contributorsDiv.IMG { padding: 20px; margin: 20px; @@ -75,12 +68,6 @@ margin: 20px; } -/* #contributionNumber { - text-align: right; - color: white; - background-color: grey; -} */ - ul { list-style-type: none; padding: 10px; From ed9bd031853630dde2fb5ad7abd1a7107f665c0c Mon Sep 17 00:00:00 2001 From: Catsudemo Date: Sat, 31 Aug 2019 15:51:57 +0200 Subject: [PATCH 5/9] Attempted some of week 3 homework Still haven't figured out how the classes work --- homework/week-3/App.js | 81 ++++++++++++++++++ homework/week-3/Contributor.js | 19 +++++ homework/week-3/Repository.js | 39 +++++++++ homework/week-3/get.js | 12 +++ homework/week-3/hyf.png | Bin 0 -> 6971 bytes homework/week-3/index.html | 36 ++++++++ homework/week-3/index.js | 139 ++++++++++++++++++++++++++++++ homework/week-3/index2.html | 27 ++++++ homework/week-3/indexscript.js | 150 +++++++++++++++++++++++++++++++++ homework/week-3/newStyle.css | 90 ++++++++++++++++++++ 10 files changed, 593 insertions(+) create mode 100644 homework/week-3/App.js create mode 100644 homework/week-3/Contributor.js create mode 100644 homework/week-3/Repository.js create mode 100644 homework/week-3/get.js create mode 100644 homework/week-3/hyf.png create mode 100644 homework/week-3/index.html create mode 100644 homework/week-3/index.js create mode 100644 homework/week-3/index2.html create mode 100644 homework/week-3/indexscript.js create mode 100644 homework/week-3/newStyle.css diff --git a/homework/week-3/App.js b/homework/week-3/App.js new file mode 100644 index 000000000..32b71e34b --- /dev/null +++ b/homework/week-3/App.js @@ -0,0 +1,81 @@ +'use strict'; + +/* global Util, Repository, Contributor */ + +class App { + constructor(url) { + this.initialize(url); + } + + /** + * Initialization + * @param {string} url The GitHub URL for obtaining the organization's repositories. + */ + async initialize(url) { + // Add code here to initialize your app + // 1. Create the fixed HTML elements of your page + // 2. Make an initial XMLHttpRequest using Util.fetchJSON() to populate your + + +
+
+ Repo facts +
+
+ Contributors +
+
+
+ + + + \ No newline at end of file diff --git a/homework/week-3/index.js b/homework/week-3/index.js new file mode 100644 index 000000000..7b043a5d3 --- /dev/null +++ b/homework/week-3/index.js @@ -0,0 +1,139 @@ +'use strict'; + +const repoSelector = document.querySelector('#repoSelect'); +const contribDiv = document.querySelector('#contribDiv'); +const repoDiv = document.querySelector('#repo'); + +function fetchJSON(url, cb) { + const xhr = new XMLHttpRequest(); + xhr.open('GET', url); + xhr.setRequestHeader = 'Catsudemo https://api.github.com'; + xhr.responseType = 'json'; + xhr.onload = () => { + if (xhr.status < 400) { + cb(null, xhr.response); + } else { + cb(new Error(`Network error: ${xhr.status} - ${xhr.statusText}`)); + } + }; + xhr.onerror = () => cb(new Error('Network request failed')); + xhr.send(); +} + +function createAndAppend(name, parent, options = {}) { + const elem = document.createElement(name); + parent.appendChild(elem); + Object.keys(options).forEach(key => { + const value = options[key]; + if (key === 'text') { + elem.textContent = value; + } else { + elem.setAttribute(key, value); + } + }); + return elem; +} + +function initPage(data, repoSelector) { + buildSelect(data, repoSelector); +} + +function buildSelect(data, repoSelector) { + data + .map(repo => repo.name) + .sort() + .forEach(name => { + createAndAppend('OPTION', repoSelector, { text: name, value: name }); + }); +} + +function main(url) { + fetchJSON(url, (err, data) => { + const root = document.getElementById('root'); + if (err) { + createAndAppend('div', root, { text: err.message, class: 'alert-error' }); + } else { + // createAndAppend('pre', root, { text: JSON.stringify(data, null, 2) }); + // buildSelect(data,repoSelector) + initPage(data, repoSelector); + } + }); +} + +const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; + +function displayContrib(contributor, contributions, avatar) { + const eachPersonUl = document.createElement('ul'); + const contributorName = document.createElement('li'); + contributorName.innerText = `Username: ${contributor}`; + eachPersonUl.appendChild(contributorName); + const eachContributions = document.createElement('li'); + eachContributions.innerText = `Contributions: ${contributions}`; + eachPersonUl.appendChild(eachContributions); + contribDiv.appendChild(eachPersonUl); + const eachAvatar = document.createElement('IMG'); + eachAvatar.innerhtml = ``; + contribDiv.appendChild(eachAvatar); +} + +function displayRepo(repository, description, forks, updated) { + const eachRepoUl = document.createElement('ul'); + const eachName = document.createElement('li'); + eachName.innerText = `Repository: ${repository}`; + eachRepoUl.appendChild(eachName); + const eachDescription = document.createElement('li'); + eachDescription.innerText = `Contributions: ${description}`; + eachRepoUl.appendChild(eachDescription); + const eachForks = document.createElement('li'); + eachForks.innerText = `Forks: ${forks}`; + eachRepoUl.appendChild(eachForks); + const eachUpdated = document.createElement('li'); + eachUpdated.innerText = `Updated: ${updated}`; + eachRepoUl.appendChild(eachUpdated); + repoDiv.appendChild(eachRepoUl); +} + +const selectElement = document.querySelector('.selector'); + +selectElement.addEventListener('change', event => { + const result = document.querySelector('.result'); + let repo = document.getElementById('repoSelect').value; + let repoURL = `https://api.github.com/repos/HackYourFuture/${repo}`; + let contribURL = `https://api.github.com/repos/HackYourFuture/${repo}/contributors`; + + main(HYF_REPOS_URL); + + fetchJSON(repoURL, (err, data) => { + const root = document.getElementById('root'); + if (err) { + createAndAppend('div', root, { text: err.message, class: 'alert-error' }); + } else { + repoDiv.innerHTML = ''; + let repository = data.name; + let description = data.description; + let forks = data.forks; + let updated = data.updated_at; + displayRepo(repository, description, forks, updated); + } + console.log('Here is the repodata'); + }); + + fetchJSON(contribURL, (err, data) => { + const root = document.getElementById('root'); + if (err) { + createAndAppend('div', root, { text: err.message, class: 'alert-error' }); + } else { + contribDiv.innerHTML = ''; + data.forEach(object => { + let contributor = object.login; + let contributions = object.contributions; + let avatar = object.avatar_url; + console.lo + displayContrib(contributor, contributions, avatar); + }); + console.log('Here is the contribdata'); + } + }); +}); + +window.onload = () => main(HYF_REPOS_URL); diff --git a/homework/week-3/index2.html b/homework/week-3/index2.html new file mode 100644 index 000000000..2d1fc8fa7 --- /dev/null +++ b/homework/week-3/index2.html @@ -0,0 +1,27 @@ + + + + + + + + + + + + Codestin Search App + + + + + +
+ + + + + + diff --git a/homework/week-3/indexscript.js b/homework/week-3/indexscript.js new file mode 100644 index 000000000..dd25d15c2 --- /dev/null +++ b/homework/week-3/indexscript.js @@ -0,0 +1,150 @@ + + +//fetch the data from the URL and convert to json +// create the select element and populate with options. These should be the name of the repos in the json. +// when the user changes the selector go to the URL for that repo and get the json +// create a ul showing relevant data +// go to the URL of each contributor in the repo and fetch the data +// create a ul showing relevant data + +const repoSelector = document.querySelector('#repoSelect'); +const contribDiv = document.querySelector('#contributorsDiv'); +const repoDiv = document.querySelector('#repo'); +const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; + + + +function createAndAppend(name, parent, options = {}) { + const elem = document.createElement(name); + parent.appendChild(elem); + Object.keys(options).forEach(key => { + const value = options[key]; + if (key === 'text') { + elem.textContent = value; + } else { + elem.setAttribute(key, value); + } + }); + return elem; +} + +// Makes new repository objects + +// class Repository { +// constructor(name, description, forks, updated, liveDiv) { +// this.repository = name; +// this.description = description; +// this.forks = forks; +// this.updated = updated; +// this.location = liveDiv; +// this.prototype.attach = function displayRepo() { +// let eachRepoUl = createAndAppend('ul', liveDiv) +// createAndAppend('li', eachRepoUl, { text: `Repository: ${repository}` }) +// createAndAppend('li', eachRepoUl, { text: `Description: ${description}` }) +// createAndAppend('li', eachRepoUl, { text: `Forks: ${forks}` }) +// createAndAppend('li', eachRepoUl, { text: `Updated: ${updated}` }) +// } +// } +// } + +// Makes new contributor objects + +// class Contributor { +// constructor(name, contributions, avatar, containDiv) { +// this.contributor = name; +// this.contributions = contributions; +// this.avatar = avatar; +// this.location = containDiv +// this.prototype.attach = function displayContrib() { +// const eachPersonUl = createAndAppend('ul', containDiv) +// createAndAppend('li', eachPersonUl, { class: 'avatarli', id: `avatarli${contributor}` }) +// createAndAppend('li', eachPersonUl, { class: "badge", text: `${contributions}` }) +// createAndAppend('li', eachPersonUl, { text: `${contributor}` }) +// let myAvatar = document.querySelector(`#avatarli${contributor}`); +// createAndAppend('IMG', myAvatar, { src: avatar, class: 'avatar' }) +// } +// } +// } + +function displayContrib(contributor, contributions, avatar) { + let eachPersonUl = createAndAppend('ul', contribDiv) + createAndAppend('IMG', eachPersonUl, { src: avatar, id: 'avatar' }) + createAndAppend('li', eachPersonUl, { class: "badge", id: 'contbadge', text: `${contributions}` }) + createAndAppend('li', eachPersonUl, { text: `${contributor}` }) +} + +function displayRepo(repository, description, forks, updated) { + let eachRepoUl = createAndAppend('ul', repoDiv) + createAndAppend('li', eachRepoUl, { text: `Repository: ${repository}` }) + createAndAppend('li', eachRepoUl, { text: `Description: ${description}` }) + createAndAppend('li', eachRepoUl, { text: `Forks: ${forks}` }) + createAndAppend('li', eachRepoUl, { text: `Updated: ${updated}` }) +} + +//gets data from URL and converts to json +async function getJson(url) { + const response = await fetch(url); + const returnedJson = await response.json(); + return returnedJson +} + +function buildSelect(data, repoSelector) { + clearHTML(repoSelector) + data + .map(repo => repo.name) + .map(repo => repo.toUpperCase()) + .sort() + .forEach(name => { + createAndAppend('OPTION', repoSelector, { text: name, value: name }); + }) +} + + +function doRepo(givenRepoData) { + clearHTML(repoDiv) + let repository = givenRepoData.name; + let description = givenRepoData.description; + let forks = givenRepoData.forks; + let updated = givenRepoData.updated_at.split("T", 1); + displayRepo(repository, description, forks, updated); +} + +function doContributors(givenContribData) { + clearHTML(contribDiv); + givenContribData.forEach(object => { + let contributor = object.login; + let contributions = object.contributions; + let avatar = object.avatar_url; + displayContrib(contributor, contributions, avatar); + }); +} + +function clearHTML(elementToClear) { + const el = elementToClear + while (el.firstChild) el.removeChild(el.firstChild); +} + +async function displayPage(repoURL, contribURL) { + let foundRepoData = await getJson(repoURL) + let foundContribData = await getJson(contribURL) + doRepo(foundRepoData); + doContributors(foundContribData); + +} + +async function main(url) { + const homepageJson = await getJson(url) + buildSelect(homepageJson, repoSelector) + + const selectElement = document.querySelector('.selector'); + selectElement.addEventListener('change', event => { + let repo = document.getElementById('repoSelect').value; + let repoURL = `https://api.github.com/repos/HackYourFuture/${repo}`; + let contribURL = `https://api.github.com/repos/HackYourFuture/${repo}/contributors`; + displayPage(repoURL, contribURL); + }) + +} + + +window.onload = () => main(HYF_REPOS_URL) diff --git a/homework/week-3/newStyle.css b/homework/week-3/newStyle.css new file mode 100644 index 000000000..fb5f2ad5d --- /dev/null +++ b/homework/week-3/newStyle.css @@ -0,0 +1,90 @@ +.header { + background-color: #176ab0; + color: white; + text-align: center; + padding: 5px; +} + +#main-content { + width: 350px; + float: left; + padding: 10px; +} + +#footer { + background-color: #176ab0; + color: white; + clear: both; + text-align: center; + padding: 5px; +} + +.badge { + background: grey; + float: right; + color: white; + width: 28px; + height: 28px; + text-align: center; + line-height: 18px; + border-radius: 50%; + padding: 10px; +} + +.flex-wrapper { + font-family: Abel; + background-color: grey; + text-align: left; + padding-top: 25px; + padding-bottom: 25px; + font-size: 20px; + display: flex; + flex-direction: row; + justify-content: center; + background-color: #2E2C2F; + color: #444; +} + +#avatar { + width: 42px; +} + +#repo { + background-color: whitesmoke; + border-color: #2E2C2F; + width: 40%; + border: 5px; + padding: 20px; + margin: 20px; +} + +#contributorsDiv { + background-color: whitesmoke; + border-color: #2E2C2F; + width: 40%; + border: 5px; + padding: 20px; + margin: 20px; +} + +ul { + list-style-type: none; + padding: 10px; +} + +li { + padding: 8px; +} + +@media screen and (max-width: 600px) { + .flex-wrapper { + -webkit-flex-direction: column; + flex-direction: column; + } + #repo { + width: 80%; + } + #contribDiv { + width: 80%; + } +} \ No newline at end of file From 2edb0b30f6439e6c6fd1593940f62bfe7dae7a45 Mon Sep 17 00:00:00 2001 From: Catsudemo Date: Thu, 19 Sep 2019 14:55:08 +0200 Subject: [PATCH 6/9] Added week 3 homework Think all is working but api 403 so can't check for a little while. --- homework/week-3/App.js | 44 ++++++++++++---- homework/week-3/Contributor.js | 28 ++++++---- homework/week-3/Repository.js | 25 ++++----- homework/week-3/Util.js | 35 +++++++++++++ homework/week-3/index2.html | 47 ++++++++--------- homework/week-3/style.css | 95 ++++++++++++++++++++++++++++++++++ 6 files changed, 218 insertions(+), 56 deletions(-) create mode 100644 homework/week-3/Util.js create mode 100644 homework/week-3/style.css diff --git a/homework/week-3/App.js b/homework/week-3/App.js index 32b71e34b..baf37ff35 100644 --- a/homework/week-3/App.js +++ b/homework/week-3/App.js @@ -12,23 +12,47 @@ class App { * @param {string} url The GitHub URL for obtaining the organization's repositories. */ async initialize(url) { + this.makeDomElements() + + + // Add code here to initialize your app // 1. Create the fixed HTML elements of your page // 2. Make an initial XMLHttpRequest using Util.fetchJSON() to populate your element - + this.makeDomElements(); try { const repos = await Util.fetchJSON(url); this.repos = repos.map(repo => new Repository(repo)); - this.addReposToSelectElement() + this.addReposToSelectElement(); } catch (error) { this.renderError(error); } @@ -35,8 +22,6 @@ class App { let header = Util.createAndAppend('div', root, { class: 'header' }); Util.createAndAppend('select', header, { id: 'repoSelector' }); Util.createAndAppend('div', root, { id: 'container', class: 'flex-wrapper' }); - // Util.createAndAppend('div', root, { id: 'repoInfo' }); - // Util.createAndAppend('div', root, { id: 'repoContributors' }); } addReposToSelectElement() { @@ -47,27 +32,16 @@ class App { selectorElement.addEventListener('change', event => { const repoName = event.target.value; const chosenRepo = this.repos.filter(repo => repo.name() === repoName)[0]; - this.fetchContributorsAndRender(chosenRepo) - - }) - + this.fetchContributorsAndRender(chosenRepo); + }); } - /** - * Removes all child elements from a container element - * @param {*} container Container element to clear - */ static clearContainer(container) { while (container.firstChild) { container.removeChild(container.firstChild); } } - /** - * Fetch contributor information for the selected repository and render the - * repo and its contributors as HTML elements in the DOM. - * @param {number} index The array index of the repository. - */ async fetchContributorsAndRender(chosenRepo) { try { const repo = chosenRepo; @@ -91,15 +65,11 @@ class App { } } - /** - * Render an error to the DOM. - * @param {Error} error An Error object describing the error. - */ renderError(error) { - console.log(error); // TODO: replace with your own code + console.log(error); } } const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; -window.onload = () => new App(HYF_REPOS_URL); \ No newline at end of file +window.onload = () => new App(HYF_REPOS_URL); diff --git a/homework/week-3/Contributor.js b/homework/week-3/Contributor.js index ea1983d31..a1b2eba15 100644 --- a/homework/week-3/Contributor.js +++ b/homework/week-3/Contributor.js @@ -1,8 +1,5 @@ 'use strict'; -/* global Util */ - -// eslint-disable-next-line no-unused-vars class Contributor { constructor(contributor) { this.contributor = contributor; @@ -11,17 +8,18 @@ class Contributor { name() { return this.contributor.login; } - /** - * Render the contributor info to the DOM. - * @param {HTMLElement} container The container element in which to render the contributor. - */ + render(container) { const contributorDiv = Util.createAndAppend('div', container, { id: 'contribDiv' }); const contributorList = Util.createAndAppend('ul', contributorDiv, { id: 'contribList' }); - Util.createAndAppend('ul', contributorDiv, { id: + this.name() }); + Util.createAndAppend('ul', contributorDiv, { id: +this.name() }); Util.createAndAppend('li', contributorList, { text: 'Name: ' + this.name() }); - Util.createAndAppend('li', contributorList, { text: 'Contributions: ' + this.contributor.contributions }); - Util.createAndAppend('IMG', contributorDiv, { src: this.contributor.avatar_url, id: `${this.name()}Avatar` }); + Util.createAndAppend('li', contributorList, { + text: 'Contributions: ' + this.contributor.contributions, + }); + Util.createAndAppend('IMG', contributorDiv, { + src: this.contributor.avatar_url, + id: `${this.name()}Avatar`, + }); } - -} \ No newline at end of file +} diff --git a/homework/week-3/Repository.js b/homework/week-3/Repository.js index 60cec4d8c..b344c820a 100644 --- a/homework/week-3/Repository.js +++ b/homework/week-3/Repository.js @@ -1,40 +1,29 @@ 'use strict'; -/* global Util */ - -// eslint-disable-next-line no-unused-vars class Repository { constructor(repository) { this.repository = repository; } - /** - * Render the repository info to the DOM. - * @param {HTMLElement} container The container element in which to render the repository. - */ render(container) { - const updated = this.repository.updated_at.split('T')[0] - const created = this.repository.created_at.split('T')[0] + const updated = this.repository.updated_at.split('T')[0]; + const created = this.repository.created_at.split('T')[0]; App.clearContainer(container); - Util.createAndAppend('h3', container, { text: this.name() }); - const detailsUL = Util.createAndAppend('ul', container, { id: 'detailsList' }); + Util.createAndAppend('div', container, { id: 'repoInnerContainer' }); + let repoInnerContainer = document.getElementById('repoInnerContainer'); + Util.createAndAppend('h3', repoInnerContainer, { text: this.name() }); + const detailsUL = Util.createAndAppend('ul', repoInnerContainer, { id: 'detailsList' }); Util.createAndAppend('li', detailsUL, { text: `Forks: ${this.repository.forks}` }); Util.createAndAppend('li', detailsUL, { text: `Description: ${this.repository.description}` }); Util.createAndAppend('li', detailsUL, { text: 'Created: ' + created }); Util.createAndAppend('li', detailsUL, { text: 'Last updated: ' + updated }); } - /** - * Returns an array of contributors as a promise - */ fetchContributors() { return Util.fetchJSON(this.repository.contributors_url); } - /** - * Returns the name of the repository - */ name() { return this.repository.name; } -} \ No newline at end of file +} diff --git a/homework/week-3/Util.js b/homework/week-3/Util.js index 475381d18..3bf13b022 100644 --- a/homework/week-3/Util.js +++ b/homework/week-3/Util.js @@ -1,6 +1,5 @@ 'use strict'; -// eslint-disable-next-line no-unused-vars class Util { static createAndAppend(name, parent, options = {}) { const elem = document.createElement(name); @@ -32,4 +31,4 @@ class Util { xhr.send(); }); } -} \ No newline at end of file +} diff --git a/homework/week-3/index.html b/homework/week-3/index.html index 070ae21cd..d5bd2b734 100644 --- a/homework/week-3/index.html +++ b/homework/week-3/index.html @@ -1,36 +1,29 @@ + + + + + + + + + + Codestin Search App + + + - - - - - - - - - - Codestin Search App - - - + +
+ + + + + - -
-
- -
-
-
-
- Repo facts -
-
- Contributors -
-
-
- - - - \ No newline at end of file +
Created for FooCoding boot camp.
+ diff --git a/homework/week-3/index2.html b/homework/week-3/index2.html deleted file mode 100644 index a04153983..000000000 --- a/homework/week-3/index2.html +++ /dev/null @@ -1,29 +0,0 @@ - - - - - - - - - - - - - Codestin Search App - - - - - -
- - - - - - -
Created for FooCoding boot camp. -
- - \ No newline at end of file diff --git a/homework/week-3/newStyle.css b/homework/week-3/newStyle.css deleted file mode 100644 index fb5f2ad5d..000000000 --- a/homework/week-3/newStyle.css +++ /dev/null @@ -1,90 +0,0 @@ -.header { - background-color: #176ab0; - color: white; - text-align: center; - padding: 5px; -} - -#main-content { - width: 350px; - float: left; - padding: 10px; -} - -#footer { - background-color: #176ab0; - color: white; - clear: both; - text-align: center; - padding: 5px; -} - -.badge { - background: grey; - float: right; - color: white; - width: 28px; - height: 28px; - text-align: center; - line-height: 18px; - border-radius: 50%; - padding: 10px; -} - -.flex-wrapper { - font-family: Abel; - background-color: grey; - text-align: left; - padding-top: 25px; - padding-bottom: 25px; - font-size: 20px; - display: flex; - flex-direction: row; - justify-content: center; - background-color: #2E2C2F; - color: #444; -} - -#avatar { - width: 42px; -} - -#repo { - background-color: whitesmoke; - border-color: #2E2C2F; - width: 40%; - border: 5px; - padding: 20px; - margin: 20px; -} - -#contributorsDiv { - background-color: whitesmoke; - border-color: #2E2C2F; - width: 40%; - border: 5px; - padding: 20px; - margin: 20px; -} - -ul { - list-style-type: none; - padding: 10px; -} - -li { - padding: 8px; -} - -@media screen and (max-width: 600px) { - .flex-wrapper { - -webkit-flex-direction: column; - flex-direction: column; - } - #repo { - width: 80%; - } - #contribDiv { - width: 80%; - } -} \ No newline at end of file diff --git a/homework/week-3/style.css b/homework/week-3/style.css index b866c8d80..b10da569a 100644 --- a/homework/week-3/style.css +++ b/homework/week-3/style.css @@ -1,82 +1,118 @@ -.alert-error { - color: red; -} - .header { - background-color: #176ab0; - color: white; - text-align: center; - padding: 5px; + background-color: #176ab0; + color: white; + text-align: center; + padding: 5px; + width: 100vw; } #main-content { - width: 350px; - float: left; - padding: 10px; + float: left; + padding: 10px; +} + +#footer { + background-color: #176ab0; + color: white; + clear: both; + text-align: center; + padding: 5px; } -.footer { - background-color: #176ab0; - color: white; - clear: both; - text-align: center; - padding: 5px; +.badge { + background: grey; + float: right; + color: white; + width: 18px; + height: 18px; + text-align: center; + line-height: 18px; + border-radius: 50%; + padding: 10px; } .flex-wrapper { - font-family: Abel; - text-align: left; - padding-top: 25px; - padding-bottom: 25px; - font-size: 20px; - display: flex; - flex-direction: row; - justify-content: center; - background-color: #2E2C2F; - color: #444; + font-family: Abel; + width: 100vh; + background-color: grey; + text-align: left; + padding-top: 25px; + padding-bottom: 25px; + font-size: 20px; + display: flex; + flex-direction: row; + justify-content: center; + background-color: #2E2C2F; + color: #444; } -#repoInfo { - background-color: whitesmoke; - border-color: #2E2C2F; - width: 40%; - border: 5px; - padding: 20px; - margin: 20px; +IMG { + padding: 20px; + margin: 20px; + width: 250px; + border-radius: 50%; + background-color: whitesmoke; +} + +#container { + background-color: black; + width: 100vw; + display: grid; + grid-template-columns: repeat(2, 1fr); } #repoContributors { - background-color: whitesmoke; - border-color: #2E2C2F; - width: 40%; - border: 5px; - padding: 20px; - margin: 20px; + background-color: #2E2C2F; } -ul { - list-style-type: none; - padding: 10px; +#repoInfo { + background-color: #2E2C2F; +} + +#repoInnerContainer { + background-color: whitesmoke; + border-color: #2E2C2F; + width: 50%; + border: 5px; + padding: 20px; + margin: 20px; + margin-left: 20%; + margin-top: 50px; } -li { - padding: 8px; +#repo { + background-color: green; + border-color: #2E2C2F; + width: 20%; + border: 5px; + padding: 20px; + padding-left: 10%; + margin: 20px; } -img { - width: 80px; - height: auto; +#contribDiv { + background-color: whitesmoke; + border-color: #2E2C2F; + width: 50%; + border: 5px; + padding: 20px; + margin: 20px; +} + +ul { + list-style-type: none; + padding: 10px; } @media screen and (max-width: 600px) { - .flex-wrapper { - -webkit-flex-direction: column; - flex-direction: column; - } - #repo { - width: 80%; - } - #contribDiv { - width: 80%; - } + .flex-wrapper { + -webkit-flex-direction: column; + flex-direction: column; + } + #repo { + width: 80%; + } + #contribDiv { + width: 80%; + } } \ No newline at end of file From 8d40a9d6198cab026d41e0d425ce7146bbb5561e Mon Sep 17 00:00:00 2001 From: Catsudemo Date: Mon, 6 Apr 2020 11:30:39 +0200 Subject: [PATCH 9/9] Updated Homework --- .DS_Store | Bin 0 -> 10244 bytes Week2/.DS_Store | Bin 0 -> 6148 bytes apps/.DS_Store | Bin 0 -> 6148 bytes homework/.DS_Store | Bin 0 -> 8196 bytes homework/App.js | 81 ------------------- homework/Contributor.js | 19 ----- homework/Repository.js | 33 -------- homework/Util.js | 1 + homework/hyf.png | Bin 6971 -> 0 bytes homework/index.html | 37 --------- homework/index.js | 138 -------------------------------- homework/index2.html | 27 ------- homework/newStyle.css | 65 --------------- homework/style.css | 3 - homework/week-2/repoSelector.js | 105 ++++++++++++++++++++++++ homework/week-3/.DS_Store | Bin 0 -> 6148 bytes package.json | 11 ++- 17 files changed, 116 insertions(+), 404 deletions(-) create mode 100644 .DS_Store create mode 100644 Week2/.DS_Store create mode 100644 apps/.DS_Store create mode 100644 homework/.DS_Store delete mode 100644 homework/App.js delete mode 100644 homework/Contributor.js delete mode 100644 homework/Repository.js delete mode 100644 homework/hyf.png delete mode 100644 homework/index.html delete mode 100644 homework/index.js delete mode 100644 homework/index2.html delete mode 100644 homework/newStyle.css delete mode 100644 homework/style.css create mode 100644 homework/week-2/repoSelector.js create mode 100644 homework/week-3/.DS_Store diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..29e0d587de1c5142c2a1d6425df101c81ff33cd2 GIT binary patch literal 10244 zcmeI1Pfr_16u{pQQg#a|3xN>S99Bh@B867|Lqeq}ieo^nmA1GT5fDk8-SuF$taq&4 z1s5olFZlquwUzn-ddeZke1Y~8^i=gDv{Fw!wQpwD_OdprR7EX9GuF;~`{unF=I5D# zHvj-B?$@#aCID#oaA}NTHK6cz{`8fh*fNWfU_6vO=GY#y@!jb2Rt7~t5l{pa0YyL& zI1dEycQ!BDsFbQ!1QY>9pi6+C4<&K!sg$M!<(-*U&QM64co0*#11U(UYDGX1=qJE) z_hGQ0iJvf)zu(2Sn}3NS0=s^8D{RJj{!ez(bHgZ;`I!t|8ovC-h^A?y+7<0dWtX)o zkrnNSMJw3mZ)GdmwPSsqF|Vsz_J&JaRby(2`H|)NG!VgVjiSrrN3LIEts>j^YoX|; zA{%sF*Yv7!{rEV4dtu(pXR{~s=JDcUX5L)L-#IzawV8Lb_exJ2heyX>oqYYRoI8on z4;Yv4-TFJ!x)VI81ir`oI@-9u2D`wZ0Tfy&1K3M}`T>2Cp!)pJ8L$r)=gnL$!+B-1 zIfQrTcK%-h>zimTbUYis+kwYYI(Fr)absfg>crH<^z`(# znd$4Zvu{_8tG4Cr)dRi+mYBzaqPI`C>w#OVG%d&V>zfh%GOD;ov}#PIT-Rvr^PXw_ zu!%lXJ%i}(!+=s>^tZaR6Vhn2YK(_Yz&x+aLN{`mzm;g+dK}_nE=9Ca@^=`Hcz}y{ zwaMMW4H|?f`{FmZtRS%bIxQYP@hqEqtA3G15o>Ty-kZbxazJ@cn=a~nE_3&P$7O|O zuJEv<+?0v|b5g;jX^?fF`Bc~E3gy_S!7X?IpTGv}!4W)%@8Jc!f*;`*_znIfBV?Am zLvE1;a*y06ACVGyNXq0hvL>U4IveChX9y|DHp;&5JGD_p;A1Gk60E?dP=S@x+l0(u z56NvZfoF~d4*rxD)NymY2Oe%O{{B9E0U_#ss)uK(9>!8VoE7&+DsB?v0vs{IkBc(E z5gk4r?BIJ{j(>V=;HTj?iPKPrHJs-ISVqz-7}0=QDuN#i$%xDF2*;v0zwBvGLFNq4 zb9QvRwzD)r^xijhIQ}p=W7)&pJ@#*C| z^bi8{pypHbc&jRkfFhs>C<2PW#UOA=PQ&E)|0`$z|Nml4R?R{YPy_}NAj8X*U%rrAW70--eU0TfaOrAmJtZ{d|>#x^L&k(L6DC3|+g zp4+=A&bww-mWS<~+1$)#aH734jE(E`kzHhlSo|4lTiLC>+4f;Ks{TDe?xn45VUOUR z@b|Bq-F|~rzS=$f=F<%$GM-Squ%N~B@zcL`w4c}wgAu>vbW1qQX`6{7?l`I>btu@4No72g@p z$(>8yP>S!4eD!iGEl^PkNP(dOlbFug|5xxc_x~YDGbtbi{*?k{+C6tmd{Xw-(Z{jZ rR`?72%TVj(2!lfaCTzvmCv}x$)V0Ju(CNrK9jJo4mq0D^=T8f`X4ZMqedqWlK@ z5nsUPz>Mu8P=O;Bv(cu{G(fE+4e?d1*bb5g?{1iSLKN2&*416yGbUr9lLf>I-(HtE(m=*xBh;Acj)2|}sD2Kko+#=4P2%Cy% zQ-y0WgiS}ka&f-H+@ehf;hGQO?krq~BFx=!ePzNy_!fC&2AF}j3{dZfQlk35^Kt)g zf_PvCn1TP30a4rzwi~!NS6e4`Nwrp?o}!XaTyF6t1r1Y*F_ubk8Py2-6&Z-W!`vcz QQ20l{(7*#T@TCkq1FT_WxBvhE literal 0 HcmV?d00001 diff --git a/homework/.DS_Store b/homework/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..ac7a66e0e958bb53d31581924d918f71a57b6734 GIT binary patch literal 8196 zcmeHMO-~a+7=8y)wj#192t*GXiHQklXzN#EjJ4oLLk!g-LO|Im6i`L#*i@6%sjL6e(dzwd1v}=0e~dS`6$2u z0BBe_>YdnZQn;Mg4W&(v=!gXE0Zzk1@KX-USdz_PN@6QDmk_vjE;UHZF}1H z?(5JrtyAmL?qwEPB@>uI*-x6@9KTAN!J;MmQ;a!{zG+R{w35|($Cw+KwoARx*v?Z_ znZIkhc~(iXvYYoqKN%s2L?T)ws}EGG7tW6uvDoO^h*6D3V`oN;b7$jgYZ0ygMD$YX zL2+fZ`grZh^YAMJk-H9bi|a=F0((t_IE82?$BLzfMvJ`2#>eyJAP4Z-zxK52TdRGM z<+qiW7Pt4ml<{1Lxdrsg=e&My@#cp`I#3?l;$g*i!^4W(xh1(G$-DZB{Hp8qH5u98 zd7$fHx88H;a8GYfUtiym{=R|1!J}FIuw~{R6+FJW#+bvrq*JDI1<%fBN@mV>3o`*- z4l?#C&FY6*RBzM#{XaufD<#zF{WB1{yY5lyhW;iO7JM4aWc6-8=P}1gGv5wu=FYB@ z&d&Q7C#irIQ|g4DkH_>elc7ci61ebQA-Mfq%&W zX&=vwC(&d5q-}N1b8Q3b1FXDoy_&$#1RJix$HR0SvGIo?_6;dZNURA&36}r element - - const root = document.getElementById('root'); - - Util.createAndAppend('h1', root, { text: 'It works!' }); // TODO: replace with your own code - - try { - const repos = await Util.fetchJSON(url); - this.repos = repos.map(repo => new Repository(repo)); - // TODO: add your own code here - } catch (error) { - this.renderError(error); - } - } - - /** - * Removes all child elements from a container element - * @param {*} container Container element to clear - */ - static clearContainer(container) { - while (container.firstChild) { - container.removeChild(container.firstChild); - } - } - - /** - * Fetch contributor information for the selected repository and render the - * repo and its contributors as HTML elements in the DOM. - * @param {number} index The array index of the repository. - */ - async fetchContributorsAndRender(index) { - try { - const repo = this.repos[index]; - const contributors = await repo.fetchContributors(); - - const container = document.getElementById('container'); - App.clearContainer(container); - - const leftDiv = Util.createAndAppend('div', container); - const rightDiv = Util.createAndAppend('div', container); - - const contributorList = Util.createAndAppend('ul', rightDiv); - - repo.render(leftDiv); - - contributors - .map(contributor => new Contributor(contributor)) - .forEach(contributor => contributor.render(contributorList)); - } catch (error) { - this.renderError(error); - } - } - - /** - * Render an error to the DOM. - * @param {Error} error An Error object describing the error. - */ - renderError(error) { - console.log(error); // TODO: replace with your own code - } -} - -const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; - -window.onload = () => new App(HYF_REPOS_URL); diff --git a/homework/Contributor.js b/homework/Contributor.js deleted file mode 100644 index 0bfd5a15e..000000000 --- a/homework/Contributor.js +++ /dev/null @@ -1,19 +0,0 @@ -'use strict'; - -/* global Util */ - -// eslint-disable-next-line no-unused-vars -class Contributor { - constructor(contributor) { - this.contributor = contributor; - } - - /** - * Render the contributor info to the DOM. - * @param {HTMLElement} container The container element in which to render the contributor. - */ - render(container) { - // TODO: replace the next line with your code. - Util.createAndAppend('pre', container, JSON.stringify(this.contributor, null, 2)); - } -} diff --git a/homework/Repository.js b/homework/Repository.js deleted file mode 100644 index 267960a5a..000000000 --- a/homework/Repository.js +++ /dev/null @@ -1,33 +0,0 @@ -'use strict'; - -/* global Util */ - -// eslint-disable-next-line no-unused-vars -class Repository { - constructor(repository) { - this.repository = repository; - } - - /** - * Render the repository info to the DOM. - * @param {HTMLElement} container The container element in which to render the repository. - */ - render(container) { - // TODO: replace the next line with your code. - Util.createAndAppend('pre', container, JSON.stringify(this.repository, null, 2)); - } - - /** - * Returns an array of contributors as a promise - */ - fetchContributors() { - return Util.fetchJSON(this.repository.contributors_url); - } - - /** - * Returns the name of the repository - */ - name() { - return this.repository.name; - } -} diff --git a/homework/Util.js b/homework/Util.js index 981fea47a..a0c0245ed 100644 --- a/homework/Util.js +++ b/homework/Util.js @@ -17,6 +17,7 @@ class Util { } static fetchJSON(url) { + return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.open('GET', url); diff --git a/homework/hyf.png b/homework/hyf.png deleted file mode 100644 index a4626c91cc28dd92f3a8843aa3919c472d609984..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 6971 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

yYR!c>hm$${Gy*N9&8XDjZ!65Rw_ciO4 z0&aFLEIenv__Nv_t*>({#yj`xE&E==WFBy2C{3B&xkGWnzEKCWENz0#Jwmk4zVlFkwA zUE)Mh&#vxEf;BeYy)nJloYs7`DnyjD`0Y^YQxyIS4d+#4vCtj@wK(UEa7cSZ{%+_S zF5bPJcnZ{2mGzB;1m2r>)!K>%2Gu6MG)9*tE%!%>7iF8elLW^N_ATFxu1g9EHe#TP zioN@YLEDN*VPJ4@2<(Btz*yzfz(+*aind)cZ;In-Ma_C>M7IU7bV^BSGjy@pn_Oiy zl(>YaYv~ZLZ6?2| zypqx#xM_@it9|v)xZLTBUY$2}F#h#dZw(FfZMj~GCAIsW9-ejAu^{m6fGn&mwBazA z$4SkC7#JSJ5ORgz?e8Za7blKG zizmAOF6s_0y+`YkEtdk66Bg{o)5UJp?R6bosX}uWa5r9Z;`c2J>xic=TTI`dXBr*WBCNn29fqV6ysrW=%FRy~JIbo7vs+uqhLB(6-tKNnYKpCmouZ+D4Ut!foH9vbFwA+LF zI7vtr2nkSgSy6J!bGN8T54?{ONFInoHx(5ujzh>RfnKf&aCZm;~Lq@38Pp8iO=Vl3`;QmS7? z>df*6iV+(X9gIBIsiWyB&yQYTtgLi&bp8{}c6k5psn*E*JjN>kJ>x?S?L9m?e5`+Yb*8W^Xi^TEM;a8OWq*Wp?nQa`5QB q{eMOe|IHi!$Di^1?!}AeXDJlZH8z|Z3FM~O3k6wKnM$dzKmQAHWO%^< diff --git a/homework/index.html b/homework/index.html deleted file mode 100644 index e02fbf88e..000000000 --- a/homework/index.html +++ /dev/null @@ -1,37 +0,0 @@ - - - - - - - - - - - - Codestin Search App - - - - - -

-
- -
-
-
-
- Repo facts -
-
- Contributors -
-
-
- - - diff --git a/homework/index.js b/homework/index.js deleted file mode 100644 index a61a87e3b..000000000 --- a/homework/index.js +++ /dev/null @@ -1,138 +0,0 @@ -'use strict'; - -const repoSelector = document.querySelector('#repoSelect'); -const contribDiv = document.querySelector('#contribDiv'); -const repoDiv = document.querySelector('#repo'); - -function fetchJSON(url, cb) { - const xhr = new XMLHttpRequest(); - xhr.open('GET', url); - xhr.setRequestHeader = 'Catsudemo https://api.github.com'; - xhr.responseType = 'json'; - xhr.onload = () => { - if (xhr.status < 400) { - cb(null, xhr.response); - } else { - cb(new Error(`Network error: ${xhr.status} - ${xhr.statusText}`)); - } - }; - xhr.onerror = () => cb(new Error('Network request failed')); - xhr.send(); -} - -function createAndAppend(name, parent, options = {}) { - const elem = document.createElement(name); - parent.appendChild(elem); - Object.keys(options).forEach(key => { - const value = options[key]; - if (key === 'text') { - elem.textContent = value; - } else { - elem.setAttribute(key, value); - } - }); - return elem; -} - -function initPage(data, repoSelector) { - buildSelect(data, repoSelector); -} - -function buildSelect(data, repoSelector) { - data - .map(repo => repo.name) - .sort() - .forEach(name => { - createAndAppend('OPTION', repoSelector, { text: name, value: name }); - }); -} - -function main(url) { - fetchJSON(url, (err, data) => { - const root = document.getElementById('root'); - if (err) { - createAndAppend('div', root, { text: err.message, class: 'alert-error' }); - } else { - // createAndAppend('pre', root, { text: JSON.stringify(data, null, 2) }); - // buildSelect(data,repoSelector) - initPage(data, repoSelector); - } - }); -} - -const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; - -function displayContrib(contributor, contributions, avatar) { - const eachPersonUl = document.createElement('ul'); - const contributorName = document.createElement('li'); - contributorName.innerText = `Username: ${contributor}`; - eachPersonUl.appendChild(contributorName); - const eachContributions = document.createElement('li'); - eachContributions.innerText = `Contributions: ${contributions}`; - eachPersonUl.appendChild(eachContributions); - contribDiv.appendChild(eachPersonUl); - const eachAvatar = document.createElement('IMG'); - eachAvatar.innerhtml = ``; - contribDiv.appendChild(eachAvatar); -} - -function displayRepo(repository, description, forks, updated) { - const eachRepoUl = document.createElement('ul'); - const eachName = document.createElement('li'); - eachName.innerText = `Repository: ${repository}`; - eachRepoUl.appendChild(eachName); - const eachDescription = document.createElement('li'); - eachDescription.innerText = `Contributions: ${description}`; - eachRepoUl.appendChild(eachDescription); - const eachForks = document.createElement('li'); - eachForks.innerText = `Forks: ${forks}`; - eachRepoUl.appendChild(eachForks); - const eachUpdated = document.createElement('li'); - eachUpdated.innerText = `Updated: ${updated}`; - eachRepoUl.appendChild(eachUpdated); - repoDiv.appendChild(eachRepoUl); -} - -const selectElement = document.querySelector('.selector'); - -selectElement.addEventListener('change', event => { - const result = document.querySelector('.result'); - let repo = document.getElementById('repoSelect').value; - let repoURL = `https://api.github.com/repos/HackYourFuture/${repo}`; - let contribURL = `https://api.github.com/repos/HackYourFuture/${repo}/contributors`; - - main(HYF_REPOS_URL); - - fetchJSON(repoURL, (err, data) => { - const root = document.getElementById('root'); - if (err) { - createAndAppend('div', root, { text: err.message, class: 'alert-error' }); - } else { - repoDiv.innerHTML = ''; - let repository = data.name; - let description = data.description; - let forks = data.forks; - let updated = data.updated_at; - displayRepo(repository, description, forks, updated); - } - console.log('Here is the repodata'); - }); - - fetchJSON(contribURL, (err, data) => { - const root = document.getElementById('root'); - if (err) { - createAndAppend('div', root, { text: err.message, class: 'alert-error' }); - } else { - contribDiv.innerHTML = ''; - data.forEach(object => { - let contributor = object.login; - let contributions = object.contributions; - let avatar = object.avatar_url; - displayContrib(contributor, contributions, avatar); - }); - console.log('Here is the contribdata'); - } - }); -}); - -window.onload = () => main(HYF_REPOS_URL); diff --git a/homework/index2.html b/homework/index2.html deleted file mode 100644 index 2d1fc8fa7..000000000 --- a/homework/index2.html +++ /dev/null @@ -1,27 +0,0 @@ - - - - - - - - - - - - Codestin Search App - - - - - -
- - - - - - diff --git a/homework/newStyle.css b/homework/newStyle.css deleted file mode 100644 index a2747f023..000000000 --- a/homework/newStyle.css +++ /dev/null @@ -1,65 +0,0 @@ -.header { - background-color: #176ab0; - color: white; - text-align: center; - padding: 5px; -} - -#main-content { - width: 350px; - float: left; - padding: 10px; -} - -#footer { - background-color: #176ab0; - color: white; - clear: both; - text-align: center; - padding: 5px; -} - -.flex-wrapper { - font-family: Abel; - background-color: grey; - text-align: left; - padding-top: 25px; - padding-bottom: 25px; - font-size: 20px; - display: flex; - flex-direction: row; - justify-content: center; - background-color: #2E2C2F; - color: #444; -} - -#repo { - background-color: whitesmoke; - border-color: #2E2C2F; - width: 40%; - border: 5px; - padding: 20px; - margin: 20px; -} - -#contribDiv { - background-color: whitesmoke; - border-color: #2E2C2F; - width: 40%; - border: 5px; - padding: 20px; - margin: 20px; -} - -@media screen and (max-width: 600px) { - .flex-wrapper { - -webkit-flex-direction: column; - flex-direction: column; - } - #repo { - width: 80%; - } - #contribDiv { - width: 80%; - } -} \ No newline at end of file diff --git a/homework/style.css b/homework/style.css deleted file mode 100644 index a8985a8a5..000000000 --- a/homework/style.css +++ /dev/null @@ -1,3 +0,0 @@ -.alert-error { - color: red; -} \ No newline at end of file diff --git a/homework/week-2/repoSelector.js b/homework/week-2/repoSelector.js new file mode 100644 index 000000000..5ddbf3675 --- /dev/null +++ b/homework/week-2/repoSelector.js @@ -0,0 +1,105 @@ +'use strict'; +const repoSelector = document.querySelector('#repoSelect'); +const contribDiv = document.querySelector('#contributorsDiv'); +const repoDiv = document.querySelector('#repo'); +const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; +//fetch the data from the URL and convert to json +// create the select element and populate with options. These should be the name of the repos in the json. +// when the user changes the selector go to the URL for that repo and get the json +// create a ul showing relevant data +// go to the URL of each contributor in the repo and fetch the data +// create a ul showing relevant data +function createAndAppend(name, parent, options = {}) { + const elem = document.createElement(name); + parent.appendChild(elem); + Object.keys(options).forEach(key => { + const value = options[key]; + if (key === 'text') { + elem.textContent = value; + } + else { + elem.setAttribute(key, value); + } + }); + return elem; +} +function buildSelect(data, repoSelector) { + data + .map(repo => repo.name) + .sort() + .forEach(name => { + createAndAppend('OPTION', repoSelector, { text: name, value: name }); + }); +} +function main(url) { + fetch(url) + .then(response => { + if (response.ok) + return response; + throw new Error(response.statusText); + }) + .then(response => response.json()) + .then(json => buildSelect(json, repoSelector)) + .catch(error => createAndAppend('div', root, { text: error, class: 'alert-error' })); +} +//ul contribDiv +function displayContrib(contributor, contributions, avatar) { + // createAndAppend(ul, contribDiv, { id = }) + let eachPersonUl = createAndAppend('ul', contribDiv); + createAndAppend('IMG', eachPersonUl, { src: avatar, width: "42", id: 'avatar' }); + createAndAppend('li', eachPersonUl, { class: "badge", id: 'contbadge', text: `${contributions}` }); + createAndAppend('li', eachPersonUl, { text: `${contributor}` }); + // createAndAppend('li', eachPersonUl, { text: `Contributions: ${contributions}`, id: 'contributionNumber' }) +} +function displayRepo(repository, description, forks, updated) { + let eachRepoUl = createAndAppend('ul', repoDiv); + createAndAppend('li', eachRepoUl, { text: `Repository: ${repository}` }); + createAndAppend('li', eachRepoUl, { text: `Description: ${description}` }); + createAndAppend('li', eachRepoUl, { text: `Forks: ${forks}` }); + createAndAppend('li', eachRepoUl, { text: `Updated: ${updated}` }); +} +function displayPage(repoURL, contribURL) { + fetch(repoURL) + .then(response => { + if (response.ok) + return response; + throw new Error(response.statusText); + }) + .then(response => response.json()) + .then(data => { + repoDiv.innerHTML = ''; + let repository = data.name; + let description = data.description; + let forks = data.forks; + let updated = data.updated_at.split("T", 1); + displayRepo(repository, description, forks, updated); + }) + .catch(error => createAndAppend('div', root, { text: error, class: 'alert-error' })); + fetch(contribURL) + .then(response => { + if (response.ok) + return response; + throw new Error(response.statusText); + }) + .then(response => response.json()) + .then(data => { + contribDiv.innerHTML = ''; + data.forEach(object => { + let contributor = object.login; + let contributions = object.contributions; + let avatar = object.avatar_url; + displayContrib(contributor, contributions, avatar); + }); + console.log('Here is the contribdata'); + }) + .catch(error => createAndAppend('div', root, { text: error, class: 'alert-error' })); +} +const selectElement = document.querySelector('.selector'); +selectElement.addEventListener('change', event => { + let repo = document.getElementById('repoSelect').value; + let repoURL = `https://api.github.com/repos/HackYourFuture/${repo}`; + let contribURL = `https://api.github.com/repos/HackYourFuture/${repo}/contributors`; + main(HYF_REPOS_URL); + displayPage(repoURL, contribURL); +}); +window.onload = () => main(HYF_REPOS_URL); diff --git a/homework/week-3/.DS_Store b/homework/week-3/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..5bd0cb4b3a900eabaa0965102a1da4056086e252 GIT binary patch literal 6148 zcmeHKyH3L}6g>`AX+c!oV9dx=iJ2voGO)rAKwBuF&_tw_=$3_nKj0Vm8oq>y4}f!R ztI7+pA%yO&u8-~9<7=O!aSXr=m(v5F51>OA47w~DOsPQQm^B$#7?2i#(eC2I-mP2ATCw~ZOD7~c?U zb{YFp$g_zXtZ>cPl-Xv5r;4+((ZyM9aV~RAIr<|RH_UO5xWaj=%%)S~)K(t6RpNVv z_zV-f{jva@k1L96FJmU6;K7r3T(J$U-ti# z@6Z2blD1RduwfRve$<63%Z!ZrR_s>HSlNpA=+@XDN`)AC T%pJ0arXK=U1}#*9Usd1>3j>Px literal 0 HcmV?d00001 diff --git a/package.json b/package.json index fd3398c5b..ebbf8978c 100644 --- a/package.json +++ b/package.json @@ -18,5 +18,14 @@ "eslint-plugin-prettier": "^3.0.0", "eslint-plugin-react": "^7.11.1", "prettier": "^1.15.2" - } + }, + "main": "prettier.config.js", + "repository": { + "type": "git", + "url": "git+https://github.com/Catsudemo/JavaScript3.git" + }, + "bugs": { + "url": "https://github.com/Catsudemo/JavaScript3/issues" + }, + "homepage": "https://github.com/Catsudemo/JavaScript3#readme" }