Make a new friend

From 6a4ffd33c2b476d7984ab1a21928ac910f58046a Mon Sep 17 00:00:00 2001 From: Jalal Al Attar Date: Sun, 26 Jan 2020 00:00:30 +0100 Subject: [PATCH 1/3] all exercises for J3 W1 and the broject is not complete yet .. I will complete it on Monday --- Week1/HomeWork/js-exercises/ex-1.html | 14 +++++++ Week1/HomeWork/js-exercises/ex-1.js | 42 ++++++++++++++++++++ Week1/HomeWork/js-exercises/ex-2.html | 14 +++++++ Week1/HomeWork/js-exercises/ex-2.js | 47 +++++++++++++++++++++++ Week1/HomeWork/js-exercises/ex-3.html | 18 +++++++++ Week1/HomeWork/js-exercises/ex-3.js | 55 +++++++++++++++++++++++++++ 6 files changed, 190 insertions(+) create mode 100644 Week1/HomeWork/js-exercises/ex-1.html create mode 100644 Week1/HomeWork/js-exercises/ex-1.js create mode 100644 Week1/HomeWork/js-exercises/ex-2.html create mode 100644 Week1/HomeWork/js-exercises/ex-2.js create mode 100644 Week1/HomeWork/js-exercises/ex-3.html create mode 100644 Week1/HomeWork/js-exercises/ex-3.js diff --git a/Week1/HomeWork/js-exercises/ex-1.html b/Week1/HomeWork/js-exercises/ex-1.html new file mode 100644 index 000000000..e8ed8671d --- /dev/null +++ b/Week1/HomeWork/js-exercises/ex-1.html @@ -0,0 +1,14 @@ + + + + + + Make a new friend + + + + + + + + \ No newline at end of file diff --git a/Week1/HomeWork/js-exercises/ex-1.js b/Week1/HomeWork/js-exercises/ex-1.js new file mode 100644 index 000000000..a54721c5a --- /dev/null +++ b/Week1/HomeWork/js-exercises/ex-1.js @@ -0,0 +1,42 @@ +'use strict'; + +// inside the same file write two functions: +// one with XMLHttpRequest() + +const button = document.querySelector('#btn'); + +const serverRequest = () => { + const xhr = new XMLHttpRequest(); + + xhr.responseType = 'json'; + + xhr.onreadystatechange = () => { + if (xhr.readyState === XMLHttpRequest.DONE) { + console.log(xhr.response); + } else { + console.error(); + } + }; + xhr.open('GET', 'https://www.randomuser.me/api'); + xhr.send(); +}; + +button.addEventListener('click', serverRequest); + +// and the other with : +// axios + +const axiosRequest = () => { + + axios.get('https://www.randomuser.me/api') + + .then(function(response) { + console.log('this apparently was seccesfull',response.data); + }) + .catch(function(error) { + console.log('there are some errors',error); + }) + .finally(function(){ + console.log('let me know what happend') + }) +}; \ No newline at end of file diff --git a/Week1/HomeWork/js-exercises/ex-2.html b/Week1/HomeWork/js-exercises/ex-2.html new file mode 100644 index 000000000..25a9c827a --- /dev/null +++ b/Week1/HomeWork/js-exercises/ex-2.html @@ -0,0 +1,14 @@ + + + + + + Programmer humor + + + + + + + + \ No newline at end of file diff --git a/Week1/HomeWork/js-exercises/ex-2.js b/Week1/HomeWork/js-exercises/ex-2.js new file mode 100644 index 000000000..89bf3c8a4 --- /dev/null +++ b/Week1/HomeWork/js-exercises/ex-2.js @@ -0,0 +1,47 @@ +'use strict'; + +// one with XMLHttpRequest + +const humorRequest = () => { + const xhr = new XMLHttpRequest(); + + const img = document.querySelector('#img'); + + xhr.responseType = 'json'; + + xhr.onreadystatechange = () => { + if (xhr.readyState === XMLHttpRequest.DONE) { + console.log(xhr.response); + img.setAttribute('src', xhr.response.img); + } else { + console.error(); + } + }; + xhr.open('GET', 'https://xkcd.now.sh/?comic=614 '); + xhr.send(); + }; + + humorRequest(); + +// and the other with : +// axios + + const requestHumor = () => { + + const img = document.querySelector('#img'); + + axios + .get('https://xkcd.now.sh/?comic=614') + + .then(function(response) { + console.log('this apparently was seccesfull',response); + img.setAttribute('src', response.data.img); + }) + .catch(function(error) { + console.log('there are some errors', error); + }) + .finally(function(){ + console.log('let me know what happend') + }) + }; + requestHumor(); \ No newline at end of file diff --git a/Week1/HomeWork/js-exercises/ex-3.html b/Week1/HomeWork/js-exercises/ex-3.html new file mode 100644 index 000000000..fbeff0300 --- /dev/null +++ b/Week1/HomeWork/js-exercises/ex-3.html @@ -0,0 +1,18 @@ + + + + + + Dog photo gallery + + + +

+ + + + + + + + \ No newline at end of file diff --git a/Week1/HomeWork/js-exercises/ex-3.js b/Week1/HomeWork/js-exercises/ex-3.js new file mode 100644 index 000000000..92311e3d8 --- /dev/null +++ b/Week1/HomeWork/js-exercises/ex-3.js @@ -0,0 +1,55 @@ + +'use strict'; + +// one with XMLHttpRequest() + +const btnNormal = document.querySelector('#normal'); + +const randomDogNormal = () => { + const xhr = new XMLHttpRequest(); + const ul = document.querySelector('#ulList'); + + xhr.responseType = 'json'; + + xhr.onreadystatechange = () => { + if (xhr.readyState === XMLHttpRequest.DONE) { + const li = document.createElement('li'); + const img = document.createElement('img'); + img.setAttribute('src', xhr.response.message); + li.appendChild(img); + ul.appendChild(li); + } else { + console.log(`${xhr.status}`); + } + }; + + xhr.open('GET', 'https://dog.ceo/api/breeds/image/random'); + xhr.send(); +}; +btnNormal.addEventListener('click', randomDogNormal); + +// and the other with : +// axios + +const btnAxios = document.querySelector('#axios'); + +const randomDogAxios = () => { + const ul = document.querySelector('#ulList'); + + axios.get('https://dog.ceo/api/breeds/image/random') + + .then(function(response) { + const li = document.createElement('li'); + const img = document.createElement('img'); + img.setAttribute('src', response.data.message); + li.appendChild(img); + ul.appendChild(li); + }) + .catch(function(error) { + console.log('there are some errors', error); + }) + .finally(function(){ + console.log('let me know what happend') + }) +}; +btnAxios.addEventListener('click', randomDogAxios); \ No newline at end of file From 1dcd8174f2bb9a121e70d466ad56ba5fe0940104 Mon Sep 17 00:00:00 2001 From: Jalal Al Attar Date: Sun, 26 Jan 2020 12:24:18 +0100 Subject: [PATCH 2/3] changed name of js file --- Week1/HomeWork/js-exercises/ex-3.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Week1/HomeWork/js-exercises/ex-3.html b/Week1/HomeWork/js-exercises/ex-3.html index fbeff0300..915473392 100644 --- a/Week1/HomeWork/js-exercises/ex-3.html +++ b/Week1/HomeWork/js-exercises/ex-3.html @@ -13,6 +13,6 @@ - + \ No newline at end of file From 82d767b0868d056b0be74ba32d5acbeb0a049e19 Mon Sep 17 00:00:00 2001 From: Jalal Al Attar Date: Sat, 1 Feb 2020 23:14:06 +0100 Subject: [PATCH 3/3] Project j3 w1 --- .../js-exercises/Project j3 w1/HYF.png | Bin 0 -> 6587 bytes .../js-exercises/Project j3 w1/index.html | 18 ++++ .../js-exercises/Project j3 w1/index.js | 81 ++++++++++++++++++ .../js-exercises/Project j3 w1/style.css | 57 ++++++++++++ 4 files changed, 156 insertions(+) create mode 100644 Week1/HomeWork/js-exercises/Project j3 w1/HYF.png create mode 100644 Week1/HomeWork/js-exercises/Project j3 w1/index.html create mode 100644 Week1/HomeWork/js-exercises/Project j3 w1/index.js create mode 100644 Week1/HomeWork/js-exercises/Project j3 w1/style.css diff --git a/Week1/HomeWork/js-exercises/Project j3 w1/HYF.png b/Week1/HomeWork/js-exercises/Project j3 w1/HYF.png new file mode 100644 index 0000000000000000000000000000000000000000..bd27a0444adbe29e9ce557107950df4326994180 GIT binary patch literal 6587 zcmeHM=RX_X+tx*EeC^$!tyQT}dn>IOt2Mu7?GmG6mBcPeZCWH&jo7hAB&9_uwMT49 z2@-qPeDeDPp6A`~-Sgslan6hToXR8M6=vX`WZ#~J@!T-{fBbjPAirXRT=C!-@1)Uvwz;pl zDrFmbUT?K@N;dTOK!7f(-s^g`pn!52S$nnpkwyR2aP+T?G_S5=;FyK5aQ9@76Qm}i zIqBoak5#d;UmCC`Q>Lb-Ik`5e>DjET84LWWH7C~Xo`YfvK>t9H&#XY+r5S2Bpgn<2 zc`kY?8uU_I#>+);%wip^NIBZ2T{zI6FtvIo&}mamL7^hqkbBu%KezSAkuZKJ?^|O= zI%x@URZ6Non>xv^$;nS&d%qbjP7DlA40vv1^9kkA>+37eV;ndU@2!dPoNG&XyP<{V zFKy~5Ud8^CDAp3X+2pL33^7c5bNS8{?Ed+RQFYuhe8*OEGH}Nq3jsD&z#aC4?W$$j5`XgOl&H_047aIu?&=9t3Q~R`iiu=2L?PB+f-c3Mvcq#5T7%%==DdaJKYyU9x7<& zpFQ|eOnqn*T-$S%PP1E$73BH>aZ5H~6@6kIBh{ zAgduEDE2HqYfwiAOiA(H&@@}Ls|T~XhDM&U52m;{!Hx|K9BXXPQS!mbqTP=C2GD); z6WHq^+w;?wnqTS<_h!9z2Kt3e@I3j>k*o1cbg~iFnQ+tH-ysh$uq!MNnnAPVft99y zsG;xSl$2{+ZZ_PFqxt&WagtKa&T{4ZI;+ja`f$pW=d7IF#m{?;8uT&%6@Qw?%T*z7 zHR_t4USGD#L87)jvxjg~(F#*^dG*Cemb+Z0wGz%dum2FYU@BkDO_wFJCA4Hb6_bG} z4b5hz<8aH&Ic!$Q-tzqDXb@;N?1fUsrHME-1%aM<^&O`v;xOrBUfrWmGx_Etp`n!1OUBM)%57uAO zV0M>_q2)-e+Tveof?PDEoTsY$Z<|lzeQ8JQAXd>UiN1_Vnu6uJPeef{JN z<`eX)(k;qAG&lc}9L>A+J2srVh`xwP3C#;NcwWD?5ZY%HS#= zs4!9}vz@A1{2ZCbw6?xH`;qhhiG36^u*1(U?<&Ls9%a?jEGB^*>ED*4ZvMBjhA98W zQ03j!Fy|vp*>^#yLs}UBugG_{RG_r{Zz;{o6712Bfz`EqG_cof-P1ps_#2<0#C+?_ zY-|GAH;&6>a95uC5FJ(3rAMtXQ42&0RiU3i%jPQ(y5p};WJ{1n05eCyo8cGD8VUaC zgmS0_$C%r`vzpI8Gq@G}hG+2+JI6Xb zMS;-J}lV}#>dJ1V-_7ZSo zB)!zMdOde{3%eUjU$BQohm*ph1S0Kjd)VdRv#aa7#CgA*Ln8$*{o#cjQK!|ro;^;w z@J;nf76t-xw;G`ewetpn1jKrQd9TS&mTMk zkVBG9+nDs9h(3Y&Zk+|AJF+CYr)MqefudGSuv4wd8k58Cnmxyx3vXrvBM3LX)NFkV z2lh=GKn>Hgvt|6B1fGroD_nTAu;Q;HS9XYm6?f2_@6uWqqe^!#Ghu^(veLerTU-16 z=gY*hvO687Bir+=(jGQ_+rkS~B(6MJ_*e7lEMROm2hjd85nQ5TLTe2G^QRz4;@l zXOZOY$%^y6oiRdO6Zm8#pN^g|T?%s0o{irgS6{39)NBlgx>PJV(AQx1@L2Y0m%Bca zS^HEeDzI-TImz$E&5F%iO$uk{Wps!PduFhVJRLkyb0_Wl^8CF7bEnug*Rj8~XF^;Y zaPhQr(l*#n#B!=~pn~Y(Vl8>6yYS*-YhQmlHuZ^tZl1FL-_h^NQgTTVhbu+Cf~}t#N(%?*4x*?c zFrRhr9e6*iq8l+>#JcQ^_0~G;a$?+$4wb=`@Ju*I@NsqHjD;JV4ef&aDle1ia8;uk zVXJD-hTna#ukE^2;8LjS*U-o+OwDhKVe_kQ+|p(W#^%VlTTQtP7y|=nF%uO?*H-5F zUCuw{8~kq=b|QQ)Vu)Q)uQs=;G?O6dApjP_AEM@|7ueNRDR6(|?f8ceWItro6KLM6 z3reaRngTe}bnYt%Hafa~;OoinRQ3~4CUy+Pj)um@%5~VX@H-xudXAii$7vdD6?LT^ zXRfC+154^;JmzY4PpY@<*_;Qn_qu{ruGU+8kz8QV*mQlbUy)G?>?kjt=5e5`CO_7gsx`r^Iy42 zFRd&E;svUOEA%7k2%Fc|NQ>_A_zN|!8yT_wa*&MYHvU_v!37-g|H8Kl^W7V$I@)qO$Qnp8(Bm$S9D5>4PH5ZxodnBeZRy(3lz1 z8=E-1iUh~)$9GMc=a}eWwQ_h)#lKX_ zS1S|?w&EwkHWaaTnYSq91lm9Q-<>(RbV7F!RBPbYP=&t^Ags(vt3zegl2x>!_JCf; zS7_nF+%C7a0=jwc_xBT?iE-&%rCJ|GtPyLOqF%3mF4F*Y@iOxzYz^(kZ8;EyF@`@}*(4qiIx%iRwHG3h`+w zlzRcPX5}zfrxp|{I`5Is$i#?E$4GIGU1o#G^Gja)eV56ZZbiYjFD6r6jV{qBW^^>j zztQzzJFC74i*ah#;&t|FY>>2Wd(to)NlkvqqowqA+426Q!*;S^USoT#A@pObi(~0^ zH<79(T3Vdi=Px96llXAkXnXOh4RYplH5#5|q!x^;&iiE|!54)+Be#U9`TP1(dXJTx zj0IyU{6rPX!r6;@OpdIs_i_Nw1VXEQR5#?V z8RbBofSAgqOTnZz>DQ6znVAPa)=DJjDdqiPA@W&`Rszse##IwDnTs_Hd8TfyFCVfAM_P^m0RTYELkD|QajlHg+TAAiY1@)BQ2p5%erwi1 zCq|{b=xgDl=<`$v$=HP?EpJ)glGCE@gf*`%Puk{;`2vHqcvCm$yz%F^_C@;~w|N~& z>T3_F!K@*On~=KvTcs4hPzS{oUFWv+`hDMATjStD&KSSAbuaXMW(2Z7UX?jDK51)7 zr#KB#%>&u=4lrBA>9oGx^Yo#z6G5REcJLw=bslali`gHZsf5ZXjdq2Ns!K64)(zzu zB-2b2vfwk_RXf}ZtsYX|#BLRl){ui6lg5U(ELF_UMi&O-z!pvE={N6m)~}lX3qMQn zZme%S-1V&ixTU~Ey;M%%OK#HrIQ#fKOYj;7-ha3pH|X6~E-pSyGOlVEA8azZEak=M z!gy9ElH4vx!~0|Mf9A5DPV!chT+HUjX976zqR0{0QcnM0(wcV}$gXL2p}b^A&yvXm z|1Yd_2M?Wf&~f@u6bpDb{Q3n1yD`j|BWMD6Pcq6Xz^R-)Zua);OLhj8bK_H~8McFB z@iCa3dkIcIxIRrP60*G?fR=uozD z=x%u&C@DQHnm|kLmE55gYy%ArNeWnO2n=v@Q{62Z`HvenZ3zOsI zONv&!Lcp}0V#LXzgOh+A?+VA`9Sl<-uj%(2zqm}RLRJ?cQKHpZ^c_z<&Z=$B8kW7S zX+vC{A_y%lhb!q93ITPq|Ngl~hdk&@z8pP$y-R*?ymR4u&_>-b$z|2o>jZ=Zeh%ii z&-OOywwpL4{SU6H0!F?b=bEJ@=}Sy?Y%yvRpds&Yr%Ca|#m zF5BQAj)|eU-IHh?JnUp)RG_x~*B0uqvmki<+T_-)ufjVhUfhtDsPgDvUwwV;-al<` za&J7ycRy0ezWXXc!U|@?7~IQf9(wl$Y&_UV)n>Z&$hN#$?lQ81 zSo3?3N-j892?R>p80!i0zFmf`wD=Amd-eG+>6r56Kv9NW9)_pwYZIV=%<5P=`0 zdWCdODk)i!n0pl7$|tZ2ZoPN76n~rWD5W73eb9e|pp~4bJEJSIq4%!Lrf{$7Xd<~`4s%XwLNg~Qz?IHFx8+CAI7iynl ztbfw;MpVrvT4DTcv*3RNvwzjh&@`q4m*BPtJGSt!gHIq)?XH!_TY3ZW7clEq6sV%2 zaEnOPskAz3X)DH*+G5|H=-W3<3idet>YTFlh|Yut$^p4~vB>}{A+E_uV;MS`gnbBH zN1ueNy;=U{}eR6Qm|=x=Y@|CdwTW0myOgI5+F~AH(ORp z4G+%^Zs%xv55g?;^*`zD<2{r#dF9~n>xeV>T=sPTQ_;d^$l*^DlYnXTfv!k z+zB`jo%zukfFheP{#~y$NmzPqUsYZ*MZC~_>Ai~JY>Q3MHmM8I)B9tI2*|tCUZo8f z`p}g+6p(#2S#s^Mg=#J}hC+L2d#b(8cQf-VTU{2P3Yfj!c31RHBURhJPexFG^92qp zE$8isa>RWZfh1_ddoV>OY7Xc_-Hm!sz*hw%E?7=%8aEM z?Z<+JfTzW^wo#Yw2)N-dEM0v7Kzw9QV?Gv6d~^8^E_utc?t7K6+Di&>(2Inzv9Xb{ ziIkA}xem02gfDnEH)T9>El)p1>mkDz49}ew&71jTs{fDw<{A9HzC}iMeVr3I%i~)! SF;4oFA=6gZe}Pha9q~UktBz>^ literal 0 HcmV?d00001 diff --git a/Week1/HomeWork/js-exercises/Project j3 w1/index.html b/Week1/HomeWork/js-exercises/Project j3 w1/index.html new file mode 100644 index 000000000..a21588870 --- /dev/null +++ b/Week1/HomeWork/js-exercises/Project j3 w1/index.html @@ -0,0 +1,18 @@ + + + + + + + + + + + + PROJECT: Hack Your Repo I j3 w1 + + +

+ + + \ No newline at end of file diff --git a/Week1/HomeWork/js-exercises/Project j3 w1/index.js b/Week1/HomeWork/js-exercises/Project j3 w1/index.js new file mode 100644 index 000000000..0961f42e9 --- /dev/null +++ b/Week1/HomeWork/js-exercises/Project j3 w1/index.js @@ -0,0 +1,81 @@ +'use strict'; +{ +// window.onload = () => main(HYF_REPOS_URL_ERROR); // to get ERROR +// const HYF_REPOS_URL_ERROR ='https://api.github.com/orgsX/HackYourFuture/repos?per_page=100'; + + window.onload = () => main(HYF_REPOS_URL); + const HYF_REPOS_URL ='https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; + const root = document.querySelector('#root'); + + function fetchJSON(url, callback) { + const xhr = new XMLHttpRequest(); + xhr.open('GET', url); + xhr.responseType = 'json'; + xhr.onload = () => { + if (xhr.status >= 200 && xhr.status < 300) { + callback(null, xhr.response); + } else { + callback(new Error(`Network error: ${xhr.status} - ${xhr.statusText}`)); + } + }; + xhr.onerror = () => callback(new Error('Network request failed')); + xhr.send(); + } + + function main(url) { + createAndAppend('img', root, { src: 'HYF.png' }); + createAndAppend('h3', root, { text: 'HYF Repositories' }); + fetchJSON(url, (error, response) => { + if (error) { + createAndAppend('div', root, { + text: error.message, + class: 'alert-error', + }); + return; + } + const ul = createAndAppend('ul', root); + response.sort((curRepo, nextRepo) => curRepo.name.localeCompare(nextRepo.name)) + // Display the first 10 items + .slice(0, 10) + .forEach(repo => repoDetails(repo, ul)) + }); + } + + function repoDetails(repo, ul) { + const li = createAndAppend('li', ul); + const table = createAndAppend('table', li); + const titles = ['Repository:', 'Description:', 'Forks:', 'Updated:']; + const dataKeys = ['name', 'description', 'forks', 'updated_at']; + + for (let i = 0; i < titles.length; ++i) { + + const tr = createAndAppend('tr', table); + createAndAppend('th', tr, { text: titles[i] }); + if (i > 0 ){ + createAndAppend('td', tr, { text: repo[dataKeys[i]] }); + } else { + const td = createAndAppend('td', tr); + createAndAppend('a', td, { + href: repo.html_url, + text: repo.name, + target: '_blank', + }); + } + } + } + + + function createAndAppend(name, parent, options = {}) { + const el = document.createElement(name); + parent.appendChild(el); + Object.entries(options).forEach(([key, value]) => { + if (key === 'text') { + el.textContent = value; + } else { + el.setAttribute(key, value); + } + }); + return el; + }; + +}; \ No newline at end of file diff --git a/Week1/HomeWork/js-exercises/Project j3 w1/style.css b/Week1/HomeWork/js-exercises/Project j3 w1/style.css new file mode 100644 index 000000000..fb8b8baa8 --- /dev/null +++ b/Week1/HomeWork/js-exercises/Project j3 w1/style.css @@ -0,0 +1,57 @@ +*{ + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: 'Roboto', sans-serif; +} +img{ + float: left; + width: 25px; + height: 25px; + border-radius: 0 50% 50% 50%; +} +body { + padding: 25px; +} +h3 { + font-weight: lighter; + background-color: #253dc5; + padding: 35px; + padding-left: 25px; + color: whitesmoke; + +} +table { + width: 100%; + margin-top: 3px; + padding: 20px; + border: 1px solid rgb(240, 240, 240) ; + border-radius: 4px; + box-shadow: 0px 3px 3px rgb(179, 178, 178) ; + color: #333; +} +th { + width: 10%; + padding: 3px; +} +li:nth-child(even) { + background: rgb(224, 224, 224); +} +li { + list-style: none; +} + +.alert-error { + margin-top: 2px; + padding: 20px; + padding-left: 25px; + border-radius: 6px; + color: brown; + background-color: #f0c6ca; +} +@media (max-width: 650px) { + table, header { + width: 100%; + margin: 0 auto; + } +} \ No newline at end of file