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

Skip to content

Commit 6793b69

Browse files
CatsudemoCatsudemo
authored
Merge pull request #1 from Catsudemo/week1
Week one homework
2 parents 771142b + 437504e commit 6793b69

File tree

3 files changed

+231
-61
lines changed

3 files changed

+231
-61
lines changed

‎homework/index.html

Lines changed: 34 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,37 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta
6+
name="viewport"
7+
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
8+
/>
9+
<meta name="theme-color" content="#000000" />
10+
<meta name="apple-mobile-web-app-capable" content="yes" />
11+
<meta name="mobile-web-app-capable" content="yes" />
12+
<meta name="format-detection" content="telephone=no" />
13+
<link rel="apple-touch-icon" href="./hyf.png" />
14+
<link rel="shortcut icon" type="image/png" href="./hyf.png" />
15+
<title>HYF-GITHUB</title>
16+
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" />
17+
<link rel="stylesheet" href="./newStyle.css" />
18+
</head>
319

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>
20+
<body>
21+
<div class="header" id="selector_header">
22+
<form name="chooseRepo">
23+
<select onchange class="selector" id="repoSelect" name="repoSelect"> </select>
24+
</form>
25+
</div>
26+
<div class="flex-wrapper">
27+
<div id="repo">
28+
Repo facts
29+
</div>
30+
<div id="contribDiv">
31+
Contributors
32+
</div>
33+
</div>
34+
<div id="root"></div>
35+
<script src="./index.js"></script>
36+
</body>
37+
</html>

‎homework/index.js

Lines changed: 132 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,138 @@
11
'use strict';
22

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-
}
3+
const repoSelector = document.querySelector('#repoSelect');
4+
const contribDiv = document.querySelector('#contribDiv');
5+
const repoDiv = document.querySelector('#repo');
6+
7+
function fetchJSON(url, cb) {
8+
const xhr = new XMLHttpRequest();
9+
xhr.open('GET', url);
10+
xhr.setRequestHeader = 'Catsudemo https://api.github.com';
11+
xhr.responseType = 'json';
12+
xhr.onload = () => {
13+
if (xhr.status < 400) {
14+
cb(null, xhr.response);
15+
} else {
16+
cb(new Error(`Network error: ${xhr.status} - ${xhr.statusText}`));
17+
}
18+
};
19+
xhr.onerror = () => cb(new Error('Network request failed'));
20+
xhr.send();
21+
}
22+
23+
function createAndAppend(name, parent, options = {}) {
24+
const elem = document.createElement(name);
25+
parent.appendChild(elem);
26+
Object.keys(options).forEach(key => {
27+
const value = options[key];
28+
if (key === 'text') {
29+
elem.textContent = value;
30+
} else {
31+
elem.setAttribute(key, value);
32+
}
33+
});
34+
return elem;
35+
}
36+
37+
function initPage(data, repoSelector) {
38+
buildSelect(data, repoSelector);
39+
}
40+
41+
function buildSelect(data, repoSelector) {
42+
data
43+
.map(repo => repo.name)
44+
.sort()
45+
.forEach(name => {
46+
createAndAppend('OPTION', repoSelector, { text: name, value: name });
4147
});
42-
}
48+
}
4349

44-
const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
50+
function main(url) {
51+
fetchJSON(url, (err, data) => {
52+
const root = document.getElementById('root');
53+
if (err) {
54+
createAndAppend('div', root, { text: err.message, class: 'alert-error' });
55+
} else {
56+
// createAndAppend('pre', root, { text: JSON.stringify(data, null, 2) });
57+
// buildSelect(data,repoSelector)
58+
initPage(data, repoSelector);
59+
}
60+
});
61+
}
4562

46-
window.onload = () => main(HYF_REPOS_URL);
63+
const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
64+
65+
function displayContrib(contributor, contributions, avatar) {
66+
const eachPersonUl = document.createElement('ul');
67+
const contributorName = document.createElement('li');
68+
contributorName.innerText = `Username: ${contributor}`;
69+
eachPersonUl.appendChild(contributorName);
70+
const eachContributions = document.createElement('li');
71+
eachContributions.innerText = `Contributions: ${contributions}`;
72+
eachPersonUl.appendChild(eachContributions);
73+
contribDiv.appendChild(eachPersonUl);
74+
const eachAvatar = document.createElement('IMG');
75+
eachAvatar.innerhtml = `<img src=${avatar}'>`;
76+
contribDiv.appendChild(eachAvatar);
77+
}
78+
79+
function displayRepo(repository, description, forks, updated) {
80+
const eachRepoUl = document.createElement('ul');
81+
const eachName = document.createElement('li');
82+
eachName.innerText = `Repository: ${repository}`;
83+
eachRepoUl.appendChild(eachName);
84+
const eachDescription = document.createElement('li');
85+
eachDescription.innerText = `Contributions: ${description}`;
86+
eachRepoUl.appendChild(eachDescription);
87+
const eachForks = document.createElement('li');
88+
eachForks.innerText = `Forks: ${forks}`;
89+
eachRepoUl.appendChild(eachForks);
90+
const eachUpdated = document.createElement('li');
91+
eachUpdated.innerText = `Updated: ${updated}`;
92+
eachRepoUl.appendChild(eachUpdated);
93+
repoDiv.appendChild(eachRepoUl);
4794
}
95+
96+
const selectElement = document.querySelector('.selector');
97+
98+
selectElement.addEventListener('change', event => {
99+
const result = document.querySelector('.result');
100+
let repo = document.getElementById('repoSelect').value;
101+
let repoURL = `https://api.github.com/repos/HackYourFuture/${repo}`;
102+
let contribURL = `https://api.github.com/repos/HackYourFuture/${repo}/contributors`;
103+
104+
main(HYF_REPOS_URL);
105+
106+
fetchJSON(repoURL, (err, data) => {
107+
const root = document.getElementById('root');
108+
if (err) {
109+
createAndAppend('div', root, { text: err.message, class: 'alert-error' });
110+
} else {
111+
repoDiv.innerHTML = '';
112+
let repository = data.name;
113+
let description = data.description;
114+
let forks = data.forks;
115+
let updated = data.updated_at;
116+
displayRepo(repository, description, forks, updated);
117+
}
118+
console.log('Here is the repodata');
119+
});
120+
121+
fetchJSON(contribURL, (err, data) => {
122+
const root = document.getElementById('root');
123+
if (err) {
124+
createAndAppend('div', root, { text: err.message, class: 'alert-error' });
125+
} else {
126+
contribDiv.innerHTML = '';
127+
data.forEach(object => {
128+
let contributor = object.login;
129+
let contributions = object.contributions;
130+
let avatar = object.avatar_url;
131+
displayContrib(contributor, contributions, avatar);
132+
});
133+
console.log('Here is the contribdata');
134+
}
135+
});
136+
});
137+
138+
window.onload = () => main(HYF_REPOS_URL);

‎homework/newStyle.css

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
.header {
2+
background-color: #176ab0;
3+
color: white;
4+
text-align: center;
5+
padding: 5px;
6+
}
7+
8+
#main-content {
9+
width: 350px;
10+
float: left;
11+
padding: 10px;
12+
}
13+
14+
#footer {
15+
background-color: #176ab0;
16+
color: white;
17+
clear: both;
18+
text-align: center;
19+
padding: 5px;
20+
}
21+
22+
.flex-wrapper {
23+
font-family: Abel;
24+
background-color: grey;
25+
text-align: left;
26+
padding-top: 25px;
27+
padding-bottom: 25px;
28+
font-size: 20px;
29+
display: flex;
30+
flex-direction: row;
31+
justify-content: center;
32+
background-color: #2E2C2F;
33+
color: #444;
34+
}
35+
36+
#repo {
37+
background-color: whitesmoke;
38+
border-color: #2E2C2F;
39+
width: 40%;
40+
border: 5px;
41+
padding: 20px;
42+
margin: 20px;
43+
}
44+
45+
#contribDiv {
46+
background-color: whitesmoke;
47+
border-color: #2E2C2F;
48+
width: 40%;
49+
border: 5px;
50+
padding: 20px;
51+
margin: 20px;
52+
}
53+
54+
@media screen and (max-width: 600px) {
55+
.flex-wrapper {
56+
-webkit-flex-direction: column;
57+
flex-direction: column;
58+
}
59+
#repo {
60+
width: 80%;
61+
}
62+
#contribDiv {
63+
width: 80%;
64+
}
65+
}

0 commit comments

Comments
 (0)