Skip to content

Commit d7c50e6

Browse files
outintotheblueoutintotheblue
committed
week 3 async done
1 parent 9234000 commit d7c50e6

8 files changed

Lines changed: 165 additions & 75 deletions

File tree

‎homework-classes/App.js‎

Lines changed: 25 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44

55
class App {
66
constructor(url) {
7-
this.mainContainer = null;
87
this.initialize(url);
98
}
109

@@ -13,49 +12,57 @@ class App {
1312
* @param {string} url The GitHub URL for obtaining the organization's repositories.
1413
*/
1514
async initialize(url) {
16-
// Add code here to initialize your app
17-
// 1. Create the fixed HTML elements of your page
18-
// 2. Make an initial XMLHttpRequest using Util.fetchJSON() to populate your <select> element
19-
2015
const root = document.getElementById('root');
21-
const header = Util.createAndAppend('header', root, { class: 'header' });
22-
this.mainContainer = Util.createAndAppend('div', root, { id: 'container' });
16+
Util.createAndAppend('select', root, { id: 'dropdown-select' });
17+
Util.createAndAppend('div', root, { id: 'details' });
18+
Util.createAndAppend('div', root, { id: 'contributors' });
19+
Util.createAndAppend('h1', root, { text: 'REPOSITORIES' });
2320

2421
try {
2522
const repos = await Util.fetchJSON(url);
2623
this.repos = repos.map(repo => new Repository(repo));
27-
// TODO: add your own code here
24+
this.repos.forEach(repoDataObj => {
25+
repoDataObj.render(document.getElementById('dropdown-select'));
26+
});
2827
} catch (error) {
2928
this.renderError(error);
3029
}
30+
document.getElementById('dropdown-select').addEventListener('change', event => {
31+
const selectedRepo = event.target.value;
32+
const selectedData = this.repos.filter(repoData => repoData.name === selectedRepo)[0];
33+
this.fetchContributorsAndRender(selectedRepo);
34+
});
3135
}
3236

3337
/**
3438
* Removes all child elements from a container element
3539
* @param {*} container Container element to clear
3640
*/
37-
clearContainer() {
38-
while (this.mainContainer.firstChild) {
39-
this.mainContainer.removeChild(this.mainContainer.firstChild);
41+
static clearContainer(container) {
42+
while (container.firstChild) {
43+
container.removeChild(container.firstChild);
4044
}
4145
}
4246

4347
/**
4448
* Fetch contributor information for the selected repository and render the
4549
* repo and its contributors as HTML elements in the DOM.
46-
* @param {object} repo The selected repository object
50+
* @param {number} index The array index of the repository.
4751
*/
48-
async selectRepository(repo) {
52+
async fetchContributorsAndRender(index) {
4953
try {
50-
this.clearContainer();
54+
const repo = this.repos[index];
5155
const contributors = await repo.fetchContributors();
5256

53-
const repoContainer = Util.createAndAppend('div', this.mainContainer);
54-
const contributorContainer = Util.createAndAppend('div', this.mainContainer);
57+
const container = document.getElementById('container');
58+
App.clearContainer(container);
59+
60+
const leftDiv = Util.createAndAppend('div', container);
61+
const rightDiv = Util.createAndAppend('div', container);
5562

56-
const contributorList = Util.createAndAppend('ul', contributorContainer);
63+
const contributorList = Util.createAndAppend('ul', rightDiv);
5764

58-
repo.render(repoContainer);
65+
repo.render(leftDiv);
5966

6067
contributors
6168
.map(contributor => new Contributor(contributor))

‎homework-classes/Contributor.js‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22

33
/* global Util */
44

5-
// eslint-disable-next-line no-unused-vars
65
class Contributor {
76
constructor(contributor) {
87
this.contributor = contributor;
@@ -14,6 +13,15 @@ class Contributor {
1413
*/
1514
render(container) {
1615
// TODO: replace the next line with your code.
17-
Util.createAndAppend('pre', container, { text: JSON.stringify(this.contributor, null, 2) });
16+
const contributorsDiv = Util.createAndAppend('div', root, { id: 'contributors' });
17+
for (let contributor of listOfContributors) {
18+
Util.createAndAppend('img', contributors, { src: contributor.avatar_url, class: 'contri' });
19+
Util.createAndAppend('div', contributors, { text: contributor.login, class: 'contri' });
20+
Util.createAndAppend('div', contributors, {
21+
text: contributor.contributions,
22+
class: 'contri',
23+
});
24+
}
25+
//Util.createAndAppend('pre', container, { text: JSON.stringify(this.contributor, null, 2) });
1826
}
1927
}

‎homework-classes/OlJVkf.jpg‎

181 KB
Loading

‎homework-classes/Repository.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22

33
/* global Util */
44

5-
// eslint-disable-next-line no-unused-vars
65
class Repository {
76
constructor(repository) {
87
this.repository = repository;
@@ -13,8 +12,9 @@ class Repository {
1312
* @param {HTMLElement} container The container element in which to render the repository.
1413
*/
1514
render(container) {
16-
// TODO: replace the next line with your code.
17-
Util.createAndAppend('pre', container, { text: JSON.stringify(this.repository, null, 2) });
15+
Util.createAndAppend('option', container, {
16+
text: this.name(),
17+
});
1818
}
1919

2020
/**

‎homework-classes/Util.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,18 @@ class Util {
1515
});
1616
return elem;
1717
}
18+
/*
19+
static sortByName(repoObjA, repoObjB) {
20+
const nameA = repoObjA.name.toUpperCase(); // ignore upper and lowercase
21+
const nameB = repoObjB.name.toUpperCase(); // ignore upper and lowercase
22+
if (nameA < nameB) {
23+
return -1;
24+
}
25+
if (nameA > nameB) {
26+
return 1;
27+
}
28+
return 0;
29+
} */
1830

1931
static fetchJSON(url) {
2032
return new Promise((resolve, reject) => {

‎homework-classes/index.html‎

Lines changed: 23 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,26 @@
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="./style.css" />
18-
</head>
193

20-
<body>
21-
<div id="root"></div>
22-
<script src="./Util.js"></script>
23-
<script src="./Repository.js"></script>
24-
<script src="./Contributor.js"></script>
25-
<script src="./App.js"></script>
26-
</body>
27-
</html>
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="./Util.js"></script>
21+
<script src="./Repository.js"></script>
22+
<script src="./Contributor.js"></script>
23+
<script src="./App.js"></script>
24+
</body>
25+
26+
</html>

‎homework-classes/style.css‎

Lines changed: 62 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,64 @@
11
.alert-error {
2-
color: red;
2+
color: red;
3+
}
4+
5+
body {
6+
background-image: url(OlJVkf.jpg);
7+
}
8+
9+
h1 {
10+
color: rgb(180, 244, 255);
11+
font-family: Helvetica;
12+
text-transform: uppercase;
13+
text-align: center;
14+
font-size: 3em;
15+
}
16+
17+
#dropdown-select {
18+
width: 25em;
19+
height: 3em;
20+
border-radius: 5px;
21+
}
22+
23+
select {
24+
width: 20em;
25+
font-family: helvetica;
26+
text-transform: uppercase;
27+
position: relative;
28+
color: rgb(13, 96, 110);
29+
padding: 10px;
30+
}
31+
32+
#details {
33+
color: white;
34+
font-family: helvetica;
35+
font-size: 1.5em;
36+
margin-top: 1em;
37+
width: 30%;
38+
}
39+
40+
#root {
41+
display: flex;
42+
flex-direction: column;
43+
flex-wrap: wrap;
44+
}
45+
46+
img {
47+
width: 50px;
48+
}
49+
50+
#contributors {
51+
display: flex;
52+
flex-direction: row;
53+
align-content: space-around;
54+
margin-left: 35%;
55+
flex-wrap: wrap;
56+
list-style-type: none;
57+
}
58+
59+
.contri {
60+
color: white;
61+
flex-wrap: wrap;
62+
margin: 20px;
63+
flex-grow: 1;
364
}

‎homework/index1.js‎

Lines changed: 30 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -20,17 +20,22 @@
2020
createAndAppend('select', root, { id: 'dropdown-select' });
2121
createAndAppend('div', root, { id: 'details' });
2222
createAndAppend('div', root, { id: 'contributors' });
23+
fetchAsyncMode(HYF_REPOS_URL);
24+
}
2325

24-
fetch(HYF_REPOS_URL)
25-
.then(response => response.json())
26-
.then(listOfRepos => {
27-
listOfRepos.sort(sortByName).forEach(repoDataObj => {
28-
createAndAppend('option', document.getElementById('dropdown-select'), {
29-
text: repoDataObj.name,
30-
});
31-
}),
32-
listenerSelect(listOfRepos);
26+
async function fetchAsyncMode(url) {
27+
try {
28+
const response = await fetch(url);
29+
const responseJSON = await response.json();
30+
responseJSON.sort(sortByName).forEach(repoDataObj => {
31+
createAndAppend('option', document.getElementById('dropdown-select'), {
32+
text: repoDataObj.name,
33+
});
3334
});
35+
listenerSelect(responseJSON);
36+
} catch (error) {
37+
console.log(error);
38+
}
3439
}
3540

3641
// sort repositories
@@ -52,7 +57,7 @@
5257
const selectedData = listOfRepos.filter(repoData => repoData.name === selectedRepo)[0];
5358

5459
repoDetails(selectedData);
55-
showContributors(selectedData);
60+
asyncContributors(selectedData);
5661
});
5762
}
5863

@@ -68,24 +73,22 @@
6873
createAndAppend('div', detailsDiv, { text: `Last Update: ${data.updated_at}` });
6974
}
7075

71-
// show all contributors to repository selected
72-
function showContributors(data) {
73-
let contributors = document.getElementById('contributors');
74-
contributors.innerHTML = '';
75-
fetch(data.contributors_url)
76-
.then(data => data.json())
77-
.then(listOfContributors => {
78-
for (let contributor of listOfContributors) {
79-
createAndAppend('img', contributors, { src: contributor.avatar_url, class: 'contri' });
80-
createAndAppend('div', contributors, { text: contributor.login, class: 'contri' });
81-
createAndAppend('div', contributors, {
82-
text: contributor.contributions,
83-
class: 'contri',
84-
});
85-
}
86-
});
76+
async function asyncContributors(data) {
77+
try {
78+
const constributors = await fetch(data.contributors_url);
79+
const dataJSON = await constributors.json();
80+
for (let contributor of dataJSON) {
81+
createAndAppend('img', contributors, { src: contributor.avatar_url, class: 'contri' });
82+
createAndAppend('div', contributors, { text: contributor.login, class: 'contri' });
83+
createAndAppend('div', contributors, {
84+
text: contributor.contributions,
85+
class: 'contri',
86+
});
87+
}
88+
} catch (error) {
89+
console.log(error);
90+
}
8791
}
88-
8992
const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
9093

9194
window.onload = () => main(HYF_REPOS_URL);

0 commit comments

Comments
 (0)