From 9002472557fd3daf17a7b5b328fb1b6f62713354 Mon Sep 17 00:00:00 2001 From: Suthatta Lindstrii Date: Wed, 21 Aug 2019 22:59:04 +0200 Subject: [PATCH 1/4] added homework --- homework/index.html | 41 +++++----- homework/index.js | 123 +++++++++++++++++++++++++++++- homework/style.css | 180 +++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 321 insertions(+), 23 deletions(-) diff --git a/homework/index.html b/homework/index.html index 9c8f80c1a..26dc4e6e2 100644 --- a/homework/index.html +++ b/homework/index.html @@ -1,23 +1,24 @@ + + + + + + + + + + HYF-GITHUB + + + - - - - - - - - - - HYF-GITHUB - - - - - -
- - - - \ No newline at end of file + +
+ + + diff --git a/homework/index.js b/homework/index.js index d3a97645e..d91f6db49 100644 --- a/homework/index.js +++ b/homework/index.js @@ -29,14 +29,135 @@ }); return elem; } + //header + function createAnRepoList(array) { + createAndAppend('header', root, { class: 'header' }); + let header = document.getElementsByClassName('header')[0]; + createAndAppend('p', header, { text: 'HYF Repositories' }); + createAndAppend('select', header, { class: 'repo-selector', id: 'RepoList' }); + let listRoot = document.getElementById('RepoList'); + for (let i = 0; i < array.length; i++) { + createAndAppend('option', listRoot, { text: array[i].name, value: i }); + } + } + + function selectInfo(arr) { + const root = document.getElementById('root'); + createAndAppend('div', root, { class: 'header', id: 'header' }); + let header = document.getElementsByClassName('header')[0]; + createAndAppend('h1', header, { text: 'HYF Repositories' }); + createAndAppend('select', header, { class: 'repo-selector', id: 'RepoList' }); + const listRoot = document.getElementById('RepoList'); + + for (let i = 0; i < arr.length; i++) { + createAndAppend('option', listRoot, { text: arr[i].name, value: i }); + } + } + //left + function createRepo(element) { + const container = document.querySelector('#container'); + //creating table for repository overwiew + let table = createAndAppend('table', container, { + id: 'RepositoryOverview', + class: 'leftDiv whiteFrame', + }); + let repoRow = createAndAppend('tr', table); + //creating row for repository and link + createAndAppend('td', repoRow, { text: 'Repository:', style: 'font-weight:bold' }); + let repoLink = createAndAppend('td', repoRow); + createAndAppend('a', repoLink, { + href: element.html_url, + text: element.name, + target: '_blank', + }); + //creating row for repo description + let descriptionRow = createAndAppend('tr', table); + createAndAppend('td', descriptionRow, { text: 'Description:', style: 'font-weight:bold' }); + createAndAppend('td', descriptionRow, { text: element.description }); + //creating row for forks + let forkRow = createAndAppend('tr', table); + createAndAppend('td', forkRow, { text: 'Fork:', style: 'font-weight:bold' }); + createAndAppend('td', forkRow, { text: element.forks_count }); + // creating 'last time updated' row + let updatedRow = createAndAppend('tr', table); + createAndAppend('td', updatedRow, { text: 'Updated:', style: 'font-weight:bold' }); + let date = new Date(element.updated_at); + date = date.toUTCString(); + createAndAppend('td', updatedRow, { text: date }); + //const repolist = getElementByClassName('left-div'); + } + //right + + function createContributor(element) { + fetchJSON(element.contributors_url, (err, data) => { + const root = document.getElementById('container'); + if (err) { + createAndAppend('div', root, { text: err.message, class: 'alert-error' }); + } else { + let contributors = createAndAppend('div', root, { + id: 'contributors', + class: 'rightDiv whiteFrame', + }); + createAndAppend('p', contributors, { class: 'contributorsHeader', text: 'Contributors' }); + + let ul = createAndAppend('ul', contributors, { class: 'contributorsList' }); + for (let i = 0; i < data.length; i++) { + let li = createAndAppend('li', ul, { class: 'contributorItem' }); + let img = createAndAppend('img', li, { + src: data[i].avatar_url, + class: 'contributorsAvatar', + height: 48, + }); + let login = createAndAppend('a', li, { + text: data[i].login, + href: data[i].html_url, + target: '_blank', + class: 'contributorName', + }); + let badge = createAndAppend('div', li, { + text: data[i].contributions, + class: 'contributorBadge', + }); + } + } + }); + } + + //main for run program 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) }); + data.sort(function(item1, item2) { + if (item1.name.toUpperCase() < item2.name.toUpperCase()) return -1; + if (item1.name > item2.name) return 1; + return 0; + }); + + //Show Header + selectInfo(data); + //Create and show Container left-right + createAndAppend('div', root, { id: 'container', class: 'container' }); + //left-side + createRepo(data[0]); + //right-side + createContributor(data[0]); + + //change value if select repo in drop down + + document.getElementById('RepoList').onchange = function() { + let selectedItem = this.options[this.selectedIndex].value; + let table = document.getElementById('RepositoryOverview'); + table.parentNode.removeChild(table); + let contributors = document.getElementById('contributors'); + contributors.parentNode.removeChild(contributors); + + createRepo(data[selectedItem]); + createContributor(data[selectedItem]); + }; } }); } diff --git a/homework/style.css b/homework/style.css index a8985a8a5..227865ba0 100644 --- a/homework/style.css +++ b/homework/style.css @@ -1,3 +1,179 @@ .alert-error { - color: red; -} \ No newline at end of file + color: red; +} +body { + width: 768px; + margin-left: auto; + margin-right: auto; + background-color: #f8f8f8; + font-family: 'Roboto', sans-serif; + color: rgb(0, 0, 0, 87%); + margin-top: 0; +} + +#container { + margin: 0; + display: grid; + flex-direction: column; + grid-template-columns: auto auto; + align-items: flex-start; +} + +@media (max-width: 767px) { + body { + width: 100%; + } + #container { + margin: 0; + display: flex; + grid-template-columns: auto auto; + flex-direction: column; + align-items: flex-start; + } +} + +h1, +h2, +h3, +h4 { + color: rgb(0, 0, 0, 54%); +} + +.header { + color: white; + background-color: #3f51b5; + padding: 8px 16px; + margin-bottom: 16px; + display: flex; + flex-direction: row; + align-items: center; +} + +.header h1 { + color: white; +} + +.repo-selector { + margin-left: 16px; + font-size: 14px; + width: 250px; + height: 32px; + padding: 2px; +} + +.leftDiv, +.rightDiv { + background-color: white; + flex: 1; +} + +.leftDiv { + padding: 16px; + margin-right: 16px; +} +.rightDiv { + padding: 16px; + margin-right: 16px; +} + +@media (max-width: 767px) { + .leftDiv { + margin: 0; + } +} + +.contributor-list { + list-style-type: none; + padding: 0; + margin: 0; +} + +.alert { + padding: 0.75rem 1.25rem; + margin-bottom: 1rem; + border-radius: 0.25rem; + flex: 1; +} + +.alert-error { + color: #721c24; + background-color: #f8d7da; +} + +.contributorsHeader { + font-size: 0.8rem; + color: blue (0, 0, 0, 54%); + padding: 8px 16px 4px 16px; +} +.contributorsList { + display: grid; + grid-template-columns: auto; + grid-gap: 5px; +} +.contributorItem { + border-bottom: solid 1px rgb(0, 0, 0, 12%); + padding: 16px; + display: flex; + flex-direction: row; + align-items: center; + cursor: pointer; + grid-gap: 10px; +} + +.contributorsAvatar { + border-radius: 3px; + margin-right: 16px; +} + +.contributorName { + flex: 1; + display: flex; + flex-direction: row; + justify-content: space-between; + align-content: center; +} + +.contributorBadge { + font-size: 12px; + padding: 2px 8px; + line-height: 1rem; + background-color: gray; + color: white; + border-radius: 4px; +} + +table { + table-layout: fixed; + color: rgb(0, 0, 0, 81%); +} + +td { + vertical-align: top; +} + +td:first-child { + width: 100px; + min-width: 100px; + max-width: 100px; +} + +td.label { + font-weight: bold; +} + +.whiteFrame { + margin-bottom: 8px; + border: none; + border-radius: 2px; + background-color: #fff; + box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.14), + 0 3px 3px -2px rgba(0, 0, 0, 0.12); +} +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 400; + src: local('Roboto'), local('Roboto-Regular'), + url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; +} From 22bc264e89c7fbb7e80e6e9a6b615ecffe4ba371 Mon Sep 17 00:00:00 2001 From: suthatta Date: Fri, 23 Aug 2019 10:00:34 +0200 Subject: [PATCH 2/4] Add files via upload add index.js --- Week1/index.js | 168 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 168 insertions(+) create mode 100644 Week1/index.js diff --git a/Week1/index.js b/Week1/index.js new file mode 100644 index 000000000..d132b49b8 --- /dev/null +++ b/Week1/index.js @@ -0,0 +1,168 @@ +'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 = {}) { + 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; + } + //header + + function createAnRepoList(array) { + createAndAppend('header', root, { class: 'header' }); + let header = document.getElementsByClassName('header')[0]; + createAndAppend('p', header, { text: 'HYF Repositories' }); + createAndAppend('select', header, { class: 'repo-selector', id: 'RepoList' }); + let listRoot = document.getElementById('RepoList'); + for (let i = 0; i < array.length; i++) { + createAndAppend('option', listRoot, { text: array[i].name, value: i }); + } + } + + function selectInfo(arr) { + const root = document.getElementById('root'); + createAndAppend('div', root, { class: 'header', id: 'header' }); + let header = document.getElementsByClassName('header')[0]; + createAndAppend('h1', header, { text: 'HYF Repositories' }); + createAndAppend('select', header, { class: 'repo-selector', id: 'RepoList' }); + const listRoot = document.getElementById('RepoList'); + + for (let i = 0; i < arr.length; i++) { + createAndAppend('option', listRoot, { text: arr[i].name, value: i }); + } + } + //left + function createRepo(element) { + const container = document.querySelector('#container'); + //creating table for repository overwiew + let table = createAndAppend('table', container, { + id: 'RepositoryOverview', + class: 'leftDiv whiteFrame', + }); + let repoRow = createAndAppend('tr', table); + //creating row for repository and link + createAndAppend('td', repoRow, { text: 'Repository:', style: 'font-weight:bold' }); + let repoLink = createAndAppend('td', repoRow); + createAndAppend('a', repoLink, { + href: element.html_url, + text: element.name, + target: '_blank', + }); + //creating row for repo description + let descriptionRow = createAndAppend('tr', table); + createAndAppend('td', descriptionRow, { text: 'Description:', style: 'font-weight:bold' }); + createAndAppend('td', descriptionRow, { text: element.description }); + //creating row for forks + let forkRow = createAndAppend('tr', table); + createAndAppend('td', forkRow, { text: 'Fork:', style: 'font-weight:bold' }); + createAndAppend('td', forkRow, { text: element.forks_count }); + // creating 'last time updated' row + let updatedRow = createAndAppend('tr', table); + createAndAppend('td', updatedRow, { text: 'Updated:', style: 'font-weight:bold' }); + let date = new Date(element.updated_at); + date = date.toUTCString(); + createAndAppend('td', updatedRow, { text: date }); + //const repolist = getElementByClassName('left-div'); + } + //right + + function createContributor(element) { + fetchJSON(element.contributors_url, (err, data) => { + const root = document.getElementById('container'); + if (err) { + createAndAppend('div', root, { text: err.message, class: 'alert-error' }); + } else { + let contributors = createAndAppend('div', root, { + id: 'contributors', + class: 'rightDiv whiteFrame', + }); + createAndAppend('p', contributors, { class: 'contributorsHeader', text: 'Contributors' }); + + let ul = createAndAppend('ul', contributors, { class: 'contributorsList' }); + for (let i = 0; i < data.length; i++) { + let li = createAndAppend('li', ul, { class: 'contributorItem' }); + let img = createAndAppend('img', li, { + src: data[i].avatar_url, + class: 'contributorsAvatar', + height: 48, + }); + let login = createAndAppend('a', li, { + text: data[i].login, + href: data[i].html_url, + target: '_blank', + class: 'contributorName', + }); + let badge = createAndAppend('div', li, { + text: data[i].contributions, + class: 'contributorBadge', + }); + } + } + }); + } + + //main for run program + function main(url) { + fetchJSON(url, (err, data) => { + const root = document.getElementById('root'); + if (err) { + createAndAppend('div', root, { text: err.message, class: 'alert-error' }); + } else { + data.sort(function(item1, item2) { + if (item1.name.toUpperCase() < item2.name.toUpperCase()) return -1; + if (item1.name > item2.name) return 1; + return 0; + }); + + //Show Header + selectInfo(data); + //Create and show Container left-right + createAndAppend('div', root, { id: 'container', class: 'container' }); + //left-side + createRepo(data[0]); + //right-side + createContributor(data[0]); + + //change value if select repo in drop down + + document.getElementById('RepoList').onchange = function() { + let selectedItem = this.options[this.selectedIndex].value; + let table = document.getElementById('RepositoryOverview'); + table.parentNode.removeChild(table); + let contributors = document.getElementById('contributors'); + contributors.parentNode.removeChild(contributors); + + createRepo(data[selectedItem]); + createContributor(data[selectedItem]); + }; + } + }); + } + + const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; + + window.onload = () => main(HYF_REPOS_URL); +} From 9de4f7e9eec5b8823a0bd765f3e403667541daae Mon Sep 17 00:00:00 2001 From: suthatta Date: Fri, 23 Aug 2019 10:01:16 +0200 Subject: [PATCH 3/4] Add files via upload add styles.css --- Week1/style.css | 179 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 179 insertions(+) create mode 100644 Week1/style.css diff --git a/Week1/style.css b/Week1/style.css new file mode 100644 index 000000000..6941d22a8 --- /dev/null +++ b/Week1/style.css @@ -0,0 +1,179 @@ +.alert-error { + color: red; +} +body { + width: 768px; + margin-left: auto; + margin-right: auto; + background-color: #f8f8f8; + font-family: 'Roboto', sans-serif; + color: rgb(0, 0, 0, 87%); + margin-top: 0; +} + +#container { + margin: 0; + display: grid; + flex-direction: column; + grid-template-columns: auto auto; + align-items: flex-start; +} + +@media (max-width: 767px) { + body { + width: 100%; + } + #container { + margin: 0; + display: flex; + grid-template-columns: auto auto; + flex-direction: column; + align-items: flex-start; + } +} + +h1, +h2, +h3, +h4 { + color: rgb(0, 0, 0, 54%); +} + +.header { + color: white; + background-color: #3f51b5; + padding: 8px 16px; + margin-bottom: 16px; + display: flex; + flex-direction: row; + align-items: center; +} + +.header h1 { + color: white; +} + +.repo-selector { + margin-left: 16px; + font-size: 14px; + width: 250px; + height: 32px; + padding: 2px; +} + +.leftDiv, +.rightDiv { + background-color: white; + flex: 1; +} + +.leftDiv { + padding: 16px; + margin-right: 16px; +} +.rightDiv { + padding: 16px; + margin-right: 16px; +} + +@media (max-width: 767px) { + .leftDiv { + margin: 0; + } +} + +.contributor-list { + list-style-type: none; + padding: 0; + margin: 0; +} + +.alert { + padding: 0.75rem 1.25rem; + margin-bottom: 1rem; + border-radius: 0.25rem; + flex: 1; +} + +.alert-error { + color: #721c24; + background-color: #f8d7da; +} + +.contributorsHeader { + font-size: 0.8rem; + color: blue (0, 0, 0, 54%); + padding: 8px 16px 4px 16px; +} +.contributorsList { + display: grid; + grid-template-columns: auto; + grid-gap: 5px; +} +.contributorItem { + border-bottom: solid 1px rgb(0, 0, 0, 12%); + padding: 16px; + display: flex; + flex-direction: row; + align-items: center; + cursor: pointer; + grid-gap: 10px; +} + +.contributorsAvatar { + border-radius: 3px; + margin-right: 16px; +} + +.contributorName { + flex: 1; + display: flex; + flex-direction: row; + justify-content: space-between; + align-content: center; +} + +.contributorBadge { + font-size: 12px; + padding: 2px 8px; + line-height: 1rem; + background-color: gray; + color: white; + border-radius: 4px; +} + +table { + table-layout: fixed; + color: rgb(0, 0, 0, 81%); +} + +td { + vertical-align: top; +} + +td:first-child { + width: 100px; + min-width: 100px; + max-width: 100px; +} + +td.label { + font-weight: bold; +} + +.whiteFrame { + margin-bottom: 8px; + border: none; + border-radius: 2px; + background-color: #fff; + box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.14), + 0 3px 3px -2px rgba(0, 0, 0, 0.12); +} +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 400; + src: local('Roboto'), local('Roboto-Regular'), + url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; +} From 2b28de41e905cf2cf0a4cbabbd6519982a32ca5b Mon Sep 17 00:00:00 2001 From: suthatta Date: Fri, 23 Aug 2019 10:01:55 +0200 Subject: [PATCH 4/4] Add files via upload add index.html --- Week1/index.html | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 Week1/index.html diff --git a/Week1/index.html b/Week1/index.html new file mode 100644 index 000000000..c4143f81e --- /dev/null +++ b/Week1/index.html @@ -0,0 +1,24 @@ + + + + + + + + + + + + HYF-GITHUB + + + + + +
+ + +