Skip to content

Commit 87045d7

Browse files
massam89massam89
committed
Start project for week3 JS3
1 parent 15e6c5b commit 87045d7

9 files changed

Lines changed: 303 additions & 33 deletions

File tree

‎hackyourrepo-app/Masoud/week3/css/style.css‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body{
8+
background-color: #313267;
9+
font-size: 14px;
10+
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
11+
width: 100vw;
12+
height: calc(100vh - 20px);
13+
}
14+
15+
header{
16+
height: 15%;
17+
background-color:#313267 ;
18+
}
19+
20+
21+
header a{
22+
height: 100%;
23+
display: block;
24+
text-align: center;
25+
}
26+
27+
img{
28+
height: inherit;
29+
padding: 5px;
30+
}
31+
32+
.container{
33+
background-color: #6ed5e7;
34+
width: calc(95% - 5px);
35+
margin: auto;
36+
height: 85%;
37+
}
38+
39+
.selector{
40+
padding: 10px;
41+
font-size: 1.4em;
42+
background-color: rgb(252, 103, 49);
43+
color: white;
44+
}
45+
46+
#repo-items{
47+
font-size: 12px;
48+
font-family: sans-serif;
49+
font-weight: 700;
50+
color: #444;
51+
padding: .6em 1.4em .5em .8em;
52+
max-width: 100%; /* useful when width is set to anything other than 100% */
53+
margin: 0px auto;
54+
border: 1px solid #aaa;
55+
-moz-appearance: none;
56+
-webkit-appearance: none;
57+
background-color: #fff;
58+
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
59+
}
60+
61+
.des-con{
62+
display: flex;
63+
padding: 10px;
64+
}
65+
66+
.description, .contributers{
67+
border: 2px rgb(223, 152, 152) solid;
68+
margin: 5px;
69+
height: 70vh;
70+
overflow: auto;
71+
}
72+
73+
.description {
74+
width: 40%;
75+
}
76+
77+
.contributers{
78+
width: 60%;
79+
}
80+
81+
.contributers img{
82+
width: 100%;
83+
border-radius: 50%;
84+
}
85+
86+
.items {
87+
display: flex;
88+
justify-content: space-between;
89+
padding: 5px 15px;
90+
margin: 5px;
91+
align-items: center;
92+
}
93+
94+
table{
95+
border-spacing: 10px;
96+
}
97+
98+
@media only screen and (max-width:550px){
99+
.des-con{
100+
flex-direction: column;
101+
align-items: center;
102+
}
103+
.description, .contributers{
104+
width: 90%;
105+
overflow:visible;
106+
height: auto;
107+
}
108+
.selector{
109+
text-align: center;
110+
}
111+
#repo-items{
112+
margin-top: 10px;
113+
}
114+
115+
body{
116+
width: 100%;
117+
height: 100%;
118+
}
119+
}

‎hackyourrepo-app/Masoud/week3/img/favicon.ico‎

1.12 KB
Binary file not shown.

‎hackyourrepo-app/Masoud/week3/img/hyf.png‎

7.64 KB
Loading

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Hack Your Future</title>
8+
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
9+
<link rel="stylesheet" href="css/style.css">
10+
</head>
11+
12+
<body>
13+
14+
<script src="js/script.js"></script>
15+
</body>
16+
17+
</html>

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

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
window.onload = main;
2+
3+
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+
fetchRepoList(selectElement, bodyTable, contributersSection);
61+
};
62+
63+
64+
function fetchRepoList(selectElement, bodyTable, contributersSection) {
65+
const url = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
66+
fetch(url)
67+
.then(function (response) {
68+
return response.json();
69+
})
70+
.then(function (myJson) {
71+
myJson.forEach(element => {
72+
const option = document.createElement('option');
73+
option.value = element.name;
74+
option.textContent = element.name;
75+
selectElement.appendChild(option);
76+
})
77+
addDataToDOM(myJson, selectElement, bodyTable, contributersSection);
78+
})
79+
.catch(function (error) {
80+
const errElement = document.createElement('h3');
81+
errElement.style.backgroundColor = 'orange';
82+
errElement.style.color = 'white';
83+
errElement.style.display = 'block';
84+
errElement.style.padding = '10px';
85+
errElement.innerHTML = `
86+
network request failed
87+
<br>
88+
${error}`;
89+
bodyTable.parentNode.insertBefore(errElement, bodyTable);
90+
});
91+
};
92+
93+
function addDataToDOM(data, selectElement, bodyTable, contributersSection) {
94+
selectElement.addEventListener('change', () => {
95+
contributersSection.innerHTML = '';
96+
data.forEach(element => {
97+
if (element.name == selectElement.value) {
98+
const table = `
99+
<tr>
100+
<td>Repository</td>
101+
<td><a href="https://github.com/${element.owner.login}/${element.name}">${element.name}</a></td>
102+
</tr>
103+
<tr>
104+
<td>Description</td>
105+
<td>${element.description}</td>
106+
</tr>
107+
<tr>
108+
<td>Forks</td>
109+
<td>${element.forks}</td>
110+
</tr>
111+
<tr>
112+
<td>Updated</td>
113+
<td>${element.updated_at}</td>
114+
</tr>`;
115+
bodyTable.innerHTML = table;
116+
117+
const url = element.contributors_url;
118+
fetchContributers(url, contributersSection);
119+
}
120+
})
121+
})
122+
};
123+
124+
function fetchContributers(url, contributersSection) {
125+
fetch(url)
126+
.then(function (response) {
127+
return response.json();
128+
})
129+
.then(function (myJson) {
130+
131+
console.log(myJson);
132+
myJson.forEach(element => {
133+
const contItem = document.createElement('div');
134+
const image = document.createElement('img');
135+
const link = document.createElement('a');
136+
const gitName = document.createElement('h3');
137+
const contributionsNum = document.createElement('h4');
138+
139+
link.appendChild(image);
140+
contItem.appendChild(link);
141+
contItem.appendChild(gitName);
142+
contItem.appendChild(contributionsNum);
143+
144+
contributersSection.appendChild(contItem);
145+
146+
link.style.width = '100px'
147+
link.href = element.html_url;
148+
image.src = element.avatar_url;
149+
gitName.textContent = element.login;
150+
contributionsNum.textContent = element.contributions;
151+
contItem.classList.add('items');
152+
})
153+
154+
})
155+
.catch(function (error) {
156+
const errElement = document.createElement('h3');
157+
errElement.style.backgroundColor = 'orange';
158+
errElement.style.color = 'white';
159+
errElement.style.display = 'block';
160+
errElement.style.padding = '10px';
161+
errElement.innerHTML = `
162+
network request failed
163+
<br>
164+
${error}`;
165+
contributersSection.parentNode.insertBefore(errElement, contributersSection);
166+
});
167+
};

‎hackyourrepo-app/hyf.png‎

-8.9 KB
Binary file not shown.

‎hackyourrepo-app/index.html‎

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

‎hackyourrepo-app/script.js‎

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

‎hackyourrepo-app/style.css‎

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

0 commit comments

Comments
 (0)