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..be80119dc 100644 --- a/homework/index.js +++ b/homework/index.js @@ -1,20 +1,24 @@ 'use strict'; { - function fetchJSON(url, cb) { - const xhr = new XMLHttpRequest(); - xhr.open('GET', url); - xhr.responseType = 'json'; - xhr.onload = () => { - if (xhr.status < 400) { - 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 fetchJSON(url) { + const p = new Promise((resolve, reject) => { + const xhr = new XMLHttpRequest(); + xhr.open('GET', url); + xhr.responseType = 'json'; + xhr.onload = () => { + if (xhr.status < 400) { + resolve(xhr.response); + } else { + reject(new Error(xhr.statusText)); + } + }; + xhr.onerror = () => reject(new Error('Network Request failed')); + console.log(); + xhr.send(); + }); } + const REPOS_URL = 'https://api.github.com/orgs/foocoding/repos?per_page=100'; function createAndAppend(name, parent, options = {}) { const elem = document.createElement(name); @@ -30,18 +34,106 @@ return elem; } - 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) }); - } + function fetchContributors(contributors, contribContainer) { + createAndAppend('p', contribContainer, { text: 'Contributors', id: 'contributors' }); + contributors.forEach(contributor => { + const contribDiv = createAndAppend('div', contribContainer, { class: 'contrib-info' }); + createAndAppend('img', contribDiv, { + src: contributor.avatar_url, + text: contributor.login, + height: 150, + width: 150, + class: 'image', + }); + createAndAppend('a', contribDiv, { + text: contributor.login, + href: contributor.html_url, + target: 'blank', + class: 'contrib-link', + }); + createAndAppend('p', contribDiv, { + text: contributor.contributions, + class: 'contributor-badge', + }); }); } + function fetchAndAddContribData(repoInfo, repoContainer, contribContainer, root) { + repoContainer.innerHTML = repo.name; + contribContainer.innerHTML = repo.name; + + createAndAppend('span', repoContainer, { text: 'Repository', class: 'repository' }); + createAndAppend('a', repoContainer, { + text: '${repoInfo.name}', + href: repoInfo.html_url, + target: '_blank', + class: 'repo-link', + }); + + createAndAppend('p', repoInfo, { + text: 'Description: ${repoInfo.description}', + class: 'repo-child', + }); + + createAndAppend('p', repoInfo, { + text: 'Fork: ${repoInfo.forks}', + class: 'repo-child', + }); + + createAndAppend('p', repoInfo, { + text: 'Updated: ${Updated: ${updatedAt.toLocaleString()}', + class: 'repo-child', + }); + + fetchJSON(repoInfo.contributors_url) + .then(contributors => { + addContributors(contributors, contribContainer); + }) + .catch(err => { + createAndAppend('div', root, { text: err.message, class: 'alert-error' }); + }); + + + + + + function populateSelect(root, repos) { + const header = createAndAppend('header', root, { class: 'header' }); + createAndAppend('p', header, { text: 'HYF Repositories', id: 'p' }); + const select = createAndAppend('select', header, { id: 'select' }); + + repos.sort((a, b) => a.name.localeCompare(b.name)); + + repos.forEach((repo, index) => { + createAndAppend('option', select, { text: repo.name, value: index }); + }); + //console.log(populateSelect); + + const mainContainer = createAndAppend('div', root, { id: 'main' }); + const repoContainer = createAndAppend('div', mainContainer, { id: 'repo-container' }); + const contribContainer = createAndAppend('div', mainContainer, { + id: 'contributor-container', + }); + + + + } + } + + + 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; + createAndAppend('option', select, { text: name }); + }); + } 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; +}