From b31ceb0e004b0eb1ccd74e8b647f5f802bc132e0 Mon Sep 17 00:00:00 2001 From: chichiglacierz Date: Sun, 25 Aug 2019 18:42:02 +0200 Subject: [PATCH 1/5] 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/5] 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 d042bfd7042eac0718b6bfd60e8c277ff5ffac90 Mon Sep 17 00:00:00 2001 From: chichiglacierz Date: Sat, 31 Aug 2019 16:00:05 +0200 Subject: [PATCH 3/5] modifying index.js file --- homework/index.html | 30 +----------------------------- homework/index.js | 19 ++++++++----------- 2 files changed, 9 insertions(+), 40 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 fef395ae0..37d5cf270 100644 --- a/homework/index.js +++ b/homework/index.js @@ -17,9 +17,6 @@ } 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 => { @@ -40,7 +37,6 @@ 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' }); @@ -50,14 +46,14 @@ data.forEach(repo => { const name = repo.name; createAndAppend('option', select, { text: name }); - //console.log(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 + const repo = data.filter(r => r.name == selectedRepo)[0]; console.log(repo.name); repoInfo.innerHTML = repo.name; contribs.innerHTML = repo.name; @@ -67,14 +63,12 @@ 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) { @@ -83,7 +77,10 @@ } contribData.forEach(contributor => { createAndAppend('div', contribs, { text: contributor.login }); - //createAndAppend('a', contribs, { href: contributor.html.url, setAttribute: 'href' }); + createAndAppend('a', contribs, { + text: contributor.login, + href: contributor.html_url, + }); createAndAppend('img', contribs, { src: contributor.avatar_url, height: 150, From 939b992e74a6bf8361f1d379e42e4100b182191b Mon Sep 17 00:00:00 2001 From: chichiglacierz Date: Sat, 31 Aug 2019 16:51:01 +0200 Subject: [PATCH 4/5] Week1 changes --- homework/index.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/homework/index.js b/homework/index.js index 37d5cf270..3afae8b08 100644 --- a/homework/index.js +++ b/homework/index.js @@ -45,12 +45,15 @@ data.forEach(repo => { const name = repo.name; + data.sort((a, b) => a.name.localeCompare(b.name)); createAndAppend('option', select, { text: name }); console.log(name); }); + const contributorContainer = createAndAppend('div', root, { class: 'contributor-info' }); 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]; From fa369fe709bbe9d96e60096a969e52f145d061b2 Mon Sep 17 00:00:00 2001 From: chichiglacierz Date: Sat, 31 Aug 2019 16:52:55 +0200 Subject: [PATCH 5/5] removing the created container variable --- homework/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/homework/index.js b/homework/index.js index 3afae8b08..e4b50acb5 100644 --- a/homework/index.js +++ b/homework/index.js @@ -50,7 +50,6 @@ console.log(name); }); - const contributorContainer = createAndAppend('div', root, { class: 'contributor-info' }); const repoInfo = createAndAppend('div', root, { class: 'left-div' }); const contribs = createAndAppend('div', root, { class: 'right-div' });