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

Skip to content

Commit f3d323c

Browse files
RadhikajramRadhikajram
authored
Merge pull request #2 from Radhikajram/Week2
Week2 - Merging after incorporating the review comments.
2 parents d43ea2b + c8a7ee9 commit f3d323c

File tree

1 file changed

+71
-91
lines changed

1 file changed

+71
-91
lines changed

‎homework/index.js

Lines changed: 71 additions & 91 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 = {}) {
@@ -37,8 +36,7 @@
3736

3837
divElement.push('<div id="header">', `${'<h3>'} Contributions: ${'</h3>'} ${'</div>'}`);
3938

40-
// eslint-disable-next-line no-restricted-syntax
41-
for (const details of contribution) {
39+
contribution.forEach(details => {
4240
divElement.push(
4341
'<ul>',
4442
`${'<li>'} ${'<img src="'}${details.avatar_url}" width="40" height="40">`,
@@ -47,7 +45,7 @@
4745
`<li>${details.contributions}</li>`,
4846
'</ul>',
4947
);
50-
}
48+
});
5149

5250
const htmlString = divElement.join('');
5351
document.getElementById('contributor-information').innerHTML = htmlString;
@@ -58,42 +56,30 @@
5856
function loadRepoDetails(repoInfo, optionValue) {
5957
const templateElement = [];
6058

61-
// eslint-disable-next-line no-restricted-syntax
62-
for (const repo in repoInfo) {
63-
if (Object.prototype.hasOwnProperty.call(repoInfo, repo)) {
64-
if (optionValue === repoInfo[repo].name) {
65-
// format the date
66-
const upDate = new Date(repoInfo[repo].updated_at);
67-
const amOrPm = upDate.getHours() < 12 ? 'AM' : 'PM';
68-
const dateHours = upDate.getHours() % 12 || 12;
69-
const formatedUpdate = `${upDate.getMonth()}/${upDate.getDate()}/${upDate.getFullYear()} ${dateHours}
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}
7066
: ${upDate.getMinutes()}:${upDate.getSeconds()} ${amOrPm}`;
71-
72-
templateElement.push(
73-
'<div id="row">',
74-
`${'<p id="name-info">'} Repository name : ${'<a href="'}${
75-
repoInfo[repo].html_url
76-
}"${'/>'} ${repoInfo[repo].name}</a></p>`,
77-
`${'<p id="desc">'} Description : ${repoInfo[repo].description}</p>`,
78-
`${'<p id="forks">'} Forks : ${repoInfo[repo].forks_count}</p>`,
79-
80-
`${'<p id="updated">'} Updated : ${formatedUpdate}</p>`,
81-
'</div>',
82-
);
83-
84-
// Call another function(addContributors) to fill i contributor information.
85-
fetchJSON(repoInfo[repo].contributors_url, (err, data) => {
86-
const root = document.getElementById('root');
87-
88-
if (err) {
89-
createAndAppend('div', root, { text: err.message, class: 'alert-error' });
90-
} else {
91-
addContributors(data);
92-
}
93-
});
94-
}
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+
});
9581
}
96-
}
82+
});
9783
const htmlString = templateElement.join('');
9884
document.getElementById('repo-details').innerHTML = htmlString;
9985
}
@@ -107,73 +93,67 @@
10793

10894
// push all the HYP repo names to sort array.
10995

110-
// eslint-disable-next-line no-restricted-syntax
111-
for (const repo in userRepo) {
112-
if (Object.prototype.hasOwnProperty.call(userRepo, repo)) {
113-
sortRepoName.push(userRepo[repo].name);
114-
}
115-
}
96+
Object.keys(userRepo).forEach(key => {
97+
sortRepoName.push(userRepo[key].name);
98+
});
11699

117100
// sort the repo name using sort function and localeComapare for uppercase and lowercase sorting.
118101
sortRepoName.sort((a, b) => a.localeCompare(b));
119102

120103
// Create Option under Select element and attach the same with SELECT element.
121104

122-
// eslint-disable-next-line no-restricted-syntax
123-
for (const repo of sortRepoName) {
105+
sortRepoName.forEach(repo => {
124106
const option = document.createElement('option');
125107
option.value = repo;
126108
option.text = repo;
127109
selectRepo.appendChild(option);
128-
}
110+
});
129111

130112
const selectBox = document.getElementById('select-repo');
131-
const selectedValue = selectBox.options[selectBox.selectedIndex].value;
132113

133114
// Load Repository information for the choose repository name in the select box.
134-
loadRepoDetails(userRepo, selectedValue);
115+
loadRepoDetails(userRepo, selectBox.value);
135116
selectBox.onchange = function() {
136117
loadRepoDetails(userRepo, selectBox.value);
137118
};
138119
}
139120

140121
function main(url) {
141-
fetchJSON(url, (err, data) => {
142-
const root = document.getElementById('root');
143-
const BodyEl = document.body;
122+
const BodyEl = document.body;
123+
const root = document.getElementById('root');
144124

145-
if (err) {
146-
createAndAppend('div', root, { text: err.message, class: 'alert-error' });
147-
} else {
148-
// Create div element 'select' in document body to hold the label element and list box.
149-
150-
createAndAppend('div', BodyEl, { id: 'select-container' });
151-
const select = document.getElementById('select-container');
152-
createAndAppend('LABEL', select, {
153-
text: 'HYF Repositories: ',
154-
id: 'label',
155-
for: 'repo',
156-
});
157-
createAndAppend('select', select, { id: 'select-repo' });
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+
});
158129

159-
// Create two div elements section1 and section2 under 'Root' div to have
160-
// section1 - Repository Information.
161-
// section2 - Contributions.
130+
// Create div element 'select' in document body to hold the label element and list box.
162131

163-
createAndAppend('div', root, { id: 'repo-details' });
164-
createAndAppend('div', root, { id: 'contributor-information' });
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' });
165140

166-
// Insert section1 before section2 div element under 'root' div.
167-
const newNode = document.getElementById('contributor-information');
168-
const referenceNode = document.querySelector('repo-details');
169-
root.insertBefore(newNode, referenceNode);
141+
// Create two div elements section1 and section2 under 'Root' div to have
142+
// section1 - Repository Information.
143+
// section2 - Contributions.
170144

171-
// Insert Select div first in the body before root div.
172-
BodyEl.insertBefore(select, document.getElementById('root'));
145+
createAndAppend('div', root, { id: 'repo-details' });
146+
createAndAppend('div', root, { id: 'contributor-information' });
173147

174-
loadSelectionValues(data);
175-
}
176-
});
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);
177157
}
178158

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

0 commit comments

Comments
 (0)