Skip to content

JS3-Week2-Homework #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
haha1906 wants to merge 5 commits into
base: week1
Choose a base branch
from
Open

JS3-Week2-Homework #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
69bc51c
JS3-Week2-Homework
haha1906 Sep 24, 2019
0e92d37
JS3-Week2-Homework
haha1906 Sep 24, 2019
d2a83c9
Week2 Homework promise added
haha1906 Sep 25, 2019
f523f30
mistakes with promise errors, kebab-cases, variables names are correc…
haha1906 Sep 26, 2019
5fcd491
Option values aren't added each time, anymore.
haha1906 Sep 28, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
209 changes: 143 additions & 66 deletions homework/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,81 +1,158 @@
'use strict';

function fetchJSON(url, cb) {
const xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.responseType = 'json';
xhr.onload = () => {
if (xhr.status >= 200 && xhr.status <= 299) {
cb(null, xhr.response);
} else {
cb(new Error(`Network error: ${xhr.status} - ${xhr.statusText}`));
}
};
xhr.onerror = () => cb(new Error('Network request failed'));
xhr.send();
}

function createAndAppend(name, parent, options = {}) {
const elem = document.createElement(name);
parent.appendChild(elem);
Object.entries(options).forEach(([key, value]) => {
if (key === 'text') {
elem.textContent = value;
} else {
elem.setAttribute(key, value);
}
});
return elem;
}
{
function fetchJSON(url) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.responseType = 'json';
xhr.onload = () => {
if (xhr.status >= 200 && xhr.status <= 299) {
resolve(xhr.response);
} else {
reject(new Error(`Network error: ${xhr.status} - ${xhr.statusText}`));
}
};
xhr.onerror = () => reject(new Error('Network request failed'));
xhr.send();
});
}

function addRow(property, key, parent, link) {
const tr = createAndAppend('tr', parent);
createAndAppend('th', tr, {
text: `${property} :`,
});
function createAndAppend(name, parent, options = {}) {
const elem = document.createElement(name);
parent.appendChild(elem);
Object.entries(options).forEach(([key, value]) => {
if (key === 'text') {
elem.textContent = value;
} else {
elem.setAttribute(key, value);
}
});
return elem;
}

if (link) {
const td = createAndAppend('td', tr);
createAndAppend('a', td, {
href: link,
function addContributor(contributor, parent) {
const tr = createAndAppend('tr', parent);
const imageColumn = createAndAppend('th', tr);
createAndAppend('img', imageColumn, {
src: contributor.avatar_url,
class: 'contributor-img',
});
const name = createAndAppend('td', tr);
createAndAppend('a', name, {
href: contributor.html_url,
target: '_blank',
text: key,
text: contributor.login,
});
const contributeNamePlace = createAndAppend('td', tr);
createAndAppend('span', contributeNamePlace, {
text: contributor.contributions,
class: 'contribute-number',
});
}

function addRow(property, key, parent) {
const tr = createAndAppend('tr', parent);
createAndAppend('th', tr, {
text: `${property} :`,
});
} else {
createAndAppend('td', tr, { text: key });
return tr;
}
}

function renderRepoDetails(repo, div) {
const table = createAndAppend('table', div, {
class: 'container',
});
function renderContributorDetails(contributors, contributorsContainer) {
const table = createAndAppend('table', contributorsContainer);
contributors.forEach(contributor => {
addContributor(contributor, table);
});
}

addRow('Repository', repo.name, table, repo.html_url);
addRow('Description', repo.description, table);
addRow('Forks', repo.forks, table);
addRow('Updated', repo.updated_at, table);
}
function renderRepoDetails(repo, div) {
const table = createAndAppend('table', div);
const firstRow = addRow('Repository', '', table);
createAndAppend('a', firstRow.lastChild, {
href: repo.html_url,
target: '_blank',
text: repo.name,
});
addRow('Description', repo.description, table);
addRow('Forks', repo.forks, table);
addRow('Updated', repo.updated_at, table);
}
function renderError(error, contributorsContainer) {
createAndAppend('div', contributorsContainer, {
text: error.message,
class: 'alert-error',
});
}

function main(url) {
fetchJSON(url, (err, repos) => {
const root = document.getElementById('root');
if (err) {
createAndAppend('div', root, {
text: err.message,
class: 'alert-error',
});
return;
function fetchContributors(url, contributorsContainer) {
const promiseContributor = fetchJSON(url);
promiseContributor
.then(contributors => {
renderContributorDetails(contributors, contributorsContainer);
})
.catch(error => renderError(error, contributorsContainer));
}

function deleteContainers() {
const selectButton = document.getElementById('selectButton');
let firstOption = selectButton.firstChild;
while (firstOption) {
selectButton.removeChild(firstOption);
firstOption = selectButton.firstChild;
}
createAndAppend('header', root, { text: 'HYF Repositories' });
const div = createAndAppend('div', root);
// eslint-disable-next-line func-names
document.getElementById('flex-container').remove();
}

function makeFlexContainer(root, repos, selectButton) {
const flexContainer = createAndAppend('section', root, {
id: 'flex-container',
});
const repoContainer = createAndAppend('section', flexContainer, {
class: 'container',
});
const contributorsContainer = createAndAppend('section', flexContainer, {
class: 'container',
});
createAndAppend('h5', contributorsContainer, { text: 'Contributions' });

repos
.sort((a, b) => a.name.localeCompare(b.name))
.forEach(repo => renderRepoDetails(repo, div));
});
}
.forEach((repo, index) => {
createAndAppend('option', selectButton, {
text: repo.name,
value: index,
});
});
renderRepoDetails(repos[selectButton.value], repoContainer);
fetchContributors(
repos[selectButton.value].contributors_url,
contributorsContainer,
);
}

const HYF_REPOS_URL =
'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
window.onload = () => main(HYF_REPOS_URL);
function main(url) {
const root = document.getElementById('root');
const header = createAndAppend('header', root, {
text: 'HYF Repositories',
});
const promise = fetchJSON(url);
promise
.then(repos => {
const selectButton = createAndAppend('select', header, {
id: 'selectButton',
});
selectButton.addEventListener('change', () => {
deleteContainers();
makeFlexContainer(root, repos, selectButton);
});
makeFlexContainer(root, repos, selectButton);
})
.catch(error => renderError(error, root));
}

const HYF_REPOS_URL =
'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
window.onload = () => main(HYF_REPOS_URL);
}
43 changes: 34 additions & 9 deletions homework/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,36 +8,48 @@ body {
}

header {
margin: 3px;
margin: 4px;
padding: 10px;
padding-left: 20px;
background: rgb(25, 25, 25);
border: black solid 3px;
border-radius: 10px;
max-width: 700px;
max-width: 1100px;
position: relative;
margin: auto;
}
select {
margin: 10px;
}

#flex-container {
display: flex;
flex-wrap: wrap;
border: solid black 2px;
max-width: 1100px;
position: relative;
margin: auto;
align-items: flex-start;
}

.container {
margin-left: 4px;
padding: 8px;
padding-left: 12px;
margin: 2px;
padding: 6px;
padding-left: 8px;
background: rgb(40, 40, 40);
border-left: rgb(60, 60, 60) solid 2px;
border-top: rgb(100, 100, 100) solid 2px;
border-right: rgb(20, 20, 20) solid 3px;
border-bottom: black solid 3px;
border-radius: 5px;
max-width: 700px;
align-content: center;
position: relative;
margin: auto;
min-width: 300px;
flex: 1;
vertical-align: top;
}
table {
width: 100%;
margin-left: 6px;
padding-left: 10px;
}

tr:hover {
Expand All @@ -59,3 +71,16 @@ a {
a:visited {
color: lightgreen;
}
.contributor-img {
width: 60px;
}
.contribute-number {
background: rgb(50, 50, 50);
border-left: rgb(60, 60, 60) solid 2px;
border-top: rgb(100, 100, 100) solid 2px;
border-right: rgb(20, 20, 20) solid 3px;
border-bottom: black solid 3px;
border-radius: 5px;
position: relative;
text-align: right;
}