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

Skip to content

Commit dfd4785

Browse files
RadhikajramRadhikajram
authored
Merge pull request #3 from Radhikajram/Week3
Week3
2 parents 771142b + 57c0b74 commit dfd4785

File tree

7 files changed

+539
-197
lines changed

7 files changed

+539
-197
lines changed

‎homework/App.js

Lines changed: 73 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,77 @@ class App {
1616
// 1. Create the fixed HTML elements of your page
1717
// 2. Make an initial XMLHttpRequest using Util.fetchJSON() to populate your <select> element
1818

19+
const BodyEl = document.body;
20+
1921
const root = document.getElementById('root');
2022

21-
Util.createAndAppend('h1', root, { text: 'It works!' }); // TODO: replace with your own code
23+
// Create div element 'select' in document body to hold the label element and list box.
24+
25+
Util.createAndAppend('div', BodyEl, { id: 'select-container' });
26+
const select = document.getElementById('select-container');
27+
Util.createAndAppend('LABEL', select, {
28+
text: 'HYF Repositories: ',
29+
id: 'label',
30+
for: 'repo',
31+
});
32+
Util.createAndAppend('select', select, { id: 'select-repo' });
33+
34+
// Create two div elements section1 and section2 under 'Root' div to have
35+
// section1 - Repository Information.
36+
// section2 - Contributions.
37+
38+
Util.createAndAppend('div', root, { id: 'repo-details' });
39+
Util.createAndAppend('div', root, { id: 'contributor-information' });
40+
41+
// Insert section1 before section2 div element under 'root' div.
42+
const newNode = document.getElementById('contributor-information');
43+
const referenceNode = document.querySelector('repo-details');
44+
root.insertBefore(newNode, referenceNode);
45+
46+
// Insert Select div first in the body before root div.
47+
BodyEl.insertBefore(select, document.getElementById('root'));
2248

2349
try {
2450
const repos = await Util.fetchJSON(url);
51+
2552
this.repos = repos.map(repo => new Repository(repo));
26-
// TODO: add your own code here
53+
54+
const sortRepoName = [];
55+
// push all the HYP repo names to sort array.
56+
57+
Object.keys(repos).forEach(key => {
58+
sortRepoName.push(repos[key].name);
59+
});
60+
// sort the repo name using sort function and localeComapare for uppercase and lowercase sorting.
61+
sortRepoName.sort((a, b) => a.localeCompare(b));
62+
63+
const selectBox = document.getElementById('select-repo');
64+
65+
// Create Option under Select element and attach the same with SELECT element.
66+
67+
sortRepoName.forEach(loadrepo => {
68+
const option = document.createElement('option');
69+
option.value = loadrepo;
70+
option.text = loadrepo;
71+
selectBox.appendChild(option);
72+
});
73+
74+
let keyIndex;
75+
Object.keys(repos).forEach(key => {
76+
if (selectBox.value === repos[key].name) {
77+
keyIndex = key;
78+
}
79+
});
80+
this.fetchContributorsAndRender(keyIndex);
81+
82+
selectBox.addEventListener('change', () => {
83+
Object.keys(repos).forEach(key => {
84+
if (selectBox.value === repos[key].name) {
85+
keyIndex = key;
86+
}
87+
});
88+
this.fetchContributorsAndRender(keyIndex);
89+
});
2790
} catch (error) {
2891
this.renderError(error);
2992
}
@@ -46,14 +109,18 @@ class App {
46109
*/
47110
async fetchContributorsAndRender(index) {
48111
try {
112+
console.log(index);
49113
const repo = this.repos[index];
50114
const contributors = await repo.fetchContributors();
51115

52-
const container = document.getElementById('container');
116+
const container = document.getElementById('repo-details');
53117
App.clearContainer(container);
54118

55-
const leftDiv = Util.createAndAppend('div', container);
56-
const rightDiv = Util.createAndAppend('div', container);
119+
const contributorContainer = document.getElementById('contributor-information');
120+
App.clearContainer(contributorContainer);
121+
122+
const leftDiv = 'repo-details';
123+
const rightDiv = document.getElementById('contributor-information');
57124

58125
const contributorList = Util.createAndAppend('ul', rightDiv);
59126

@@ -69,13 +136,12 @@ class App {
69136

70137
/**
71138
* Render an error to the DOM.
72-
* @param {Error} error An Error object describing the error.
139+
* @param {Error} error An Error object describing the1 2 error.
73140
*/
74141
renderError(error) {
75142
console.log(error); // TODO: replace with your own code
76143
}
77144
}
78-
79145
const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
80146

81147
window.onload = () => new App(HYF_REPOS_URL);

‎homework/Contributor.js

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,15 @@ class Contributor {
1313
* @param {HTMLElement} container The container element in which to render the contributor.
1414
*/
1515
render(container) {
16-
// TODO: replace the next line with your code.
17-
Util.createAndAppend('pre', container, JSON.stringify(this.contributor, null, 2));
16+
const liElement = Util.createAndAppend('li', container);
17+
const imgElement = Util.createAndAppend('img', container, {
18+
src: this.contributor.avatar_url,
19+
width: 40,
20+
height: 40,
21+
});
22+
23+
liElement.appendChild(imgElement);
24+
liElement.appendChild(document.createTextNode(this.contributor.login));
25+
liElement.appendChild(document.createTextNode(this.contributor.contributions));
1826
}
1927
}

‎homework/Repository.js

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,27 @@ class Repository {
1313
* @param {HTMLElement} container The container element in which to render the repository.
1414
*/
1515
render(container) {
16-
// TODO: replace the next line with your code.
17-
Util.createAndAppend('pre', container, JSON.stringify(this.repository, null, 2));
16+
const templateElement = [];
17+
18+
// format the date
19+
const upDate = new Date(this.repository.updated_at);
20+
const amOrPm = upDate.getHours() < 12 ? 'AM' : 'PM';
21+
const dateHours = upDate.getHours() % 12 || 12;
22+
const formatedUpdate = `${upDate.getMonth()}/${upDate.getDate()}/${upDate.getFullYear()} ${dateHours}
23+
: ${upDate.getMinutes()}:${upDate.getSeconds()} ${amOrPm}`;
24+
templateElement.push(
25+
'<div id="row">',
26+
`${'<p id="name-info">'} Repository name : ${'<a href="'}${
27+
this.repository.html_url
28+
}"${'/>'} ${this.repository.name}</a></p>`,
29+
`${'<p id="desc">'} Description : ${this.repository.description}</p>`,
30+
`${'<p id="forks">'} Forks : ${this.repository.forks_count}</p>`,
31+
`${'<p id="updated">'} Updated : ${formatedUpdate}</p>`,
32+
'</div>',
33+
);
34+
const htmlString = templateElement.join('');
35+
36+
document.getElementById(container).innerHTML = htmlString;
1837
}
1938

2039
/**

‎homework/index.js

Lines changed: 135 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,18 @@
11
'use strict';
22

3+
// Using promise fetch the URL.
34
{
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();
5+
function fetchUrl(url) {
6+
return fetch(url)
7+
.then(result => {
8+
return result.json();
9+
})
10+
.then(data => {
11+
return data;
12+
})
13+
.catch(error => {
14+
console.log(`check the URL address${error}`);
15+
});
1716
}
1817

1918
function createAndAppend(name, parent, options = {}) {
@@ -30,15 +29,131 @@
3029
return elem;
3130
}
3231

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) });
32+
// Load the Contributors information into section2 div element.
33+
34+
function addContributors(contribution) {
35+
const divElement = [];
36+
37+
divElement.push('<div id="header">', `${'<h3>'} Contributions: ${'</h3>'} ${'</div>'}`);
38+
39+
contribution.forEach(details => {
40+
divElement.push(
41+
'<ul>',
42+
`${'<li>'} ${'<img src="'}${details.avatar_url}" width="40" height="40">`,
43+
`</li>`,
44+
`<li>${details.login}</li>`,
45+
`<li>${details.contributions}</li>`,
46+
'</ul>',
47+
);
48+
});
49+
50+
const htmlString = divElement.join('');
51+
document.getElementById('contributor-information').innerHTML = htmlString;
52+
}
53+
54+
// Load the Repository information into section1 div element.
55+
56+
function loadRepoDetails(repoInfo, optionValue) {
57+
const templateElement = [];
58+
59+
Object.keys(repoInfo).forEach(key => {
60+
if (optionValue === repoInfo[key].name) {
61+
// format the date
62+
const upDate = new Date(repoInfo[key].updated_at);
63+
const amOrPm = upDate.getHours() < 12 ? 'AM' : 'PM';
64+
const dateHours = upDate.getHours() % 12 || 12;
65+
const formatedUpdate = `${upDate.getMonth()}/${upDate.getDate()}/${upDate.getFullYear()} ${dateHours}
66+
: ${upDate.getMinutes()}:${upDate.getSeconds()} ${amOrPm}`;
67+
templateElement.push(
68+
'<div id="row">',
69+
`${'<p id="name-info">'} Repository name : ${'<a href="'}${
70+
repoInfo[key].html_url
71+
}"${'/>'} ${repoInfo[key].name}</a></p>`,
72+
`${'<p id="desc">'} Description : ${repoInfo[key].description}</p>`,
73+
`${'<p id="forks">'} Forks : ${repoInfo[key].forks_count}</p>`,
74+
75+
`${'<p id="updated">'} Updated : ${formatedUpdate}</p>`,
76+
'</div>',
77+
);
78+
fetchUrl(repoInfo[key].contributors_url).then(responseData => {
79+
addContributors(responseData);
80+
});
4081
}
4182
});
83+
const htmlString = templateElement.join('');
84+
document.getElementById('repo-details').innerHTML = htmlString;
85+
}
86+
87+
// Create options under 'SELECT' element which should have HYF Repositories.
88+
89+
function loadSelectionValues(userRepo) {
90+
const sortRepoName = [];
91+
92+
const selectRepo = document.getElementById('select-repo');
93+
94+
// push all the HYP repo names to sort array.
95+
96+
Object.keys(userRepo).forEach(key => {
97+
sortRepoName.push(userRepo[key].name);
98+
});
99+
100+
// sort the repo name using sort function and localeComapare for uppercase and lowercase sorting.
101+
sortRepoName.sort((a, b) => a.localeCompare(b));
102+
103+
// Create Option under Select element and attach the same with SELECT element.
104+
105+
sortRepoName.forEach(repo => {
106+
const option = document.createElement('option');
107+
option.value = repo;
108+
option.text = repo;
109+
selectRepo.appendChild(option);
110+
});
111+
112+
const selectBox = document.getElementById('select-repo');
113+
114+
// Load Repository information for the choose repository name in the select box.
115+
loadRepoDetails(userRepo, selectBox.value);
116+
selectBox.onchange = function() {
117+
loadRepoDetails(userRepo, selectBox.value);
118+
};
119+
}
120+
121+
function main(url) {
122+
const BodyEl = document.body;
123+
const root = document.getElementById('root');
124+
125+
// Call the fetchUrl function to fetch Repository information. The function will in tern returns promise.
126+
const data = fetchUrl(url).then(responseData => {
127+
loadSelectionValues(responseData);
128+
});
129+
130+
// Create div element 'select' in document body to hold the label element and list box.
131+
132+
createAndAppend('div', BodyEl, { id: 'select-container' });
133+
const select = document.getElementById('select-container');
134+
createAndAppend('LABEL', select, {
135+
text: 'HYF Repositories: ',
136+
id: 'label',
137+
for: 'repo',
138+
});
139+
createAndAppend('select', select, { id: 'select-repo' });
140+
141+
// Create two div elements section1 and section2 under 'Root' div to have
142+
// section1 - Repository Information.
143+
// section2 - Contributions.
144+
145+
createAndAppend('div', root, { id: 'repo-details' });
146+
createAndAppend('div', root, { id: 'contributor-information' });
147+
148+
// Insert section1 before section2 div element under 'root' div.
149+
const newNode = document.getElementById('contributor-information');
150+
const referenceNode = document.querySelector('repo-details');
151+
root.insertBefore(newNode, referenceNode);
152+
153+
// Insert Select div first in the body before root div.
154+
BodyEl.insertBefore(select, document.getElementById('root'));
155+
156+
loadSelectionValues(data);
42157
}
43158

44159
const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';

0 commit comments

Comments
 (0)