Skip to content

Commit 7fef171

Browse files
outintotheblueoutintotheblue
authored
Merge pull request #5 from outintotheblue/apiweb3
Apiweb3
2 parents ce62a0d + cda2588 commit 7fef171

7 files changed

Lines changed: 153 additions & 99 deletions

File tree

‎homework-classes/App.js‎

Lines changed: 28 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,61 @@
11
'use strict';
22

3-
/* global Util, Repository, Contributor */
4-
53
class App {
64
constructor(url) {
7-
this.mainContainer = null;
85
this.initialize(url);
96
}
107

118
/**
12-
* Initialization
139
* @param {string} url The GitHub URL for obtaining the organization's repositories.
1410
*/
1511
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-
2012
const root = document.getElementById('root');
21-
const header = Util.createAndAppend('header', root, { class: 'header' });
22-
this.mainContainer = Util.createAndAppend('div', root, { id: 'container' });
13+
Util.createAndAppend('h1', root, { text: 'REPOSITORIES' });
14+
Util.createAndAppend('select', root, { id: 'dropdown-select' });
15+
Util.createAndAppend('div', root, { id: 'details' });
16+
Util.createAndAppend('div', root, { id: 'contributors' });
2317

2418
try {
2519
const repos = await Util.fetchJSON(url);
2620
this.repos = repos.map(repo => new Repository(repo));
27-
// TODO: add your own code here
21+
this.repos.forEach(repoDataObj => {
22+
repoDataObj.render(document.getElementById('dropdown-select'));
23+
});
2824
} catch (error) {
2925
this.renderError(error);
3026
}
27+
document.getElementById('dropdown-select').addEventListener('change', event => {
28+
const selectedRepo = event.target.value;
29+
const selectedData = this.repos.filter(
30+
repoData => repoData.repository.name === selectedRepo,
31+
)[0];
32+
const index = this.repos.indexOf(selectedData);
33+
this.fetchContributorsAndRender(index);
34+
});
3135
}
3236

3337
/**
34-
* Removes all child elements from a container element
3538
* @param {*} container Container element to clear
3639
*/
37-
clearContainer() {
38-
while (this.mainContainer.firstChild) {
39-
this.mainContainer.removeChild(this.mainContainer.firstChild);
40+
static clearContainer(container) {
41+
while (container.firstChild) {
42+
container.removeChild(container.firstChild);
4043
}
4144
}
4245

4346
/**
44-
* Fetch contributor information for the selected repository and render the
45-
* repo and its contributors as HTML elements in the DOM.
46-
* @param {object} repo The selected repository object
47+
* @param {number} index The array index of the repository.
4748
*/
48-
async selectRepository(repo) {
49+
async fetchContributorsAndRender(index) {
4950
try {
50-
this.clearContainer();
51+
const repo = this.repos[index];
5152
const contributors = await repo.fetchContributors();
52-
53-
const repoContainer = Util.createAndAppend('div', this.mainContainer);
54-
const contributorContainer = Util.createAndAppend('div', this.mainContainer);
55-
56-
const contributorList = Util.createAndAppend('ul', contributorContainer);
57-
58-
repo.render(repoContainer);
59-
53+
const container = document.getElementById('contributors');
54+
App.clearContainer(container);
55+
const leftDiv = Util.createAndAppend('div', container);
56+
const rightDiv = Util.createAndAppend('div', container);
57+
const contributorList = Util.createAndAppend('div', rightDiv);
58+
repo.render(leftDiv);
6059
contributors
6160
.map(contributor => new Contributor(contributor))
6261
.forEach(contributor => contributor.render(contributorList));
@@ -70,7 +69,7 @@ class App {
7069
* @param {Error} error An Error object describing the error.
7170
*/
7271
renderError(error) {
73-
console.error(error); // TODO: replace with your own code
72+
console.error(error);
7473
}
7574
}
7675

‎homework-classes/Contributor.js‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,26 @@
11
'use strict';
22

3-
/* global Util */
4-
5-
// eslint-disable-next-line no-unused-vars
63
class Contributor {
74
constructor(contributor) {
85
this.contributor = contributor;
96
}
107

118
/**
12-
* Render the contributor info to the DOM.
139
* @param {HTMLElement} container The container element in which to render the contributor.
1410
*/
1511
render(container) {
16-
// TODO: replace the next line with your code.
17-
Util.createAndAppend('pre', container, { text: JSON.stringify(this.contributor, null, 2) });
12+
const contributorsDiv = Util.createAndAppend('div', root, { id: 'contributorDiv' });
13+
Util.createAndAppend('img', container, {
14+
src: this.contributor.avatar_url,
15+
class: 'contributors-detail',
16+
});
17+
Util.createAndAppend('p', container, {
18+
text: this.contributor.login,
19+
class: 'contributors-detail',
20+
});
21+
Util.createAndAppend('p', container, {
22+
text: this.contributor.contributions,
23+
class: 'contributors-detail',
24+
});
1825
}
1926
}

‎homework-classes/OlJVkf.jpg‎

181 KB
Loading

‎homework-classes/Repository.js‎

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,25 @@
11
'use strict';
22

3-
/* global Util */
4-
5-
// eslint-disable-next-line no-unused-vars
63
class Repository {
74
constructor(repository) {
85
this.repository = repository;
96
}
107

118
/**
12-
* Render the repository info to the DOM.
139
* @param {HTMLElement} container The container element in which to render the repository.
1410
*/
1511
render(container) {
16-
// TODO: replace the next line with your code.
17-
Util.createAndAppend('pre', container, { text: JSON.stringify(this.repository, null, 2) });
12+
Util.createAndAppend('option', container, { text: this.name() });
1813
}
1914

20-
/**
21-
* Returns an array of contributors as a promise
22-
*/
2315
fetchContributors() {
16+
App.clearContainer(details);
17+
Util.createAndAppend('div', details, { text: `Description: ${this.repository.description}` });
18+
Util.createAndAppend('div', details, { text: `Forks: ${this.repository.forks}` });
19+
Util.createAndAppend('div', details, { text: `Last Update: ${this.repository.updated_at}` });
2420
return Util.fetchJSON(this.repository.contributors_url);
2521
}
2622

27-
/**
28-
* Returns the name of the repository
29-
*/
3023
name() {
3124
return this.repository.name;
3225
}

‎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: 54 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,56 @@
11
.alert-error {
2-
color: red;
2+
color: red;
3+
}
4+
5+
body {
6+
background-color: darkslategrey
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+
#root {
33+
display: flex;
34+
flex-direction: column;
35+
flex-wrap: wrap;
36+
}
37+
38+
img {
39+
width: 50px;
40+
}
41+
42+
#contributors {
43+
display: flex;
44+
flex-direction: row;
45+
align-content: space-around;
46+
margin-left: 35%;
47+
flex-wrap: wrap;
48+
list-style-type: none;
49+
}
50+
51+
.contributors-detail {
52+
color: white;
53+
flex-wrap: wrap;
54+
margin: 20px;
55+
flex-grow: 1;
356
}

‎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)