HYF-GITHUB

Repositories

Contributors

Picture

Name

Number of contributions

+ + +

+ diff --git a/homework/index.js b/homework/index.js index b12b7b26e..335090591 100644 --- a/homework/index.js +++ b/homework/index.js @@ -39,6 +39,7 @@ //createAndAppend('pre', root, { text: JSON.stringify(data, null, 2) }); const select = createAndAppend('select', root); createAndAppend('option', select, { text: 'Click here to choose a Repository' }); + data.forEach(repo => { const name = repo.name; createAndAppend('option', select, { text: name }); @@ -66,7 +67,7 @@ const contribsUrl = repo.contributors_url; fetchJSON(contribsUrl, (err, contribData) => { contribData.forEach(contributor => { - createAndAppend('p', contribs, { text: ':' }); + createAndAppend('p', contribs, { text: '' }); createAndAppend('img', contribs, { src: contributor.avatar_url, height: 30, class: 'picture' }); createAndAppend('div', contribs, { text: contributor.login, class: 'contributorName' }); createAndAppend('div', contribs, { text: contributor.contributions, class: 'numberContributions' }); diff --git a/homework/style.css b/homework/style.css index 2882cef62..8ad6007cf 100644 --- a/homework/style.css +++ b/homework/style.css @@ -28,11 +28,13 @@ select { display: flex; flex-direction: row; align-items: flex-start; + flex-flow: row nowrap; + margin: 1 rem; } #forRepoBlock { - color: purple; + color: rgb(43, 0, 43); font-size: .9rem; padding: 4px 4px; margin-left: 2px; @@ -44,28 +46,31 @@ select { border-style: bold; border-radius: 0%; padding: 10px; - background:rgb(216, 142, 188); - opacity: 0.8; + background:rgba(230, 178, 210, 0.5); + opacity: 1; box-shadow: 10px 5px 5px grey; } #forContributorsBlock { - color: rgb(112, 13, 13); + color: rgb(48, 0, 20); font-size: .9rem; padding: 4px 4px; margin-left: 2px; - display: flex; - flex-direction: row; + 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:rgb(155, 118, 92); - opacity: 0.8; + background:rgba(231, 185, 152, 0.5); + opacity: 1; box-shadow: 10px 5px 5px grey; } \ No newline at end of file From c135c93747005874cf9e948591acf1e16ea27ec9 Mon Sep 17 00:00:00 2001 From: AaaaT Date: Mon, 26 Aug 2019 22:42:40 +0200 Subject: [PATCH 08/12] Update index.js --- homework/index.js | 84 ++++++++++++++++++++++++++--------------------- 1 file changed, 47 insertions(+), 37 deletions(-) diff --git a/homework/index.js b/homework/index.js index 335090591..ba5041b59 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,17 +36,14 @@ 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) }); + fetchJSON(url) + .then(repositoryData => { const select = createAndAppend('select', root); createAndAppend('option', select, { text: 'Click here to choose a Repository' }); - - data.forEach(repo => { + + repositoryData.forEach(repo => { const name = repo.name; createAndAppend('option', select, { text: name }); }); @@ -49,7 +52,7 @@ const contribs = createAndAppend('div', forContributorsBlock); select.addEventListener('change', evt => { const selectedRepo = evt.target.value; - const repo = data.filter(r => r.name == selectedRepo)[0]; + const repo = repositoryData.filter(r => r.name == selectedRepo)[0]; console.log(repo); repoInfo.innerHTML = ''; contribs.innerHTML = ''; @@ -62,27 +65,34 @@ addInfo('Name: ', repo.name); addInfo('Desciption: ', repo.description); addInfo('Number of forks: ', repo.forks); - addInfo('Updated: ', repo.updated_at); + addInfo('Updated: ', new Date(repo.updated_at)); const contribsUrl = repo.contributors_url; - fetchJSON(contribsUrl, (err, contribData) => { - contribData.forEach(contributor => { - createAndAppend('p', contribs, { text: '' }); - createAndAppend('img', contribs, { src: contributor.avatar_url, height: 30, class: 'picture' }); - createAndAppend('div', contribs, { text: contributor.login, class: 'contributorName' }); - createAndAppend('div', contribs, { text: contributor.contributions, class: 'numberContributions' }); - }); - }); + 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' }); + }) }); - } - }); - } + }) + .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); } - - - From e5a0358a3b054e6f78c819c31e85c8978be63b7b Mon Sep 17 00:00:00 2001 From: AaaaT Date: Mon, 26 Aug 2019 22:43:43 +0200 Subject: [PATCH 09/12] Update index.html --- homework/index.html | 19 +++++-------------- 1 file changed, 5 insertions(+), 14 deletions(-) diff --git a/homework/index.html b/homework/index.html index c4a7769bd..236258e9f 100644 --- a/homework/index.html +++ b/homework/index.html @@ -25,25 +25,16 @@ - +

Repositories

Picture

Name

Number of contributions

- - - -

Contributions

- - - From c6e4d27cf70ac8522407f773884b778bbea1a9b4 Mon Sep 17 00:00:00 2001 From: AaaaT Date: Mon, 26 Aug 2019 22:44:06 +0200 Subject: [PATCH 10/12] Update style.css --- homework/style.css | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/homework/style.css b/homework/style.css index 8ad6007cf..52c11e041 100644 --- a/homework/style.css +++ b/homework/style.css @@ -28,7 +28,6 @@ select { display: flex; flex-direction: row; align-items: flex-start; - flex-flow: row nowrap; margin: 1 rem; } @@ -38,8 +37,6 @@ select { font-size: .9rem; padding: 4px 4px; margin-left: 2px; - - float: center; margin-top: 1rem; width: 60%; @@ -73,4 +70,9 @@ select { opacity: 1; box-shadow: 10px 5px 5px grey; -} \ No newline at end of file +} +span { + display: row; + font-size: .8rem; + margin: 3%; +} From 569d234be1d2f182d6ec27e36707181f843811ec Mon Sep 17 00:00:00 2001 From: AaaaT Date: Fri, 30 Aug 2019 19:52:48 +0200 Subject: [PATCH 11/12] Update index.js --- homework/index.js | 89 +++++++++++++++++++++++++++++------------------ 1 file changed, 55 insertions(+), 34 deletions(-) diff --git a/homework/index.js b/homework/index.js index ba5041b59..fdf831137 100644 --- a/homework/index.js +++ b/homework/index.js @@ -36,63 +36,84 @@ return elem; } + function compare(a, b) { + if (a.nameb.name){ + return 1 + } + return 0; + } function main(url) { fetchJSON(url) .then(repositoryData => { const select = createAndAppend('select', root); - createAndAppend('option', select, { text: 'Click here to choose a Repository' }); + // createAndAppend('option', select, { text: 'Click here to choose a Repository' }); - repositoryData.forEach(repo => { + 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 = repositoryData.filter(r => r.name == selectedRepo)[0]; - 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 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' }); }) } - + + 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); } + + From b192664576646ce46fc23b10b374423d99f2098f Mon Sep 17 00:00:00 2001 From: AaaaT Date: Mon, 9 Sep 2019 22:54:12 +0200 Subject: [PATCH 12/12] Update index.html --- homework/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/homework/index.html b/homework/index.html index 236258e9f..efce87c6f 100644 --- a/homework/index.html +++ b/homework/index.html @@ -19,7 +19,7 @@

- HYF Repositories + Repositories