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

Skip to content

Commit f022d4b

Browse files
massam89massam89
committed
modularized
1 parent 39df343 commit f022d4b

File tree

9 files changed

+102
-97
lines changed

9 files changed

+102
-97
lines changed

‎hackyourrepo-app/Masoud/week3/util/main.js renamed to ‎hackyourrepo-app/Masoud/week3/util/addBasicsToDOM.js

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
import { fetchRepoList } from './fetchRepoList.js';
2-
3-
export function main() {
1+
export function addBasicsToDOM() {
42
//Create header element and its children
53
const header = document.createElement('header');
64
const imgLink = document.createElement('a');
@@ -57,6 +55,5 @@ export function main() {
5755
contributersSection.classList.add('contributers');
5856
desconElement.appendChild(contributersSection);
5957

60-
//Get repository data
61-
fetchRepoList(selectElement, bodyTable, contributersSection);
62-
};
58+
return { selectElement, bodyTable, contributersSection };
59+
}

‎hackyourrepo-app/Masoud/week3/util/addContributersToDOM.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
export function addContributersToDOM(data, contributersSection) {
2+
data.forEach(element => {
3+
const contItem = document.createElement('div');
4+
const image = document.createElement('img');
5+
const link = document.createElement('a');
6+
const gitName = document.createElement('h3');
7+
const contributionsNum = document.createElement('h4');
8+
9+
link.appendChild(image);
10+
contItem.appendChild(link);
11+
contItem.appendChild(gitName);
12+
contItem.appendChild(contributionsNum);
13+
contributersSection.appendChild(contItem);
14+
15+
link.style.width = '100px'
16+
link.href = element.html_url;
17+
image.src = element.avatar_url;
18+
gitName.textContent = element.login;
19+
contributionsNum.textContent = element.contributions;
20+
contItem.classList.add('items');
21+
})
22+
}

‎hackyourrepo-app/Masoud/week3/util/addDataToDOM.js

Lines changed: 0 additions & 33 deletions
This file was deleted.

‎hackyourrepo-app/Masoud/week3/util/addDescriptionToDOM.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
export function addDescriptionToDOM(bodyTable, element) {
2+
const table = `
3+
<tr>
4+
<td>Repository</td>
5+
<td><a href="https://github.com/${element.owner.login}/${element.name}">${element.name}</a></td>
6+
</tr>
7+
<tr>
8+
<td>Description</td>
9+
<td>${element.description}</td>
10+
</tr>
11+
<tr>
12+
<td>Forks</td>
13+
<td>${element.forks}</td>
14+
</tr>
15+
<tr>
16+
<td>Updated</td>
17+
<td>${element.updated_at}</td>
18+
</tr>`;
19+
bodyTable.innerHTML = table;
20+
}

‎hackyourrepo-app/Masoud/week3/util/addListToDOM.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export function addListToDOM(data, selectElement) {
2+
data.forEach(element => {
3+
const option = document.createElement('option');
4+
option.value = element.name;
5+
option.textContent = element.name;
6+
selectElement.appendChild(option);
7+
});
8+
};

‎hackyourrepo-app/Masoud/week3/util/fetchContributers.js

Lines changed: 0 additions & 34 deletions
This file was deleted.

‎hackyourrepo-app/Masoud/week3/util/fetchData.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export async function fetchData(url) {
2+
const Data = await fetch(url);
3+
return Data.json();
4+
5+
};

‎hackyourrepo-app/Masoud/week3/util/fetchRepoList.js

Lines changed: 0 additions & 22 deletions
This file was deleted.

‎hackyourrepo-app/Masoud/week3/util/script.js

Lines changed: 44 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,44 @@
1-
import { main } from './main.js';
2-
window.onload = main;
1+
import { addBasicsToDOM } from './addBasicsToDOM.js';
2+
import { fetchData } from './fetchData.js';
3+
import { displayError } from './displayError.js';
4+
import { addListToDOM } from './addListToDOM.js';
5+
import { addContributersToDOM } from './addContributersToDOM.js';
6+
import { addDescriptionToDOM } from './addDescriptionToDOM.js';
7+
8+
window.onload = main;
9+
10+
export function main() {
11+
12+
const elements = addBasicsToDOM();
13+
const selectElement = elements.selectElement;
14+
const contributersSection = elements.contributersSection;
15+
const bodyTable = elements.bodyTable;
16+
17+
const url = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
18+
19+
fetchData(url).then(myJson => {
20+
addListToDOM(myJson, selectElement);
21+
22+
selectElement.addEventListener('change', () => {
23+
contributersSection.innerHTML = '';
24+
25+
myJson.forEach(element => {
26+
if (element.name == selectElement.value) {
27+
addDescriptionToDOM(bodyTable, element);
28+
29+
const url = element.contributors_url;
30+
31+
fetchData(url).then(myJson => {
32+
addContributersToDOM(myJson, contributersSection);
33+
})
34+
.catch(error => {
35+
displayError(error);
36+
})
37+
}
38+
})
39+
})
40+
})
41+
.catch(error => {
42+
displayError(error);
43+
})
44+
};

0 commit comments

Comments
 (0)