Skip to content
This repository was archived by the owner on May 14, 2024. It is now read-only.

Commit 5a584ce

Browse files
nlmohdnlnlmohdnl
committed
js3w2hw
1 parent 0d02620 commit 5a584ce

3 files changed

Lines changed: 258 additions & 0 deletions

File tree

‎Week2/homework/index.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
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 Version-2</title>
14+
<link rel="stylesheet" href="./style.css">
15+
</head>
16+
17+
<body>
18+
19+
<div id="root">
20+
<header class="CardHeader">
21+
<h1>HYF Repositories</h1>
22+
<select id="reposName">
23+
</select>
24+
</header>
25+
<main class="main-container">
26+
<section class="repo-container"></section>
27+
<section class="contributors-container"></section>
28+
</main>
29+
</div>
30+
<script src="index.js"></script>
31+
</body>
32+
33+
</html>

‎Week2/homework/index.js‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
/* eslint-disable no-console */
2+
/* eslint-disable no-use-before-define */
3+
/* eslint-disable no-unused-vars */
4+
const createAndAppend = (name, parent, options = {}) => {
5+
const elem = document.createElement(name);
6+
parent.appendChild(elem);
7+
Object.entries(options).forEach(([key, value]) => {
8+
if (key === 'innerHTML') {
9+
elem.innerHTML = value;
10+
} else if (key === 'text') {
11+
elem.textContent = value;
12+
} else {
13+
elem.setAttribute(key, value);
14+
}
15+
});
16+
return elem;
17+
};
18+
const errorHandler = err => {
19+
const root = document.getElementById('root');
20+
createAndAppend('div', root, {
21+
text: err.message,
22+
class: 'alert-error',
23+
});
24+
};
25+
26+
const optionLoading = items => {
27+
const selectEl = document.querySelector('#reposName');
28+
items
29+
.sort((current, next) => current.name.localeCompare(next.name))
30+
.forEach(repo => {
31+
createAndAppend('option', selectEl, {
32+
text: repo.name,
33+
value: repo.name,
34+
});
35+
});
36+
};
37+
38+
const renderRepoContainer = repo => {
39+
const { selectedIndex } = document.querySelector('select');
40+
const convertedDate = new Date(
41+
repo[selectedIndex].updated_at,
42+
).toLocaleString();
43+
const repoContainer = document.querySelector('.repo-container');
44+
45+
createAndAppend('ul', repoContainer, { class: 'repoDetails' });
46+
const cardUl = document.querySelector('.repoDetails');
47+
48+
createAndAppend('li', cardUl, {
49+
innerHTML: `<span class='firstText'>Repository</span> <span>:</span><a href="${repo[selectedIndex].html_url}" target='_blank'>${repo[selectedIndex].name}</a>`,
50+
});
51+
createAndAppend('li', cardUl, {
52+
innerHTML: `<span class='firstText'>Description</span><span>:</span> <span >${repo[selectedIndex].description}</span>`,
53+
});
54+
createAndAppend('li', cardUl, {
55+
innerHTML: `<span class='firstText'>Forks</span><span>:</span> <span >${repo[selectedIndex].forks_count}</span>`,
56+
});
57+
createAndAppend('li', cardUl, {
58+
innerHTML: `<span class='firstText'>Updated</span><span>:</span> <span >${convertedDate}</span>`,
59+
});
60+
61+
return repo;
62+
};
63+
64+
const renderRepoContributors = repo => {
65+
const { selectedIndex } = document.querySelector('select');
66+
const selectedRepo = repo[selectedIndex];
67+
68+
const repoContributors = document.querySelector('.contributors-container');
69+
createAndAppend('ul', repoContributors, { class: 'repoContributors' });
70+
const ulContributors = document.querySelector('.repoContributors');
71+
72+
createAndAppend('h5', ulContributors, {
73+
text: 'Contributions',
74+
style: 'margin:0 0 5px 0; font-size: 15px; ',
75+
});
76+
77+
fetchJSON(selectedRepo.contributors_url)
78+
.then(data =>
79+
data.forEach(dataSelected => {
80+
const li = createAndAppend('li', ulContributors, {
81+
style:
82+
'display: flex;text-align: center; justify-content: space-between; border-bottom: 2px solid #687466;',
83+
});
84+
const imgAvatar = createAndAppend('img', li, {
85+
src: dataSelected.avatar_url,
86+
class: 'avatar',
87+
});
88+
const contInfo = createAndAppend('a', li, {
89+
text: dataSelected.login,
90+
href: dataSelected.html_url,
91+
target: '_blank',
92+
style: 'margin: 20px auto 0 5px; text-decoration: none;',
93+
});
94+
const contCount = createAndAppend('span', li, {
95+
text: dataSelected.contributions,
96+
class: 'contributions-count',
97+
});
98+
}),
99+
)
100+
.catch(err => console.error(err));
101+
};
102+
103+
const renderSelectedOptionChange = repo => {
104+
const selectRepo = document.querySelector('select');
105+
selectRepo.addEventListener('change', () => {
106+
document.querySelector('section.repo-container ul').remove();
107+
document.querySelector('.repoContributors').remove();
108+
109+
renderRepoContainer(repo);
110+
renderRepoContributors(repo);
111+
});
112+
};
113+
114+
const fetchJSON = url => {
115+
const repos = fetch(url)
116+
.then(res => {
117+
if (!res.ok) {
118+
throw new Error('Network response was not ok');
119+
}
120+
return res.json();
121+
})
122+
.then(data => data)
123+
.catch(err => errorHandler(err));
124+
return repos;
125+
};
126+
127+
const main = url => {
128+
fetchJSON(url)
129+
.then(data => {
130+
optionLoading(data);
131+
renderRepoContainer(data);
132+
renderRepoContributors(data);
133+
renderSelectedOptionChange(data);
134+
})
135+
.catch(err => errorHandler(err));
136+
};
137+
138+
const HYF_REPOS_URL =
139+
'https://api.github.com/orgs/HackYourFuture/repos?per_page=30';
140+
141+
main(HYF_REPOS_URL);

‎Week2/homework/style.css‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
2+
body {
3+
font-family: italic 20px Serif;
4+
}
5+
.CardHeader {
6+
background-color:palevioletred;
7+
color: white;
8+
justify-content: left;
9+
padding:10px;
10+
margin-bottom: 5px;
11+
border: 1px solid aqua;
12+
width: auto;
13+
}
14+
15+
.repoDetails {
16+
display: inline-block;
17+
background-color: white;
18+
padding: 15px;
19+
line-height: 20px;
20+
border: 1px solid black;
21+
list-style-type: none;
22+
}
23+
24+
.repoDetails li span {
25+
font-size: 15px;
26+
white-space: normal;
27+
}
28+
.firstText {
29+
display: inline-block;
30+
margin-right: 5px;
31+
font-weight: bolder;
32+
width: 85px;
33+
}
34+
.main-container {
35+
display: flex;
36+
}
37+
.repoContributors {
38+
display: inline-block;
39+
width: 90%;
40+
background-color: white;
41+
padding: 15px;
42+
line-height: 20px;
43+
border: 1px solid black;
44+
list-style-type: none;
45+
}
46+
47+
.repo-container {
48+
width: 100%;
49+
margin-left: 15px;
50+
}
51+
.contributors-container {
52+
width: 100%;
53+
}
54+
.avatar {
55+
margin-bottom: 3px;
56+
margin-top: 3px;
57+
width: 65px;
58+
border-radius: 50%;
59+
}
60+
.contributions-count {
61+
background-color: cadetblue;
62+
border: 2px solid rgba(0, 0, 0, 0.17);
63+
font-weight: bold;
64+
border-radius: 5px;
65+
padding: 7px;
66+
margin: 15px 5px 25px 0;
67+
}
68+
.alert-error {
69+
width: 72%;
70+
margin: 2px 0;
71+
padding: 10px;
72+
border-radius: 3px 3px 3px 3px;
73+
color: #d8000c;
74+
background-color: #ffbaba;
75+
}
76+
@media screen and (max-width: 700px) {
77+
.repo-container,
78+
.contributors-container {
79+
width: 100%;
80+
}
81+
.main-container {
82+
display: block;
83+
}
84+
}

0 commit comments

Comments
 (0)