Skip to content

Commit 899b7bd

Browse files
eugeneFr9eugeneFr9
committed
homework week1 is done
1 parent 2a362f8 commit 899b7bd

4 files changed

Lines changed: 148 additions & 0 deletions

File tree

‎Week1/github.js‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
'use strict';
2+
{
3+
const URL_Rep = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
4+
function renderRepository(container, repository) {
5+
let someDate = new Date(repository.updated_at);
6+
container.innerHTML = "";
7+
const innerTable = createAndAppend("table", container);
8+
const tBody = createAndAppend("tbody", innerTable);
9+
const tr = createAndAppend('tr', tBody);
10+
createAndAppend('td', tr, {text: "Repository:", class: "nameRow"});
11+
const tdForLink = createAndAppend('td', tr,);
12+
createAndAppend('a', tdForLink, {text: repository.name, href: repository.html_url})
13+
const tr1 = createAndAppend('tr', tBody);
14+
createAndAppend('td', tr1, {text: "Description:", class: "nameRow"});
15+
createAndAppend('td', tr1, {text: repository.description});
16+
const tr2 = createAndAppend('tr', tBody);
17+
createAndAppend('td', tr2, {text: "Forks:", class: "nameRow"});
18+
createAndAppend('td', tr2, {text: repository.forks});
19+
const tr3 = createAndAppend('tr', tBody);
20+
createAndAppend('td', tr3, {text: "Updated:", class: "nameRow"});
21+
createAndAppend('td', tr3, {text: someDate.toLocaleString()});
22+
23+
24+
}
25+
function main(url) {
26+
const root = document.getElementById('root');
27+
const divForSelect = createAndAppend('div', root, {id: "container-select"});
28+
const heading = createAndAppend('h5', divForSelect, {text: "HYF Repositories", class: "heading"});
29+
const select = createAndAppend('select', divForSelect, {id: "menu"});
30+
const container = createAndAppend('div', root, {id: "first-container"});
31+
32+
fetchJSON(url, (error, repositories) => {
33+
if (error) {
34+
container.innerHTML = error;
35+
return;
36+
}
37+
repositories.forEach((repository, index) => {
38+
createAndAppend('option', select, { text: repository.name, value: index });
39+
});
40+
41+
select.addEventListener('change', (event) => {
42+
renderRepository(container, repositories[event.target.value])
43+
});
44+
45+
renderRepository(container, repositories[0]);
46+
});
47+
48+
}
49+
window.onload = () => main(URL_Rep);
50+
}

‎Week1/index2.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<link rel="stylesheet" href="style2.css">
8+
<title>Application for repositories</title>
9+
</head>
10+
<body>
11+
<div id="root"></div>
12+
<script src="util.js"></script>
13+
<script src="github.js"></script>
14+
</body>
15+
</html>

‎Week1/style2.css‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
body {
2+
font-family: Verdana, Geneva, Tahoma, sans-serif;
3+
margin: 0 auto;
4+
padding: 0;
5+
width: 770px;
6+
background-color: floralwhite;
7+
margin-top: 0;
8+
}
9+
* {
10+
box-sizing: border-box;
11+
}
12+
h5 {
13+
padding: 0;
14+
margin: 0;
15+
}
16+
#container-select {
17+
color: white;
18+
background-color: rgb(34, 51, 150);
19+
padding: 20px 16px;
20+
margin-bottom: 16px;
21+
display: flex;
22+
flex-direction: row;
23+
align-items: center;
24+
}
25+
#menu {
26+
margin-left: 15px;
27+
font-size: 14px;
28+
width: 270px;
29+
height: 32px;
30+
padding: 5px;
31+
}
32+
#root {
33+
max-width: 800px;
34+
margin: 0 auto;
35+
}
36+
#first-container {
37+
padding: 20px;
38+
border-radius: 5px;
39+
background-color: #fff;
40+
box-shadow: 5px 5px 8px ;
41+
}
42+
table {
43+
border-collapse: collapse;
44+
}
45+
td {
46+
padding-left: 15px;
47+
}
48+
td.nameRow {
49+
font-weight: bold;
50+
}

‎Week1/util.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
'use strict';
2+
{
3+
function fetchJSON(url, cb) {
4+
const xhr = new XMLHttpRequest();
5+
xhr.open("GET", url);
6+
xhr.responseType = 'json';
7+
xhr.onload = () => {
8+
if (xhr.status < 400) {
9+
cb(null, xhr.response)
10+
} else {
11+
cb(new Error(`Network error: ${xhr.status} - ${xhr.statusText}`));
12+
}
13+
}
14+
xhr.onerror = ()=> {
15+
cb(new Error('Network request failed'));
16+
};
17+
xhr.send();
18+
}
19+
function createAndAppend(name, parent, options = {}) {
20+
const elem = document.createElement(name);
21+
parent.appendChild(elem);
22+
Object.keys(options).forEach(key => {
23+
if (key === "text") {
24+
elem.innerHTML = options[key];
25+
} else {
26+
elem.setAttribute(key, options[key]);
27+
}
28+
})
29+
return elem;
30+
}
31+
window.fetchJSON = fetchJSON;
32+
window.createAndAppend = createAndAppend;
33+
}

0 commit comments

Comments
 (0)