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..328bd1e5c --- /dev/null +++ b/Week1/assets/js.js @@ -0,0 +1,123 @@ +'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; + + }else { + document.getElementById('users').classList.add('NetworkError'); + document.getElementById('users').innerHTML = "Network error:" + this.status +' - '+ this.statusText; + } + + } + xhr.onerror = function(){ + document.getElementById('users').classList.add('NetworkError'); + document.getElementById('users').innerHTML = "Network error:" + this.status +' - '+ this.statusText; + } + + 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('NetworkError'); + document.getElementById('users').innerHTML = "Network error:" + this.status +' - '+ this.statusText; + } + } + xhr.onerror = function(){ + document.getElementById('users').classList.add('NetworkError'); + document.getElementById('users').innerHTML = "Network 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('NetworkError'); + document.getElementById('users2').innerHTML = "Network error:" + this.status +' - '+ this.statusText; + } + } + xhr.onerror = function(){ + 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 new file mode 100644 index 000000000..250944c54 --- /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; +} + +.NetworkError{ + background-color: rgb(255, 23, 23) !important; +} diff --git a/Week2/assets/index.html b/Week2/assets/index.html new file mode 100644 index 000000000..efb087ea3 --- /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..90ed418ea --- /dev/null +++ b/Week2/assets/js.js @@ -0,0 +1,144 @@ +'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('repository').classList.remove('NetworkError'); + +} ).catch( function(status){ // In state of "rejected" + document.getElementById('repository').classList.add('NetworkError'); + document.getElementById('repository').innerHTML = status; +} ); + + + + + +document.getElementById('reposs').addEventListener("change" , loadRepository); + +document.getElementById('reposs').addEventListener("change" , 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(); + 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 = '
' + + '' + + '
'; + } + } + + document.getElementById('repository').innerHTML = output; + document.getElementById('repository').classList.remove('NetworkError'); + + } ).catch( function(status){ // In state of "rejected" + document.getElementById('repository').classList.add('NetworkError'); + document.getElementById('repository').innerHTML = status; + } ); + +} + + + +function loadUsers(){ + 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 += '
' + + '' + + '' + + '
'; + } + + 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; + } ); + +} + + + diff --git a/Week2/assets/style.css b/Week2/assets/style.css new file mode 100644 index 000000000..90841d234 --- /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; +} +#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); +} +#users{ + 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; +} 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; +}