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

Skip to content

Commit 39df343

Browse files
massam89massam89
committed
Finished project part 1
1 parent 87045d7 commit 39df343

File tree

8 files changed

+170
-168
lines changed

8 files changed

+170
-168
lines changed

‎hackyourrepo-app/Masoud/week3/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111

1212
<body>
1313

14-
<script src="js/script.js"></script>
14+
<script type="module" src="util/script.js"></script>
1515
</body>
1616

1717
</html>

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

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

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { fetchContributers } from './fetchContributers.js';
2+
3+
export function addDataToDOM(data, selectElement, bodyTable, contributersSection) {
4+
5+
selectElement.addEventListener('change', () => {
6+
contributersSection.innerHTML = '';
7+
data.forEach(element => {
8+
if (element.name == selectElement.value) {
9+
const table = `
10+
<tr>
11+
<td>Repository</td>
12+
<td><a href="https://github.com/${element.owner.login}/${element.name}">${element.name}</a></td>
13+
</tr>
14+
<tr>
15+
<td>Description</td>
16+
<td>${element.description}</td>
17+
</tr>
18+
<tr>
19+
<td>Forks</td>
20+
<td>${element.forks}</td>
21+
</tr>
22+
<tr>
23+
<td>Updated</td>
24+
<td>${element.updated_at}</td>
25+
</tr>`;
26+
bodyTable.innerHTML = table;
27+
28+
const url = element.contributors_url;
29+
fetchContributers(url, contributersSection);
30+
}
31+
})
32+
})
33+
};

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
export function displayError(error) {
2+
const errElement = document.createElement('h3');
3+
errElement.style.backgroundColor = 'orange';
4+
errElement.style.color = 'white';
5+
errElement.style.display = 'block';
6+
errElement.style.padding = '10px';
7+
errElement.style.position = 'fixed';
8+
errElement.style.top = '50%';
9+
errElement.style.left = '50%';
10+
errElement.style.transform = 'translate(-50%,-50%)'
11+
errElement.innerHTML = `
12+
network request failed
13+
<br>
14+
${error}`;
15+
document.body.appendChild(errElement);
16+
}

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { displayError } from './displayError.js';
2+
3+
export function fetchContributers(url, contributersSection) {
4+
5+
fetch(url)
6+
.then(function (response) {
7+
return response.json();
8+
})
9+
.then(function (myJson) {
10+
myJson.forEach(element => {
11+
const contItem = document.createElement('div');
12+
const image = document.createElement('img');
13+
const link = document.createElement('a');
14+
const gitName = document.createElement('h3');
15+
const contributionsNum = document.createElement('h4');
16+
17+
link.appendChild(image);
18+
contItem.appendChild(link);
19+
contItem.appendChild(gitName);
20+
contItem.appendChild(contributionsNum);
21+
contributersSection.appendChild(contItem);
22+
23+
link.style.width = '100px'
24+
link.href = element.html_url;
25+
image.src = element.avatar_url;
26+
gitName.textContent = element.login;
27+
contributionsNum.textContent = element.contributions;
28+
contItem.classList.add('items');
29+
})
30+
})
31+
.catch(function (error) {
32+
displayError(error);
33+
});
34+
};

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { displayError } from './displayError.js';
2+
import { addDataToDOM } from './addDataToDOM.js';
3+
4+
export function fetchRepoList(selectElement, bodyTable, contributersSection) {
5+
const url = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
6+
fetch(url)
7+
.then(function (response) {
8+
return response.json();
9+
})
10+
.then(function (myJson) {
11+
myJson.forEach(element => {
12+
const option = document.createElement('option');
13+
option.value = element.name;
14+
option.textContent = element.name;
15+
selectElement.appendChild(option);
16+
})
17+
addDataToDOM(myJson, selectElement, bodyTable, contributersSection);
18+
})
19+
.catch(function (error) {
20+
displayError(error);
21+
});
22+
};

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

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import { fetchRepoList } from './fetchRepoList.js';
2+
3+
export function main() {
4+
//Create header element and its children
5+
const header = document.createElement('header');
6+
const imgLink = document.createElement('a');
7+
const imgHeader = document.createElement('img');
8+
9+
imgLink.href = '#';
10+
imgHeader.src = 'img/hyf.png';
11+
imgHeader.alt = 'HYF logo';
12+
document.body.appendChild(header);
13+
header.appendChild(imgLink);
14+
imgLink.appendChild(imgHeader);
15+
16+
//Create container and main tag
17+
const container = document.createElement('div');
18+
const main = document.createElement('main');
19+
20+
container.classList.add('container');
21+
document.body.appendChild(container);
22+
container.appendChild(main);
23+
24+
//Create section for select repositories
25+
const selectorSection = document.createElement('section');
26+
selectorSection.classList.add('selector');
27+
main.appendChild(selectorSection);
28+
29+
const labelElement = document.createElement('label');
30+
labelElement.for = 'repo-items';
31+
labelElement.textContent = 'Hack Your Future Repositories:';
32+
selectorSection.appendChild(labelElement);
33+
34+
const selectElement = document.createElement('select');
35+
selectElement.id = 'repo-items';
36+
selectorSection.appendChild(selectElement);
37+
38+
39+
//Create description and contributers
40+
//Description
41+
const desconElement = document.createElement('div');
42+
desconElement.classList.add('des-con');
43+
main.appendChild(desconElement);
44+
45+
const descriptionSection = document.createElement('section');
46+
descriptionSection.classList.add('description');
47+
desconElement.appendChild(descriptionSection);
48+
49+
const desTable = document.createElement('table');
50+
descriptionSection.appendChild(desTable);
51+
52+
const bodyTable = document.createElement('tbody');
53+
desTable.appendChild(bodyTable);
54+
55+
//Contributers
56+
const contributersSection = document.createElement('section');
57+
contributersSection.classList.add('contributers');
58+
desconElement.appendChild(contributersSection);
59+
60+
//Get repository data
61+
fetchRepoList(selectElement, bodyTable, contributersSection);
62+
};

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import { main } from './main.js';
2+
window.onload = main;

0 commit comments

Comments
 (0)