From 029a974c0f8d2d4f47b11cdb4fcf78956a758714 Mon Sep 17 00:00:00 2001 From: Elia Date: Tue, 6 Aug 2019 10:43:33 +0200 Subject: [PATCH 01/18] 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/18] 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/18] 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/18] 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/18] 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/18] 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 a263bffc45cee85ef89ff6a8ed87324b4a66bcb4 Mon Sep 17 00:00:00 2001 From: Elia Date: Tue, 20 Aug 2019 15:26:40 +0200 Subject: [PATCH 07/18] 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 08/18] 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 98ec1090075a72c1475d5011a1c71b52c4e9363e Mon Sep 17 00:00:00 2001 From: Elia Date: Fri, 23 Aug 2019 12:30:22 +0200 Subject: [PATCH 09/18] 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 bd11d0f9908a7a661145db749fa0af65a1d51386 Mon Sep 17 00:00:00 2001 From: Elia Date: Fri, 23 Aug 2019 15:13:59 +0200 Subject: [PATCH 10/18] 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 ff283c4ccc778abbc0ff864a2ac676121944080a Mon Sep 17 00:00:00 2001 From: Elia Date: Fri, 30 Aug 2019 16:32:54 +0200 Subject: [PATCH 11/18] First try! --- homework/index.js | 150 +++++++++++++++++++++++----------------------- 1 file changed, 75 insertions(+), 75 deletions(-) diff --git a/homework/index.js b/homework/index.js index 1d6e2ad66..5484ee8dc 100644 --- a/homework/index.js +++ b/homework/index.js @@ -1,92 +1,92 @@ 'use strict'; -{ - function fetchJSON(url, cb) { - const xhr = new XMLHttpRequest(); +async function fetchJson(url) { + + try { + const xhr = await newXMLHttpRequest(); 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(); + await(xhr.response) + } } + catch (Err) { + ('Network request failed'); - function createAndAppend(name, parent, options = {}) { - const elem = document.createElement(name); - parent.appendChild(elem); - Object.keys(options).forEach(key => { - const value = options[key]; - if (key === 'text') { - elem.textContent = value; - } else { - elem.setAttribute(key, value); - } - }); - return elem; - } - //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 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 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); - repoInfo.innerHTML = ''; - contribs.innerHTML = ''; + }; + xhr.send(); +} +function createAndAppend(name, parent, options = {}) { + const elem = document.createElement(name); + parent.appendChild(elem); + Object.keys(options).forEach(key => { + const value = options[key]; + if (key === 'text') { + elem.textContent = value; + } else { + elem.setAttribute(key, value); + } + }); + return elem; +} +async function getContributorInformation(data) { + try { + const contribs = await fetch(contribsUrl); + const jsonData = await contribs.json(); + jsonData.forEach(contributor => { + createAndAppend('div', contribs, { text: contributor.login, class: 'contributor' }) + createAndAppend('img', contribs, { src: contributor.avatar_url, height: 150, widtth: 150, id: 'img' }) + createAndAppend('div', contribs, { text: contributor.contributions }) + }) + } catch (err) { + const root = document.getElementById('root'); + createAndAppend('div', contribs, { text: err.message, class: 'alert-error' }) + } +} - const addInfo = (label, value) => { - const repoContainer = createAndAppend('div', repoInfo); - createAndAppend('span', repoContainer, { text: label }); - createAndAppend('span', repoContainer, { text: value }); - }; - addInfo('Name: ', repo.name); - addInfo('Desciption: ', repo.description); - addInfo('Number of forks: ', repo.forks); - addInfo('Updated: ', repo.updated_at); +function addInfo(label, value) { + const container = createAndAppend('div', repoInfo, { class: 'container' }); + createAndAppend('span', container, { text: label }); + createAndAppend('span', container, { text: value }); +}; - const contribsUrl = repo.contributors_url; - fetchJSON(contribsUrl, (err, contributors) => { - 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; +async function main(url) { + try { + const response = await fetch(url); + const json = await response.json(); + 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())); + sorted.forEach(repo => { + const name = repo.name; + createAndAppend('option', select, { text: name }); + 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 = ''; + 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) + }) - createAndAppend('span', eachContrib, { text: contributor.contributions, class: 'contributions' }) - createAndAppend('img', eachContrib, { src: contributor.avatar_url, height: 100, width: 100, id: 'img' }) - }) - }; - }); - }; - } - }); + }) } + 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'; From 64e84a84e73181bdb94d2840c860856cb312f396 Mon Sep 17 00:00:00 2001 From: Elia Date: Fri, 30 Aug 2019 21:36:34 +0200 Subject: [PATCH 12/18] changes after the first comments! --- homework/index.js | 91 +++++++++++++++++++--------------------------- homework/style.css | 89 --------------------------------------------- 2 files changed, 38 insertions(+), 142 deletions(-) diff --git a/homework/index.js b/homework/index.js index 5484ee8dc..849bc19c7 100644 --- a/homework/index.js +++ b/homework/index.js @@ -1,21 +1,5 @@ 'use strict'; -async function fetchJson(url) { - - try { - const xhr = await newXMLHttpRequest(); - xhr.open('GET', url); - xhr.responseType = 'json'; - xhr.onload = () => { - await(xhr.response) - } - } - catch (Err) { - ('Network request failed'); - - }; - xhr.send(); -} function createAndAppend(name, parent, options = {}) { const elem = document.createElement(name); @@ -31,26 +15,7 @@ function createAndAppend(name, parent, options = {}) { return elem; } -async function getContributorInformation(data) { - try { - const contribs = await fetch(contribsUrl); - const jsonData = await contribs.json(); - jsonData.forEach(contributor => { - createAndAppend('div', contribs, { text: contributor.login, class: 'contributor' }) - createAndAppend('img', contribs, { src: contributor.avatar_url, height: 150, widtth: 150, 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 addInfo(label, value) { - const container = createAndAppend('div', repoInfo, { class: 'container' }); - createAndAppend('span', container, { text: label }); - createAndAppend('span', container, { text: value }); -}; async function main(url) { try { @@ -60,35 +25,55 @@ async function main(url) { 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())); + sorted.forEach(repo => { const name = repo.name; createAndAppend('option', select, { text: name }); - 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 = ''; - 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 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]; + getContributorInformation(); + repoInfo.innerHTML = ''; + contribs.innerHTML = ''; + const addInfo = (label, value) => { + const container = createAndAppend('div', repoInfo, { class: 'container' }); + 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) }) + } catch (err) { const root = document.getElementById('root'); createAndAppend('div', root, { text: err.message, class: 'alert-error' }) } + async function getContributorInformation(data) { + try { + const contribs = await fetch(data.contributors_url); + const jsonData = await contribs.json(); - 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 + jsonData.forEach(contributor => { + createAndAppend('div', contribs, { text: contributor.login, class: 'contributor' }) + createAndAppend('img', contribs, { src: contributor.avatar_url, height: 150, widtth: 150, id: 'img' }) + createAndAppend('div', contribs, { text: contributor.contributions }) + }) + } catch (err) { + const root = document.getElementById('root'); + createAndAppend('div', contribs, { 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); \ No newline at end of file diff --git a/homework/style.css b/homework/style.css index b76f1c04c..e69de29bb 100644 --- a/homework/style.css +++ b/homework/style.css @@ -1,89 +0,0 @@ -.alert-error { - color: red; -} - -body { - background-color: rgba(142, 93, 93, 1); -} -#root { - display: flex; - flex-direction: column; - align-items: flex-start; - justify-content: center; -} -.header { - background-color: #444; - width: 100%; -} -.h1 { - text-align: center; - -} -.container { - display: flex; - flex-direction: row; - align-items: flex-start; - margin: 1rem; -} -.eachContrib { - display: flex; - flex-direction: row; -} -.left-div { - padding: 16px; - margin-right: 16px; - background-color: beige; - flex-direction: column; - align-items: flex-start; -} - - -.right-div { - flex: column; - background-color: beige; - display: flex; - flex-direction:column; - -} -.select { - 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: auto; - 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; - -} - -.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 0fcf0939b012233d090b8299e4d0ae15347ca3cb Mon Sep 17 00:00:00 2001 From: Elia Date: Tue, 3 Sep 2019 09:42:55 +0200 Subject: [PATCH 13/18] Doesn't show contribs! --- homework/index.js | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/homework/index.js b/homework/index.js index 849bc19c7..b5aa23566 100644 --- a/homework/index.js +++ b/homework/index.js @@ -24,7 +24,7 @@ async function main(url) { 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; @@ -32,7 +32,7 @@ async function main(url) { }) const wraper = createAndAppend('div', root, { class: 'wraper' }); const repoInfo = createAndAppend('div', wraper, { class: 'repoinfo' }); - const contribs = createAndAppend('div', wraper, { class: 'contribs' }); + let contribs = createAndAppend('div', wraper, { id: 'contribsid' }); select.addEventListener('change', evt => { const selectedRepo = evt.target.value; @@ -59,18 +59,25 @@ async function main(url) { } async function getContributorInformation(data) { + const root = document.getElementById('root'); + const wraper = createAndAppend('div', root, { class: 'wraper' }); + let contribs = createAndAppend('div', wraper, { class: 'contribs' }); + contribs.innerHTML = 'Contributors:'; try { - const contribs = await fetch(data.contributors_url); - const jsonData = await contribs.json(); + const contribsUrl = await fetch(data.contributors_url); + const jsonData = await contribsUrl.json(); jsonData.forEach(contributor => { + + document.getElementById('contribsid'); createAndAppend('div', contribs, { text: contributor.login, class: 'contributor' }) createAndAppend('img', contribs, { src: contributor.avatar_url, height: 150, widtth: 150, id: 'img' }) createAndAppend('div', contribs, { text: contributor.contributions }) }) } catch (err) { - const root = document.getElementById('root'); + + createAndAppend('div', contribs, { text: err.message, class: 'alert-error' }) } } From 59153e21753bb625101f4c4c53100e2e14de493b Mon Sep 17 00:00:00 2001 From: Elia Date: Wed, 4 Sep 2019 13:39:56 +0200 Subject: [PATCH 14/18] failed to fetch contributors! --- homework/index.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/homework/index.js b/homework/index.js index b5aa23566..a8b8b9a3a 100644 --- a/homework/index.js +++ b/homework/index.js @@ -37,7 +37,7 @@ async function main(url) { select.addEventListener('change', evt => { const selectedRepo = evt.target.value; const repo = json.filter(r => r.name == selectedRepo)[0]; - getContributorInformation(); + const repocontrib = json.filter(r => r.contributors == selectedRepo)[0]; repoInfo.innerHTML = ''; contribs.innerHTML = ''; const addInfo = (label, value) => { @@ -49,7 +49,8 @@ async function main(url) { addInfo('Desciption: ', repo.description); addInfo('Number of forks: ', repo.forks); addInfo('Updated: ', repo.updated_at) - + const contributorsUrl = "https://api.github.com/repos/HackYourFuture/AngularJS/contributors"; + getContributorInformation(contributorsUrl); }) } @@ -64,6 +65,7 @@ async function main(url) { let contribs = createAndAppend('div', wraper, { class: 'contribs' }); contribs.innerHTML = 'Contributors:'; try { + const contribsUrl = await fetch(data.contributors_url); const jsonData = await contribsUrl.json(); From 0a42ee2cc2329f74692c6acec552b2a8786e6ff4 Mon Sep 17 00:00:00 2001 From: Elia Date: Thu, 5 Sep 2019 08:50:53 +0200 Subject: [PATCH 15/18] Shows contributors, doesn't update them! --- homework/index.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/homework/index.js b/homework/index.js index a8b8b9a3a..43611fecd 100644 --- a/homework/index.js +++ b/homework/index.js @@ -37,7 +37,7 @@ async function main(url) { select.addEventListener('change', evt => { const selectedRepo = evt.target.value; const repo = json.filter(r => r.name == selectedRepo)[0]; - const repocontrib = json.filter(r => r.contributors == selectedRepo)[0]; + repoInfo.innerHTML = ''; contribs.innerHTML = ''; const addInfo = (label, value) => { @@ -50,7 +50,7 @@ async function main(url) { addInfo('Number of forks: ', repo.forks); addInfo('Updated: ', repo.updated_at) const contributorsUrl = "https://api.github.com/repos/HackYourFuture/AngularJS/contributors"; - getContributorInformation(contributorsUrl); + getContributorInformation(repo); }) } @@ -67,10 +67,8 @@ async function main(url) { try { const contribsUrl = await fetch(data.contributors_url); - const jsonData = await contribsUrl.json(); - - - jsonData.forEach(contributor => { + const contribsJson = await contribsUrl.json(); + contribsJson.forEach(contributor => { document.getElementById('contribsid'); createAndAppend('div', contribs, { text: contributor.login, class: 'contributor' }) From bfdfa667126019a1e6f55390a4b61d7d6af61ee6 Mon Sep 17 00:00:00 2001 From: Elia Date: Thu, 5 Sep 2019 10:20:52 +0200 Subject: [PATCH 16/18] appends the contributors! --- homework/index.js | 50 +++++++++++++++++++++++++---------------------- 1 file changed, 27 insertions(+), 23 deletions(-) diff --git a/homework/index.js b/homework/index.js index 43611fecd..29b7d2585 100644 --- a/homework/index.js +++ b/homework/index.js @@ -18,6 +18,8 @@ function createAndAppend(name, parent, options = {}) { async function main(url) { + + try { const response = await fetch(url); const json = await response.json(); @@ -28,56 +30,58 @@ async function main(url) { sorted.forEach(repo => { const name = repo.name; + createAndAppend('option', select, { text: name }); }) - const wraper = createAndAppend('div', root, { class: 'wraper' }); - const repoInfo = createAndAppend('div', wraper, { class: 'repoinfo' }); - let contribs = createAndAppend('div', wraper, { id: 'contribsid' }); + 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, { class: 'container' }); - 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 contributorsUrl = "https://api.github.com/repos/HackYourFuture/AngularJS/contributors"; getContributorInformation(repo); + repoData(); + + function repoData() { + repoInfo.innerHTML = 'Repository Information:'; + + const addInfo = (label, value) => { + const container = createAndAppend('div', repoInfo, { class: 'container' }); + 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 contributorsUrl = "https://api.github.com/repos/HackYourFuture/AngularJS/contributors"; + } }) + } catch (err) { const root = document.getElementById('root'); createAndAppend('div', root, { text: err.message, class: 'alert-error' }) } + const wraper = createAndAppend('div', root, { class: 'wraper' }); + const repoInfo = createAndAppend('div', wraper, { class: 'repoinfo' }); + let contribs = createAndAppend('div', wraper, { class: 'contribs' }); + contribs.innerHTML = 'Contributors'; + async function getContributorInformation(data) { - const root = document.getElementById('root'); - const wraper = createAndAppend('div', root, { class: 'wraper' }); - let contribs = createAndAppend('div', wraper, { class: 'contribs' }); - contribs.innerHTML = 'Contributors:'; + try { const contribsUrl = await fetch(data.contributors_url); const contribsJson = await contribsUrl.json(); contribsJson.forEach(contributor => { - document.getElementById('contribsid'); createAndAppend('div', contribs, { text: contributor.login, class: 'contributor' }) createAndAppend('img', contribs, { src: contributor.avatar_url, height: 150, widtth: 150, id: 'img' }) createAndAppend('div', contribs, { text: contributor.contributions }) }) } catch (err) { - - createAndAppend('div', contribs, { text: err.message, class: 'alert-error' }) } } From f1dd2a72aa39e8b88feaa7752de950d23a99ae41 Mon Sep 17 00:00:00 2001 From: Elia Date: Thu, 5 Sep 2019 11:03:22 +0200 Subject: [PATCH 17/18] It's Working! --- homework/index.js | 4 +- homework/style.css | 91 ++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 93 insertions(+), 2 deletions(-) diff --git a/homework/index.js b/homework/index.js index 29b7d2585..dd13c69b0 100644 --- a/homework/index.js +++ b/homework/index.js @@ -19,7 +19,7 @@ function createAndAppend(name, parent, options = {}) { async function main(url) { - + createAndAppend('h1', root, { class: 'h1', text: 'Hack Your Future Repositories' }) try { const response = await fetch(url); const json = await response.json(); @@ -70,7 +70,7 @@ async function main(url) { contribs.innerHTML = 'Contributors'; async function getContributorInformation(data) { - + contribs.innerHTML = ''; try { const contribsUrl = await fetch(data.contributors_url); diff --git a/homework/style.css b/homework/style.css index e69de29bb..8d588244e 100644 --- a/homework/style.css +++ b/homework/style.css @@ -0,0 +1,91 @@ +.alert-error { + color: red; +} + +body { + background-color:whitesmoke; +} +#root { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; +} +.header { + background-color: #444; + width: 100%; +} +.h1 { + text-align: center; + +} +.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: 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: auto; + 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; + +} + +.contributions { + background-color: #aaa +} + + +@media (max-width: 767px){ + body { + width: 100%; + } + .container { + margin: 0; + flex-direction: column; + align-items: stretch; + } + .left-div { + margin: 0; + } +} \ No newline at end of file From 31b01414064f3859f393c73af8cba904ebcc8883 Mon Sep 17 00:00:00 2001 From: Elia Date: Mon, 9 Sep 2019 15:29:25 +0200 Subject: [PATCH 18/18] week3.classes! --- homework-classes/App.js | 48 +++++++++++++++++++++------------ homework-classes/Contributor.js | 3 ++- homework-classes/Repository.js | 9 ++++--- homework-classes/index.html | 47 ++++++++++++++++---------------- homework-classes/style.css | 34 +++++++++++++++++++++++ 5 files changed, 96 insertions(+), 45 deletions(-) diff --git a/homework-classes/App.js b/homework-classes/App.js index 7cc1c5772..8d91829cc 100644 --- a/homework-classes/App.js +++ b/homework-classes/App.js @@ -13,30 +13,46 @@ class App { * @param {string} url The GitHub URL for obtaining the organization's repositories. */ async initialize(url) { - // Add code here to initialize your app - // 1. Create the fixed HTML elements of your page - // 2. Make an initial XMLHttpRequest using Util.fetchJSON() to populate your element try { const repos = await Util.fetchJSON(url); this.repos = repos.map(repo => new Repository(repo)); + this.addRepoNamesToSelect(); + // TODO: add your own code here } catch (error) { this.renderError(error); } } + addRepoNamesToSelect() { + const selectEl = document.getElementById('repo-select') + for (const repo of this.repos) { + Util.createAndAppend('option', selectEl, { text: repo.name() }) + } + selectEl.addEventListener('change', event => { + const selectedRepoName = event.target.value; + const selectedRepo = this.repos.filter(repo => repo.name() === selectedRepoName)[0] + selectedRepo.render(document.getElementById('repo-info')); + this.fetchContributorsAndRender(selectedRepo) + }); + + } + setupDOMElement() { + const root = document.getElementById('root'); + Util.createAndAppend('select', root, { id: 'repo-select' }) + Util.createAndAppend('div', root, { id: 'repo-info' }) + Util.createAndAppend('div', root, { id: 'repo-contributors' }) + } /** * Removes all child elements from a container element * @param {*} container Container element to clear */ - clearContainer() { - while (this.mainContainer.firstChild) { - this.mainContainer.removeChild(this.mainContainer.firstChild); + static clearContainer(container) { + while (container.firstChild) { + container.removeChild(container.firstChild); } } @@ -45,21 +61,19 @@ class App { * repo and its contributors as HTML elements in the DOM. * @param {object} repo The selected repository object */ - async selectRepository(repo) { + async fetchContributorsAndRender(repo) { try { - this.clearContainer(); + const contributors = await repo.fetchContributors(); - const repoContainer = Util.createAndAppend('div', this.mainContainer); - const contributorContainer = Util.createAndAppend('div', this.mainContainer); + const container = document.getElementById('repo-contributors'); + App.clearContainer(container); - const contributorList = Util.createAndAppend('ul', contributorContainer); - repo.render(repoContainer); contributors .map(contributor => new Contributor(contributor)) - .forEach(contributor => contributor.render(contributorList)); + .forEach(contributor => contributor.render(container)); } catch (error) { this.renderError(error); } diff --git a/homework-classes/Contributor.js b/homework-classes/Contributor.js index c74775216..8957a8639 100644 --- a/homework-classes/Contributor.js +++ b/homework-classes/Contributor.js @@ -14,6 +14,7 @@ class Contributor { */ render(container) { // TODO: replace the next line with your code. - Util.createAndAppend('pre', container, { text: JSON.stringify(this.contributor, null, 2) }); + Util.createAndAppend('img', container, { src: this.contributor.avatar_url, height: 100, width: 100, class: 'img' }); + Util.createAndAppend('p', container, { text: this.contributor.login, class: 'contribsname' }); } } diff --git a/homework-classes/Repository.js b/homework-classes/Repository.js index 86b72d71d..ece6b90fd 100644 --- a/homework-classes/Repository.js +++ b/homework-classes/Repository.js @@ -13,10 +13,13 @@ class Repository { * @param {HTMLElement} container The container element in which to render the repository. */ render(container) { - // TODO: replace the next line with your code. - Util.createAndAppend('pre', container, { text: JSON.stringify(this.repository, null, 2) }); + App.clearContainer(container); + Util.createAndAppend('h3', container, { text: 'Repository Information:' }); + Util.createAndAppend('p', container, { text: 'Name: ' + this.name() }); + Util.createAndAppend('p', container, { text: 'Forks: ' + this.repository.forks }); + Util.createAndAppend('p', container, { text: 'Created on: ' + this.repository.created_at }); + Util.createAndAppend('p', container, { text: 'Description: ' + this.repository.description }); } - /** * Returns an array of contributors as a promise */ diff --git a/homework-classes/index.html b/homework-classes/index.html index 2d1fc8fa7..a37f61f8b 100644 --- a/homework-classes/index.html +++ b/homework-classes/index.html @@ -1,27 +1,26 @@ - - - - - - - - - - HYF-GITHUB - - - - -
- - - - - - + + + + + + + + + + HYF-GITHUB + + + + + +
+ + + + + + + \ No newline at end of file diff --git a/homework-classes/style.css b/homework-classes/style.css index a8985a8a5..0300689cf 100644 --- a/homework-classes/style.css +++ b/homework-classes/style.css @@ -1,3 +1,37 @@ .alert-error { color: red; +} + +body { + background-color: rgb(194, 238, 240); + display: flex; + flex-direction: row; + align-items: flex-start; + justify-content: center; +} + +#root { + display: flex; + flex-direction: row; + align-items: flex-start; + justify-content: center; +} + +p { + + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; + +} + +.img { + padding: 16px; + margin-right: 25px; + flex: row; + background-color: rgb(170, 218, 240); + display: flex; + flex-direction: column; + align-items: flex-start; } \ No newline at end of file