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

Commit d455f0b

Browse files
christi023christi023
authored
Merge branch 'master' into week2
2 parents 35e5110 + bf43dcb commit d455f0b

6 files changed

Lines changed: 256 additions & 24 deletions

File tree

‎Week1/index.html‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,22 @@
22
<html lang="en">
33

44
<head>
5-
<meta charset="UTF-8" />
5+
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
7-
<meta name="theme-color" content="#000000" />
8-
<meta name="apple-mobile-web-app-capable" content="yes" />
9-
<meta name="mobile-web-app-capable" content="yes" />
10-
<meta name="format-detection" content="telephone=no" />
11-
<link rel="apple-touch-icon" href="./hyf.png" />
7+
<meta name="theme-color" content="#000000">
8+
<meta name="apple-mobile-web-app-capable" content="yes">
9+
<meta name="mobile-web-app-capable" content="yes">
10+
<meta name="format-detection" content="telephone=no">
11+
<link rel="apple-touch-icon" href="./hyf.png">
1212
<link rel="shortcut icon" type="image/png" href="./hyf.png" />
1313
<title>HYF-GITHUB</title>
14-
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" />
15-
<link rel="stylesheet" href="./style.css" />
14+
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
15+
<link rel="stylesheet" href="./style.css">
1616
</head>
1717

1818
<body>
1919
<div id="root"></div>
20+
2021
<script src="./index.js"></script>
2122
</body>
22-
2323
</html>

‎Week1/index.js‎

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -79,23 +79,16 @@
7979
id: 'list',
8080
class: 'contributor-list',
8181
});
82-
82+
8383
const list = document.getElementById('list');
8484
for (let i = 0; i < data.length; i++) {
85-
const contributorURL = createAndAppend('a', list, {
86-
href: data[i].html_url,
87-
target: '_blank',
88-
});
89-
const contributorItem = createAndAppend('li', contributorURL, {
90-
class: 'contributor-item',
91-
});
85+
const contributorURL = createAndAppend('a', list, { href: data[i].html_url, target: '_blank' });
86+
const contributorItem = createAndAppend('li', contributorURL, { class: 'contributor-item' });
9287
createAndAppend('img', contributorItem, {
9388
src: data[i].avatar_url,
9489
class: 'contributor-avatar',
9590
});
96-
const contributorData = createAndAppend('div', contributorItem, {
97-
class: 'contributor-data',
98-
});
91+
const contributorData = createAndAppend('div', contributorItem, { class: 'contributor-data' });
9992
createAndAppend('div', contributorData, { text: data[i].login });
10093
createAndAppend('div', contributorData, {
10194
text: data[i].contributions,
@@ -105,7 +98,6 @@
10598
});
10699
}
107100

108-
// Main Function
109101
function main(url) {
110102
fetchJSON(url, (err, data) => {
111103
const root = document.getElementById('root');

‎homework/.vscode/settings.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"liveServer.settings.port": 5501
3+
}

‎homework/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717

1818
<body>
1919
<div id="root"></div>
20+
2021
<script src="./index.js"></script>
2122
</body>
2223

‎homework/index.js‎

Lines changed: 90 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,13 +30,102 @@
3030
return elem;
3131
}
3232

33+
// Header
34+
function selectOptions(nameOption) {
35+
const repoSelect = document.getElementById('repoSelect');
36+
for (let i = 0; i < nameOption.length; i++) {
37+
createAndAppend('option', repoSelect, { value: i, text: nameOption[i].name });
38+
}
39+
}
40+
41+
// Create table on left within main div
42+
function displayInfo(element) {
43+
const container = document.getElementById('container');
44+
const divInfo = createAndAppend('div', container, {
45+
id: 'leftSide',
46+
class: 'left-div whiteframe',
47+
});
48+
// Table info
49+
createAndAppend('table', divInfo, { id: 'table' });
50+
const table = document.getElementById('table');
51+
createAndAppend('tbody', table, { id: 'tbody' });
52+
function createTableRow(label, description) {
53+
const tableR = createAndAppend('tr', table);
54+
createAndAppend('td', tableR, { text: label, class: 'label' });
55+
createAndAppend('td', tableR, { text: description });
56+
}
57+
58+
createTableRow('Repository: ', element.name);
59+
createTableRow('Description: ', element.description);
60+
createTableRow('Forks : ', element.forks);
61+
const newDate = new Date(element.updated_at).toLocaleString();
62+
createTableRow('Updated: ', newDate);
63+
}
64+
65+
// Contributors
66+
function contributorsList(element) {
67+
fetchJSON(element.contributor_url, (err, data) => {
68+
const container = document.getElementById('container');
69+
createAndAppend('div', container, {
70+
id: 'rightSide',
71+
class: 'right-div whiteframe',
72+
});
73+
const rightSide = document.getElementById('rightSide');
74+
createAndAppend('h7', rightSide, {
75+
text: 'Contributions',
76+
class: 'contributor-header',
77+
});
78+
createAndAppend('ul', rightSide, {
79+
id: 'list',
80+
class: 'contributor-list',
81+
});
82+
let contributorURL;
83+
let contributorItem;
84+
let contributorData;
85+
const list = document.getElementById('list');
86+
for (let i = 0; i < data.length; i++) {
87+
contributorURL = createAndAppend('a', list, { href: data[i].html_url, target: '_blank' });
88+
contributorItem = createAndAppend('li', contributorURL, { class: 'contributor-item' });
89+
createAndAppend('img', contributorItem, {
90+
src: data[i].avatar_url,
91+
class: 'contributor-avatar',
92+
});
93+
contributorData = createAndAppend('div', contributorItem, { class: 'contributor-data' });
94+
createAndAppend('div', contributorData, { text: data[i].login });
95+
createAndAppend('div', contributorData, {
96+
text: data[i].contributions,
97+
class: 'contributor-badge',
98+
});
99+
}
100+
});
101+
}
102+
33103
function main(url) {
34104
fetchJSON(url, (err, data) => {
35105
const root = document.getElementById('root');
36106
if (err) {
37107
createAndAppend('div', root, { text: err.message, class: 'alert-error' });
38108
} else {
39-
createAndAppend('pre', root, { text: JSON.stringify(data, null, 2) });
109+
createAndAppend('header', root, { id: 'top', class: 'header' });
110+
const top = document.getElementById('top');
111+
createAndAppend('h7', top, { id: 'title', text: 'HYF Repositories' });
112+
createAndAppend('select', top, { id: 'repoSelect', class: 'repo-selector' });
113+
createAndAppend('div', root, { id: 'container' });
114+
data.sort((a, b) => a.name.localCompare(b.name));
115+
selectOptions(data);
116+
displayInfo(data[0]);
117+
contributorsList(data[0]);
118+
119+
document.getElementById('repoSelect').onchange = function startListener() {
120+
const selectItem = this.options[this.selectedIndex].value;
121+
const leftSideInfo = document.getElementById('leftSide');
122+
leftSideInfo.parentNode.removeChild(leftSideInfo);
123+
const contributors = document.getElementById('rightSide');
124+
contributors.parentNode.removeChild('contributors');
125+
126+
displayInfo(data[selectItem]);
127+
contributorsList(data[selectItem]);
128+
};
40129
}
41130
});
42131
}

‎homework/style.css‎

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

0 commit comments

Comments
 (0)