Skip to content

Commit 10fbc8b

Browse files
RadhikajramRadhikajram
committed
Week3- Changes
1 parent f3d323c commit 10fbc8b

4 files changed

Lines changed: 110 additions & 18 deletions

File tree

‎homework/App.js‎

Lines changed: 74 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,78 @@ 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+
console.log(selectBox.value);
76+
Object.keys(repos).forEach(key => {
77+
if (selectBox.value === repos[key].name) {
78+
keyIndex = key;
79+
}
80+
});
81+
this.fetchContributorsAndRender(keyIndex);
82+
83+
selectBox.addEventListener('change', () => {
84+
Object.keys(repos).forEach(key => {
85+
if (selectBox.value === repos[key].name) {
86+
keyIndex = key;
87+
}
88+
});
89+
this.fetchContributorsAndRender(keyIndex);
90+
});
2791
} catch (error) {
2892
this.renderError(error);
2993
}
@@ -46,14 +110,18 @@ class App {
46110
*/
47111
async fetchContributorsAndRender(index) {
48112
try {
113+
console.log(index);
49114
const repo = this.repos[index];
50115
const contributors = await repo.fetchContributors();
51116

52-
const container = document.getElementById('container');
117+
const container = document.getElementById('repo-details');
53118
App.clearContainer(container);
54119

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

58126
const contributorList = Util.createAndAppend('ul', rightDiv);
59127

@@ -69,13 +137,12 @@ class App {
69137

70138
/**
71139
* Render an error to the DOM.
72-
* @param {Error} error An Error object describing the error.
140+
* @param {Error} error An Error object describing the1 2 error.
73141
*/
74142
renderError(error) {
75143
console.log(error); // TODO: replace with your own code
76144
}
77145
}
78-
79146
const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
80147

81148
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/style.css‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -36,17 +36,15 @@
3636
width: 80%;
3737
}
3838
ul {
39+
3940
list-style: none;
40-
border-bottom: 1px solid #aaa;
4141

4242
}
4343
ul li {
44-
display: inline;
45-
margin-right: 5px;
46-
}
47-
ul li:last-child {
48-
float: right;
49-
background-color: white;
44+
display: block;
45+
padding: 10px;
46+
border-bottom: 1px solid #aaa;
47+
5048
}
5149

5250

0 commit comments

Comments
 (0)