Skip to content

Commit 31b9994

Browse files
NahuiNahui
committed
Deleted some files in week1 and 2 and made part1 of week3
1 parent 76683a0 commit 31b9994

3 files changed

Lines changed: 319 additions & 0 deletions

File tree

‎Week3/part1/index.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<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">
12+
<link rel="shortcut icon" type="image/png" href="./hyf.png" />
13+
<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">
16+
</head>
17+
18+
<body>
19+
<div id="root"></div>
20+
<script src="./index.js"></script>
21+
</body>
22+
23+
</html>

‎Week3/part1/index.js‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
'use strict';
2+
3+
{
4+
function fetchJSON(url) {
5+
return new Promise((resolve, reject) => {
6+
const xhr = new XMLHttpRequest();
7+
xhr.open('GET', url);
8+
xhr.responseType = 'json';
9+
xhr.onload = () => {
10+
if (xhr.status < 400) {
11+
resolve(xhr.response);
12+
} else {
13+
reject(new Error(`Network error: ${xhr.status} - ${xhr.statusText}`));
14+
}
15+
};
16+
xhr.onerror = () => reject(new Error('Network request failed'));
17+
xhr.send();
18+
});
19+
}
20+
21+
function createAndAppend(name, parent, options = {}) {
22+
const elem = document.createElement(name);
23+
parent.appendChild(elem);
24+
Object.keys(options).forEach(key => {
25+
const value = options[key];
26+
if (key === 'text') {
27+
elem.textContent = value;
28+
} else {
29+
elem.setAttribute(key, value);
30+
}
31+
});
32+
return elem;
33+
}
34+
35+
// Display repository options in the header
36+
function selectOptions(nameOption) {
37+
const selectRepoHYF = document.getElementById('selectRepoHYF');
38+
for (let i = 0; i < nameOption.length; i++) {
39+
createAndAppend('option', selectRepoHYF, { value: i, text: nameOption[i].name });
40+
}
41+
}
42+
43+
// Information on left side inside a table
44+
function displayInformation(element) {
45+
const container = document.getElementById('container');
46+
const infoDiv = createAndAppend('div', container, {
47+
id: 'leftArea',
48+
class: 'left-div whiteframe',
49+
});
50+
createAndAppend('table', infoDiv, { id: 'table' });
51+
const table = document.getElementById('table');
52+
createAndAppend('tbody', table, { id: 'tbody' });
53+
function createTableRow(label, description) {
54+
const tRow = createAndAppend('tr', table);
55+
createAndAppend('td', tRow, { text: label, class: 'label' });
56+
createAndAppend('td', tRow, { text: description });
57+
}
58+
59+
createTableRow('Repository: ', element.name);
60+
createTableRow('Description: ', element.description);
61+
createTableRow('Forks : ', element.forks);
62+
const date2 = new Date(element.updated_at).toLocaleString();
63+
createTableRow('Updated: ', date2);
64+
}
65+
66+
// Show contributors
67+
function contributorsList(element) {
68+
fetchJSON(element.contributors_url).then(data => {
69+
const container = document.getElementById('container');
70+
createAndAppend('div', container, {
71+
id: 'rightArea',
72+
class: 'right-div whiteframe',
73+
});
74+
const rightArea = document.getElementById('rightArea');
75+
createAndAppend('p', rightArea, {
76+
text: 'Contributions',
77+
class: 'contributor-header',
78+
});
79+
createAndAppend('ul', rightArea, {
80+
id: 'contList',
81+
class: 'contributor-list',
82+
});
83+
let contributorURL;
84+
let contributorItem;
85+
let contributorData;
86+
const contList = document.getElementById('contList');
87+
for (let i = 0; i < data.length; i++) {
88+
contributorURL = createAndAppend('a', contList, {
89+
href: data[i].html_url,
90+
target: '_blank',
91+
});
92+
contributorItem = createAndAppend('li', contributorURL, {
93+
class: 'contributor-item',
94+
});
95+
96+
createAndAppend('img', contributorItem, {
97+
src: data[i].avatar_url,
98+
class: 'contributor-avatar',
99+
});
100+
contributorData = createAndAppend('div', contributorItem, {
101+
class: 'contributor-data',
102+
});
103+
createAndAppend('div', contributorData, { text: data[i].login });
104+
createAndAppend('div', contributorData, {
105+
text: data[i].contributions,
106+
class: 'contributor-badge',
107+
});
108+
}
109+
});
110+
}
111+
112+
async function main(url) {
113+
const root = document.getElementById('root');
114+
try {
115+
const data = await fetchJSON(url);
116+
data.sort((a, b) => a.name.localeCompare(b.name));
117+
createAndAppend('header', root, { id: 'topArea', class: 'header' });
118+
const topArea = document.getElementById('topArea');
119+
createAndAppend('p', topArea, { id: 'title', text: 'HYF Repositories' });
120+
createAndAppend('select', topArea, { id: 'selectRepoHYF', class: 'repo-selector' });
121+
createAndAppend('div', root, { id: 'container' });
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+
};
136+
} catch (err) {
137+
createAndAppend('div', root, { text: err.message, class: 'alert-error' });
138+
}
139+
}
140+
141+
const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
142+
143+
window.onload = () => main(HYF_REPOS_URL);
144+
}

‎Week3/part1/style.css‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +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+
83+
.alert-error {
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)