Thanks to visit codestin.com
Credit goes to github.com

Skip to content
This repository was archived by the owner on May 14, 2024. It is now read-only.

Commit 8360f6a

Browse files
AyhamAlhelalAyhamAlhelal
committed
Solve the homework of the second week of javascript
1 parent 6e5584a commit 8360f6a

File tree

3 files changed

+272
-0
lines changed

3 files changed

+272
-0
lines changed

‎Week2/assets/index.html

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="description" content="Form in HTML & CSS">
7+
<title>HYF Repositories</title>
8+
<meta name="viewport" content="width=device-width, initial-scale=1">
9+
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
10+
11+
12+
13+
14+
</head>
15+
<body>
16+
17+
18+
<div class="header">
19+
<h3 class="headerH3">HYF Repositories </h3>
20+
<select name="repo" id='reposs'></select>
21+
</div>
22+
23+
24+
25+
<div class="container">
26+
<div id="users"></div>
27+
<div id="users2"></div>
28+
</div>
29+
30+
31+
32+
33+
34+
35+
<div class="footer">
36+
Copyright &copy; 2018 All Right Reserved To Ayham &reg; Team
37+
</div>
38+
39+
40+
41+
<script src="js.js"></script>
42+
43+
44+
45+
</body>
46+
</html>

‎Week2/assets/js.js

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
'use strict';
2+
3+
4+
const promiseToGetXMLHttpRequest = new Promise( function( resolve , reject ){
5+
6+
// Make a promise by get a XMLHttpRequest response
7+
8+
const xhr = new XMLHttpRequest();
9+
xhr.open( 'GET' , 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100%27' );
10+
xhr.onload = () => {
11+
if (xhr.status == 200 ) { // If successful, resolve the promise by passing back the request response as a string
12+
resolve(xhr.responseText);
13+
} else { // If it fails, reject the promise with a error message as a string
14+
reject("Network error:" + xhr.status +' - '+ xhr.statusText);
15+
}
16+
};
17+
xhr.onerror = () => reject("Network error:" + xhr.status +' - '+ xhr.statusText);
18+
xhr.send();
19+
20+
} );
21+
22+
23+
24+
promiseToGetXMLHttpRequest.then( function(responseText){ // In state of "fulfilled"
25+
const repos = JSON.parse( responseText );
26+
//
27+
var output = '';
28+
for(let i in repos){
29+
output += '<option value="' + repos[i].name +'">' + repos[i].name + '</option>';
30+
}
31+
//
32+
document.getElementById('reposs').innerHTML = output;
33+
document.getElementById('users').classList.remove('NetworkError');
34+
35+
} ).catch( function(status){ // In state of "rejected"
36+
document.getElementById('users').classList.add('NetworkError');
37+
document.getElementById('users').innerHTML = status;
38+
} );
39+
40+
41+
42+
43+
44+
document.getElementById('reposs').addEventListener("change" , loadUsers);
45+
46+
document.getElementById('reposs').addEventListener("change" , loadUsers2);
47+
48+
49+
50+
51+
function loadUsers() {
52+
const option = this.options[this.selectedIndex].value;
53+
const promiseToGetXMLHttpRequest = new Promise( function( resolve , reject ){ // Make a promise by get a XMLHttpRequest response
54+
const xhr = new XMLHttpRequest();
55+
xhr.open( 'GET' , 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100%27' );
56+
xhr.onload = () => {
57+
if (xhr.status == 200 ) { // If successful, resolve the promise by passing back the request response as a string
58+
resolve(xhr.responseText);
59+
} else { // If it fails, reject the promise with a error message as a string
60+
reject("Network error:" + xhr.status +' - '+ xhr.statusText);
61+
}
62+
};
63+
xhr.onerror = () => reject("Network error:" + xhr.status +' - '+ xhr.statusText);
64+
xhr.send();
65+
66+
} );
67+
68+
69+
70+
promiseToGetXMLHttpRequest.then( function(responseText){ // In state of "fulfilled"
71+
const repos = JSON.parse( responseText );
72+
//
73+
var output = '';
74+
for(let i in repos){
75+
if(option == repos[i].name) {
76+
output = '<div class="user">' +
77+
'<ul>' +
78+
'<li><span>Repository:</span> ' + repos[i].name +'</li>' +
79+
'<li><span>Description:</span> ' + repos[i].description +'</li>' +
80+
'<li><span>Forks:</span> ' + repos[i].forks +'</li>' +
81+
'<li><span>Updated:</span> ' + repos[i].updated_at +'</li>' +
82+
'</ul>' +
83+
'</div>';
84+
}
85+
}
86+
//
87+
document.getElementById('users').innerHTML = output;
88+
document.getElementById('users').classList.remove('NetworkError');
89+
90+
} ).catch( function(status){ // In state of "rejected"
91+
document.getElementById('users').classList.add('NetworkError');
92+
document.getElementById('users').innerHTML = status;
93+
} );
94+
95+
}
96+
97+
98+
99+
function loadUsers2(){
100+
const option = this.options[this.selectedIndex].value;
101+
const url = `https://api.github.com/repos/HackYourFuture/${option}/contributors`;
102+
103+
const promiseToGetXMLHttpRequest = new Promise( function( resolve , reject ){ // Make a promise by get a XMLHttpRequest response
104+
105+
const xhr = new XMLHttpRequest();
106+
xhr.open( 'GET' , url );
107+
xhr.onload = () => {
108+
if (xhr.status == 200 ) { // If successful, resolve the promise by passing back the request response as a string
109+
resolve(xhr.responseText);
110+
} else { // If it fails, reject the promise with a error message as a string
111+
reject("Network error:" + xhr.status +' - '+ xhr.statusText);
112+
}
113+
};
114+
xhr.onerror = () => reject("Network error:" + xhr.status +' - '+ xhr.statusText);
115+
xhr.send();
116+
117+
} );
118+
119+
120+
121+
promiseToGetXMLHttpRequest.then( function(responseText){ // In state of "fulfilled"
122+
const repos = JSON.parse( responseText );
123+
//
124+
var output = '';
125+
for(let i in repos){
126+
output += '<div class="user">' +
127+
'<img src="' + repos[i].avatar_url + '" width="70" height="70">' +
128+
'<ul>' +
129+
'<li><span>name:</span> ' + repos[i].login +'</li>' +
130+
'<li><span>contributions:</span> ' + repos[i].contributions +'</li>' +
131+
'</ul>' +
132+
'</div>';
133+
}
134+
//
135+
document.getElementById('users2').innerHTML = output;
136+
document.getElementById('users2').classList.remove('NetworkError');
137+
138+
139+
} ).catch( function(status){ // In state of "rejected"
140+
document.getElementById('users2').classList.add('NetworkError');
141+
document.getElementById('users2').innerHTML = status;
142+
} );
143+
144+
}
145+
146+
147+

‎Week2/assets/style.css

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
2+
.footer{
3+
background: #333;
4+
color: #FFF;
5+
text-align: center;
6+
padding: 10px 0;
7+
}
8+
.container{
9+
background-color: #fff;
10+
width: 40%;
11+
min-height: 50em;
12+
display: flex;
13+
flex-direction: row;
14+
flex-wrap: wrap;
15+
margin: 0 auto;
16+
text-align: left;
17+
padding: 20px 0;
18+
}
19+
20+
21+
span{
22+
color:black;
23+
font-style: italic;
24+
font-weight:bold;
25+
font-size: 18px;
26+
}
27+
#users{
28+
background-color: #fff;
29+
width: 40%;
30+
height: 75%;
31+
display: flex;
32+
flex-direction: column;
33+
margin: 0% 0% 0% 0%;
34+
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);
35+
}
36+
#users2{
37+
background-color: #fff;
38+
width: 40%;
39+
height: 1075%;
40+
display: flex;
41+
flex-direction: column;
42+
margin: 1% 1% 1% 1%;
43+
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);
44+
}
45+
46+
.header{
47+
48+
background: #333;
49+
color: #FFF;
50+
font-size: 20px;
51+
text-align: left;
52+
padding: 20px 0;
53+
54+
55+
}
56+
.headerH3{
57+
58+
display: inline;
59+
}
60+
61+
62+
body{
63+
margin: 0;
64+
padding: 0;
65+
font-family: Arial, Tahoma;
66+
}
67+
.user{
68+
display: flex;
69+
padding: 5px;
70+
border-bottom: 2px solid #efefef;
71+
72+
}
73+
.user ul {
74+
list-style: none;
75+
}
76+
77+
.NetworkError{
78+
background-color: rgb(255, 23, 23) !important;
79+
}

0 commit comments

Comments
 (0)