HYF-GITHUB

Repositories

+ +

Contributions

+ + + + + diff --git a/homework/index.js b/homework/index.js index d3a97645e..fdf831137 100644 --- a/homework/index.js +++ b/homework/index.js @@ -1,21 +1,27 @@ '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) { + return 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(`Network error: ${xhr.status} - ${xhr.statusText}`)); + } + }; + xhr.onerror = () => { + reject(new Error('Network request failed')); + }; + xhr.send(); + }) + } + function createAndAppend(name, parent, options = {}) { const elem = document.createElement(name); parent.appendChild(elem); @@ -30,18 +36,84 @@ return elem; } + function compare(a, b) { + if (a.nameb.name){ + return 1 + } + return 0; + } + function main(url) { - fetchJSON(url, (err, data) => { - const root = document.getElementById('root'); - if (err) { + fetchJSON(url) + .then(repositoryData => { + const select = createAndAppend('select', root); + // createAndAppend('option', select, { text: 'Click here to choose a Repository' }); + + let alphabeticalSorting = repositoryData.sort(compare); + alphabeticalSorting.forEach(repo => { + const name = repo.name; + createAndAppend('option', select, { text: name }); + }); + + const repoInfo = createAndAppend('div', forRepoBlock); + const contribs = createAndAppend('div', forContributorsBlock); + + select.addEventListener('change', evt => { + const selectedRepo = evt.target.value; + const repo = alphabeticalSorting.filter(r => r.name == selectedRepo)[0]; + getRepoData(repo, repoInfo, contribs); + }); + + let firstRepo = alphabeticalSorting[0] + getRepoData(firstRepo, repoInfo, contribs); + }) + .catch((err) => { + const root = document.getElementById('root'); createAndAppend('div', root, { text: err.message, class: 'alert-error' }); - } else { - createAndAppend('pre', root, { text: JSON.stringify(data, null, 2) }); - } - }); + }) + } + + function getRepoData(repo, repoInfo, contribs) { + + // console.log(repo); + repoInfo.innerHTML = ''; + contribs.innerHTML = ''; + + const addInfo = (label, value) => { + const container = createAndAppend('div', repoInfo); + createAndAppend('span', container, { text: label }); + createAndAppend('span', container, { text: value }); + }; + addInfo('Name: ', repo.name); + addInfo('Desciption: ', repo.description); + addInfo('Number of forks: ', repo.forks); + addInfo('Updated: ', new Date(repo.updated_at)); + + const contribsUrl = repo.contributors_url; + + fetchJSON(contribsUrl) + .then((contribData) => { + contribData.forEach(contributor => { + // createAndAppend('p', contribs, { text: 'hej'}); + createAndAppend('img', contribs, { src: contributor.avatar_url, height: 40, class: 'picture' }); + createAndAppend('span', contribs, { text: contributor.login, class: 'contributorName' }); + createAndAppend('span', contribs, { text: contributor.contributions, class: 'numberContributions'}); + createAndAppend('div', contribs, { text: '\n'}); + }); + }) + .catch((err) => { + const root = document.getElementById('root'); + createAndAppend('div', root, { text: err.message, class: 'alert-error' }); + }) + } const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; window.onload = () => main(HYF_REPOS_URL); } + + diff --git a/homework/style.css b/homework/style.css index a8985a8a5..52c11e041 100644 --- a/homework/style.css +++ b/homework/style.css @@ -1,3 +1,78 @@ +header { + background-color: rgb(116, 56, 13); + color: white; + padding: 1rem; +} + +body { + background-color:rgb(197, 197, 197); + color: black; + font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; + font-size: 1rem; + padding-right: 1px; +} + .alert-error { color: red; -} \ No newline at end of file +} + + +select { + font-size: .9rem; + padding: 4px 25px; + margin-left: 10px; + border-radius: 20px; +} + +#container { + display: flex; + flex-direction: row; + align-items: flex-start; + + margin: 1 rem; +} + +#forRepoBlock { + color: rgb(43, 0, 43); + font-size: .9rem; + padding: 4px 4px; + margin-left: 2px; + margin-top: 1rem; + width: 60%; + + border-style: bold; + border-radius: 0%; + padding: 10px; + background:rgba(230, 178, 210, 0.5); + opacity: 1; + + box-shadow: 10px 5px 5px grey; +} +#forContributorsBlock { + color: rgb(48, 0, 20); + font-size: .9rem; + padding: 4px 4px; + margin-left: 2px; + + display: grid; + grid-template-columns: 33.3333% 33.3333% 33.3333%; + grid-template-rows: auto; + + + margin: 1rem; + width: 40%; + + + border-style: bold; + border-radius: 0%; + padding: 10px; + background:rgba(231, 185, 152, 0.5); + opacity: 1; + + box-shadow: 10px 5px 5px grey; +} +span { + display: row; + font-size: .8rem; + margin: 3%; +}