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

Commit ae6a73e

Browse files
committed
project-w3
1 parent ef25bfc commit ae6a73e

2 files changed

Lines changed: 62 additions & 53 deletions

File tree

‎homework/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
</div>
3333
</main>
3434
</div>
35+
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
3536
<script src="/index.js"></script>
3637
</body>
3738

‎homework/index.js‎

Lines changed: 61 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,11 @@
11
'use strict';
22
{
3-
// function fetchJSON(url, cb) {
4-
// const xhr = new XMLHttpRequest();
5-
// xhr.open('GET', url);
6-
// xhr.responseType = 'json';
7-
// xhr.onload = () => {
8-
// if (xhr.status >= 200 && xhr.status <= 299) {
9-
// cb(null, xhr.response);
10-
// } else {
11-
// cb(new Error(`Network error: ${xhr.status} - ${xhr.statusText}`));
12-
// }
13-
// };
14-
// xhr.onerror = () => cb(new Error('Network request failed'));
15-
// xhr.send();
16-
// }
3+
async function fetchJSON(url) {
4+
const getByAxios = await axios.get(url).then((res) => {
5+
return res.data;
6+
});
7+
return getByAxios;
8+
}
179

1810
function createAndAppend(name, parent, options = {}) {
1911
const elem = document.createElement(name);
@@ -58,61 +50,77 @@
5850
createAndAppend('th', tr, { text: 'Updated:' });
5951
td = createAndAppend('td', tr, { text: repo.updated_at });
6052
}
61-
function contributorDetail(url) {
53+
54+
async function contributorDetail(url) {
6255
let select = document.createElement('select');
63-
fetch(url).then((response) => response.json()).then((data) => {
64-
let byData = data;
65-
byData.sort((a, b) => a.name.localeCompare(b.name));
66-
byData.forEach((repo, index) => {
67-
let option = document.createElement('option');
68-
option.value = index;
69-
option.innerText = repo.name;
70-
select.appendChild(option);
71-
});
72-
select.addEventListener('click', () => {
73-
let repo = document.getElementById('repository');
74-
let sectionContributor = document.getElementById('contributor');
75-
if (repo.hasChildNodes()) {
76-
repo.removeChild(repo.lastChild);
77-
}
78-
while (sectionContributor.hasChildNodes()) {
79-
sectionContributor.removeChild(sectionContributor.lastChild);
80-
}
56+
const fetchAxios = await axios.get(url).then((res) => {
57+
return res.data;
58+
});
59+
let byData = fetchAxios;
60+
byData.sort((a, b) => a.name.localeCompare(b.name));
61+
byData.forEach((repo, index) => {
62+
let option = document.createElement('option');
63+
option.value = index;
64+
option.innerText = repo.name;
65+
select.appendChild(option);
66+
});
67+
select.addEventListener('click', () => {
68+
let repo = document.getElementById('repository');
69+
let sectionContributor = document.getElementById('contributor');
70+
if (repo.hasChildNodes()) {
71+
repo.removeChild(repo.lastChild);
72+
}
73+
while (sectionContributor.hasChildNodes()) {
74+
sectionContributor.removeChild(sectionContributor.lastChild);
75+
}
8176

82-
fetch(`https://api.github.com/repos/HackYourFuture/
77+
fetch(`https://api.github.com/repos/HackYourFuture/
8378
${byData[select.value].name}/contributors`)
84-
.then((response) => response.json())
85-
.then((data) => {
86-
data.forEach((ele) => {
87-
let contributorDiv = document.createElement('div');
88-
contributorDiv.id = 'contributorDiv';
89-
let h4 = createAndAppend('h4', contributorDiv);
90-
let h5 = createAndAppend('h5', contributorDiv);
91-
let img = createAndAppend('img', contributorDiv);
92-
h4.innerText = ele.login;
93-
h5.innerText = ele.contributions;
94-
img.src = ele.avatar_url;
95-
sectionContributor.appendChild(contributorDiv);
96-
});
79+
.then((response) => response.json())
80+
.then((data) => {
81+
data.forEach((ele) => {
82+
let contributorDiv = document.createElement('div');
83+
contributorDiv.id = 'contributorDiv';
84+
let h4 = createAndAppend('h4', contributorDiv);
85+
let h5 = createAndAppend('h5', contributorDiv);
86+
let img = createAndAppend('img', contributorDiv);
87+
h4.innerText = ele.login;
88+
h5.innerText = ele.contributions;
89+
img.src = ele.avatar_url;
90+
sectionContributor.appendChild(contributorDiv);
9791
});
98-
let ul = createAndAppend('ul', repo);
99-
renderRepoDetails(byData[select.value], ul);
100-
});
92+
});
93+
let ul = createAndAppend('ul', repo);
94+
renderRepoDetails(byData[select.value], ul);
10195
});
96+
10297
let header = document.getElementById('header');
10398
header.appendChild(select);
10499
let contributor = document.getElementById('contributor');
105100
while (contributor.hasChildNodes()) {
106101
contributor.removeChild(contributor.lastChild);
107102
}
108103
}
109-
function main(url) {
110-
fetch(url).then((res) => res.json()).then((data) => data).catch((err) => {
104+
// function main(url) {
105+
// fetch(url).then((res) => res.json()).then((data) => data).catch((err) => {
106+
// createAndAppend('div', root, {
107+
// text: err.message,
108+
// class: 'alert-error'
109+
// });
110+
// });
111+
// contributorDetail(url);
112+
// renderRepoDetails(repo, ul);
113+
// }
114+
115+
async function main(url) {
116+
try {
117+
await fetch(url).then((res) => res.json()).then((data) => data);
118+
} catch (err) {
111119
createAndAppend('div', root, {
112120
text: err.message,
113121
class: 'alert-error'
114122
});
115-
});
123+
}
116124
contributorDetail(url);
117125
renderRepoDetails(repo, ul);
118126
}

0 commit comments

Comments
 (0)