From 029a974c0f8d2d4f47b11cdb4fcf78956a758714 Mon Sep 17 00:00:00 2001 From: Elia Date: Tue, 6 Aug 2019 10:43:33 +0200 Subject: [PATCH 01/21] Created branch --- Week2/lecture.js | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 Week2/lecture.js diff --git a/Week2/lecture.js b/Week2/lecture.js new file mode 100644 index 000000000..b31d48ff1 --- /dev/null +++ b/Week2/lecture.js @@ -0,0 +1,5 @@ +//promises.them and catch +//build small app that shows ransom dogs and cats +// try and catch + +//event loop \ No newline at end of file From 370485e67c9943f73c5499e20d951146f02776a1 Mon Sep 17 00:00:00 2001 From: Elia Date: Sat, 10 Aug 2019 14:06:25 +0200 Subject: [PATCH 02/21] some JS --- homework/index.html | 8 ++++++++ homework/index.js | 21 ++++++++++++++++++--- homework/style.css | 10 ++++++++++ 3 files changed, 36 insertions(+), 3 deletions(-) diff --git a/homework/index.html b/homework/index.html index 9c8f80c1a..ac7bf2f96 100644 --- a/homework/index.html +++ b/homework/index.html @@ -16,6 +16,14 @@ +

Hack your future Reositories

Pick a Repository

+ +

diff --git a/homework/index.js b/homework/index.js index d150b6609..d143427d9 100644 --- a/homework/index.js +++ b/homework/index.js @@ -33,14 +33,29 @@ function main(url) { fetchJSON(url, (err, repositories) => { const root = document.getElementById('root'); + console.log(err, repositories) if (err) { - createAndAppend('div', root, { text: err.message, class: 'alert-error' }); + //createAndAppend('div', root, { text: err.message, class: 'alert-error' }); + const div = document.createElement('div') + div.textContent = err.message + div.setAttribute('class', 'alert-error') + //div.classList = "alert-error" + root.appendChild(div) return; } - createAndAppend('pre', root, { text: JSON.stringify(repositories, null, 2) }); + //createAndAppend('pre', root, { text: JSON.stringify(repositories, null, 2) }); + const repoList = createAndAppend('ul', root, { class: "repo-list" }); + repositories.forEach(repo => { + //console.log(repo.name) + const repoItem = createAndAppend('li', repoList, { text: repo.name }) + repoItem.addEventListener('click', () => { + console.log("clicked", repo.name) + createAndAppend('div', root, { text: "here" }) + }) + }) }); } - const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; + const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=30'; window.onload = () => main(HYF_REPOS_URL); } diff --git a/homework/style.css b/homework/style.css index a8985a8a5..2540bfb59 100644 --- a/homework/style.css +++ b/homework/style.css @@ -1,3 +1,13 @@ .alert-error { color: red; + ba +} + +body { + background-color: rgba(142, 93, 93, 1); + +} +.h1 { + text-align: center; + } \ No newline at end of file From 8dae6a67ed48de075f8dff8de854d08ef5e7a2c8 Mon Sep 17 00:00:00 2001 From: Elia Date: Sat, 10 Aug 2019 15:05:59 +0200 Subject: [PATCH 03/21] Week 01 --- homework/index.html | 15 +++++++++------ homework/index.js | 12 ++++++++++++ homework/style.css | 3 ++- 3 files changed, 23 insertions(+), 7 deletions(-) diff --git a/homework/index.html b/homework/index.html index ac7bf2f96..0e58c97f9 100644 --- a/homework/index.html +++ b/homework/index.html @@ -17,13 +17,16 @@

Hack your future Reositories

Pick a Repository

- + + + + -

+ +

diff --git a/homework/index.js b/homework/index.js index d143427d9..7d8eef707 100644 --- a/homework/index.js +++ b/homework/index.js @@ -59,3 +59,15 @@ const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=30'; window.onload = () => main(HYF_REPOS_URL); } + +/*fetch('https://api.github.com/orgs/HackYourFuture/repos?per_page=100') + .then(result => { + console.log(result); + return result.json(); + }) + .then(data => { + //console.log(data); + const angular = data[0]; + console.log(angular); + }) + .catch(error => console.log(error));*/ \ No newline at end of file diff --git a/homework/style.css b/homework/style.css index 2540bfb59..11b86ffce 100644 --- a/homework/style.css +++ b/homework/style.css @@ -9,5 +9,6 @@ body { } .h1 { text-align: center; + background-color: antiquewhite; -} \ No newline at end of file +} From 8a2a6bc8d0ffd09c3241db59b1fcabf0a2ff0f23 Mon Sep 17 00:00:00 2001 From: Elia Date: Thu, 15 Aug 2019 15:35:22 +0200 Subject: [PATCH 04/21] week01 --- homework/index.html | 4 ++-- homework/index.js | 12 ++++++++---- homework/style.css | 3 +++ 3 files changed, 13 insertions(+), 6 deletions(-) diff --git a/homework/index.html b/homework/index.html index 0e58c97f9..acbbd4548 100644 --- a/homework/index.html +++ b/homework/index.html @@ -17,7 +17,7 @@

Hack your future Reositories

diff --git a/homework/index.js b/homework/index.js index 7d8eef707..1fab7785c 100644 --- a/homework/index.js +++ b/homework/index.js @@ -29,7 +29,7 @@ }); return elem; } - + //get repos function main(url) { fetchJSON(url, (err, repositories) => { const root = document.getElementById('root'); @@ -44,11 +44,12 @@ return; } //createAndAppend('pre', root, { text: JSON.stringify(repositories, null, 2) }); - const repoList = createAndAppend('ul', root, { class: "repo-list" }); + const repoList = createAndAppend('div', root, { class: "repo-list" }); + const select = createAndAppend('select', repoList, { text: 'choose the repo' }) repositories.forEach(repo => { //console.log(repo.name) - const repoItem = createAndAppend('li', repoList, { text: repo.name }) - repoItem.addEventListener('click', () => { + createAndAppend('option', select, { text: repo.name }) + select.addEventListener('change', () => { console.log("clicked", repo.name) createAndAppend('div', root, { text: "here" }) }) @@ -56,6 +57,9 @@ }); } + //get contributors + + const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=30'; window.onload = () => main(HYF_REPOS_URL); } diff --git a/homework/style.css b/homework/style.css index 11b86ffce..ebcd58053 100644 --- a/homework/style.css +++ b/homework/style.css @@ -12,3 +12,6 @@ body { background-color: antiquewhite; } +.form { +size: 30px; +} \ No newline at end of file From f006de30fb116f18bc2f0784f789cfa769695103 Mon Sep 17 00:00:00 2001 From: Elia Date: Fri, 16 Aug 2019 17:52:56 +0200 Subject: [PATCH 05/21] week- 1 --- homework/index.js | 80 ++++++++++++++++++++++++++-------------------- homework/style.css | 29 +++++++++++++++-- 2 files changed, 71 insertions(+), 38 deletions(-) diff --git a/homework/index.js b/homework/index.js index 1fab7785c..1940261d0 100644 --- a/homework/index.js +++ b/homework/index.js @@ -31,47 +31,57 @@ } //get repos function main(url) { - fetchJSON(url, (err, repositories) => { + fetchJSON(url, (err, data) => { const root = document.getElementById('root'); - console.log(err, repositories) if (err) { - //createAndAppend('div', root, { text: err.message, class: 'alert-error' }); - const div = document.createElement('div') - div.textContent = err.message - div.setAttribute('class', 'alert-error') - //div.classList = "alert-error" - root.appendChild(div) - return; + createAndAppend('div', root, { text: err.message, class: 'alert-error' }); + } else { + //createAndAppend('pre', root, { text: JSON.stringify(data, null, 2) }); + const select = createAndAppend('select', root, { class: 'select' }); + createAndAppend('option', select, { text: 'Choose your favorite repo' }); + data.forEach(repo => { + const name = repo.name; + createAndAppend('option', select, { text: name }); + }); + + const repoInfo = createAndAppend('div', root); + const contribs = createAndAppend('div', root); + select.addEventListener('change', evt => { + const selectedRepo = evt.target.value; + const repo = data.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: ', repo.updated_at); + //or instead of using the addInfo function we can use these lines: + // createAndAppend('div', repoInfo, { text: `Descriptions: ${repo.description}` }); + // createAndAppend('div', repoInfo, { text: `Number of Forks: ${repo.forks}` }); + // createAndAppend('div', repoInfo, { text: `Updated at:${repo.updated_at}` }); + const contribsUrl = repo.contributors_url; + fetchJSON(contribsUrl, (err, contribData) => { + contribData.forEach(contributor => { + + createAndAppend('div', contribs, { text: contributor.login, class: 'contributor' }) + createAndAppend('img', contribs, { src: contributor.avatar_url, height: 100, widtth: 100, id: 'img' }) + }); + }); + }); } - //createAndAppend('pre', root, { text: JSON.stringify(repositories, null, 2) }); - const repoList = createAndAppend('div', root, { class: "repo-list" }); - const select = createAndAppend('select', repoList, { text: 'choose the repo' }) - repositories.forEach(repo => { - //console.log(repo.name) - createAndAppend('option', select, { text: repo.name }) - select.addEventListener('change', () => { - console.log("clicked", repo.name) - createAndAppend('div', root, { text: "here" }) - }) - }) }); } - //get contributors + const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; - - const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=30'; window.onload = () => main(HYF_REPOS_URL); } - -/*fetch('https://api.github.com/orgs/HackYourFuture/repos?per_page=100') - .then(result => { - console.log(result); - return result.json(); - }) - .then(data => { - //console.log(data); - const angular = data[0]; - console.log(angular); - }) - .catch(error => console.log(error));*/ \ No newline at end of file diff --git a/homework/style.css b/homework/style.css index ebcd58053..d56f3e07a 100644 --- a/homework/style.css +++ b/homework/style.css @@ -5,13 +5,36 @@ body { background-color: rgba(142, 93, 93, 1); - +} +#root { + display: flex; + justify-content: center; } .h1 { text-align: center; background-color: antiquewhite; } -.form { -size: 30px; + +.select { + display: block; + font-size: 16px; + font-family: sans-serif; + font-weight: 700; + color: #444; + line-height: 1.3; + padding: .6em 1.4em .5em .8em; + width: 20%; + max-width: 100%; + box-sizing: border-box; + margin: 0; + border: 1px solid #aaa; + box-shadow: 0 1px 0 1px rgba(0,0,0,.04); + border-radius: .5em; + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; + background-color: #fff; + text-align: center; + } \ No newline at end of file From 45fee40261c2693d108ed2f27e67023daf518808 Mon Sep 17 00:00:00 2001 From: Elia Date: Sun, 18 Aug 2019 21:54:24 +0200 Subject: [PATCH 06/21] media Query added! --- homework/style.css | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/homework/style.css b/homework/style.css index d56f3e07a..013d520c4 100644 --- a/homework/style.css +++ b/homework/style.css @@ -37,4 +37,30 @@ body { background-color: #fff; text-align: center; +} + +@media (min-width: 1281px) { + +} + +@media (min-width: 1025px) and (max-width: 1280px) { + +} + +@media (min-width: 768px) and (max-width: 1024px) { + +} + + +@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) { + +} + + +@media (min-width: 481px) and (max-width: 767px) { +} + + +@media (min-width: 320px) and (max-width: 480px) { + } \ No newline at end of file From d8cd338e286fab149862933c985d47caac1f8e81 Mon Sep 17 00:00:00 2001 From: Elia Date: Sun, 18 Aug 2019 23:21:29 +0200 Subject: [PATCH 07/21] First commit...no results! --- homework/index.js | 155 ++++++++++++++++++++++++++++++---------------- 1 file changed, 103 insertions(+), 52 deletions(-) diff --git a/homework/index.js b/homework/index.js index 1940261d0..03ed7c9fb 100644 --- a/homework/index.js +++ b/homework/index.js @@ -31,57 +31,108 @@ } //get repos 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 select = createAndAppend('select', root, { class: 'select' }); - createAndAppend('option', select, { text: 'Choose your favorite repo' }); - data.forEach(repo => { - const name = repo.name; - createAndAppend('option', select, { text: name }); - }); - - const repoInfo = createAndAppend('div', root); - const contribs = createAndAppend('div', root); - select.addEventListener('change', evt => { - const selectedRepo = evt.target.value; - const repo = data.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: ', repo.updated_at); - //or instead of using the addInfo function we can use these lines: - // createAndAppend('div', repoInfo, { text: `Descriptions: ${repo.description}` }); - // createAndAppend('div', repoInfo, { text: `Number of Forks: ${repo.forks}` }); - // createAndAppend('div', repoInfo, { text: `Updated at:${repo.updated_at}` }); - const contribsUrl = repo.contributors_url; - fetchJSON(contribsUrl, (err, contribData) => { - contribData.forEach(contributor => { - - createAndAppend('div', contribs, { text: contributor.login, class: 'contributor' }) - createAndAppend('img', contribs, { src: contributor.avatar_url, height: 100, widtth: 100, id: 'img' }) - }); - }); - }); - } - }); - } + return new Promise((data, err) => { + let promise = fetch(url) + .then(data => data.json()) + .then(json => { + const select = createAndAppend('select', root, { class: 'select' }); + createAndAppend('option', select, { text: 'Choose your favorite repo' }); + data.forEach(repo => { + const name = repo.name; + createAndAppend('option', select, { text: name }); + + const repoInfo = createAndAppend('div', root); + const contribs = createAndAppend('div', root); + select.addEventListener('change', evt => { + const selectedRepo = evt.target.value; + const repo = data.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: ', repo.updated_at) + const contribsUrl = repo.contributors_url; + fetchJSON(contribsUrl, (err, contribData) => { + contribData.forEach(contributor => { + + createAndAppend('div', contribs, { text: contributor.login, class: 'contributor' }) + createAndAppend('img', contribs, { src: contributor.avatar_url, height: 100, widtth: 100, id: 'img' }) + }) + }) + + + .catch(err => { + 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); -} + + // 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 select = createAndAppend('select', root, { class: 'select' }); + // createAndAppend('option', select, { text: 'Choose your favorite repo' }); + // data.forEach(repo => { + // const name = repo.name; + // createAndAppend('option', select, { text: name }); + // }); + + // const repoInfo = createAndAppend('div', root); + // const contribs = createAndAppend('div', root); + // select.addEventListener('change', evt => { + // const selectedRepo = evt.target.value; + // const repo = data.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: ', repo.updated_at); + // //or instead of using the addInfo function we can use these lines: + // // createAndAppend('div', repoInfo, { text: `Descriptions: ${repo.description}` }); + // // createAndAppend('div', repoInfo, { text: `Number of Forks: ${repo.forks}` }); + // // createAndAppend('div', repoInfo, { text: `Updated at:${repo.updated_at}` }); + // const contribsUrl = repo.contributors_url; + // fetchJSON(contribsUrl, (err, contribData) => { + // contribData.forEach(contributor => { + + // createAndAppend('div', contribs, { text: contributor.login, class: 'contributor' }) + // createAndAppend('img', contribs, { src: contributor.avatar_url, height: 100, widtth: 100, id: 'img' }) + // }); + // }); + // }); + // } + // }); + }) + + const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; + + window.onload = () => main(HYF_REPOS_URL); + + }) + }) + } +} \ No newline at end of file From a263bffc45cee85ef89ff6a8ed87324b4a66bcb4 Mon Sep 17 00:00:00 2001 From: Elia Date: Tue, 20 Aug 2019 15:26:40 +0200 Subject: [PATCH 08/21] Week- 1 --- homework/index.html | 11 -------- homework/index.js | 35 ++++++++++++++++--------- homework/style.css | 64 +++++++++++++++++++++++++++++---------------- 3 files changed, 63 insertions(+), 47 deletions(-) diff --git a/homework/index.html b/homework/index.html index acbbd4548..9c8f80c1a 100644 --- a/homework/index.html +++ b/homework/index.html @@ -16,17 +16,6 @@ -

Hack your future Reositories

- -

diff --git a/homework/index.js b/homework/index.js index 1940261d0..568d1b4c7 100644 --- a/homework/index.js +++ b/homework/index.js @@ -37,16 +37,18 @@ createAndAppend('div', root, { text: err.message, class: 'alert-error' }); } else { //createAndAppend('pre', root, { text: JSON.stringify(data, null, 2) }); - const select = createAndAppend('select', root, { class: 'select' }); + const header = createAndAppend('header', root, { class: 'header' }); + const h1 = createAndAppend('h1', header, { text: 'FooCoding Repos', class: 'h1' }); + const select = createAndAppend('select', header, { class: 'select' }); createAndAppend('option', select, { text: 'Choose your favorite repo' }); data.forEach(repo => { const name = repo.name; createAndAppend('option', select, { text: name }); }); - - const repoInfo = createAndAppend('div', root); - const contribs = createAndAppend('div', root); - select.addEventListener('change', evt => { + const container = createAndAppend('div', root, { class: 'container' }); + const repoInfo = createAndAppend('div', container, { class: 'left-div' }); + const contribs = createAndAppend('div', container, { class: 'right-div' }); + select.onchange = evt => { const selectedRepo = evt.target.value; const repo = data.filter(r => r.name == selectedRepo)[0]; console.log(repo); @@ -56,9 +58,9 @@ const addInfo = (label, value) => { - const container = createAndAppend('div', repoInfo); - createAndAppend('span', container, { text: label }); - createAndAppend('span', container, { text: value }); + const repoContainer = createAndAppend('div', repoInfo); + createAndAppend('span', repoContainer, { text: label }); + createAndAppend('span', repoContainer, { text: value }); }; addInfo('Name: ', repo.name); addInfo('Desciption: ', repo.description); @@ -69,14 +71,21 @@ // createAndAppend('div', repoInfo, { text: `Number of Forks: ${repo.forks}` }); // createAndAppend('div', repoInfo, { text: `Updated at:${repo.updated_at}` }); const contribsUrl = repo.contributors_url; - fetchJSON(contribsUrl, (err, contribData) => { - contribData.forEach(contributor => { + fetchJSON(contribsUrl, (err, contributors) => { + contributors.forEach(contributor => { + + const contribNames = createAndAppend('a', contribs, { text: contributor.login, class: 'contributor' }) + contribNames.href = contributor.html_url; + contribNames.onclick = () => window.open(contributor.html_url) + - createAndAppend('div', contribs, { text: contributor.login, class: 'contributor' }) - createAndAppend('img', contribs, { src: contributor.avatar_url, height: 100, widtth: 100, id: 'img' }) + + + createAndAppend('div', contribs, { text: contributor.contributions, class: 'contributions' }) + createAndAppend('img', contribs, { src: contributor.avatar_url, height: 100, width: 100, id: 'img' }) }); }); - }); + }; } }); } diff --git a/homework/style.css b/homework/style.css index 013d520c4..7c6750b80 100644 --- a/homework/style.css +++ b/homework/style.css @@ -8,16 +8,41 @@ body { } #root { display: flex; + flex-direction: column; + align-items: flex-start; justify-content: center; } +.header { + background-color: #444; + width: 100%; +} .h1 { text-align: center; - background-color: antiquewhite; } +.container { + display: flex; + flex-direction: row; + align-items: flex-start; + margin: 1 rem; +} +.left-div { + padding: 16px; + margin-right: 16px; + background-color: beige; + flex-direction: column; + align-items: flex-start; +} + + +.right-div { + flex: column; + background-color: beige; +} .select { - display: block; + display: flex; + flex-direction: row; font-size: 16px; font-family: sans-serif; font-weight: 700; @@ -39,28 +64,21 @@ body { } -@media (min-width: 1281px) { - +.contributions { + background-color: #aaa } -@media (min-width: 1025px) and (max-width: 1280px) { - -} -@media (min-width: 768px) and (max-width: 1024px) { - -} - - -@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) { - -} - - -@media (min-width: 481px) and (max-width: 767px) { +@media (max-width: 767px){ + body { + width: 100%; + } + .container { + margin: 0; + flex-direction: column; + align-items: stretch; + } + .left-div { + margin: 0; + } } - - -@media (min-width: 320px) and (max-width: 480px) { - -} \ No newline at end of file From 4e1b1bfb198cd01aeca26b3ebadff32b947e531d Mon Sep 17 00:00:00 2001 From: Elia Date: Tue, 20 Aug 2019 15:46:54 +0200 Subject: [PATCH 09/21] Week- 1 --- homework/index.js | 8 ++++---- homework/style.css | 6 ++++++ 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/homework/index.js b/homework/index.js index 568d1b4c7..112eb1776 100644 --- a/homework/index.js +++ b/homework/index.js @@ -73,16 +73,16 @@ const contribsUrl = repo.contributors_url; fetchJSON(contribsUrl, (err, contributors) => { contributors.forEach(contributor => { - - const contribNames = createAndAppend('a', contribs, { text: contributor.login, class: 'contributor' }) + const eachContrib = createAndAppend('div', contribs, { class: 'eachcontrib' }) + const contribNames = createAndAppend('a', eachContrib, { text: contributor.login, class: 'contributor' }) contribNames.href = contributor.html_url; contribNames.onclick = () => window.open(contributor.html_url) - createAndAppend('div', contribs, { text: contributor.contributions, class: 'contributions' }) - createAndAppend('img', contribs, { src: contributor.avatar_url, height: 100, width: 100, id: 'img' }) + createAndAppend('span', eachContrib, { text: contributor.contributions, class: 'contributions' }) + createAndAppend('img', eachContrib, { src: contributor.avatar_url, height: 100, width: 100, id: 'img' }) }); }); }; diff --git a/homework/style.css b/homework/style.css index 7c6750b80..910640958 100644 --- a/homework/style.css +++ b/homework/style.css @@ -26,6 +26,10 @@ body { align-items: flex-start; margin: 1 rem; } +.eachContrib { + display: flex; + flex-direction: row; +} .left-div { padding: 16px; margin-right: 16px; @@ -38,6 +42,8 @@ body { .right-div { flex: column; background-color: beige; + display: flex; + flex-direction:column; } .select { From 734f012b1d63e33da32eea4725ae7f1c5146edcc Mon Sep 17 00:00:00 2001 From: Elia Date: Wed, 21 Aug 2019 11:36:16 +0200 Subject: [PATCH 10/21] Week- 2 --- homework/index.js | 92 ++++++++++++++++++++++++----------------------- 1 file changed, 47 insertions(+), 45 deletions(-) diff --git a/homework/index.js b/homework/index.js index 03ed7c9fb..b82f63c2d 100644 --- a/homework/index.js +++ b/homework/index.js @@ -31,51 +31,53 @@ } //get repos function main(url) { - return new Promise((data, err) => { - let promise = fetch(url) - .then(data => data.json()) - .then(json => { - const select = createAndAppend('select', root, { class: 'select' }); - createAndAppend('option', select, { text: 'Choose your favorite repo' }); - data.forEach(repo => { - const name = repo.name; - createAndAppend('option', select, { text: name }); - - const repoInfo = createAndAppend('div', root); - const contribs = createAndAppend('div', root); - select.addEventListener('change', evt => { - const selectedRepo = evt.target.value; - const repo = data.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: ', repo.updated_at) - const contribsUrl = repo.contributors_url; - fetchJSON(contribsUrl, (err, contribData) => { - contribData.forEach(contributor => { - - createAndAppend('div', contribs, { text: contributor.login, class: 'contributor' }) - createAndAppend('img', contribs, { src: contributor.avatar_url, height: 100, widtth: 100, id: 'img' }) - }) + fetch(url) + .then(data => data.json()) + + .then(json => { + console.log(json) + const root = document.getElementById('root'); + const select = createAndAppend('select', root, { class: 'select' }); + createAndAppend('option', select, { text: 'Choose your favorite repo' }); + json.forEach(repo => { + const name = repo.name; + createAndAppend('option', select, { text: name }); + + const repoInfo = createAndAppend('div', root); + const contribs = createAndAppend('div', root); + select.addEventListener('change', evt => { + const selectedRepo = evt.target.value; + const repo = json.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: ', repo.updated_at) + const contribsUrl = repo.contributors_url; + fetchJSON(contribsUrl, (err, contribData) => { + contribData.forEach(contributor => { + + createAndAppend('div', contribs, { text: contributor.login, class: 'contributor' }) + createAndAppend('img', contribs, { src: contributor.avatar_url, height: 100, widtth: 100, id: 'img' }) }) + }) - .catch(err => { - createAndAppend('div', root, { text: err.message, class: 'alert-error' }); - }); + .catch(err => { + createAndAppend('div', root, { text: err.message, class: 'alert-error' }); + }); + - }) // fetchJSON(url, (err, data) => { @@ -128,11 +130,11 @@ // }); }) - const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; - - window.onload = () => main(HYF_REPOS_URL); }) - }) + }) } + const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; + + window.onload = () => main(HYF_REPOS_URL); } \ No newline at end of file From 98ec1090075a72c1475d5011a1c71b52c4e9363e Mon Sep 17 00:00:00 2001 From: Elia Date: Fri, 23 Aug 2019 12:30:22 +0200 Subject: [PATCH 11/21] week01.comment deleted! --- homework/index.js | 40 +++++++++++++++++++++++----------------- 1 file changed, 23 insertions(+), 17 deletions(-) diff --git a/homework/index.js b/homework/index.js index 112eb1776..b88153431 100644 --- a/homework/index.js +++ b/homework/index.js @@ -36,7 +36,7 @@ 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', header, { class: 'select' }); @@ -48,7 +48,7 @@ const container = createAndAppend('div', root, { class: 'container' }); const repoInfo = createAndAppend('div', container, { class: 'left-div' }); const contribs = createAndAppend('div', container, { class: 'right-div' }); - select.onchange = evt => { + select.addEventListener('change', evt => { const selectedRepo = evt.target.value; const repo = data.filter(r => r.name == selectedRepo)[0]; console.log(repo); @@ -72,25 +72,31 @@ // createAndAppend('div', repoInfo, { text: `Updated at:${repo.updated_at}` }); const contribsUrl = repo.contributors_url; fetchJSON(contribsUrl, (err, contributors) => { - contributors.forEach(contributor => { - const eachContrib = createAndAppend('div', contribs, { class: 'eachcontrib' }) - const contribNames = createAndAppend('a', eachContrib, { text: contributor.login, class: 'contributor' }) - contribNames.href = contributor.html_url; - contribNames.onclick = () => window.open(contributor.html_url) + const root = document.getElementById('root'); + if (err) { + createAndAppend('div', root, { text: err.message, class: 'alert-error' }); + } else { + contributors.forEach(contributor => { + const eachContrib = createAndAppend('div', contribs, { class: 'eachcontrib' }) + const contribNames = createAndAppend('a', eachContrib, { text: contributor.login, class: 'contributor' }) + contribNames.href = contributor.html_url; + contribNames.onclick = () => window.open(contributor.html_url) + + createAndAppend('span', eachContrib, { text: contributor.contributions, class: 'contributions' }) + createAndAppend('img', eachContrib, { src: contributor.avatar_url, height: 100, width: 100, id: 'img' }) - createAndAppend('span', eachContrib, { text: contributor.contributions, class: 'contributions' }) - createAndAppend('img', eachContrib, { src: contributor.avatar_url, height: 100, width: 100, id: 'img' }) - }); + }); + }; }); - }; - } - }); - } + }) + }; + }) - const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; + const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; - window.onload = () => main(HYF_REPOS_URL); -} + window.onload = () => main(HYF_REPOS_URL); + + }) From e593fdf53f1481fd778c897e17d432aa2081ff70 Mon Sep 17 00:00:00 2001 From: Elia Date: Fri, 23 Aug 2019 13:37:42 +0200 Subject: [PATCH 12/21] week02-comments deleted! --- homework/index.js | 55 ++--------------------------------------------- 1 file changed, 2 insertions(+), 53 deletions(-) diff --git a/homework/index.js b/homework/index.js index b82f63c2d..8d6f4d138 100644 --- a/homework/index.js +++ b/homework/index.js @@ -29,7 +29,8 @@ }); return elem; } - //get repos + + function main(url) { fetch(url) .then(data => data.json()) @@ -76,58 +77,6 @@ .catch(err => { createAndAppend('div', root, { text: err.message, class: 'alert-error' }); }); - - - - - // 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 select = createAndAppend('select', root, { class: 'select' }); - // createAndAppend('option', select, { text: 'Choose your favorite repo' }); - // data.forEach(repo => { - // const name = repo.name; - // createAndAppend('option', select, { text: name }); - // }); - - // const repoInfo = createAndAppend('div', root); - // const contribs = createAndAppend('div', root); - // select.addEventListener('change', evt => { - // const selectedRepo = evt.target.value; - // const repo = data.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: ', repo.updated_at); - // //or instead of using the addInfo function we can use these lines: - // // createAndAppend('div', repoInfo, { text: `Descriptions: ${repo.description}` }); - // // createAndAppend('div', repoInfo, { text: `Number of Forks: ${repo.forks}` }); - // // createAndAppend('div', repoInfo, { text: `Updated at:${repo.updated_at}` }); - // const contribsUrl = repo.contributors_url; - // fetchJSON(contribsUrl, (err, contribData) => { - // contribData.forEach(contributor => { - - // createAndAppend('div', contribs, { text: contributor.login, class: 'contributor' }) - // createAndAppend('img', contribs, { src: contributor.avatar_url, height: 100, widtth: 100, id: 'img' }) - // }); - // }); - // }); - // } - // }); }) From bd11d0f9908a7a661145db749fa0af65a1d51386 Mon Sep 17 00:00:00 2001 From: Elia Date: Fri, 23 Aug 2019 15:13:59 +0200 Subject: [PATCH 13/21] Did the recommended changes! --- homework/index.js | 30 +++++++++++------------------- homework/style.css | 5 ++--- 2 files changed, 13 insertions(+), 22 deletions(-) diff --git a/homework/index.js b/homework/index.js index b88153431..1d6e2ad66 100644 --- a/homework/index.js +++ b/homework/index.js @@ -36,7 +36,7 @@ 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', header, { class: 'select' }); @@ -48,7 +48,7 @@ const container = createAndAppend('div', root, { class: 'container' }); const repoInfo = createAndAppend('div', container, { class: 'left-div' }); const contribs = createAndAppend('div', container, { class: 'right-div' }); - select.addEventListener('change', evt => { + select.onchange = evt => { const selectedRepo = evt.target.value; const repo = data.filter(r => r.name == selectedRepo)[0]; console.log(repo); @@ -66,13 +66,9 @@ addInfo('Desciption: ', repo.description); addInfo('Number of forks: ', repo.forks); addInfo('Updated: ', repo.updated_at); - //or instead of using the addInfo function we can use these lines: - // createAndAppend('div', repoInfo, { text: `Descriptions: ${repo.description}` }); - // createAndAppend('div', repoInfo, { text: `Number of Forks: ${repo.forks}` }); - // createAndAppend('div', repoInfo, { text: `Updated at:${repo.updated_at}` }); + const contribsUrl = repo.contributors_url; fetchJSON(contribsUrl, (err, contributors) => { - const root = document.getElementById('root'); if (err) { createAndAppend('div', root, { text: err.message, class: 'alert-error' }); } else { @@ -80,23 +76,19 @@ const eachContrib = createAndAppend('div', contribs, { class: 'eachcontrib' }) const contribNames = createAndAppend('a', eachContrib, { text: contributor.login, class: 'contributor' }) contribNames.href = contributor.html_url; - contribNames.onclick = () => window.open(contributor.html_url) - - - createAndAppend('span', eachContrib, { text: contributor.contributions, class: 'contributions' }) createAndAppend('img', eachContrib, { src: contributor.avatar_url, height: 100, width: 100, id: 'img' }) + }) - }); }; }); - }) - }; - }) + }; + } + }); + } - const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; + const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; - window.onload = () => main(HYF_REPOS_URL); - - }) + window.onload = () => main(HYF_REPOS_URL); +} \ No newline at end of file diff --git a/homework/style.css b/homework/style.css index 910640958..b76f1c04c 100644 --- a/homework/style.css +++ b/homework/style.css @@ -1,6 +1,5 @@ .alert-error { color: red; - ba } body { @@ -24,7 +23,7 @@ body { display: flex; flex-direction: row; align-items: flex-start; - margin: 1 rem; + margin: 1rem; } .eachContrib { display: flex; @@ -55,7 +54,7 @@ body { color: #444; line-height: 1.3; padding: .6em 1.4em .5em .8em; - width: 20%; + width: auto; max-width: 100%; box-sizing: border-box; margin: 0; From 36efb2c86f83a8106bcfc55f2090248d3650d623 Mon Sep 17 00:00:00 2001 From: Elia Date: Tue, 27 Aug 2019 13:57:02 +0200 Subject: [PATCH 14/21] NewUpdate still not working! --- homework/index.js | 60 ++++++++++++++++++++++++++--------------------- 1 file changed, 33 insertions(+), 27 deletions(-) diff --git a/homework/index.js b/homework/index.js index 8d6f4d138..192ef949d 100644 --- a/homework/index.js +++ b/homework/index.js @@ -1,21 +1,23 @@ '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 fetchJson(url) { + return new promise((resolve, reject) => { + const xhr = newXMLHTTPRequest(); + xhr.open('GET', url); + xhr.responseType = 'json'; + xhr.onload = () => { + if (xhr.status >= 200 && xhr.status <= 299) { + resolve(xhr.response) + } else { + reject(Error('Network request failed')); + } + }; + xhr.send(); + }); } + function createAndAppend(name, parent, options = {}) { const elem = document.createElement(name); parent.appendChild(elem); @@ -30,10 +32,11 @@ return elem; } - function main(url) { fetch(url) - .then(data => data.json()) + .then(data => { + data.json() + }) .then(json => { console.log(json) @@ -65,25 +68,28 @@ addInfo('Number of forks: ', repo.forks); addInfo('Updated: ', repo.updated_at) const contribsUrl = repo.contributors_url; - fetchJSON(contribsUrl, (err, contribData) => { - contribData.forEach(contributor => { - - createAndAppend('div', contribs, { text: contributor.login, class: 'contributor' }) - createAndAppend('img', contribs, { src: contributor.avatar_url, height: 100, widtth: 100, id: 'img' }) + fetchJSON(contribsUrl) + .then(data => { + data.sort((a, b) => (a.name.toLowerCase() > b.name.toLowerCase()); }) - }) - + data.forEach(contributor => { - .catch(err => { - createAndAppend('div', root, { text: err.message, class: 'alert-error' }); - }); + createAndAppend('div', contribs, { text: contributor.login, class: 'contributor' }) + createAndAppend('img', contribs, { src: contributor.avatar_url, height: 100, widtth: 100, id: 'img' }) + }) }) + .catch(err => { + createAndAppend('div', root, { text: err.message, class: 'alert-error' }); + }); }) + + }) } - const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; +}) +const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; - window.onload = () => main(HYF_REPOS_URL); +window.onload = () => main(HYF_REPOS_URL); } \ No newline at end of file From 76910b851a41effb955001fb2f5484f36e9cf232 Mon Sep 17 00:00:00 2001 From: Elia Date: Tue, 27 Aug 2019 14:15:08 +0200 Subject: [PATCH 15/21] Week02 Braces Problem! --- homework/index.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/homework/index.js b/homework/index.js index 192ef949d..851d52571 100644 --- a/homework/index.js +++ b/homework/index.js @@ -70,13 +70,13 @@ const contribsUrl = repo.contributors_url; fetchJSON(contribsUrl) .then(data => { - data.sort((a, b) => (a.name.toLowerCase() > b.name.toLowerCase()); + data.sort((a, b) => (a.contribs.toLowerCase() > b.contribs.toLowerCase())); }) - data.forEach(contributor => { + .then(data.forEach(contributor => { - createAndAppend('div', contribs, { text: contributor.login, class: 'contributor' }) - createAndAppend('img', contribs, { src: contributor.avatar_url, height: 100, widtth: 100, id: 'img' }) - }) + createAndAppend('div', contribs, { text: contributor.login, class: 'contributor' }) + createAndAppend('img', contribs, { src: contributor.avatar_url, height: 100, widtth: 100, id: 'img' }) + })) }) @@ -88,7 +88,7 @@ }) } -}) +} const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; window.onload = () => main(HYF_REPOS_URL); From 05d5c54b5a1619b0aa93868210baf75313d46561 Mon Sep 17 00:00:00 2001 From: Elia Date: Tue, 27 Aug 2019 14:15:32 +0200 Subject: [PATCH 16/21] Week02 Braces Problem! --- homework/index.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/homework/index.js b/homework/index.js index 851d52571..16215927a 100644 --- a/homework/index.js +++ b/homework/index.js @@ -69,9 +69,6 @@ addInfo('Updated: ', repo.updated_at) const contribsUrl = repo.contributors_url; fetchJSON(contribsUrl) - .then(data => { - data.sort((a, b) => (a.contribs.toLowerCase() > b.contribs.toLowerCase())); - }) .then(data.forEach(contributor => { createAndAppend('div', contribs, { text: contributor.login, class: 'contributor' }) @@ -87,9 +84,9 @@ }) + } -} -const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; + const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; -window.onload = () => main(HYF_REPOS_URL); + window.onload = () => main(HYF_REPOS_URL); } \ No newline at end of file From dfdb6416866e6c718f9e567743c47c885848a9ba Mon Sep 17 00:00:00 2001 From: Elia Date: Thu, 29 Aug 2019 15:46:32 +0200 Subject: [PATCH 17/21] Made more changes/ still buggy! --- homework/index.js | 48 ++++++++++++++++++++++++----------------------- 1 file changed, 25 insertions(+), 23 deletions(-) diff --git a/homework/index.js b/homework/index.js index 16215927a..3b6bb8edd 100644 --- a/homework/index.js +++ b/homework/index.js @@ -2,8 +2,8 @@ { function fetchJson(url) { - return new promise((resolve, reject) => { - const xhr = newXMLHTTPRequest(); + return new Promise((resolve, reject) => { + const xhr = newXMLHttpRequest(); xhr.open('GET', url); xhr.responseType = 'json'; xhr.onload = () => { @@ -32,14 +32,27 @@ return elem; } - function main(url) { - fetch(url) - .then(data => { - data.json() + function getContributorInformation(contribsUrl, contribs) { + fetch(contribsUrl) + .then(data => data.json()) + .then((jsonData) => { + jsonData.forEach(contributor => { + createAndAppend('div', contribs, { text: contributor.login, class: 'contributor' }) + createAndAppend('img', contribs, { src: contributor.avatar_url, height: 100, widtth: 100, id: 'img' }) + createAndAppend('div', contribs, { text: contributor.contributions }) + }) + }) + .catch((err) => { + const root = document.getElementById('root'); + createAndAppend('div', contribs, { text: err.message, class: 'alert-error' }) }) + } + + function main(url) { + fetch(url) + .then(data => data.json()) .then(json => { - console.log(json) const root = document.getElementById('root'); const select = createAndAppend('select', root, { class: 'select' }); createAndAppend('option', select, { text: 'Choose your favorite repo' }); @@ -52,12 +65,8 @@ select.addEventListener('change', evt => { const selectedRepo = evt.target.value; const repo = json.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 }); @@ -68,21 +77,14 @@ addInfo('Number of forks: ', repo.forks); addInfo('Updated: ', repo.updated_at) const contribsUrl = repo.contributors_url; - fetchJSON(contribsUrl) - .then(data.forEach(contributor => { + getContributorInformation(contribsUrl, contribs) - createAndAppend('div', contribs, { text: contributor.login, class: 'contributor' }) - createAndAppend('img', contribs, { src: contributor.avatar_url, height: 100, widtth: 100, id: 'img' }) - })) }) - - - .catch(err => { - 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' }) }) } From 47191f7870b73a97d864ca315a483ec6f3f2626f Mon Sep 17 00:00:00 2001 From: Elia Date: Thu, 29 Aug 2019 21:52:02 +0200 Subject: [PATCH 18/21] Week02 done! --- homework/index.js | 40 ++++++++++++++++++++-------------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/homework/index.js b/homework/index.js index 3b6bb8edd..7185cf20c 100644 --- a/homework/index.js +++ b/homework/index.js @@ -59,28 +59,28 @@ json.forEach(repo => { const name = repo.name; createAndAppend('option', select, { text: name }); + }) + const repoInfo = createAndAppend('div', root); + const contribs = createAndAppend('div', root); + select.addEventListener('change', evt => { + const selectedRepo = evt.target.value; + const repo = json.filter(r => r.name == selectedRepo)[0]; + 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: ', repo.updated_at) + const contribsUrl = repo.contributors_url; + getContributorInformation(contribsUrl, contribs) - const repoInfo = createAndAppend('div', root); - const contribs = createAndAppend('div', root); - select.addEventListener('change', evt => { - const selectedRepo = evt.target.value; - const repo = json.filter(r => r.name == selectedRepo)[0]; - 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: ', repo.updated_at) - const contribsUrl = repo.contributors_url; - getContributorInformation(contribsUrl, contribs) - - }) }) + }) .catch((err) => { const root = document.getElementById('root'); From a94745b0d9ef808246713d0d279882f5f66802a9 Mon Sep 17 00:00:00 2001 From: Elia Date: Thu, 29 Aug 2019 22:47:52 +0200 Subject: [PATCH 19/21] added some CSS --- homework/index.js | 21 +++++++++++---- homework/style.css | 65 +++++++++++++++++++++++++++++++++++++++++----- 2 files changed, 74 insertions(+), 12 deletions(-) diff --git a/homework/index.js b/homework/index.js index 7185cf20c..df78cacf0 100644 --- a/homework/index.js +++ b/homework/index.js @@ -38,7 +38,7 @@ .then((jsonData) => { jsonData.forEach(contributor => { createAndAppend('div', contribs, { text: contributor.login, class: 'contributor' }) - createAndAppend('img', contribs, { src: contributor.avatar_url, height: 100, widtth: 100, id: 'img' }) + createAndAppend('img', contribs, { src: contributor.avatar_url, height: 150, widtth: 150, id: 'img' }) createAndAppend('div', contribs, { text: contributor.contributions }) }) }) @@ -48,6 +48,15 @@ }) } + function compare(a, b) { + if (a.name < b.name) { + return -1; + } + if (a.name > b.name) { + return 1 + } + return 0; + } function main(url) { fetch(url) @@ -56,19 +65,21 @@ const root = document.getElementById('root'); const select = createAndAppend('select', root, { class: 'select' }); createAndAppend('option', select, { text: 'Choose your favorite repo' }); - json.forEach(repo => { + let sorted = json.sort((a, b) => (a.name.toLowerCase() > b.name.toLowerCase())); + sorted.forEach(repo => { const name = repo.name; createAndAppend('option', select, { text: name }); }) - const repoInfo = createAndAppend('div', root); - const contribs = createAndAppend('div', root); + const wraper = createAndAppend('div', root, { class: 'wraper' }); + const repoInfo = createAndAppend('div', wraper, { class: 'repoinfo' }); + const contribs = createAndAppend('div', wraper, { class: 'contribs' }); select.addEventListener('change', evt => { const selectedRepo = evt.target.value; const repo = json.filter(r => r.name == selectedRepo)[0]; repoInfo.innerHTML = ''; contribs.innerHTML = ''; const addInfo = (label, value) => { - const container = createAndAppend('div', repoInfo); + const container = createAndAppend('div', repoInfo, { class: 'container' }); createAndAppend('span', container, { text: label }); createAndAppend('span', container, { text: value }); }; diff --git a/homework/style.css b/homework/style.css index d56f3e07a..4b0385947 100644 --- a/homework/style.css +++ b/homework/style.css @@ -1,30 +1,62 @@ .alert-error { color: red; - ba } body { - background-color: rgba(142, 93, 93, 1); + background-color:whitesmoke; } #root { display: flex; - justify-content: center; + flex-direction: column; + align-items: flex-start; + justify-content: center; +} +.header { + background-color: #444; + width: 100%; } .h1 { text-align: center; - background-color: antiquewhite; } +.container { + display: flex; + flex-direction: row; + align-items: flex-start; + margin: 1rem; + +} +.eachContrib { + display: flex; + flex-direction: row; +} + +.wraper { + display: flex; + flex-direction: row; + align-items: flex-start; + margin: 1rem; +} +.contribs { + padding: 16px; + margin-right: 25px; + flex: row; + background-color: beige; + display: flex; + flex-direction: column; + align-items: flex-start; +} .select { - display: block; + display: flex; + flex-direction: row; font-size: 16px; font-family: sans-serif; font-weight: 700; color: #444; line-height: 1.3; padding: .6em 1.4em .5em .8em; - width: 20%; + width: auto; max-width: 100%; box-sizing: border-box; margin: 0; @@ -37,4 +69,23 @@ body { background-color: #fff; text-align: center; -} \ No newline at end of file +} + +.contributions { + background-color: #aaa +} + + +@media (max-width: 767px){ + body { + width: 100%; + } + .container { + margin: 0; + flex-direction: column; + align-items: stretch; + } + .left-div { + margin: 0; + } +} From d9cf873f6e25046c49212b75fdbd3fc738100de4 Mon Sep 17 00:00:00 2001 From: Elia Date: Sat, 31 Aug 2019 15:33:44 +0200 Subject: [PATCH 20/21] Week02 Fixed! --- homework/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/homework/index.js b/homework/index.js index df78cacf0..7e675cdc4 100644 --- a/homework/index.js +++ b/homework/index.js @@ -65,7 +65,7 @@ const root = document.getElementById('root'); const select = createAndAppend('select', root, { class: 'select' }); createAndAppend('option', select, { text: 'Choose your favorite repo' }); - let sorted = json.sort((a, b) => (a.name.toLowerCase() > b.name.toLowerCase())); + let sorted = json.sort((a, b) => (a.name.toLowerCase() > b.name.toLowerCase()) ? 1 : -1); sorted.forEach(repo => { const name = repo.name; createAndAppend('option', select, { text: name }); From 2d1e9d9b68505a54bbc059b765e8e12e49866110 Mon Sep 17 00:00:00 2001 From: Elia Date: Sat, 31 Aug 2019 18:24:39 +0200 Subject: [PATCH 21/21] Week02 Shows first repo on load! --- homework/index.js | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/homework/index.js b/homework/index.js index 7e675cdc4..1154df0d5 100644 --- a/homework/index.js +++ b/homework/index.js @@ -64,7 +64,7 @@ .then(json => { const root = document.getElementById('root'); const select = createAndAppend('select', root, { class: 'select' }); - createAndAppend('option', select, { text: 'Choose your favorite repo' }); + // createAndAppend('option', select, { text: 'Choose your favorite repo' }); let sorted = json.sort((a, b) => (a.name.toLowerCase() > b.name.toLowerCase()) ? 1 : -1); sorted.forEach(repo => { const name = repo.name; @@ -76,8 +76,13 @@ select.addEventListener('change', evt => { const selectedRepo = evt.target.value; const repo = json.filter(r => r.name == selectedRepo)[0]; + getallInfo(repo, repoInfo, contribs) + }) + + function getallInfo(repo, repoInfo, contribs) { repoInfo.innerHTML = ''; contribs.innerHTML = ''; + const addInfo = (label, value) => { const container = createAndAppend('div', repoInfo, { class: 'container' }); createAndAppend('span', container, { text: label }); @@ -88,16 +93,19 @@ addInfo('Number of forks: ', repo.forks); addInfo('Updated: ', repo.updated_at) const contribsUrl = repo.contributors_url; - getContributorInformation(contribsUrl, contribs) - - }) + getContributorInformation(contribsUrl, contribs); + }; + let firstRepo = sorted[1]; + getallInfo(firstRepo, repoInfo, contribs); }) + .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';