Skip to content

Commit efca627

Browse files
lfcoding1lfcoding1
committed
.
1 parent 2bd9232 commit efca627

9 files changed

Lines changed: 836 additions & 0 deletions

File tree

‎Week3/src/App.js‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
'use strict';
2+
3+
/* global Util, Repository, Contributor */
4+
5+
class App {
6+
constructor(url) {
7+
this.initialize(url);
8+
}
9+
10+
/**
11+
* Initialization
12+
* @param {string} url The GitHub URL for obtaining the organization's repositories.
13+
*/
14+
async initialize(url) {
15+
const root = document.getElementById('root');
16+
try {
17+
const data = await Util.fetchJSON(url);
18+
this.data = data.map(repo => new Repository(repo));
19+
await renderContainer(data)
20+
} catch (error) {
21+
this.renderError(error);
22+
}
23+
24+
25+
function renderIndex0(data){
26+
for (let i = 0; i < data.length; i++){
27+
let Image0Link = Util.createAndAppend('li', contributorsUl, {})
28+
let contributor0Name = Util.createAndAppend('img', Image0Link, {src: data[i].avatar_url, class: 'imageSrc'});
29+
let contributor0Link = Util.createAndAppend('a', Image0Link, {text: data[i].login, target: "_blank", href: data[i].html_url, id: 'link'});
30+
let contributor0Badge = Util.createAndAppend('li', Image0Link, {text:"Contributions: " + data[i].contributions, class: 'badge'});
31+
} //end for
32+
33+
34+
35+
data.forEach((repo) => {
36+
for (let i = 0; i < newArray.length; i++) {
37+
Util.createAndAppend('option', selectList, {id: "myOption", value: i, text: newArray[i]});
38+
}
39+
});
40+
41+
function removeNodes(container){
42+
while (ul.hasChildNodes()) {
43+
ul.removeChild(ul.firstChild);
44+
}
45+
while (contributorsUl.hasChildNodes()) {
46+
contributorsUl.removeChild(contributorsUl.firstChild);
47+
}
48+
} //end removeNodes
49+
50+
selectList.onchange = function(selectedIndex){
51+
let repoName = Util.createAndAppend('li', ul, { text: "Repository: ", class: 'nameInContainer', function: removeNodes()});
52+
Util.createAndAppend('a', repoName, { text: newArray[this.selectedIndex], id: 'linkInContainer', target: "_blank", href: htmlArray[this.selectedIndex]});
53+
Util.createAndAppend('li', ul, {text: "Description: " + descriptionArray[this.selectedIndex], class: 'descriptionInContainer'});
54+
Util.createAndAppend('li', ul, { text: "Number of Forks: " + forkArray[this.selectedIndex], class: 'forksInContainer'});
55+
Util.createAndAppend('li', ul, { text: "Language: " + languageArray[this.selectedIndex], class: 'languageInContainer'});
56+
let dates = new Date (updatedAt[this.selectedIndex]);
57+
dates = dates.toUTCString();
58+
Util.createAndAppend('li', ul, {text: "Updated at: " + dates, class: 'updatedAtInContainer'});
59+
}// end of onchange
60+
}// end renderIndex0
61+
}
62+
63+
64+
/**
65+
* Removes all child elements from a container element
66+
* @param {*} container Container element to clear
67+
*/
68+
clearContainer(container) {
69+
while (container.firstChild) {
70+
container.removeChild(container.firstChild);
71+
}
72+
}
73+
74+
/**
75+
* Fetch contributor information for the selected repository and render the
76+
* repo and its contributors as HTML elements in the DOM.
77+
* @param {number} index The array index of the repository.
78+
*/
79+
async fetchContributorsAndRender(index) {
80+
try {
81+
const repo = this.repos[index];
82+
const contributors = await repo.fetchContributors();
83+
84+
const container = document.getElementById('container');
85+
this.clearContainer(container);
86+
87+
const leftDiv = Util.createAndAppend('div', container);
88+
const rightDiv = Util.createAndAppend('div', container);
89+
90+
const contributorList = Util.createAndAppend('ul', rightDiv);
91+
92+
repo.render(leftDiv);
93+
94+
contributors
95+
.map(contributor => new Contributor(contributor))
96+
.forEach(contributor => contributor.render(contributorList));
97+
} catch (error) {
98+
this.renderError(error);
99+
}
100+
}
101+
102+
/**
103+
* Render an error to the DOM.
104+
* @param {Error} error An Error object describing the error.
105+
*/
106+
107+
renderError(err) {
108+
let catsrc = 'https://us.123rf.com/450wm/photodeti/photodeti1702/photodeti170200132/72587923-cat-holding-stop-sign-isolated-on-white-background-.jpg?ver=6';
109+
Util.createAndAppend('div', root, { text: err.message, class: 'alert-error' }),
110+
Util.createAndAppend('img', root, {id: 'catImage', src: catsrc});
111+
}
112+
}
113+
114+
const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
115+
let index0API = 'https://api.github.com/repos/HackYourFuture/alumni/contributors';
116+
117+
118+
window.onload = () => new App(HYF_REPOS_URL);

‎Week3/src/Contributor.js‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
'use strict';
2+
3+
/* global Util */
4+
5+
// eslint-disable-next-line no-unused-vars
6+
class Contributor {
7+
constructor(data) {
8+
this.data = data;
9+
}
10+
11+
/**
12+
* Render the contributor info to the DOM.
13+
* @param {HTMLElement} contributorList The parent element in which to render the contributor.
14+
*/
15+
render(contributorList) {
16+
function renderContributors(data){
17+
for (let i = 0; i < data.length; i++){
18+
let ImageLink = Util.createAndAppend('li', contributorsUl, {})
19+
let contributorName = Util.createAndAppend('img', ImageLink, {src: data[i].avatar_url, class: 'imageSrc'});
20+
let contributorLink = Util.createAndAppend('a', ImageLink, {text: data[i].login, target: "_blank", href: data[i].html_url, id: 'link'});
21+
let contributorBadge = Util.createAndAppend('li', ImageLink, {text:"Contributions: " + data[i].contributions, class: 'badge'});
22+
} //end for
23+
}//end renderContributors
24+
}
25+
}
26+
27+
//this is not part of Contributor constructor, but is here
28+
function renderContributors(data){
29+
for (let i = 0; i < data.length; i++){
30+
let ImageLink = Util.createAndAppend('li', contributorsUl, {})
31+
let contributorName = Util.createAndAppend('img', ImageLink, {src: data[i].avatar_url, class: 'imageSrc'});
32+
let contributorLink = Util.createAndAppend('a', ImageLink, {text: data[i].login, target: "_blank", href: data[i].html_url, id: 'link'});
33+
let contributorBadge = Util.createAndAppend('li', ImageLink, {text:"Contributions: " + data[i].contributions, class: 'badge'});
34+
} //end for
35+
}//end renderContributors (called in Repository.js)

‎Week3/src/Repository.js‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
'use strict';
2+
3+
/* global Util */
4+
5+
// eslint-disable-next-line no-unused-vars
6+
class Repository {
7+
constructor(data) {
8+
this.data = data;
9+
} //end constructor
10+
11+
/**
12+
* Render the repository info to the DOM.
13+
* @param {HTMLElement} parent The parent element in which to render the repository.
14+
*/
15+
renderContainer(data) {
16+
17+
}
18+
19+
/**
20+
* Returns an array of contributors as a promise
21+
*/
22+
fetchContributors() {
23+
return Util.fetchJSON(this.data.contributors_url);
24+
}
25+
26+
/**
27+
* Returns the name of the repository
28+
*/
29+
name() {
30+
return this.data.name;
31+
} //end name
32+
} //end Repository
33+
function renderContainer(data){
34+
async function get0API(url){
35+
try{
36+
let data = await Util.fetchJSON(index0API)
37+
await renderIndex0(data)
38+
} catch(error) {
39+
this.renderError(error);
40+
}
41+
} //end asyn function
42+
43+
get0API(index0API)
44+
let newArray = [];
45+
let forkArray = [];
46+
let languageArray = [];
47+
let descriptionArray = [];
48+
let updatedAt = [];
49+
let htmlArray = [];
50+
const root = document.getElementById('root');
51+
data.sort((a, b) => (a.name).localeCompare(b.name));
52+
53+
for (let i = 0; i < data.length; i++){
54+
newArray.push(data[i].name);
55+
descriptionArray.push(data[i].description);
56+
forkArray.push(data[i].forks);
57+
languageArray.push(data[i].language);
58+
updatedAt.push(data[i].updated_at);
59+
htmlArray.push(data[i].html_url);
60+
var date = new Date ((data[i].updated_at));
61+
date = date.toUTCString();
62+
}
63+
64+
while (root.firstChild) {
65+
root.removeChild(root.firstChild);
66+
}
67+
68+
Util.createAndAppend('h1', root, { text: "Hack Your Future Repositories", class: 'title' });
69+
Util.createAndAppend('h3', root, { text: "Select a repository: ", class: 'subtitle'});
70+
const selectList = Util.createAndAppend('select', root, {id: "mySelect" });
71+
const headerDiv = Util.createAndAppend('div', root, {class: 'headerdiv'});
72+
Util.createAndAppend('h3', headerDiv, { text: "Repository Information", class: 'subtitle', id: 'repoHeader' });
73+
Util.createAndAppend('h3', headerDiv, { text: "Contributors", class: 'subtitle', id:'contributorHeader' });
74+
const container = Util.createAndAppend('div', root, {class: 'container'});
75+
const card = Util.createAndAppend('div', container, { class: 'card'});
76+
const ul = Util.createAndAppend('ul', card, {id: "myUl", });
77+
const contributorsCard = Util.createAndAppend('div', container, {class: 'card'});
78+
const contributorsUl = Util.createAndAppend('ul', contributorsCard, {id: 'contributorsUl'});
79+
const Index0Name = Util.createAndAppend ('li', ul, {text: "Repository: ", class: 'nameInContainer'});
80+
const Index0Link = Util.createAndAppend ('a', Index0Name, {text: newArray[0], target: "_blank", href: htmlArray[0]});
81+
const Index0Description = Util.createAndAppend('li', ul, {text: "Description: " + descriptionArray[0], class:"descriptionInContainer"});
82+
const Index0Fork = Util.createAndAppend ('li', ul, {text: "Number of Forks: " + forkArray[0], class: 'forksInContainer'});
83+
const Index0Language = Util.createAndAppend ('li', ul, {text: "Language: " + languageArray[0], class: 'updatedAtInContainer'});
84+
const Index0UpdatedAt = Util.createAndAppend ('li', ul, {text: "Updated at: " + date, class: 'updatedAtInContainer'})
85+
86+
function renderIndex0(data){
87+
for (let i = 0; i < data.length; i++){
88+
let Image0Link = Util.createAndAppend('li', contributorsUl, {})
89+
let contributor0Name = Util.createAndAppend('img', Image0Link, {src: data[i].avatar_url, class: 'imageSrc'});
90+
let contributor0Link = Util.createAndAppend('a', Image0Link, {text: data[i].login, target: "_blank", href: data[i].html_url, id: 'link'});
91+
let contributor0Badge = Util.createAndAppend('li', Image0Link, {text:"Contributions: " + data[i].contributions, class: 'badge'});
92+
} //end for
93+
94+
data.forEach((repo) => {
95+
for (let i = 0; i < newArray.length; i++) {
96+
Util.createAndAppend('option', selectList, {id: "myOption", value: i, text: newArray[i]});
97+
}
98+
});
99+
100+
function removeNodes(container){
101+
while (ul.hasChildNodes()) {
102+
ul.removeChild(ul.firstChild);
103+
}
104+
while (contributorsUl.hasChildNodes()) {
105+
contributorsUl.removeChild(contributorsUl.firstChild);
106+
}
107+
} //end removeNodes
108+
109+
selectList.onchange = function(selectedIndex){
110+
let contributorAPI = 'https://api.github.com/repos/HackYourFuture/' + newArray[this.selectedIndex] + '/contributors'
111+
async function getAPI(url){
112+
try{
113+
let data = await Util.fetchJSON(contributorAPI)
114+
await renderContributors(data)
115+
} catch(error) {
116+
this.renderError(error);
117+
}
118+
}
119+
120+
getAPI(contributorAPI);
121+
let repoName = Util.createAndAppend('li', ul, { text: "Repository: ", class: 'nameInContainer', function: removeNodes()});
122+
Util.createAndAppend('a', repoName, { text: newArray[this.selectedIndex], id: 'linkInContainer', target: "_blank", href: htmlArray[this.selectedIndex]});
123+
Util.createAndAppend('li', ul, {text: "Description: " + descriptionArray[this.selectedIndex], class: 'descriptionInContainer'});
124+
Util.createAndAppend('li', ul, { text: "Number of Forks: " + forkArray[this.selectedIndex], class: 'forksInContainer'});
125+
Util.createAndAppend('li', ul, { text: "Language: " + languageArray[this.selectedIndex], class: 'languageInContainer'});
126+
let dates = new Date (updatedAt[this.selectedIndex]);
127+
dates = dates.toUTCString();
128+
Util.createAndAppend('li', ul, {text: "Updated at: " + dates, class: 'updatedAtInContainer'});
129+
130+
131+
132+
}// end of onchange
133+
}// end renderIndex0
134+
} //end renderContainer
135+
136+
function renderContributors(data){
137+
138+
for (let i = 0; i < data.length; i++){
139+
let ImageLink = Util.createAndAppend('li', contributorsUl, {})
140+
let contributorName = Util.createAndAppend('img', ImageLink, {src: data[i].avatar_url, class: 'imageSrc'});
141+
let contributorLink = Util.createAndAppend('a', ImageLink, {text: data[i].login, target: "_blank", href: data[i].html_url, id: 'link'});
142+
let contributorBadge = Util.createAndAppend('li', ImageLink, {text:"Contributions: " + data[i].contributions, class: 'badge'});
143+
} //end for
144+
}//end createStuff3

‎Week3/src/Util.js‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
'use strict';
2+
3+
// eslint-disable-next-line no-unused-vars
4+
class Util {
5+
static createAndAppend(name, parent, options = {}) {
6+
const elem = document.createElement(name);
7+
parent.appendChild(elem);
8+
Object.keys(options).forEach((key) => {
9+
const value = options[key];
10+
if (key === 'text') {
11+
elem.innerText = value;
12+
} else {
13+
elem.setAttribute(key, value);
14+
}
15+
});
16+
return elem;
17+
}
18+
19+
static fetchJSON(url) {
20+
return new Promise((resolve, reject) => {
21+
const xhr = new XMLHttpRequest();
22+
xhr.open('GET', url);
23+
xhr.responseType = 'json';
24+
xhr.onload = () => {
25+
if (xhr.status < 400) {
26+
resolve(xhr.response);
27+
} else {
28+
reject(new Error(`Network error: ${xhr.status} - ${xhr.statusText}`));
29+
}
30+
};
31+
xhr.onerror = () => reject(new Error('Network request failed'));
32+
xhr.send();
33+
});
34+
}
35+
}

‎Week3/src/hyf.png‎

6.81 KB
Loading

‎Week3/src/index.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
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, maximum-scale=1.0, user-scalable=no" />
7+
<meta name="theme-color" content="#000000">
8+
<meta name="apple-mobile-web-app-capable" content="yes">
9+
<meta name="mobile-web-app-capable" content="yes">
10+
<meta name="format-detection" content="telephone=no">
11+
<link rel="apple-touch-icon" href="./hyf.png">
12+
<link rel="shortcut icon" type="image/png" href="./hyf.png" />
13+
<title>HYF-GITHUB</title>
14+
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
15+
<link rel="stylesheet" href="./style.css">
16+
<link href="https://fonts.googleapis.com/css?family=Allerta+Stencil|Play" rel="stylesheet">
17+
</head>
18+
19+
<body>
20+
<div id="root"></div>
21+
<script src="./index.js"></script>
22+
23+
24+
</body>
25+
<footer id ="footer">
26+
<p>Created by: Louise Francois</p>
27+
<p> <a href="https://github.com/lfcoding1?tab=repositories">
28+
Check out my Repositories here</a>.</p>
29+
</footer>
30+
</html>

0 commit comments

Comments
 (0)