diff --git a/homework/index.html b/homework/index.html index cc4b45bcb..858ec2287 100644 --- a/homework/index.html +++ b/homework/index.html @@ -18,7 +18,9 @@ -

diff --git a/homework/index.js b/homework/index.js index d8a04f271..e4b50acb5 100644 --- a/homework/index.js +++ b/homework/index.js @@ -33,14 +33,68 @@ function main(url) { fetchJSON(url, (err, data) => { const root = document.getElementById('root'); + if (err) { createAndAppend('div', root, { text: err.message, class: 'alert-error' }); } else { - createAndAppend('pre', root, { text: JSON.stringify(data, null, 2) }); + const header = createAndAppend('header', root, { class: 'header' }); + const h1 = createAndAppend('h1', header, { text: 'FooCoding Repos', class: 'h1' }); + + const select = createAndAppend('select', root, { class: 'select' }); + createAndAppend('option', select, { text: 'Choose your favorite repo below:' }); + + data.forEach(repo => { + const name = repo.name; + data.sort((a, b) => a.name.localeCompare(b.name)); + createAndAppend('option', select, { text: name }); + console.log(name); + }); + + const repoInfo = createAndAppend('div', root, { class: 'left-div' }); + const contribs = createAndAppend('div', root, { class: 'right-div' }); + + select.addEventListener('change', evt => { + const selectedRepo = evt.target.value; + const repo = data.filter(r => r.name == selectedRepo)[0]; + console.log(repo.name); + repoInfo.innerHTML = repo.name; + contribs.innerHTML = repo.name; + + const addInfo = (label, value) => { + const container = createAndAppend('div', repoInfo); + createAndAppend('span', container, { text: label }); + createAndAppend('span', container, { text: value }); + }; + + addInfo('Name: ', repo.name); + addInfo('Description: ', repo.description); + addInfo('Number of forks: ', repo.forks); + addInfo('Updated: ', repo.updated_at); + + const contribsUrl = repo.contributors_url; + fetchJSON(contribsUrl, (err, contribData) => { + if (err) { + createAndAppend('div', root, { text: err.message, class: 'alert-error' }); + } else { + } + contribData.forEach(contributor => { + createAndAppend('div', contribs, { text: contributor.login }); + createAndAppend('a', contribs, { + text: contributor.login, + href: contributor.html_url, + }); + createAndAppend('img', contribs, { + src: contributor.avatar_url, + height: 150, + width: 150, + id: 'img', + }); + }); + }); + }); } }); } - const REPOS_URL = 'https://api.github.com/orgs/foocoding/repos?per_page=100'; window.onload = () => main(REPOS_URL); diff --git a/homework/style.css b/homework/style.css index a8985a8a5..d0bd96673 100644 --- a/homework/style.css +++ b/homework/style.css @@ -1,3 +1,64 @@ +#root { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; +} +@media screen and (max-width: 768px) { + .h1.h1 { + width: 100%; + } + .right-div { + width: 100%; + } + .left-div { + width: 100%; + } +} .alert-error { - color: red; -} \ No newline at end of file + color: red; +} +.h1 { + text-align: center; +} +.container { + display: flex; + flex-direction: row; + align-items: flex-start; + margin: 10px; +} + +.right-div { + color: green; + display: flex; + flex-direction: row; + justify-content: space-between; + flex-wrap: wrap; + margin: 10px; + flex-grow: 1; + height: 200px; + width: 200px; +} + +.left-div { + color: brown; + display: flex; + flex-wrap: wrap; + flex-direction: column; + flex-grow: 1; + + align-items: right; + margin: 10px; +} +header { + width: 800px; + height: 70px; + background-color: purple; + text-emphasis-color: white; + text-align: left; +} +.info-container { + text-align: left; + width: 40; + height: 30; +}