From b31ceb0e004b0eb1ccd74e8b647f5f802bc132e0 Mon Sep 17 00:00:00 2001 From: chichiglacierz Date: Sun, 25 Aug 2019 18:42:02 +0200 Subject: [PATCH 1/4] 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/4] 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/4] 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/4] 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); + }