Skip to content

Commit b3d794a

Browse files
NajiNabulsiNajiNabulsi
authored
Merge pull request #2 from NajiNabulsi/Naji-week2
project
2 parents 398e3df + ab8f7fa commit b3d794a

3 files changed

Lines changed: 241 additions & 0 deletions

File tree

‎js-week2/index.css‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
:root {
2+
--shadow: 5px 5px 8px rgb(65, 60, 60);
3+
}
4+
5+
body {
6+
margin: 0;
7+
padding: 0;
8+
}
9+
10+
#root {
11+
width: 100%;
12+
margin: 50px auto;
13+
display: flex;
14+
flex-direction: row;
15+
justify-content: space-around;
16+
}
17+
18+
ul {
19+
width: 100%;
20+
border: 1px solid black;
21+
box-shadow: var(--shadow);
22+
padding: 15px;
23+
word-wrap: break-word;
24+
}
25+
26+
li {
27+
border: ipx solid black;
28+
list-style: none;
29+
}
30+
31+
.first {
32+
width: 100%;
33+
background-color: rgb(57, 57, 224);
34+
box-shadow: var(--shadow);
35+
color: white;
36+
padding: 20px;
37+
display: flex;
38+
justify-content: center;
39+
align-items: center;
40+
justify-content: space-around;
41+
}
42+
43+
select {
44+
width: 200px;
45+
height: 50px;
46+
}
47+
48+
option {
49+
text-align: center;
50+
}
51+
52+
.all-elem {
53+
max-width: 1000px;
54+
margin: auto;
55+
}
56+
57+
.main-container {
58+
margin-top: 20px;
59+
width: 100%;
60+
display: flex;
61+
justify-content: space-between;
62+
box-sizing: border-box;
63+
}
64+
65+
.repo-container {
66+
width: 45%;
67+
}
68+
69+
#repoDiv {
70+
padding: 15px;
71+
border: 1px solid black;
72+
box-shadow: var(--shadow);
73+
margin: 10px;
74+
}
75+
76+
.contributors-container {
77+
width: 45%;
78+
display: flex;
79+
justify-content: center;
80+
align-items: center;
81+
}
82+
83+
img {
84+
width: 100px;
85+
height: 100px;
86+
}
87+
88+
#contri {
89+
width: 100%;
90+
display: flex;
91+
flex-direction: column;
92+
justify-content: center;
93+
align-items: center;
94+
}

‎js-week2/index.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
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+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>Hack Your Repo II</title>
9+
<link rel="stylesheet" href="index.css">
10+
11+
</head>
12+
13+
<body>
14+
<header class="all-elem">
15+
<div id="root">
16+
17+
<div class="first">
18+
<h1>HYF Repositories</h1>
19+
<select name="repo" id="repo"></select>
20+
</div>
21+
22+
</div>
23+
<main class="main-container">
24+
25+
<section class="repo-container">
26+
<div id="repoDiv"></div>
27+
</section>
28+
29+
<section class="contributors-container">
30+
<div id="contri"></div>
31+
</section>
32+
33+
</main>
34+
35+
36+
37+
</header>
38+
39+
</body>
40+
41+
<!-- script -->
42+
<script src="index.js"></script>
43+
44+
</body>
45+
46+
</html>

‎js-week2/index.js‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
'use strict';
2+
3+
const HYF_REPOS_URL =
4+
"https://api.github.com/orgs/HackYourFuture/repos?per_page=10";
5+
6+
const root = document.querySelector("#root");
7+
const select = document.querySelector("#repo");
8+
const repoContaine = document.querySelector('.repo-containe');
9+
const repoDiv = document.querySelector('#repoDiv');
10+
const op = document.querySelector('option');
11+
const contri = document.querySelector('#contri');
12+
13+
14+
function main(url) {
15+
16+
// to creat ul and li element
17+
function creatLi(txt) {
18+
const liRepo = document.createElement("li");
19+
liRepo.innerHTML = txt;
20+
const ulRepo = document.createElement("ul");
21+
ulRepo.appendChild(liRepo);
22+
contri.appendChild(ulRepo);
23+
}
24+
25+
// to creat option element and append it to to select
26+
function creatOption(txt, num) {
27+
let opt = document.createElement('option');
28+
29+
opt.textContent = txt;
30+
opt.setAttribute('value', num);
31+
select.appendChild(opt);
32+
}
33+
34+
// load document and add it to ul
35+
function loadDoc(url) {
36+
var xhttp = new XMLHttpRequest();
37+
xhttp.onreadystatechange = function() {
38+
if (this.readyState == 4 && this.status == 200) {
39+
const data = JSON.parse(xhttp.response);
40+
data.forEach(ele => {
41+
const txt = `<img src="${ele.avatar_url}"> ${ele.login} ${ele.contributions}`;
42+
creatLi(txt);
43+
});
44+
45+
}
46+
};
47+
xhttp.open("GET", url, true);
48+
xhttp.send();
49+
}
50+
51+
function fetchJSON(url) {
52+
const hyfRepo = new XMLHttpRequest();
53+
54+
function reqListener() {
55+
const facts = JSON.parse(this.response);
56+
let arr = [];
57+
for (let i in facts) {
58+
arr.push([{ "name": facts[i].name }, { "description": facts[i].description }, { "forks_count": facts[i].forks_count }, { "updated_at": facts[i].updated_at }]);
59+
}
60+
61+
arr.forEach((ele, i) => {
62+
creatOption(ele[0].name, i);
63+
});
64+
65+
console.log(facts);
66+
67+
select.addEventListener('change', () => {
68+
contri.innerHTML = "";
69+
let s = select.value;
70+
71+
let txt = "<strong>Repository : </strong>" +
72+
facts[s].name +
73+
"<br>" +
74+
"<strong>Description : </strong>" +
75+
facts[s].description +
76+
"<br>" +
77+
"<strong>Forks : </strong>" +
78+
facts[s].forks_count +
79+
"<br>" +
80+
"<strong>Updated : </strong>" +
81+
facts[s].updated_at;
82+
83+
repoDiv.innerHTML = txt + s;
84+
let link = facts[s].contributors_url;
85+
86+
loadDoc(link);
87+
});
88+
89+
90+
}
91+
92+
hyfRepo.open("GET", url, true);
93+
hyfRepo.send();
94+
hyfRepo.addEventListener("load", reqListener);
95+
}
96+
97+
98+
return fetchJSON(url);
99+
}
100+
101+
main(HYF_REPOS_URL);

0 commit comments

Comments
 (0)