Skip to content

Commit 6d15d72

Browse files
codeveloper-ysfcodeveloper-ysf
committed
some misunderstandings fixed
1 parent b5ecb4e commit 6d15d72

3 files changed

Lines changed: 40 additions & 32 deletions

File tree

‎homework/index.html‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,13 @@
2020
<link rel="stylesheet" href="style.css" />
2121
</head>
2222
<body>
23-
<div id="root"></div>
23+
<div id="root">
24+
<header></header>
25+
<main class="main-container">
26+
<section class="repo-container"></section>
27+
<section class="contributors-container"></section>
28+
</main>
29+
</div>
2430
<script src="index.js"></script>
2531
</body>
2632
</html>

‎homework/index.js‎

Lines changed: 21 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,17 @@
22

33
{
44
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 >= 200 && xhr.status <= 299) {
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+
fetch(url)
6+
.then((response) => {
7+
if (!response.ok) {
8+
throw new Error(
9+
`Network error: ${response.status} - ${response.statusText}`,
10+
);
11+
}
12+
return response.json();
13+
})
14+
.then((data) => cb(null, data))
15+
.catch((error) => cb(error, null));
1716
}
1817

1918
function createAndAppend(name, parent, options = {}) {
@@ -26,10 +25,7 @@
2625
else if (key === 'avatar') {
2726
elem.innerHTML += `<img src="${value}"></img>`
2827
}
29-
else if (key === 'username') {
30-
elem.innerHTML += `<span>${value}</span>`
31-
}
32-
else if (key === 'count') {
28+
else if (key === 'username' || key === 'count') {
3329
elem.innerHTML += `<span>${value}</span>`
3430
}
3531
else {
@@ -40,7 +36,7 @@
4036
}
4137

4238
function main(url) {
43-
const header = document.createElement('header');
39+
const header = document.querySelector('header');
4440
const heading = document.createElement('h1');
4541
heading.innerText = 'HYF Repositories';
4642
header.prepend(heading);
@@ -51,18 +47,19 @@
5147
firstOption.appendChild(firstOptionContent);
5248
selectBox.appendChild(firstOption);
5349
header.appendChild(selectBox);
54-
document.body.prepend(header);
50+
const repoContainer = document.querySelector('.repo-container');
51+
const contributorsContainer = document.querySelector('.contributors-container');
52+
const repoDetails = createAndAppend('ul', repoContainer);
53+
const repoContributions = createAndAppend('ul', contributorsContainer);
5554
fetchJSON(url, (err, repos) => {
56-
const root = document.getElementById('root');
55+
const main = document.querySelector('.main-container');
5756
if (err) {
58-
createAndAppend('div', root, {
57+
createAndAppend('div', main, {
5958
text: err.message,
6059
class: 'alert-error',
6160
});
6261
return;
6362
}
64-
const repoDetails = createAndAppend('ul', root);
65-
const repoContributions = createAndAppend('ul', root);
6663
repos.sort((a, b) => a.name.localeCompare(b.name, 'en', { sensitivity: 'base' }));
6764
repos.forEach(repo => {
6865
const repoOptions = document.createElement("option");
@@ -78,11 +75,11 @@
7875
repoDetails.textContent = '';
7976
repoContributions.textContent = '';
8077
const selectedRepo = selectBox.options[selectBox.selectedIndex].value;
81-
const filteredRepo = repos.filter(a => a.id == selectedRepo);
78+
const filteredRepo = repos.filter(repo => repo.id == selectedRepo);
8279
createAndAppend('li', repoDetails, { Repository: filteredRepo[0].name, Description: filteredRepo[0].description, Forks: filteredRepo[0].forks, Updated: filteredRepo[0].updated_at })
8380
fetchJSON(filteredRepo[0].contributors_url, (err, reposContributors) => {
8481
if (err) {
85-
createAndAppend('div', root, {
82+
createAndAppend('div', main, {
8683
text: err.message,
8784
class: 'alert-error',
8885
});

‎homework/style.css‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -18,16 +18,21 @@ select {
1818
margin-left: 3%;
1919
height: 30px;
2020
}
21-
#root {
21+
.main-container {
2222
display: flex;
2323
flex-direction: row;
2424
justify-content: space-between;
2525
}
26+
.repo-container {
27+
width: 50%;
28+
}
29+
.contributors-container {
30+
width: 50%;
31+
}
2632
ul {
2733
list-style: none;
2834
padding: 0;
2935
margin: 1%;
30-
width: 100%;
3136
}
3237
li {
3338
padding: 1%;
@@ -37,18 +42,18 @@ li {
3742
border-radius: 5px;
3843
box-shadow: 3px 3px 3px grey;
3944
}
40-
ul:last-child > li {
45+
.contributors-container > ul > li {
4146
display: flex;
4247
flex-direction: row;
4348
justify-content: space-between;
4449
align-items: center;
4550
padding: 2% 10%;
4651
}
47-
ul:last-child > li img {
52+
.contributors-container > ul > li img {
4853
width: 10%;
4954
border-radius: 10%;
5055
}
51-
ul:last-child > li span:last-child {
56+
.contributors-container > ul > li span:last-child {
5257
padding: 1% 3%;
5358
background-color: grey;
5459
color: white;
@@ -66,11 +71,11 @@ ul:last-child > li span:last-child {
6671
select {
6772
margin-bottom: 5%;
6873
}
69-
#root {
74+
.main-container {
7075
flex-direction: column;
7176
padding: 2% 10%;
7277
}
73-
ul:last-child > li img {
78+
.contributors-container > ul > li img {
7479
width: 25%;
7580
border-radius: 10%;
7681
}

0 commit comments

Comments
 (0)