From b31ceb0e004b0eb1ccd74e8b647f5f802bc132e0 Mon Sep 17 00:00:00 2001 From: chichiglacierz Date: Sun, 25 Aug 2019 18:42:02 +0200 Subject: [PATCH 1/8] adding some homework files --- homework/index.html | 32 ++++++++++- homework/index.js | 134 +++++++++++++++++++++++++++++++++++++++++--- homework/style.css | 16 +++++- 3 files changed, 172 insertions(+), 10 deletions(-) diff --git a/homework/index.html b/homework/index.html index cc4b45bcb..9b1eec25a 100644 --- a/homework/index.html +++ b/homework/index.html @@ -18,7 +18,37 @@ -

+ +

+ + + diff --git a/homework/index.js b/homework/index.js index d8a04f271..c45d69678 100644 --- a/homework/index.js +++ b/homework/index.js @@ -1,5 +1,4 @@ 'use strict'; - { function fetchJSON(url, cb) { const xhr = new XMLHttpRequest(); @@ -15,7 +14,6 @@ xhr.onerror = () => cb(new Error('Network request failed')); xhr.send(); } - function createAndAppend(name, parent, options = {}) { const elem = document.createElement(name); parent.appendChild(elem); @@ -29,19 +27,141 @@ }); return elem; } - function main(url) { fetchJSON(url, (err, data) => { const root = document.getElementById('root'); if (err) { createAndAppend('div', root, { text: err.message, class: 'alert-error' }); } else { - createAndAppend('pre', root, { text: JSON.stringify(data, null, 2) }); + //createAndAppend('pre', root, { text: JSON.stringify(data, null, 2) }); + const select = createAndAppend('select', root); + 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('Description: ', 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) => { + if (err) { + createAndAppend('div', root, { text: err.message, class: 'alert-error' }); + } else{ + contribData.forEach(contributor => { + createAndAppend('div', contribs, { text: contributor.login }); + }); + }; + }); } }); } + const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; + window.onload = () => main(HYF_REPOS_URL); +} - const REPOS_URL = 'https://api.github.com/orgs/foocoding/repos?per_page=100'; +// 'use strict'; - window.onload = () => main(REPOS_URL); -} +// { +// function fetchJSON(url, cb) { +// const xhr = new XMLHttpRequest(); +// xhr.open('GET', url); +// xhr.responseType = 'json'; +// xhr.onload = () => { +// if (xhr.status < 400) { +// cb(null, xhr.response); +// } else { +// cb(new Error(`Network error: ${xhr.status} - ${xhr.statusText}`)); +// } +// }; +// xhr.onerror = () => cb(new Error('Network request failed')); +// xhr.send(); +// } + +// function createAndAppend(name, parent, options = {}) { +// // name: the elem/thing that we want to create. +// //parent: where we shall append the child +// //options. what we want to change/add like attributes,class,text,id +// 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; +// } + +// 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); +// createAndAppend('option', select, { text: 'Choose your favorite repo below:' }); +// 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]; // ask about this part here +// 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('Description: ', 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 }); +// }); +// }); +// }); +// } +// }); +// } +// } + +// const REPOS_URL = 'https://api.github.com/orgs/foocoding/repos?per_page=100'; + +// window.onload = () => main(REPOS_URL); diff --git a/homework/style.css b/homework/style.css index a8985a8a5..3701fcd84 100644 --- a/homework/style.css +++ b/homework/style.css @@ -1,3 +1,15 @@ .alert-error { - color: red; -} \ No newline at end of file + color: red; +} +header { + width: 800px; + height: 70px; + background-color: purple; + text-emphasis-color: white; + text-align: left; +} +.info-container { + text-align: left; + width: 40; + height: 30; +} From 3c9d14c9a765b25998d457ab8aec47cc772a386f Mon Sep 17 00:00:00 2001 From: chichiglacierz Date: Sat, 31 Aug 2019 03:16:22 +0200 Subject: [PATCH 2/8] added week1 js and css --- homework/index.js | 135 ++++++++++++--------------------------------- homework/style.css | 49 ++++++++++++++++ 2 files changed, 84 insertions(+), 100 deletions(-) diff --git a/homework/index.js b/homework/index.js index c45d69678..fef395ae0 100644 --- a/homework/index.js +++ b/homework/index.js @@ -1,4 +1,5 @@ 'use strict'; + { function fetchJSON(url, cb) { const xhr = new XMLHttpRequest(); @@ -14,7 +15,11 @@ xhr.onerror = () => cb(new Error('Network request failed')); xhr.send(); } + function createAndAppend(name, parent, options = {}) { + // name: the elem/thing that we want to create. + //parent: where we shall append the child + //options. what we want to change/add like attributes,class,text,id const elem = document.createElement(name); parent.appendChild(elem); Object.keys(options).forEach(key => { @@ -27,27 +32,36 @@ }); return elem; } + function main(url) { fetchJSON(url, (err, data) => { const root = document.getElementById('root'); + if (err) { createAndAppend('div', root, { text: err.message, class: 'alert-error' }); } else { //createAndAppend('pre', root, { text: JSON.stringify(data, null, 2) }); - const select = createAndAppend('select', root); - createAndAppend('option', select, { text: 'Choose your favorite repo' }); + const header = createAndAppend('header', root, { class: 'header' }); + const h1 = createAndAppend('h1', header, { text: 'FooCoding Repos', class: 'h1' }); + + const select = createAndAppend('select', root, { class: 'select' }); + createAndAppend('option', select, { text: 'Choose your favorite repo below:' }); + data.forEach(repo => { const name = repo.name; createAndAppend('option', select, { text: name }); + //console.log(name); }); - const repoInfo = createAndAppend('div', root); - const contribs = createAndAppend('div', root); + + const repoInfo = createAndAppend('div', root, { class: 'left-div' }); + const contribs = createAndAppend('div', root, { class: 'right-div' }); 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 repo = data.filter(r => r.name == selectedRepo)[0]; // ask about this part here + console.log(repo.name); + repoInfo.innerHTML = repo.name; + contribs.innerHTML = repo.name; + const addInfo = (label, value) => { const container = createAndAppend('div', repoInfo); createAndAppend('span', container, { text: label }); @@ -65,103 +79,24 @@ fetchJSON(contribsUrl, (err, contribData) => { if (err) { createAndAppend('div', root, { text: err.message, class: 'alert-error' }); - } else{ + } else { + } contribData.forEach(contributor => { createAndAppend('div', contribs, { text: contributor.login }); + //createAndAppend('a', contribs, { href: contributor.html.url, setAttribute: 'href' }); + createAndAppend('img', contribs, { + src: contributor.avatar_url, + height: 150, + width: 150, + id: 'img', + }); }); - }; + }); }); } }); } - const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; - window.onload = () => main(HYF_REPOS_URL); -} + const REPOS_URL = 'https://api.github.com/orgs/foocoding/repos?per_page=100'; -// 'use strict'; - -// { -// function fetchJSON(url, cb) { -// const xhr = new XMLHttpRequest(); -// xhr.open('GET', url); -// xhr.responseType = 'json'; -// xhr.onload = () => { -// if (xhr.status < 400) { -// cb(null, xhr.response); -// } else { -// cb(new Error(`Network error: ${xhr.status} - ${xhr.statusText}`)); -// } -// }; -// xhr.onerror = () => cb(new Error('Network request failed')); -// xhr.send(); -// } - -// function createAndAppend(name, parent, options = {}) { -// // name: the elem/thing that we want to create. -// //parent: where we shall append the child -// //options. what we want to change/add like attributes,class,text,id -// 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; -// } - -// 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); -// createAndAppend('option', select, { text: 'Choose your favorite repo below:' }); -// 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]; // ask about this part here -// 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('Description: ', 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 }); -// }); -// }); -// }); -// } -// }); -// } -// } - -// const REPOS_URL = 'https://api.github.com/orgs/foocoding/repos?per_page=100'; - -// window.onload = () => main(REPOS_URL); + window.onload = () => main(REPOS_URL); +} diff --git a/homework/style.css b/homework/style.css index 3701fcd84..d0bd96673 100644 --- a/homework/style.css +++ b/homework/style.css @@ -1,6 +1,55 @@ +#root { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; +} +@media screen and (max-width: 768px) { + .h1.h1 { + width: 100%; + } + .right-div { + width: 100%; + } + .left-div { + width: 100%; + } +} .alert-error { color: red; } +.h1 { + text-align: center; +} +.container { + display: flex; + flex-direction: row; + align-items: flex-start; + margin: 10px; +} + +.right-div { + color: green; + display: flex; + flex-direction: row; + justify-content: space-between; + flex-wrap: wrap; + margin: 10px; + flex-grow: 1; + height: 200px; + width: 200px; +} + +.left-div { + color: brown; + display: flex; + flex-wrap: wrap; + flex-direction: column; + flex-grow: 1; + + align-items: right; + margin: 10px; +} header { width: 800px; height: 70px; From 8a09787120be1dae85340abc078a6d72acbf81a7 Mon Sep 17 00:00:00 2001 From: chichiglacierz Date: Sat, 31 Aug 2019 15:37:43 +0200 Subject: [PATCH 3/8] week2 in progress --- homework/index.js | 31 ++++++++++++++++++------------- 1 file changed, 18 insertions(+), 13 deletions(-) diff --git a/homework/index.js b/homework/index.js index fef395ae0..7b2acfd3d 100644 --- a/homework/index.js +++ b/homework/index.js @@ -1,20 +1,25 @@ 'use strict'; { - function fetchJSON(url, cb) { - const xhr = new XMLHttpRequest(); - xhr.open('GET', url); - xhr.responseType = 'json'; - xhr.onload = () => { - if (xhr.status < 400) { - cb(null, xhr.response); - } else { - cb(new Error(`Network error: ${xhr.status} - ${xhr.statusText}`)); - } - }; - xhr.onerror = () => cb(new Error('Network request failed')); - xhr.send(); + function fetchJSON(url) { + const p = new Promise((resolve, reject) => { + const xhr = new XMLHttpRequest(); + xhr.open('GET', url); + xhr.responseType = 'json'; + xhr.onreadystatechange = () => { + if (xhr.readyState === 4) { + if (xhr.status < 400) { + resolve(xhr.response); + } else { + reject(new Error(xhr.statusText)); + } + } + console.log(); + }; + xhr.send(); + }); } + const REPOS_URL = 'https://api.github.com/orgs/foocoding/repos?per_page=100'; function createAndAppend(name, parent, options = {}) { // name: the elem/thing that we want to create. From 9e5e42baaf62fa5e58a7a57c17fa49ccab213083 Mon Sep 17 00:00:00 2001 From: chichiglacierz Date: Sat, 31 Aug 2019 18:23:16 +0200 Subject: [PATCH 4/8] working on index.js file --- homework/index.html | 30 +------- homework/index.js | 172 ++++++++++++++++++++++++++------------------ 2 files changed, 103 insertions(+), 99 deletions(-) diff --git a/homework/index.html b/homework/index.html index 9b1eec25a..858ec2287 100644 --- a/homework/index.html +++ b/homework/index.html @@ -19,36 +19,8 @@

- -

- - - diff --git a/homework/index.js b/homework/index.js index 7b2acfd3d..be80119dc 100644 --- a/homework/index.js +++ b/homework/index.js @@ -6,25 +6,21 @@ const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.responseType = 'json'; - xhr.onreadystatechange = () => { - if (xhr.readyState === 4) { - if (xhr.status < 400) { - resolve(xhr.response); - } else { - reject(new Error(xhr.statusText)); - } + xhr.onload = () => { + if (xhr.status < 400) { + resolve(xhr.response); + } else { + reject(new Error(xhr.statusText)); } - console.log(); }; + xhr.onerror = () => reject(new Error('Network Request failed')); + console.log(); xhr.send(); }); } const REPOS_URL = 'https://api.github.com/orgs/foocoding/repos?per_page=100'; function createAndAppend(name, parent, options = {}) { - // name: the elem/thing that we want to create. - //parent: where we shall append the child - //options. what we want to change/add like attributes,class,text,id const elem = document.createElement(name); parent.appendChild(elem); Object.keys(options).forEach(key => { @@ -38,70 +34,106 @@ return elem; } - function main(url) { - fetchJSON(url, (err, data) => { - const root = document.getElementById('root'); + function fetchContributors(contributors, contribContainer) { + createAndAppend('p', contribContainer, { text: 'Contributors', id: 'contributors' }); + contributors.forEach(contributor => { + const contribDiv = createAndAppend('div', contribContainer, { class: 'contrib-info' }); + createAndAppend('img', contribDiv, { + src: contributor.avatar_url, + text: contributor.login, + height: 150, + width: 150, + class: 'image', + }); + createAndAppend('a', contribDiv, { + text: contributor.login, + href: contributor.html_url, + target: 'blank', + class: 'contrib-link', + }); + createAndAppend('p', contribDiv, { + text: contributor.contributions, + class: 'contributor-badge', + }); + }); + } + + function fetchAndAddContribData(repoInfo, repoContainer, contribContainer, root) { + repoContainer.innerHTML = repo.name; + contribContainer.innerHTML = repo.name; + + createAndAppend('span', repoContainer, { text: 'Repository', class: 'repository' }); + createAndAppend('a', repoContainer, { + text: '${repoInfo.name}', + href: repoInfo.html_url, + target: '_blank', + class: 'repo-link', + }); + + createAndAppend('p', repoInfo, { + text: 'Description: ${repoInfo.description}', + class: 'repo-child', + }); - if (err) { + createAndAppend('p', repoInfo, { + text: 'Fork: ${repoInfo.forks}', + class: 'repo-child', + }); + + createAndAppend('p', repoInfo, { + text: 'Updated: ${Updated: ${updatedAt.toLocaleString()}', + class: 'repo-child', + }); + + fetchJSON(repoInfo.contributors_url) + .then(contributors => { + addContributors(contributors, contribContainer); + }) + .catch(err => { createAndAppend('div', root, { text: err.message, class: 'alert-error' }); - } 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', root, { class: 'select' }); - createAndAppend('option', select, { text: 'Choose your favorite repo below:' }); - - data.forEach(repo => { - const name = repo.name; - createAndAppend('option', select, { text: name }); - //console.log(name); - }); - - const repoInfo = createAndAppend('div', root, { class: 'left-div' }); - const contribs = createAndAppend('div', root, { class: 'right-div' }); - select.addEventListener('change', evt => { - const selectedRepo = evt.target.value; - const repo = data.filter(r => r.name == selectedRepo)[0]; // ask about this part here - console.log(repo.name); - repoInfo.innerHTML = repo.name; - contribs.innerHTML = repo.name; - - const addInfo = (label, value) => { - const container = createAndAppend('div', repoInfo); - createAndAppend('span', container, { text: label }); - createAndAppend('span', container, { text: value }); - }; - addInfo('Name: ', repo.name); - addInfo('Description: ', 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) => { - if (err) { - createAndAppend('div', root, { text: err.message, class: 'alert-error' }); - } else { - } - contribData.forEach(contributor => { - createAndAppend('div', contribs, { text: contributor.login }); - //createAndAppend('a', contribs, { href: contributor.html.url, setAttribute: 'href' }); - createAndAppend('img', contribs, { - src: contributor.avatar_url, - height: 150, - width: 150, - id: 'img', - }); - }); - }); - }); - } + }); + + + + + + function populateSelect(root, repos) { + const header = createAndAppend('header', root, { class: 'header' }); + createAndAppend('p', header, { text: 'HYF Repositories', id: 'p' }); + const select = createAndAppend('select', header, { id: 'select' }); + + repos.sort((a, b) => a.name.localeCompare(b.name)); + + repos.forEach((repo, index) => { + createAndAppend('option', select, { text: repo.name, value: index }); + }); + //console.log(populateSelect); + + const mainContainer = createAndAppend('div', root, { id: 'main' }); + const repoContainer = createAndAppend('div', mainContainer, { id: 'repo-container' }); + const contribContainer = createAndAppend('div', mainContainer, { + id: 'contributor-container', + }); + + + + } + } + + + const header = createAndAppend('header', root, { class: 'header' }); + const h1 = createAndAppend('h1', header, { text: 'FooCoding Repos', class: 'h1' }); + + const select = createAndAppend('select', root, { class: 'select' }); + createAndAppend('option', select, { text: 'Choose your favorite repo below:' }); + + data.forEach(repo => { + const name = repo.name; + createAndAppend('option', select, { text: name }); }); } const REPOS_URL = 'https://api.github.com/orgs/foocoding/repos?per_page=100'; window.onload = () => main(REPOS_URL); + } From e2bb3f37f3e6adabaa37a21e1b340dade43ef6aa Mon Sep 17 00:00:00 2001 From: chichiglacierz Date: Sat, 31 Aug 2019 19:07:00 +0200 Subject: [PATCH 5/8] finished Week2 --- homework/index.js | 129 ++++++++++++++++++++++------------------------ 1 file changed, 62 insertions(+), 67 deletions(-) diff --git a/homework/index.js b/homework/index.js index be80119dc..1be88d6fa 100644 --- a/homework/index.js +++ b/homework/index.js @@ -2,7 +2,7 @@ { function fetchJSON(url) { - const p = new Promise((resolve, reject) => { + return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.responseType = 'json'; @@ -10,15 +10,13 @@ if (xhr.status < 400) { resolve(xhr.response); } else { - reject(new Error(xhr.statusText)); + reject(new Error(`Network error: ${xhr.status} - ${xhr.statusText}`)); } }; - xhr.onerror = () => reject(new Error('Network Request failed')); - console.log(); + xhr.onerror = () => reject(new Error('Network request failed')); xhr.send(); }); } - const REPOS_URL = 'https://api.github.com/orgs/foocoding/repos?per_page=100'; function createAndAppend(name, parent, options = {}) { const elem = document.createElement(name); @@ -34,106 +32,103 @@ return elem; } - function fetchContributors(contributors, contribContainer) { - createAndAppend('p', contribContainer, { text: 'Contributors', id: 'contributors' }); + function renderContributors(contributors, contributorsContainer) { + createAndAppend('p', contributorsContainer, { text: 'Contributors', id: 'contributors' }); contributors.forEach(contributor => { - const contribDiv = createAndAppend('div', contribContainer, { class: 'contrib-info' }); - createAndAppend('img', contribDiv, { + const contributorsDetailsDiv = createAndAppend('div', contributorsContainer, { + class: 'contributor-details', + }); + createAndAppend('img', contributorsDetailsDiv, { src: contributor.avatar_url, - text: contributor.login, - height: 150, - width: 150, + alt: contributor.login, class: 'image', }); - createAndAppend('a', contribDiv, { + createAndAppend('a', contributorsDetailsDiv, { text: contributor.login, href: contributor.html_url, - target: 'blank', - class: 'contrib-link', + target: '_blank', + class: 'contributor-data', }); - createAndAppend('p', contribDiv, { + createAndAppend('p', contributorsDetailsDiv, { text: contributor.contributions, class: 'contributor-badge', }); }); } - function fetchAndAddContribData(repoInfo, repoContainer, contribContainer, root) { - repoContainer.innerHTML = repo.name; - contribContainer.innerHTML = repo.name; + function fetchAndRenderData(selectedRepo, repoContainer, contributorsContainer, root) { + repoContainer.innerHTML = ''; + contributorsContainer.innerHTML = ''; - createAndAppend('span', repoContainer, { text: 'Repository', class: 'repository' }); + const updatedAt = new Date(selectedRepo.updated_at); + createAndAppend('span', repoContainer, { text: 'Repository: ', class: 'repo-child' }); createAndAppend('a', repoContainer, { - text: '${repoInfo.name}', - href: repoInfo.html_url, + text: `${selectedRepo.name}`, + href: selectedRepo.html_url, target: '_blank', - class: 'repo-link', + class: 'repo-child right-cell', }); - - createAndAppend('p', repoInfo, { - text: 'Description: ${repoInfo.description}', + createAndAppend('p', repoContainer, { + text: `Description: ${selectedRepo.description}`, class: 'repo-child', }); - - createAndAppend('p', repoInfo, { - text: 'Fork: ${repoInfo.forks}', + createAndAppend('p', repoContainer, { + text: `Fork: ${selectedRepo.forks}`, class: 'repo-child', }); - - createAndAppend('p', repoInfo, { - text: 'Updated: ${Updated: ${updatedAt.toLocaleString()}', + createAndAppend('p', repoContainer, { + text: `Updated: ${updatedAt.toLocaleString()}`, class: 'repo-child', }); - fetchJSON(repoInfo.contributors_url) + fetchJSON(selectedRepo.contributors_url) .then(contributors => { - addContributors(contributors, contribContainer); + renderContributors(contributors, contributorsContainer); }) .catch(err => { createAndAppend('div', root, { text: err.message, class: 'alert-error' }); }); - - - + } - - function populateSelect(root, repos) { - const header = createAndAppend('header', root, { class: 'header' }); - createAndAppend('p', header, { text: 'HYF Repositories', id: 'p' }); - const select = createAndAppend('select', header, { id: 'select' }); + function dropDown(root, repos) { + const header = createAndAppend('div', root, { id: 'header' }); + createAndAppend('p', header, { text: 'HYF Repositories', class: 'header' }); + const select = createAndAppend('select', header, { id: 'select' }); - repos.sort((a, b) => a.name.localeCompare(b.name)); + repos.sort((a, b) => a.name.localeCompare(b.name)); - repos.forEach((repo, index) => { - createAndAppend('option', select, { text: repo.name, value: index }); - }); - //console.log(populateSelect); - - const mainContainer = createAndAppend('div', root, { id: 'main' }); - const repoContainer = createAndAppend('div', mainContainer, { id: 'repo-container' }); - const contribContainer = createAndAppend('div', mainContainer, { - id: 'contributor-container', + repos.forEach((repo, index) => { + createAndAppend('option', select, { + text: repo.name, + value: index, }); + }); - + const mainContainer = createAndAppend('div', root, { id: 'main' }); + const repoContainer = createAndAppend('div', mainContainer, { id: 'repo-container' }); + const contributorsContainer = createAndAppend('div', mainContainer, { + id: 'contributor-container', + }); - } + select.addEventListener('change', () => { + const selectedRepo = repos[select.value]; + fetchAndRenderData(selectedRepo, repoContainer, contributorsContainer, root); + }); + fetchAndRenderData(repos[0], repoContainer, contributorsContainer, root); } - - const header = createAndAppend('header', root, { class: 'header' }); - const h1 = createAndAppend('h1', header, { text: 'FooCoding Repos', class: 'h1' }); - - const select = createAndAppend('select', root, { class: 'select' }); - createAndAppend('option', select, { text: 'Choose your favorite repo below:' }); - - data.forEach(repo => { - const name = repo.name; - createAndAppend('option', select, { text: name }); - }); + function main(url) { + const root = document.getElementById('root'); + fetchJSON(url) + .then(repos => { + dropDown(root, repos); + }) + .catch(err => { + createAndAppend('div', root, { text: err.message, class: 'alert-error' }); + }); } - const REPOS_URL = 'https://api.github.com/orgs/foocoding/repos?per_page=100'; - window.onload = () => main(REPOS_URL); + const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; + window.onload = () => main(HYF_REPOS_URL); } From 73fb9ee5154198550e5c7d7c7e74a2708a993365 Mon Sep 17 00:00:00 2001 From: chichiglacierz Date: Tue, 3 Sep 2019 00:01:18 +0200 Subject: [PATCH 6/8] modified css and app.js --- homework/App.js | 62 ++++++++++++++++++++++++++++++++++++++----------- 1 file changed, 48 insertions(+), 14 deletions(-) diff --git a/homework/App.js b/homework/App.js index 5f81a47a1..814b272ce 100644 --- a/homework/App.js +++ b/homework/App.js @@ -12,23 +12,56 @@ 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 + */ const root = document.getElementById('root'); - Util.createAndAppend('h1', root, { text: 'It works!' }); // TODO: replace with your own code + /** Util.createAndAppend('h1', root, { text: 'It works!' }); // TODO: replace with your own code*/ try { const repos = await Util.fetchJSON(url); + repos.sort((a, b) => a.name.localeCompare(b.name)); this.repos = repos.map(repo => new Repository(repo)); // TODO: add your own code here + this.dropDown(root); } catch (error) { this.renderError(error); } } + dropDown(root) { + const header = Util.createAndAppend('header', root, { id: 'header' }); + Util.createAndAppend('p', header, { text: 'HYF Repositories', class: 'header' }); + const select = Util.createAndAppend('select', header, { id: 'repo-select' }); + + this.repos.forEach((repo, index) => { + Util.createAndAppend('option', select, { + text: repo.repository.name, + value: index, + }); + }); + + const mainContainer = Util.createAndAppend('div', root, { id: 'main' }); + const repoContainer = Util.createAndAppend('div', mainContainer, { + class: 'repo-container white-frame', + }); + + const contributorsContainer = Util.createAndAppend('div', mainContainer, { + class: 'contributor-container white-frame', + }); + + select.addEventListener('change', () => { + App.clearContainer(repoContainer); + this.repos[select.value].render(repoContainer); + this.fetchContributorsAndRender(select.value, contributorsContainer); + }); + this.repos[0].render(repoContainer); + this.fetchContributorsAndRender(0, contributorsContainer); + } + /** * Removes all child elements from a container element * @param {*} container Container element to clear @@ -44,20 +77,19 @@ class App { * repo and its contributors as HTML elements in the DOM. * @param {number} index The array index of the repository. */ - async fetchContributorsAndRender(index) { + async fetchContributorsAndRender(index, contributorsContainer) { try { + App.clearContainer(contributorsContainer); const repo = this.repos[index]; const contributors = await repo.fetchContributors(); - const container = document.getElementById('container'); - App.clearContainer(container); - - const leftDiv = Util.createAndAppend('div', container); - const rightDiv = Util.createAndAppend('div', container); - - const contributorList = Util.createAndAppend('ul', rightDiv); - - repo.render(leftDiv); + Util.createAndAppend('p', contributorsContainer, { + text: 'Contributors', + class: 'contributor-header', + }); + const contributorList = Util.createAndAppend('ul', contributorsContainer, { + class: 'contributor-list', + }); contributors .map(contributor => new Contributor(contributor)) @@ -72,6 +104,8 @@ class App { * @param {Error} error An Error object describing the error. */ renderError(error) { + const root = document.getElementById('root'); + Util.createAndAppend('div', root, { text: error, class: 'alert-error' }); console.log(error); // TODO: replace with your own code } } From 29b269aaf0e41acc56f10c9231b22155cb39830f Mon Sep 17 00:00:00 2001 From: chichiglacierz Date: Tue, 3 Sep 2019 00:05:22 +0200 Subject: [PATCH 7/8] modified contributor.js --- homework/Contributor.js | 24 ++++++++++++++++++++++-- homework/style.css | 4 ++-- 2 files changed, 24 insertions(+), 4 deletions(-) diff --git a/homework/Contributor.js b/homework/Contributor.js index 0bfd5a15e..9050218ae 100644 --- a/homework/Contributor.js +++ b/homework/Contributor.js @@ -13,7 +13,27 @@ class Contributor { * @param {HTMLElement} container The container element in which to render the contributor. */ render(container) { - // TODO: replace the next line with your code. - Util.createAndAppend('pre', container, JSON.stringify(this.contributor, null, 2)); + /** TODO: replace the next line with your code. + Util.createAndAppend('pre', container, JSON.stringify(this.contributor, null, 2));*/ + const link = Util.createAndAppend('a', container, { + href: this.contributor.html_url, + target: '_blank', + class: 'contributor-item', + }); + + Util.createAndAppend('img', link, { + src: this.contributor.avatar_url, + alt: this.contributor.login, + class: 'image', + }); + + const contributorDetails = Util.createAndAppend('div', link, { + class: 'contributor-data', + }); + Util.createAndAppend('div', contributorDetails, { text: this.contributor.login }); + Util.createAndAppend('div', contributorDetails, { + text: this.contributor.contributions, + class: 'contributor-badge', + }); } } diff --git a/homework/style.css b/homework/style.css index d0bd96673..aa5c63d13 100644 --- a/homework/style.css +++ b/homework/style.css @@ -4,8 +4,8 @@ align-items: flex-start; justify-content: center; } -@media screen and (max-width: 768px) { - .h1.h1 { +@media (max-width: 767px) { + body { width: 100%; } .right-div { From b0de06797e025ee63eccc96c7bae6f91a9615da0 Mon Sep 17 00:00:00 2001 From: chichiglacierz Date: Tue, 3 Sep 2019 00:50:53 +0200 Subject: [PATCH 8/8] Week3 done --- homework/Repository.js | 40 +++++++++++++++++++-- homework/style.css | 80 +++++++++++++++++++++++++++++++++++++++++- 2 files changed, 117 insertions(+), 3 deletions(-) diff --git a/homework/Repository.js b/homework/Repository.js index 267960a5a..3026873f0 100644 --- a/homework/Repository.js +++ b/homework/Repository.js @@ -13,8 +13,44 @@ 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, JSON.stringify(this.repository, null, 2)); + /* TODO: replace the next line with your code. + Util.createAndAppend('pre', container, JSON.stringify(this.repository, null, 2));*/ + const repo = Object.assign({}, this.repository, { + updated_at: new Date(this.repository.updated_at).toLocaleString(), + }); + + const repoTitles = { description: 'Description: ', forks: 'Forks: ', updated_at: 'Updated: ' }; + + const table = Util.createAndAppend('table', container, { class: 'table' }); + const tbody = Util.createAndAppend('tBody', table); + + const firstRow = Util.createAndAppend('tr', tbody); + let leftCell = Util.createAndAppend('td', firstRow); + let rightCell = Util.createAndAppend('td', firstRow); + + Util.createAndAppend('span', leftCell, { text: 'Repository: ', class: 'repo-child left-cell' }); + Util.createAndAppend('a', rightCell, { + text: this.repository.name, + href: this.repository.html_url, + target: '_blank', + class: 'repo-child right-cell', + }); + + Object.keys(repoTitles).forEach(key => { + const tr = Util.createAndAppend('tr', tbody); + leftCell = Util.createAndAppend('td', tr); + rightCell = Util.createAndAppend('td', tr); + + Util.createAndAppend('span', leftCell, { + text: repoTitles[key], + class: 'repo-child left-cell', + }); + + Util.createAndAppend('span', rightCell, { + text: repo[key], + class: 'repo-child right-cell', + }); + }); } /** diff --git a/homework/style.css b/homework/style.css index aa5c63d13..8642a772e 100644 --- a/homework/style.css +++ b/homework/style.css @@ -4,9 +4,22 @@ align-items: flex-start; justify-content: center; } +#main { + display: flex; + flex-direction: row; + align-items: flex-start; +} @media (max-width: 767px) { body { - width: 100%; + width: 768px; + } + #main { + flex-direction: column; + align-items: stretch; + /* margin-left: auto; + margin-right: auto; + margin-top: 0px; + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;*/ } .right-div { width: 100%; @@ -17,6 +30,9 @@ } .alert-error { color: red; + text-align: center; + font-weight: bold; + font-size: 30px; } .h1 { text-align: center; @@ -62,3 +78,65 @@ header { width: 40; height: 30; } +table { + table-layout: fixed; + color: rgb(0, 0, 0, 81%); +} + +table td { + vertical-align: top; +} +.repo-container, +.contributor-container { + background: white; + flex: 1; + margin-top: 15px; +} + +.repo-container { + margin-right: 5px; + padding: 16px; +} + +.left-cell { + font-weight: bold; + margin-right: 15px; +} +.repo-child { + font-size: 16px; +} + +.contributor-header { + font-size: 1rem; + padding: 8px 16px 4px 5px; + color: rgb(0, 0, 0, 54%); + margin-left: 15px; +} +.contributor-list { + list-style-type: none; + padding: 0; + margin: 0; +} +.image { + width: 50px; + height: 50px; + border-radius: 3px; + margin-right: 18px; + margin-bottom: 20px; +} +.contributor-badge { + font-size: 12px; + background-color: gray; + font-size: 12px; + padding: 2px 8px; + line-height: 1rem; + color: white; + border-radius: 4px; +} +.contributor-data { + flex: 1; + display: flex; + flex-direction: row; + justify-content: space-between; + align-content: center; +}