From 82cdbadd723fea1fd3fade43f56ddc4839ea615e Mon Sep 17 00:00:00 2001 From: Ayham Date: Sun, 18 Nov 2018 03:33:09 +0100 Subject: [PATCH 1/6] Solve the homework of the first week of javascript --- Week1/assets/index.html | 46 +++++++++++++++++ Week1/assets/js.js | 106 ++++++++++++++++++++++++++++++++++++++++ Week1/assets/style.css | 79 ++++++++++++++++++++++++++++++ 3 files changed, 231 insertions(+) create mode 100644 Week1/assets/index.html create mode 100644 Week1/assets/js.js create mode 100644 Week1/assets/style.css diff --git a/Week1/assets/index.html b/Week1/assets/index.html new file mode 100644 index 000000000..3e9c9b82e --- /dev/null +++ b/Week1/assets/index.html @@ -0,0 +1,46 @@ + + + + + + + HYF Repositories + + + + + + + + + + +
+

HYF Repositories

+ +
+ + + +
+
+
+
+ + + + + + +
+ Copyright © 2018 All Right Reserved To Ayham ® Team +
+ + + + + + + + + \ No newline at end of file diff --git a/Week1/assets/js.js b/Week1/assets/js.js new file mode 100644 index 000000000..535b600ea --- /dev/null +++ b/Week1/assets/js.js @@ -0,0 +1,106 @@ +'use strict'; + + + var xhr = new XMLHttpRequest(); + xhr.open( 'GET' , 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100%27' ); + xhr.onload = function() { + if(this.status == 200){ + var repos = JSON.parse( this.responseText); + var output = ''; + for(var i in repos){ + output += ''; + } + document.getElementById('reposs').innerHTML = output; + + } + } + + xhr.send(); + + + + +document.getElementById('reposs').addEventListener("change" , loadUsers); + +document.getElementById('reposs').addEventListener("change" , loadUsers2); + + + + +function loadUsers() { + var option = this.options[this.selectedIndex].value; + + + + var xhr = new XMLHttpRequest(); + xhr.open( 'GET' , 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100%27' ); + xhr.onload = function() { + if(this.status == 200){ + var repos = JSON.parse( this.responseText); + var output = ''; + for(var i in repos){ + if(option == repos[i].name) { + output = '
' + + '' + + '
'; + } + } + + document.getElementById('users').innerHTML = output; + } + else { + document.getElementById('users').classList.add('NetwrkError'); + document.getElementById('users').innerHTML = "Netwrk error:" + this.status +' - '+ this.statusText; + } + } + + xhr.send(); + +} + + + +function loadUsers2(){ + + var option = this.options[this.selectedIndex].value; + var url = `https://api.github.com/repos/HackYourFuture/${option}/contributors`; + + + + var xhr = new XMLHttpRequest(); + xhr.open( 'GET' , url ); + xhr.onload = function() { + if(this.status == 200){ + var repos = JSON.parse( this.responseText); + var output = ''; + for(var i in repos){ + output += '
' + + '' + + '' + + '
'; + + } + + document.getElementById('users2').innerHTML = output; + + + } + else {//.classList.add("hide-me"); + document.getElementById('users2').classList.add('NetwrkError'); + document.getElementById('users2').innerHTML = "Netwrk error:" + this.status +' - '+ this.statusText; + } + } + + xhr.send(); +} + + + diff --git a/Week1/assets/style.css b/Week1/assets/style.css new file mode 100644 index 000000000..1a10181d0 --- /dev/null +++ b/Week1/assets/style.css @@ -0,0 +1,79 @@ + +.footer{ + background: #333; + color: #FFF; + text-align: center; + padding: 10px 0; +} +.container{ + background-color: #fff; + width: 40%; + min-height: 50em; + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin: 0 auto; + text-align: left; + padding: 20px 0; +} + + +span{ + color:black; + font-style: italic; + font-weight:bold; + font-size: 18px; +} +#users{ + background-color: #fff; + width: 40%; + height: 75%; + display: flex; + flex-direction: column; + margin: 0% 0% 0% 0%; + box-shadow: 0 1px 8px 0 rgba(0, 0, 0, .2), 0 3px 4px 0 rgba(0, 0, 0, .14), 0 3px 3px -2px rgba(0, 0, 0, .12); +} +#users2{ + background-color: #fff; + width: 40%; + height: 1075%; + display: flex; + flex-direction: column; + margin: 1% 1% 1% 1%; + box-shadow: 0 1px 8px 0 rgba(0, 0, 0, .2), 0 3px 4px 0 rgba(0, 0, 0, .14), 0 3px 3px -2px rgba(0, 0, 0, .12); +} + +.header{ + + background: #333; + color: #FFF; + font-size: 20px; + text-align: left; + padding: 20px 0; + + +} +.headerH3{ + + display: inline; +} + + +body{ + margin: 0; + padding: 0; + font-family: Arial, Tahoma; +} +.user{ + display: flex; + padding: 5px; + border-bottom: 2px solid #efefef; + +} +.user ul { + list-style: none; +} + +.NetwrkError{ + background-color: rgb(255, 23, 23) !important; +} From 0e2a11a3ac840e8013cb670f0222967b76e18461 Mon Sep 17 00:00:00 2001 From: Ayham Date: Sun, 18 Nov 2018 12:23:19 +0100 Subject: [PATCH 2/6] Solve "Error status' problemn --- Week1/assets/js.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/Week1/assets/js.js b/Week1/assets/js.js index 535b600ea..86b026a83 100644 --- a/Week1/assets/js.js +++ b/Week1/assets/js.js @@ -4,6 +4,7 @@ var xhr = new XMLHttpRequest(); xhr.open( 'GET' , 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100%27' ); xhr.onload = function() { + if(this.status == 200){ var repos = JSON.parse( this.responseText); var output = ''; @@ -12,7 +13,15 @@ } document.getElementById('reposs').innerHTML = output; + }else { + document.getElementById('users').classList.add('NetwrkError'); + document.getElementById('users').innerHTML = "Netwrk error:" + this.status +' - '+ this.statusText; } + + } + xhr.onerror = function(){ + document.getElementById('users').classList.add('NetwrkError'); + document.getElementById('users').innerHTML = "Netwrk error:" + this.status +' - '+ this.statusText; } xhr.send(); @@ -58,6 +67,10 @@ function loadUsers() { document.getElementById('users').innerHTML = "Netwrk error:" + this.status +' - '+ this.statusText; } } + xhr.onerror = function(){ + document.getElementById('users').classList.add('NetwrkError'); + document.getElementById('users').innerHTML = "Netwrk error:" + this.status +' - '+ this.statusText; + } xhr.send(); @@ -98,6 +111,10 @@ function loadUsers2(){ document.getElementById('users2').innerHTML = "Netwrk error:" + this.status +' - '+ this.statusText; } } + xhr.onerror = function(){ + document.getElementById('users2').classList.add('NetwrkError'); + document.getElementById('users2').innerHTML = "Netwrk error:" + this.status +' - '+ this.statusText; + } xhr.send(); } From 6e5584a3c15313a180d59b82dda753b0aabb9849 Mon Sep 17 00:00:00 2001 From: Ayham Date: Tue, 20 Nov 2018 22:15:40 +0100 Subject: [PATCH 3/6] Solve "Error status' problems --- Week1/assets/js.js | 24 ++++++++++++------------ Week1/assets/style.css | 2 +- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/Week1/assets/js.js b/Week1/assets/js.js index 86b026a83..328bd1e5c 100644 --- a/Week1/assets/js.js +++ b/Week1/assets/js.js @@ -14,14 +14,14 @@ document.getElementById('reposs').innerHTML = output; }else { - document.getElementById('users').classList.add('NetwrkError'); - document.getElementById('users').innerHTML = "Netwrk error:" + this.status +' - '+ this.statusText; + document.getElementById('users').classList.add('NetworkError'); + document.getElementById('users').innerHTML = "Network error:" + this.status +' - '+ this.statusText; } } xhr.onerror = function(){ - document.getElementById('users').classList.add('NetwrkError'); - document.getElementById('users').innerHTML = "Netwrk error:" + this.status +' - '+ this.statusText; + document.getElementById('users').classList.add('NetworkError'); + document.getElementById('users').innerHTML = "Network error:" + this.status +' - '+ this.statusText; } xhr.send(); @@ -63,13 +63,13 @@ function loadUsers() { document.getElementById('users').innerHTML = output; } else { - document.getElementById('users').classList.add('NetwrkError'); - document.getElementById('users').innerHTML = "Netwrk error:" + this.status +' - '+ this.statusText; + document.getElementById('users').classList.add('NetworkError'); + document.getElementById('users').innerHTML = "Network error:" + this.status +' - '+ this.statusText; } } xhr.onerror = function(){ - document.getElementById('users').classList.add('NetwrkError'); - document.getElementById('users').innerHTML = "Netwrk error:" + this.status +' - '+ this.statusText; + document.getElementById('users').classList.add('NetworkError'); + document.getElementById('users').innerHTML = "Network error:" + this.status +' - '+ this.statusText; } xhr.send(); @@ -107,13 +107,13 @@ function loadUsers2(){ } else {//.classList.add("hide-me"); - document.getElementById('users2').classList.add('NetwrkError'); - document.getElementById('users2').innerHTML = "Netwrk error:" + this.status +' - '+ this.statusText; + document.getElementById('users2').classList.add('NetworkError'); + document.getElementById('users2').innerHTML = "Network error:" + this.status +' - '+ this.statusText; } } xhr.onerror = function(){ - document.getElementById('users2').classList.add('NetwrkError'); - document.getElementById('users2').innerHTML = "Netwrk error:" + this.status +' - '+ this.statusText; + document.getElementById('users2').classList.add('NetworkError'); + document.getElementById('users2').innerHTML = "Network error:" + this.status +' - '+ this.statusText; } xhr.send(); diff --git a/Week1/assets/style.css b/Week1/assets/style.css index 1a10181d0..250944c54 100644 --- a/Week1/assets/style.css +++ b/Week1/assets/style.css @@ -74,6 +74,6 @@ body{ list-style: none; } -.NetwrkError{ +.NetworkError{ background-color: rgb(255, 23, 23) !important; } From 8360f6aeefc8ecdeb0e1745fd21b763bac13b34c Mon Sep 17 00:00:00 2001 From: Ayham Date: Mon, 26 Nov 2018 01:12:39 +0100 Subject: [PATCH 4/6] Solve the homework of the second week of javascript --- Week2/assets/index.html | 46 +++++++++++++ Week2/assets/js.js | 147 ++++++++++++++++++++++++++++++++++++++++ Week2/assets/style.css | 79 +++++++++++++++++++++ 3 files changed, 272 insertions(+) create mode 100644 Week2/assets/index.html create mode 100644 Week2/assets/js.js create mode 100644 Week2/assets/style.css diff --git a/Week2/assets/index.html b/Week2/assets/index.html new file mode 100644 index 000000000..3e9c9b82e --- /dev/null +++ b/Week2/assets/index.html @@ -0,0 +1,46 @@ + + + + + + + HYF Repositories + + + + + + + + + + +
+

HYF Repositories

+ +
+ + + +
+
+
+
+ + + + + + +
+ Copyright © 2018 All Right Reserved To Ayham ® Team +
+ + + + + + + + + \ No newline at end of file diff --git a/Week2/assets/js.js b/Week2/assets/js.js new file mode 100644 index 000000000..7e53b2d8f --- /dev/null +++ b/Week2/assets/js.js @@ -0,0 +1,147 @@ +'use strict'; + + +const promiseToGetXMLHttpRequest = new Promise( function( resolve , reject ){ + + // Make a promise by get a XMLHttpRequest response + + const xhr = new XMLHttpRequest(); + xhr.open( 'GET' , 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100%27' ); + xhr.onload = () => { + if (xhr.status == 200 ) { // If successful, resolve the promise by passing back the request response as a string + resolve(xhr.responseText); + } else { // If it fails, reject the promise with a error message as a string + reject("Network error:" + xhr.status +' - '+ xhr.statusText); + } + }; + xhr.onerror = () => reject("Network error:" + xhr.status +' - '+ xhr.statusText); + xhr.send(); + +} ); + + + +promiseToGetXMLHttpRequest.then( function(responseText){ // In state of "fulfilled" + const repos = JSON.parse( responseText ); + // + var output = ''; + for(let i in repos){ + output += ''; + } + // + document.getElementById('reposs').innerHTML = output; + document.getElementById('users').classList.remove('NetworkError'); + +} ).catch( function(status){ // In state of "rejected" + document.getElementById('users').classList.add('NetworkError'); + document.getElementById('users').innerHTML = status; +} ); + + + + + +document.getElementById('reposs').addEventListener("change" , loadUsers); + +document.getElementById('reposs').addEventListener("change" , loadUsers2); + + + + +function loadUsers() { + const option = this.options[this.selectedIndex].value; + const promiseToGetXMLHttpRequest = new Promise( function( resolve , reject ){ // Make a promise by get a XMLHttpRequest response + const xhr = new XMLHttpRequest(); + xhr.open( 'GET' , 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100%27' ); + xhr.onload = () => { + if (xhr.status == 200 ) { // If successful, resolve the promise by passing back the request response as a string + resolve(xhr.responseText); + } else { // If it fails, reject the promise with a error message as a string + reject("Network error:" + xhr.status +' - '+ xhr.statusText); + } + }; + xhr.onerror = () => reject("Network error:" + xhr.status +' - '+ xhr.statusText); + xhr.send(); + + } ); + + + + promiseToGetXMLHttpRequest.then( function(responseText){ // In state of "fulfilled" + const repos = JSON.parse( responseText ); + // + var output = ''; + for(let i in repos){ + if(option == repos[i].name) { + output = '
' + + '
    ' + + '
  • Repository: ' + repos[i].name +'
    • ' + + '
  • Description: ' + repos[i].description +'
    • ' + + '
  • Forks: ' + repos[i].forks +'
    • ' + + '
  • Updated: ' + repos[i].updated_at +'
    • ' + + '
' + + '
'; + } + } + // + document.getElementById('users').innerHTML = output; + document.getElementById('users').classList.remove('NetworkError'); + + } ).catch( function(status){ // In state of "rejected" + document.getElementById('users').classList.add('NetworkError'); + document.getElementById('users').innerHTML = status; + } ); + +} + + + +function loadUsers2(){ + const option = this.options[this.selectedIndex].value; + const url = `https://api.github.com/repos/HackYourFuture/${option}/contributors`; + + const promiseToGetXMLHttpRequest = new Promise( function( resolve , reject ){ // Make a promise by get a XMLHttpRequest response + + const xhr = new XMLHttpRequest(); + xhr.open( 'GET' , url ); + xhr.onload = () => { + if (xhr.status == 200 ) { // If successful, resolve the promise by passing back the request response as a string + resolve(xhr.responseText); + } else { // If it fails, reject the promise with a error message as a string + reject("Network error:" + xhr.status +' - '+ xhr.statusText); + } + }; + xhr.onerror = () => reject("Network error:" + xhr.status +' - '+ xhr.statusText); + xhr.send(); + + } ); + + + + promiseToGetXMLHttpRequest.then( function(responseText){ // In state of "fulfilled" + const repos = JSON.parse( responseText ); + // + var output = ''; + for(let i in repos){ + output += '
' + + '' + + '
    ' + + '
  • name: ' + repos[i].login +'
    • ' + + '
  • contributions: ' + repos[i].contributions +'
    • ' + + '
' + + '
'; + } + // + document.getElementById('users2').innerHTML = output; + document.getElementById('users2').classList.remove('NetworkError'); + + + } ).catch( function(status){ // In state of "rejected" + document.getElementById('users2').classList.add('NetworkError'); + document.getElementById('users2').innerHTML = status; + } ); + +} + + + diff --git a/Week2/assets/style.css b/Week2/assets/style.css new file mode 100644 index 000000000..250944c54 --- /dev/null +++ b/Week2/assets/style.css @@ -0,0 +1,79 @@ + +.footer{ + background: #333; + color: #FFF; + text-align: center; + padding: 10px 0; +} +.container{ + background-color: #fff; + width: 40%; + min-height: 50em; + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin: 0 auto; + text-align: left; + padding: 20px 0; +} + + +span{ + color:black; + font-style: italic; + font-weight:bold; + font-size: 18px; +} +#users{ + background-color: #fff; + width: 40%; + height: 75%; + display: flex; + flex-direction: column; + margin: 0% 0% 0% 0%; + box-shadow: 0 1px 8px 0 rgba(0, 0, 0, .2), 0 3px 4px 0 rgba(0, 0, 0, .14), 0 3px 3px -2px rgba(0, 0, 0, .12); +} +#users2{ + background-color: #fff; + width: 40%; + height: 1075%; + display: flex; + flex-direction: column; + margin: 1% 1% 1% 1%; + box-shadow: 0 1px 8px 0 rgba(0, 0, 0, .2), 0 3px 4px 0 rgba(0, 0, 0, .14), 0 3px 3px -2px rgba(0, 0, 0, .12); +} + +.header{ + + background: #333; + color: #FFF; + font-size: 20px; + text-align: left; + padding: 20px 0; + + +} +.headerH3{ + + display: inline; +} + + +body{ + margin: 0; + padding: 0; + font-family: Arial, Tahoma; +} +.user{ + display: flex; + padding: 5px; + border-bottom: 2px solid #efefef; + +} +.user ul { + list-style: none; +} + +.NetworkError{ + background-color: rgb(255, 23, 23) !important; +} From 0c89b94c90992cf9441c10aaba0e53bbdd8b4b51 Mon Sep 17 00:00:00 2001 From: Ayham Date: Mon, 26 Nov 2018 11:55:18 +0100 Subject: [PATCH 5/6] Modify function names --- Week2/assets/index.html | 2 +- Week2/assets/js.js | 39 ++++++++++++++++++--------------------- Week2/assets/style.css | 4 ++-- 3 files changed, 21 insertions(+), 24 deletions(-) diff --git a/Week2/assets/index.html b/Week2/assets/index.html index 3e9c9b82e..efb087ea3 100644 --- a/Week2/assets/index.html +++ b/Week2/assets/index.html @@ -23,8 +23,8 @@

HYF Repositories

+
-
diff --git a/Week2/assets/js.js b/Week2/assets/js.js index 7e53b2d8f..90ed418ea 100644 --- a/Week2/assets/js.js +++ b/Week2/assets/js.js @@ -23,32 +23,29 @@ const promiseToGetXMLHttpRequest = new Promise( function( resolve , reject ){ promiseToGetXMLHttpRequest.then( function(responseText){ // In state of "fulfilled" const repos = JSON.parse( responseText ); - // var output = ''; for(let i in repos){ output += ''; } - // document.getElementById('reposs').innerHTML = output; - document.getElementById('users').classList.remove('NetworkError'); + document.getElementById('repository').classList.remove('NetworkError'); } ).catch( function(status){ // In state of "rejected" - document.getElementById('users').classList.add('NetworkError'); - document.getElementById('users').innerHTML = status; + document.getElementById('repository').classList.add('NetworkError'); + document.getElementById('repository').innerHTML = status; } ); -document.getElementById('reposs').addEventListener("change" , loadUsers); - -document.getElementById('reposs').addEventListener("change" , loadUsers2); +document.getElementById('reposs').addEventListener("change" , loadRepository); +document.getElementById('reposs').addEventListener("change" , loadUsers); -function loadUsers() { +function loadRepository() { const option = this.options[this.selectedIndex].value; const promiseToGetXMLHttpRequest = new Promise( function( resolve , reject ){ // Make a promise by get a XMLHttpRequest response const xhr = new XMLHttpRequest(); @@ -69,7 +66,7 @@ function loadUsers() { promiseToGetXMLHttpRequest.then( function(responseText){ // In state of "fulfilled" const repos = JSON.parse( responseText ); - // + var output = ''; for(let i in repos){ if(option == repos[i].name) { @@ -83,20 +80,20 @@ function loadUsers() { ''; } } - // - document.getElementById('users').innerHTML = output; - document.getElementById('users').classList.remove('NetworkError'); + + document.getElementById('repository').innerHTML = output; + document.getElementById('repository').classList.remove('NetworkError'); } ).catch( function(status){ // In state of "rejected" - document.getElementById('users').classList.add('NetworkError'); - document.getElementById('users').innerHTML = status; + document.getElementById('repository').classList.add('NetworkError'); + document.getElementById('repository').innerHTML = status; } ); } -function loadUsers2(){ +function loadUsers(){ const option = this.options[this.selectedIndex].value; const url = `https://api.github.com/repos/HackYourFuture/${option}/contributors`; @@ -131,14 +128,14 @@ function loadUsers2(){ '' + ''; } - // - document.getElementById('users2').innerHTML = output; - document.getElementById('users2').classList.remove('NetworkError'); + + document.getElementById('users').innerHTML = output; + document.getElementById('users').classList.remove('NetworkError'); } ).catch( function(status){ // In state of "rejected" - document.getElementById('users2').classList.add('NetworkError'); - document.getElementById('users2').innerHTML = status; + document.getElementById('users').classList.add('NetworkError'); + document.getElementById('users').innerHTML = status; } ); } diff --git a/Week2/assets/style.css b/Week2/assets/style.css index 250944c54..90841d234 100644 --- a/Week2/assets/style.css +++ b/Week2/assets/style.css @@ -24,7 +24,7 @@ span{ font-weight:bold; font-size: 18px; } -#users{ +#repository{ background-color: #fff; width: 40%; height: 75%; @@ -33,7 +33,7 @@ span{ margin: 0% 0% 0% 0%; box-shadow: 0 1px 8px 0 rgba(0, 0, 0, .2), 0 3px 4px 0 rgba(0, 0, 0, .14), 0 3px 3px -2px rgba(0, 0, 0, .12); } -#users2{ +#users{ background-color: #fff; width: 40%; height: 1075%; From 54be16d074963c9318670d83e875e083b4954977 Mon Sep 17 00:00:00 2001 From: Ayham Date: Thu, 6 Dec 2018 22:15:45 +0100 Subject: [PATCH 6/6] Solve the homework week3 of javascript --- Week3/src/App.js | 17 ++++ Week3/src/Contributor.js | 37 ++++++++ Week3/src/Repository.js | 40 +++++++++ Week3/src/Util.js | 187 +++++++++++++++++++++++++++++++++++++++ Week3/src/index.html | 48 ++++++++++ Week3/src/style.css | 97 ++++++++++++++++++++ 6 files changed, 426 insertions(+) create mode 100644 Week3/src/App.js create mode 100644 Week3/src/Contributor.js create mode 100644 Week3/src/Repository.js create mode 100644 Week3/src/Util.js create mode 100644 Week3/src/index.html create mode 100644 Week3/src/style.css diff --git a/Week3/src/App.js b/Week3/src/App.js new file mode 100644 index 000000000..8917c42c9 --- /dev/null +++ b/Week3/src/App.js @@ -0,0 +1,17 @@ +'use strict'; + +fetchJSON( mainRepoUrl ) + +.then( function( responseText ){ + const repos = JSON.parse( responseText ); + for( let i in repos ){ + creatRepoSelect( 'selectRepo' , repos[ i ].name , repos[ i ].name); + } + +} ).catch( function( status ){ + + errorStatus( 'repository' , status ); + +} ); + +document.getElementById( 'selectRepo' ).addEventListener( "change" , main ); diff --git a/Week3/src/Contributor.js b/Week3/src/Contributor.js new file mode 100644 index 000000000..1b98f969d --- /dev/null +++ b/Week3/src/Contributor.js @@ -0,0 +1,37 @@ +'use strict'; + + /////////////////////////////////////////////////////////////////////// + ////////// a child class ///////////// + ///////////////////////////////////////////////////////////////////// + + + +function Contributor( repos , login , contributions , avatarUrl ) { + + Repository.call(this, repos.repository , repos.forks , repos.updated , repos.description); + + this.login = login; + + this.contributions = contributions; + + this.avatarUrl = avatarUrl; + + + + Contributor.prototype.getLogin = function() { + return this.login ; + } + + + Contributor.prototype.getContributions = function() { + return this.contributions ; + } + + + Contributor.prototype.getAvatarUrl = function() { + return this.avatarUrl ; + } + + +} + diff --git a/Week3/src/Repository.js b/Week3/src/Repository.js new file mode 100644 index 000000000..58a11d40f --- /dev/null +++ b/Week3/src/Repository.js @@ -0,0 +1,40 @@ +'use strict'; + + /////////////////////////////////////////////////////////////////////// + ////////// a parent class ///////////// + ///////////////////////////////////////////////////////////////////// + + + +function Repository( repository , forks , updated , description ) { + + this.repository = repository; + + this.forks = forks; + + this.updated = updated; + + this.description = description; + + + Repository.prototype.getRepository = function() { + return this.repository ; + } + + + Repository.prototype.getForks = function() { + return this.forks ; + } + + + Repository.prototype.getUpdated = function() { + return this.updated ; + } + + + Repository.prototype.getDescription = function() { + return this.description ; + } + + +} diff --git a/Week3/src/Util.js b/Week3/src/Util.js new file mode 100644 index 000000000..d76b3009b --- /dev/null +++ b/Week3/src/Util.js @@ -0,0 +1,187 @@ +'use strict'; + + +const mainRepoUrl = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100%27'; + +function contributorUrl( option ) { + return `https://api.github.com/repos/HackYourFuture/${option}/contributors`; + } + + + function creatRepoSelect( parent , value , text) { + + let select = document.getElementById( parent ); + let option = document.createElement( "option" ); + option.text = text; + option.value = value; + select.appendChild( option ) + + } + + + function createAndAppend( contr ) { + + console.log(contr); + /*for (let i = 0 ; i < 4 ; i++) { + console.log( Object.keys( contr[ 0 ])[ i ] ) + console.log( contr[ 0 ][ Object.keys( contr[ 0 ])[ i ] ] ); + + } */ + + + + + /////////////////////////////////////////////////////////////////////// + ////////// create the repo info ///////////// + ///////////////////////////////////////////////////////////////////// + + + let repository = document.getElementById( 'repository' ); + repository.classList.remove( 'NetworkError' ); + repository.innerHTML = ''; + + + let div = document.createElement( 'div' ); + div.setAttribute( 'class' , 'user' ); + + + let ul = document.createElement( 'ul' ); + for ( let i = 0 ; i < 4 ; i++ ){ + + + let span = document.createElement( 'span' ); + span.append( Object.keys( contr[ 0 ])[ i ] + ': ' ); + + + let li = document.createElement( 'li' ); + li.append( span ); + li.append( contr[ 0 ][ Object.keys( contr[ 0 ])[ i ] ] ); + + + ul.appendChild( li ); + } + + + div.appendChild( ul ); + + repository.appendChild( div ); + + /////////////////////////////////////////////////////////////////////// + ////////// create the contributors info ///////////// + ///////////////////////////////////////////////////////////////////// + + + let contributors = document.getElementById( 'Contributors' ); + contributors.classList.remove( 'NetworkError' ); + contributors.innerHTML = ''; + for( let i in contr ){ + + let div = document.createElement( 'div' ); + div.setAttribute( 'class' , 'user' ); + + + let img = document.createElement( 'img' ); + img.src = contr[ i ].getAvatarUrl(); + img.setAttribute( "alt" , contr[ i ].getLogin() ); + + let ul = document.createElement( 'ul' ); + + let span1 = document.createElement( 'span' ); + span1.append( "name: " ); + + + let li1 = document.createElement( 'li' ); + li1.append( span1 ); + li1.append( contr[ i ].getLogin() ); + + let span2 = document.createElement( 'span' ); + span2.append( "contributions: " ); + + + let li2 = document.createElement( 'li' ); + li2.append( span2 ); + li2.append( contr[ i ].getContributions() ); + + ul.appendChild( li1 ); + ul.appendChild( li2 ); + + div.appendChild( img ); + div.appendChild( ul ); + + contributors.appendChild( div ); + + } + + } + + + function errorStatus( parent , status ){ + let root = document.getElementById( parent ); + root.classList.add( 'NetworkError' ); + root.innerHTML = status; + } + + + function fetchJSON( url ) { + return new Promise( ( resolve , reject ) => { + const xhr = new XMLHttpRequest(); + xhr.open( 'GET', url ); + xhr.onload = () => { + if ( xhr.status == 200 ) { + resolve( xhr.responseText ); + } else { + reject( new Error ( `Network error: ${xhr.status} - ${xhr.statusText}` ) ); + } + }; + xhr.onerror = () => reject( new Error ( `Network error: ${xhr.status} - ${xhr.statusText}` ) ); + xhr.send(); + }); + } + + + async function createContributorsClass( option , myRepos ){ + try{ + const responseText = await fetchJSON( contributorUrl( option ) ); + const contri = JSON.parse( responseText ); + let contributors = []; + for( let i in contri ){ + + let contr = new Contributor( myRepos , contri[ i ].login , contri[ i ].contributions , contri[ i ].avatar_url ); + + contributors.push( contr ); + + } + createAndAppend( contributors ); + + } + catch(err){ + errorStatus( 'Contributors' , err ); + } + +} + + + + +async function main() { + const option = this.options[ this.selectedIndex ].value; + try{ + const responseText = await fetchJSON( mainRepoUrl ); + const repos = JSON.parse( responseText ); + let myRepos; + for( let i in repos ){ + if( option == repos[ i ].name ) { + + myRepos = new Repository( repos[ i ].name , repos[ i ].forks , repos[ i ].updated_at , repos[ i ].description ); + + + } + } + createContributorsClass( option , myRepos); + + } + catch ( err ){ + errorStatus( 'repository' , status ); + } + +} diff --git a/Week3/src/index.html b/Week3/src/index.html new file mode 100644 index 000000000..4b0fdd711 --- /dev/null +++ b/Week3/src/index.html @@ -0,0 +1,48 @@ + + + + + + + HYF Repositories + + + + + + + + + +
+

HYF Repositories

+ +
+ + + +
+
+
+
+ + + + + + +
+ Copyright © 2018 All Right Reserved To Ayham ® Team +
+ + + + + + + + + + + + \ No newline at end of file diff --git a/Week3/src/style.css b/Week3/src/style.css new file mode 100644 index 000000000..f9a7bd077 --- /dev/null +++ b/Week3/src/style.css @@ -0,0 +1,97 @@ + +.footer{ + background: #333; + color: #FFF; + text-align: center; + padding: 10px 0; +} + + +.container{ + background-color: #fff; + width: 40%; + min-height: 50em; + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin: 0 auto; + text-align: left; + padding: 20px 0; +} + + +span{ + color:black; + font-style: italic; + font-weight:bold; + font-size: 18px; + text-transform: capitalize; +} + + +#repository{ + background-color: #fff; + width: 40%; + height: 75%; + display: flex; + flex-direction: column; + margin: 0% 0% 0% 0%; + box-shadow: 0 1px 8px 0 rgba(0, 0, 0, .2), 0 3px 4px 0 rgba(0, 0, 0, .14), 0 3px 3px -2px rgba(0, 0, 0, .12); +} + + +#Contributors{ + background-color: #fff; + width: 40%; + height: 1075%; + display: flex; + flex-direction: column; + margin: 1% 1% 1% 1%; + box-shadow: 0 1px 8px 0 rgba(0, 0, 0, .2), 0 3px 4px 0 rgba(0, 0, 0, .14), 0 3px 3px -2px rgba(0, 0, 0, .12); +} + + +.header{ + background: #333; + color: #FFF; + font-size: 20px; + text-align: left; + padding: 20px 0; +} + + + +.headerH3{ + display: inline; +} + + + +body{ + margin: 0; + padding: 0; + font-family: Arial, Tahoma; +} + + +.user{ + display: flex; + padding: 5px; + border-bottom: 2px solid #efefef; +} + + +.user ul { + list-style: none; +} + + +.NetworkError{ + background-color: rgb(255, 23, 23) !important; +} + + +img{ + width: 70px; + height: 70px; +}