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

Commit 41eb2a2

Browse files
christi023christi023
authored
Merge pull request #3 from christi023/week2
Week2
2 parents bf43dcb + d455f0b commit 41eb2a2

17 files changed

Lines changed: 883 additions & 308 deletions

File tree

‎.vscode/tasks.json‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
// See https://go.microsoft.com/fwlink/?LinkId=733558
3+
// for the documentation about the tasks.json format
4+
"version": "2.0.0",
5+
"tasks": [
6+
{
7+
"type": "npm",
8+
"script": "install",
9+
"problemMatcher": []
10+
}
11+
]
12+
}

‎Week1/.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+
}

‎Week1/index.html‎

Lines changed: 22 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +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-
21-
<script src="./index.js"></script>
22-
</body>
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+
21+
<script src="./index.js"></script>
22+
</body>
2423
</html>

‎Week1/index.js‎

Lines changed: 134 additions & 134 deletions
Original file line numberDiff line numberDiff line change
@@ -1,134 +1,134 @@
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-
// Header
34-
function selectOptions(nameOptions) {
35-
const repoSelect = document.getElementById('repoSelect');
36-
for (let i = 0; i < nameOptions.length; i++) {
37-
createAndAppend('option', repoSelect, { value: i, text: nameOptions[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.contributors_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-
83-
const list = document.getElementById('list');
84-
for (let i = 0; i < data.length; i++) {
85-
const contributorURL = createAndAppend('a', list, { href: data[i].html_url, target: '_blank' });
86-
const contributorItem = createAndAppend('li', contributorURL, { class: 'contributor-item' });
87-
createAndAppend('img', contributorItem, {
88-
src: data[i].avatar_url,
89-
class: 'contributor-avatar',
90-
});
91-
const contributorData = createAndAppend('div', contributorItem, { class: 'contributor-data' });
92-
createAndAppend('div', contributorData, { text: data[i].login });
93-
createAndAppend('div', contributorData, {
94-
text: data[i].contributions,
95-
class: 'contributor-badge',
96-
});
97-
}
98-
});
99-
}
100-
101-
function main(url) {
102-
fetchJSON(url, (err, data) => {
103-
const root = document.getElementById('root');
104-
if (err) {
105-
createAndAppend('div', root, { text: err.message, class: 'alert-error' });
106-
} else {
107-
createAndAppend('header', root, { id: 'top', class: 'header' });
108-
const top = document.getElementById('top');
109-
createAndAppend('h7', top, { id: 'title', text: 'HYF Repositories' });
110-
createAndAppend('select', top, { id: 'repoSelect', class: 'repo-selector' });
111-
createAndAppend('div', root, { id: 'container' });
112-
data.sort((a, b) => a.name.localeCompare(b.name));
113-
selectOptions(data);
114-
displayInfo(data[0]);
115-
contributorsList(data[0]);
116-
117-
document.getElementById('repoSelect').onchange = function startListener() {
118-
const selectedItem = this.options[this.selectedIndex].value;
119-
const leftSideInfo = document.getElementById('leftSide');
120-
leftSideInfo.parentNode.removeChild(leftSideInfo);
121-
const contributors = document.getElementById('rightSide');
122-
contributors.parentNode.removeChild(contributors);
123-
124-
displayInfo(data[selectedItem]);
125-
contributorsList(data[selectedItem]);
126-
};
127-
}
128-
});
129-
}
130-
131-
const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
132-
133-
window.onload = () => main(HYF_REPOS_URL);
134-
}
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+
// Header
34+
function selectOptions(nameOptions) {
35+
const repoSelect = document.getElementById('repoSelect');
36+
for (let i = 0; i < nameOptions.length; i++) {
37+
createAndAppend('option', repoSelect, { value: i, text: nameOptions[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.contributors_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+
83+
const list = document.getElementById('list');
84+
for (let i = 0; i < data.length; i++) {
85+
const contributorURL = createAndAppend('a', list, { href: data[i].html_url, target: '_blank' });
86+
const contributorItem = createAndAppend('li', contributorURL, { class: 'contributor-item' });
87+
createAndAppend('img', contributorItem, {
88+
src: data[i].avatar_url,
89+
class: 'contributor-avatar',
90+
});
91+
const contributorData = createAndAppend('div', contributorItem, { class: 'contributor-data' });
92+
createAndAppend('div', contributorData, { text: data[i].login });
93+
createAndAppend('div', contributorData, {
94+
text: data[i].contributions,
95+
class: 'contributor-badge',
96+
});
97+
}
98+
});
99+
}
100+
101+
function main(url) {
102+
fetchJSON(url, (err, data) => {
103+
const root = document.getElementById('root');
104+
if (err) {
105+
createAndAppend('div', root, { text: err.message, class: 'alert-error' });
106+
} else {
107+
createAndAppend('header', root, { id: 'top', class: 'header' });
108+
const top = document.getElementById('top');
109+
createAndAppend('h7', top, { id: 'title', text: 'HYF Repositories' });
110+
createAndAppend('select', top, { id: 'repoSelect', class: 'repo-selector' });
111+
createAndAppend('div', root, { id: 'container' });
112+
data.sort((a, b) => a.name.localeCompare(b.name));
113+
selectOptions(data);
114+
displayInfo(data[0]);
115+
contributorsList(data[0]);
116+
117+
document.getElementById('repoSelect').onchange = function startListener() {
118+
const selectedItem = this.options[this.selectedIndex].value;
119+
const leftSideInfo = document.getElementById('leftSide');
120+
leftSideInfo.parentNode.removeChild(leftSideInfo);
121+
const contributors = document.getElementById('rightSide');
122+
contributors.parentNode.removeChild(contributors);
123+
124+
displayInfo(data[selectedItem]);
125+
contributorsList(data[selectedItem]);
126+
};
127+
}
128+
});
129+
}
130+
131+
const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
132+
133+
window.onload = () => main(HYF_REPOS_URL);
134+
}

0 commit comments

Comments
 (0)