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

Skip to content

Commit d43ea2b

Browse files
RadhikajramRadhikajram
authored
Merge pull request #1 from Radhikajram/Week1
Week1-Assignment Merging after fixing review comments
2 parents 771142b + ad0433e commit d43ea2b

File tree

4 files changed

+438
-167
lines changed

4 files changed

+438
-167
lines changed

‎homework/index.js

Lines changed: 136 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,13 +30,148 @@
3030
return elem;
3131
}
3232

33+
// Load the Contributors information into section2 div element.
34+
35+
function addContributors(contribution) {
36+
const divElement = [];
37+
38+
divElement.push('<div id="header">', `${'<h3>'} Contributions: ${'</h3>'} ${'</div>'}`);
39+
40+
// eslint-disable-next-line no-restricted-syntax
41+
for (const details of contribution) {
42+
divElement.push(
43+
'<ul>',
44+
`${'<li>'} ${'<img src="'}${details.avatar_url}" width="40" height="40">`,
45+
`</li>`,
46+
`<li>${details.login}</li>`,
47+
`<li>${details.contributions}</li>`,
48+
'</ul>',
49+
);
50+
}
51+
52+
const htmlString = divElement.join('');
53+
document.getElementById('contributor-information').innerHTML = htmlString;
54+
}
55+
56+
// Load the Repository information into section1 div element.
57+
58+
function loadRepoDetails(repoInfo, optionValue) {
59+
const templateElement = [];
60+
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}
70+
: ${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+
}
95+
}
96+
}
97+
const htmlString = templateElement.join('');
98+
document.getElementById('repo-details').innerHTML = htmlString;
99+
}
100+
101+
// Create options under 'SELECT' element which should have HYF Repositories.
102+
103+
function loadSelectionValues(userRepo) {
104+
const sortRepoName = [];
105+
106+
const selectRepo = document.getElementById('select-repo');
107+
108+
// push all the HYP repo names to sort array.
109+
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+
}
116+
117+
// sort the repo name using sort function and localeComapare for uppercase and lowercase sorting.
118+
sortRepoName.sort((a, b) => a.localeCompare(b));
119+
120+
// Create Option under Select element and attach the same with SELECT element.
121+
122+
// eslint-disable-next-line no-restricted-syntax
123+
for (const repo of sortRepoName) {
124+
const option = document.createElement('option');
125+
option.value = repo;
126+
option.text = repo;
127+
selectRepo.appendChild(option);
128+
}
129+
130+
const selectBox = document.getElementById('select-repo');
131+
const selectedValue = selectBox.options[selectBox.selectedIndex].value;
132+
133+
// Load Repository information for the choose repository name in the select box.
134+
loadRepoDetails(userRepo, selectedValue);
135+
selectBox.onchange = function() {
136+
loadRepoDetails(userRepo, selectBox.value);
137+
};
138+
}
139+
33140
function main(url) {
34141
fetchJSON(url, (err, data) => {
35142
const root = document.getElementById('root');
143+
const BodyEl = document.body;
144+
36145
if (err) {
37146
createAndAppend('div', root, { text: err.message, class: 'alert-error' });
38147
} else {
39-
createAndAppend('pre', root, { text: JSON.stringify(data, null, 2) });
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' });
158+
159+
// Create two div elements section1 and section2 under 'Root' div to have
160+
// section1 - Repository Information.
161+
// section2 - Contributions.
162+
163+
createAndAppend('div', root, { id: 'repo-details' });
164+
createAndAppend('div', root, { id: 'contributor-information' });
165+
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);
170+
171+
// Insert Select div first in the body before root div.
172+
BodyEl.insertBefore(select, document.getElementById('root'));
173+
174+
loadSelectionValues(data);
40175
}
41176
});
42177
}

‎homework/style.css

Lines changed: 69 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,70 @@
11
.alert-error {
2-
color: red;
3-
}
2+
color: red;
3+
}
4+
5+
#root {
6+
display: flex;
7+
background-color: white;
8+
flex-direction: column;
9+
font-size: 10px;
10+
}
11+
#root > div {
12+
background-color: #f1f1f1;
13+
margin: 10px;
14+
padding: 20px;
15+
}
16+
#select-container {
17+
background-color: blue;
18+
margin-bottom: 10px;
19+
text-align: justify;
20+
width: 100%;
21+
font-size: 10px;
22+
}
23+
#select-repo {
24+
margin-bottom: 10px;
25+
margin-top: 10px;
26+
font-size: 10px;
27+
}
28+
#root #repo-details {
29+
background-color: grey;
30+
margin-bottom: 10px;
31+
width: 85%;
32+
height: 50%;
33+
}
34+
#root #contributor-information {
35+
background-color: grey;
36+
width: 80%;
37+
}
38+
ul {
39+
list-style: none;
40+
border-bottom: 1px solid #aaa;
41+
42+
}
43+
ul li {
44+
display: inline;
45+
margin-right: 5px;
46+
}
47+
ul li:last-child {
48+
float: right;
49+
background-color: white;
50+
}
51+
52+
53+
/*for Laptop */
54+
55+
@media only screen and (min-width: 768px) {
56+
#root {
57+
flex-direction: row;
58+
}
59+
#select-repo {
60+
font-size: 15px;
61+
}
62+
#select-container {
63+
font-size: 15px;
64+
}
65+
#root #contributor-information {
66+
width: 100%;
67+
}
68+
#root #repo-details {
69+
width: 100%;
70+
}

0 commit comments

Comments
 (0)