Skip to content

Commit 9897e13

Browse files
NahuiNahui
authored
Merge pull request #1 from Nahui/week1
Homework week1 JavaScript3
2 parents 5553de8 + 59d0c18 commit 9897e13

4 files changed

Lines changed: 298 additions & 5 deletions

File tree

‎homework/App.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,8 @@ class App {
7272
* @param {Error} error An Error object describing the error.
7373
*/
7474
renderError(error) {
75-
console.log(error); // TODO: replace with your own code
75+
return error;
76+
// console.log(error); // TODO: replace with your own code
7677
}
7778
}
7879

‎homework/index.js‎

Lines changed: 98 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
cb(new Error(`Network error: ${xhr.status} - ${xhr.statusText}`));
1313
}
1414
};
15-
xhr.onerror = () => cb(new Error('Network request failed'));
15+
xhr.onerror = () => cb(new Error('Network request failed')); // “communication errors”: connection is lost or the remote server does not respond at all.
1616
xhr.send();
1717
}
1818

@@ -30,13 +30,109 @@
3030
return elem;
3131
}
3232

33+
// Display repository options in the header
34+
function selectOptions(nameOption) {
35+
const selectRepoHYF = document.getElementById('selectRepoHYF');
36+
for (let i = 0; i < nameOption.length; i++) {
37+
createAndAppend('option', selectRepoHYF, { value: i, text: nameOption[i].name });
38+
}
39+
}
40+
41+
// Information on left side inside a table
42+
function displayInformation(element) {
43+
const container = document.getElementById('container');
44+
const infoDiv = createAndAppend('div', container, {
45+
id: 'leftArea',
46+
class: 'left-div whiteframe',
47+
});
48+
createAndAppend('table', infoDiv, { id: 'table' });
49+
const table = document.getElementById('table');
50+
createAndAppend('tbody', table, { id: 'tbody' });
51+
function createTableRow(label, description) {
52+
const tRow = createAndAppend('tr', table);
53+
createAndAppend('td', tRow, { text: label, class: 'label' });
54+
createAndAppend('td', tRow, { text: description });
55+
}
56+
57+
createTableRow('Repository: ', element.name);
58+
createTableRow('Description: ', element.description);
59+
createTableRow('Forks : ', element.forks);
60+
const date2 = new Date(element.updated_at).toLocaleString();
61+
createTableRow('Updated: ', date2);
62+
}
63+
64+
// Show contributors
65+
function contributorsList(element) {
66+
fetchJSON(element.contributors_url, (err, data) => {
67+
const container = document.getElementById('container');
68+
createAndAppend('div', container, {
69+
id: 'rightArea',
70+
class: 'right-div whiteframe',
71+
});
72+
const rightArea = document.getElementById('rightArea');
73+
createAndAppend('h7', rightArea, {
74+
text: 'Contributions',
75+
class: 'contributor-header',
76+
});
77+
createAndAppend('ul', rightArea, {
78+
id: 'contList',
79+
class: 'contributor-list',
80+
});
81+
let contributorURL;
82+
let contributorItem;
83+
let contributorData;
84+
const contList = document.getElementById('contList');
85+
for (let i = 0; i < data.length; i++) {
86+
contributorURL = createAndAppend('a', contList, {
87+
href: data[i].html_url,
88+
target: '_blank',
89+
});
90+
contributorItem = createAndAppend('li', contributorURL, {
91+
class: 'contributor-item',
92+
});
93+
94+
createAndAppend('img', contributorItem, {
95+
src: data[i].avatar_url,
96+
class: 'contributor-avatar',
97+
});
98+
contributorData = createAndAppend('div', contributorItem, {
99+
class: 'contributor-data',
100+
});
101+
createAndAppend('div', contributorData, { text: data[i].login });
102+
createAndAppend('div', contributorData, {
103+
text: data[i].contributions,
104+
class: 'contributor-badge',
105+
});
106+
}
107+
});
108+
}
109+
33110
function main(url) {
34111
fetchJSON(url, (err, data) => {
35112
const root = document.getElementById('root');
36113
if (err) {
37114
createAndAppend('div', root, { text: err.message, class: 'alert-error' });
38115
} else {
39-
createAndAppend('pre', root, { text: JSON.stringify(data, null, 2) });
116+
createAndAppend('header', root, { id: 'topArea', class: 'header' });
117+
const topArea = document.getElementById('topArea');
118+
createAndAppend('h7', topArea, { id: 'title', text: 'HYF Repositories' });
119+
createAndAppend('select', topArea, { id: 'selectRepoHYF', class: 'repo-selector' });
120+
createAndAppend('div', root, { id: 'container' });
121+
data.sort((a, b) => a.name.localeCompare(b.name));
122+
selectOptions(data);
123+
displayInformation(data[0]);
124+
contributorsList(data[0]);
125+
126+
document.getElementById('selectRepoHYF').onchange = function startListener() {
127+
const selectedItem = this.options[this.selectedIndex].value;
128+
const infoLeft = document.getElementById('leftArea');
129+
infoLeft.parentNode.removeChild(infoLeft);
130+
const contributors = document.getElementById('rightArea');
131+
contributors.parentNode.removeChild(contributors);
132+
133+
displayInformation(data[selectedItem]);
134+
contributorsList(data[selectedItem]);
135+
};
40136
}
41137
});
42138
}

‎homework/indexTemp.js‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
'use strict';
2+
3+
{
4+
function fetchJSON(url, cb) {
5+
const xhr = new XMLHttpRequest();
6+
xhr.open('GET', url);
7+
xhr.responseType = 'json';
8+
xhr.onload = () => {
9+
if (xhr.status < 400) {
10+
cb(null, xhr.response);
11+
} else {
12+
cb(new Error(`Network error: ${xhr.status} - ${xhr.statusText}`));
13+
}
14+
};
15+
xhr.onerror = () => cb(new Error('Network request failed'));
16+
xhr.send();
17+
}
18+
19+
function createAndAppend(name, parent, options = {}) {
20+
const elem = document.createElement(name);
21+
parent.appendChild(elem);
22+
Object.keys(options).forEach(key => {
23+
const value = options[key];
24+
if (key === 'text') {
25+
elem.textContent = value;
26+
} else {
27+
elem.setAttribute(key, value);
28+
}
29+
});
30+
return elem;
31+
}
32+
33+
function main(url) {
34+
fetchJSON(url, (err, data) => {
35+
const root = document.getElementById('root');
36+
if (err) {
37+
createAndAppend('div', root, { text: err.message, class: 'alert-error' });
38+
} else {
39+
createAndAppend('pre', root, { text: JSON.stringify(data, null, 2) });
40+
}
41+
});
42+
}
43+
44+
const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
45+
46+
window.onload = () => main(HYF_REPOS_URL);
47+
}

‎homework/style.css‎

Lines changed: 151 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,152 @@
1+
body {
2+
width: 768px;
3+
margin-left: auto;
4+
margin-right: auto;
5+
background-color: #f8f8f8;
6+
font-family: 'Roboto', sans-serif;
7+
color: rgb(0, 0, 0, 87%);
8+
margin-top: 0;
9+
}
10+
11+
#container {
12+
display: flex;
13+
flex-direction: row;
14+
align-items: flex-start;
15+
}
16+
17+
@media (max-width: 767px) {
18+
body {
19+
width: 100%;
20+
}
21+
#container {
22+
margin: 0;
23+
flex-direction: column;
24+
align-items: stretch;
25+
}
26+
}
27+
28+
h1,
29+
h2,
30+
h3,
31+
h4 {
32+
color: rgb(0, 0, 0, 54%);
33+
}
34+
35+
.header {
36+
color: white;
37+
background-color: #3f51b5;
38+
padding: 8px 16px;
39+
margin-bottom: 16px;
40+
display: flex;
41+
flex-direction: row;
42+
align-items: center;
43+
}
44+
45+
.repo-selector {
46+
margin-left: 16px;
47+
font-size: 14px;
48+
width: 250px;
49+
height: 32px;
50+
padding: 2px;
51+
}
52+
53+
.left-div,
54+
.right-div {
55+
background-color: white;
56+
flex: 1;
57+
}
58+
59+
.left-div {
60+
padding: 16px;
61+
margin-right: 16px;
62+
}
63+
64+
@media (max-width: 767px) {
65+
.left-div {
66+
margin: 0;
67+
}
68+
}
69+
70+
.contributor-list {
71+
list-style-type: none;
72+
padding: 0;
73+
margin: 0;
74+
}
75+
76+
.alert {
77+
padding: 0.75rem 1.25rem;
78+
margin-bottom: 1rem;
79+
border-radius: 0.25rem;
80+
flex: 1;
81+
}
82+
183
.alert-error {
2-
color: red;
3-
}
84+
color: #721c24;
85+
background-color: #f8d7da;
86+
}
87+
88+
.contributor-header {
89+
font-size: 0.8rem;
90+
color: rgb(0, 0, 0, 54%);
91+
padding: 16px 16px 8px 16px;
92+
}
93+
94+
.contributor-item {
95+
border-bottom: solid 1px rgb(0, 0, 0, 12%);
96+
padding: 16px;
97+
display: flex;
98+
flex-direction: row;
99+
align-items: center;
100+
cursor: pointer;
101+
}
102+
103+
.contributor-avatar {
104+
border-radius: 3px;
105+
margin-right: 16px;
106+
height: 48px;
107+
}
108+
109+
.contributor-data {
110+
flex: 1;
111+
display: flex;
112+
flex-direction: row;
113+
justify-content: space-between;
114+
align-content: center;
115+
}
116+
117+
.contributor-badge {
118+
font-size: 12px;
119+
padding: 2px 8px;
120+
line-height: 1rem;
121+
background-color: gray;
122+
color: white;
123+
border-radius: 4px;
124+
}
125+
126+
table {
127+
table-layout: fixed;
128+
color: rgb(0, 0, 0, 81%);
129+
}
130+
131+
td {
132+
vertical-align: top;
133+
}
134+
135+
td:first-child {
136+
width: 100px;
137+
min-width: 100px;
138+
max-width: 100px;
139+
}
140+
141+
td.label {
142+
font-weight: bold;
143+
}
144+
145+
.whiteframe {
146+
margin-bottom: 8px;
147+
border: none;
148+
border-radius: 2px;
149+
background-color: #fff;
150+
box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.14),
151+
0 3px 3px -2px rgba(0, 0, 0, 0.12);
152+
}

0 commit comments

Comments
 (0)