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

Skip to content
This repository was archived by the owner on May 14, 2024. It is now read-only.

Commit a0962a8

Browse files
NebiyoutibebuNebiyoutibebu
authored
Update index.js
1 parent 4b40cff commit a0962a8

File tree

1 file changed

+161
-26
lines changed

1 file changed

+161
-26
lines changed

‎homework/index.js

Lines changed: 161 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,182 @@
1-
'use strict';
2-
1+
"use strict";
32
{
4-
function fetchJSON(url, cb) {
5-
const xhr = new XMLHttpRequest();
6-
xhr.open('GET', url);
7-
xhr.responseType = 'json';
8-
xhr.onload = () => {
9-
if (xhr.status < 400) {
10-
cb(null, xhr.response);
11-
} else {
12-
cb(new Error(`Network error: ${xhr.status} - ${xhr.statusText}`));
13-
}
14-
};
15-
xhr.onerror = () => cb(new Error('Network request failed'));
16-
xhr.send();
3+
function fetchJSON(url) {
4+
return new Promise((resolve, reject) => {
5+
const xhr = new XMLHttpRequest();
6+
xhr.open("GET", url);
7+
xhr.responseType = "json";
8+
xhr.onload = () => {
9+
if (xhr.status < 400) {
10+
resolve(xhr.response);
11+
} else {
12+
reject(new Error(`Network error: ${xhr.status} - ${xhr.statusText}`));
13+
}
14+
};
15+
xhr.send();
16+
});
1717
}
1818

1919
function createAndAppend(name, parent, options = {}) {
2020
const elem = document.createElement(name);
2121
parent.appendChild(elem);
2222
Object.keys(options).forEach(key => {
2323
const value = options[key];
24-
if (key === 'text') {
25-
elem.textContent = value;
24+
if (key === "text") {
25+
elem.innerText = value;
2626
} else {
2727
elem.setAttribute(key, value);
2828
}
2929
});
3030
return elem;
3131
}
32+
33+
function main(url) {
34+
fetchJSON(url, (err, data) => {
35+
const root = document.getElementById('root');
36+
if (err) {
37+
createAndAppend('div', root, { text: err.message, class: 'alert-error' });
38+
} else {
39+
createAndAppend('header', root, { id: 'divHead', class: 'header' });
40+
createAndAppend('p', divHead, { text: 'HYF Repositories' });
41+
42+
createAndAppend('select', divHead, {
43+
id: 'selectElem',
44+
class: 'selector',
45+
});
46+
createAndAppend("div", root, { id: "container" });
47+
createOptions(data);
48+
displayInformation(data[0]);
49+
contributorsList(data[0]);
50+
3251

33-
function main(url) {
34-
fetchJSON(url, (err, data) => {
35-
const root = document.getElementById('root');
36-
if (err) {
37-
createAndAppend('div', root, { text: err.message, class: 'alert-error' });
38-
} else {
39-
createAndAppend('pre', root, { text: JSON.stringify(data, null, 2) });
52+
document.getElementById("selectElem").onchange = function() {
53+
let selectedItemIndex = this.options[this.selectedIndex].value;
54+
let infoDiv = document.getElementById("divLeft");
55+
infoDiv.parentNode.removeChild(infoDiv);
56+
let contributors = document.getElementById("divRight");
57+
contributors.parentNode.removeChild(contributors);
58+
59+
displayInformation(data[selectedItemIndex]);
60+
contributorsList(data[selectedItemIndex]);
61+
};
4062
}
41-
});
63+
});
4264
}
4365

44-
const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
66+
const HYF_REPOS_URL =
67+
"https://api.github.com/orgs/HackYourFuture/repos?per_page=100";
4568

4669
window.onload = () => main(HYF_REPOS_URL);
70+
71+
function createOptions(wholeData) {
72+
for (let i = 0; i < wholeData.length; i++) {
73+
createAndAppend("option", selectElem, {
74+
value: i,
75+
text: wholeData[i].name,
76+
class: "optionsClass"
77+
});
78+
}
79+
}
80+
81+
//Contributors list
82+
function contributorsList(element) {
83+
fetchJSON(element.contributors_url).then(data => {
84+
createAndAppend("div", container, {
85+
id: "divRight",
86+
class: "right-div whiteframe"
87+
});
88+
createAndAppend("p", divRight, {
89+
text: "Contributions",
90+
class: "contributor-header"
91+
});
92+
createAndAppend("ul", divRight, {
93+
id: "contList",
94+
class: "contributor-list"
95+
});
96+
let link;
97+
let listItem;
98+
let contDataDiv;
99+
for (let i = 0; i < data.length; i++) {
100+
link = createAndAppend("a", contList, {
101+
href: data[i].html_url,
102+
target: "_blank"
103+
});
104+
listItem = createAndAppend("li", link, {
105+
class: "contributor-item"
106+
});
107+
108+
createAndAppend("img", listItem, {
109+
src: data[i].avatar_url,
110+
class: "contributor-avatar"
111+
});
112+
contDataDiv = createAndAppend("div", listItem, {
113+
class: "contributor-data"
114+
});
115+
createAndAppend("div", contDataDiv, { text: data[i].login });
116+
createAndAppend("div", contDataDiv, {
117+
text: data[i].contributions,
118+
class: "contributor-badge"
119+
});
120+
}
121+
});
122+
}
123+
124+
125+
126+
//Info
127+
function displayInformation(element) {
128+
let infoDiv = createAndAppend("div", container, {
129+
id: "Left",
130+
class: "left-div whiteframe"
131+
});
132+
createAndAppend("table", infoDiv, { id: "table" });
133+
createAndAppend("tbody", table, { id: "tbody" });
134+
createRow("Repository: ", element.name);
135+
createRow("Description: ", element.description);
136+
createRow("Forks : ", element.forks);
137+
createRow("Updated: ", element.updated_at);
138+
139+
function createRow(label, description) {
140+
let tRow = createAndAppend("tr", table);
141+
createAndAppend("td", tRow, { text: label, class: "label" });
142+
createAndAppend("td", tRow, { text: description });
143+
}
144+
}
145+
}
146+
147+
148+
149+
/* const top =createAndAppend(div,root),{id:"top",text:"HYf Repo",class:}
150+
const right = createAndAppend(div,root),{id:"right"});
151+
let select = createAndAPPEND (div,root),{id:"top",text:"HYf Repo",class:}
152+
createAndAppend(div,root),{id:"right",text:"hello world",class:}
153+
154+
155+
createAndAppend(div,root),{id:"right",text:"hello world",class:}
156+
157+
let name = createAndAppend(div,root),{id:"right",text:"hello world",class:}
158+
159+
160+
//Selection, right,id : selectlist same as line 1
161+
162+
// element and parent
163+
//3 divs, top , right , and left
164+
// select element and parent
165+
//under the fetch Json function
166+
167+
console.log(DataTransferItemList)
168+
c//reate 4
169+
array
170+
loop over data
171+
172+
console.log(data)
173+
let repo Name = [];
174+
let repo desc = [];
175+
let repoUpdate = [];
176+
let repo repoFork = [];
177+
for(let i=0, i<data.length;i++) {
178+
repoName.push(data[data[i].name]);
179+
//same for repoDes
180+
//
47181
}
182+
hard coded as p or h: and youloop over the data and try to fill it7 *

0 commit comments

Comments
 (0)