HYF-GITHUB

From e3fa3a7f1aeba1e989c02ca169c7da98aa1d9282 Mon Sep 17 00:00:00 2001 From: christi023 Date: Thu, 20 Jun 2019 16:24:52 +0200 Subject: [PATCH 1/6] index.js and style.css --- homework/.vscode/settings.json | 3 + homework/index.html | 1 + homework/index.js | 91 +++++++++++++++++++- homework/style.css | 151 ++++++++++++++++++++++++++++++++- 4 files changed, 243 insertions(+), 3 deletions(-) create mode 100644 homework/.vscode/settings.json diff --git a/homework/.vscode/settings.json b/homework/.vscode/settings.json new file mode 100644 index 000000000..aef844305 --- /dev/null +++ b/homework/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/homework/index.html b/homework/index.html index 9c8f80c1a..8399d48e9 100644 --- a/homework/index.html +++ b/homework/index.html @@ -17,6 +17,7 @@

+ diff --git a/homework/index.js b/homework/index.js index d3a97645e..4711e2f70 100644 --- a/homework/index.js +++ b/homework/index.js @@ -30,13 +30,102 @@ return elem; } + // Header + function selectOptions(nameOption) { + const repoSelect = document.getElementById('repoSelect'); + for (let i = 0; i < nameOption.length; i++) { + createAndAppend('option', repoSelect, { value: i, text: nameOption[i].name }); + } + } + + // Create table on left within main div + function displayInfo(element) { + const container = document.getElementById('container'); + const divInfo = createAndAppend('div', container, { + id: 'leftSide', + class: 'left-div whiteframe', + }); + // Table info + createAndAppend('table', divInfo, { id: 'table' }); + const table = document.getElementById('table'); + createAndAppend('tbody', table, { id: 'tbody' }); + function createTableRow(label, description) { + const tableR = createAndAppend('tr', table); + createAndAppend('td', tableR, { text: label, class: 'label' }); + createAndAppend('td', tableR, { text: description }); + } + + createTableRow('Repository: ', element.name); + createTableRow('Description: ', element.description); + createTableRow('Forks : ', element.forks); + const newDate = new Date(element.updated_at).toLocaleString(); + createTableRow('Updated: ', newDate); + } + + // Contributors + function contributorsList(element) { + fetchJSON(element.contributor_url, (err, data) => { + const container = document.getElementById('container'); + createAndAppend('div', container, { + id: 'rightSide', + class: 'right-div whiteframe', + }); + const rightSide = document.getElementById('rightSide'); + createAndAppend('h7', rightSide, { + text: 'Contributions', + class: 'contributor-header', + }); + createAndAppend('ul', rightSide, { + id: 'list', + class: 'contributor-list', + }); + let contributorURL; + let contributorItem; + let contributorData; + const list = document.getElementById('list'); + for (let i = 0; i < data.length; i++) { + contributorURL = createAndAppend('a', list, { href: data[i].html_url, target: '_blank' }); + contributorItem = createAndAppend('li', contributorURL, { class: 'contributor-item' }); + createAndAppend('img', contributorItem, { + src: data[i].avatar_url, + class: 'contributor-avatar', + }); + contributorData = createAndAppend('div', contributorItem, { class: 'contributor-data' }); + createAndAppend('div', contributorData, { text: data[i].login }); + createAndAppend('div', contributorData, { + text: data[i].contributions, + class: 'contributor-badge', + }); + } + }); + } + 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('header', root, { id: 'top', class: 'header' }); + const top = document.getElementById('top'); + createAndAppend('h7', top, { id: 'title', text: 'HYF Repositories' }); + createAndAppend('select', top, { id: 'repoSelect', class: 'repo-selector' }); + createAndAppend('div', root, { id: 'container' }); + data.sort((a, b) => a.name.localCompare(b.name)); + selectOptions(data); + displayInfo(data[0]); + contributorsList(data[0]); + + document.getElementById('repoSelect').onchange = function startListener() { + const selectItem = this.options[this.selectedIndex].value; + const leftSideInfo = document.getElementById('leftSide'); + leftSideInfo.parentNode.removeChild(leftSideInfo); + const contributors = document.getElementById('rightSide'); + contributors.parentNode.removeChild('contributors'); + + displayInfo(data[selectItem]); + contributorsList(data[selectItem]); + }; } }); } diff --git a/homework/style.css b/homework/style.css index a8985a8a5..487cfe943 100644 --- a/homework/style.css +++ b/homework/style.css @@ -1,3 +1,150 @@ .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 { + display: flex; + flex-direction: row; + align-items: flex-start; +} + +@media (max-width: 767px) { + body { + width: 100%; + } + #container { + margin: 0; + flex-direction: column; + align-items: stretch; + } +} + +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; +} + +.repo-selector { + margin-left: 16px; + font-size: 14px; + width: 250px; + height: 32px; + padding: 2px; +} + +.left-div, +.right-div { + background-color: white; + flex: 1; +} + +.left-div { + padding: 16px; + margin-right: 16px; +} + +@media (max-width: 767px) { + .left-div { + 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; +} + +.contributor-header { + font-size: 0.8rem; + color: rgb(0, 0, 0, 54%); + padding: 16px 16px 8px 16px; +} + +.contributor-item { + border-bottom: solid 1px rgb(0, 0, 0, 12%); + padding: 16px; + display: flex; + flex-direction: row; + align-items: center; + cursor: pointer; +} + +.contributor-avatar { + border-radius: 3px; + margin-right: 16px; + height: 48px; +} + +.contributor-data { + flex: 1; + display: flex; + flex-direction: row; + justify-content: space-between; + align-content: center; +} + +.contributor-badge { + 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); +} From fb5cb67c06e8e7a723b956dfc40cc3bed4709101 Mon Sep 17 00:00:00 2001 From: Sheliann Olsson <48160897+christi023@users.noreply.github.com> Date: Thu, 20 Jun 2019 17:39:25 +0200 Subject: [PATCH 2/6] Add files via upload --- Week1/index.html | 24 ++++++++ Week1/index.js | 136 ++++++++++++++++++++++++++++++++++++++++++ Week1/style.css | 150 +++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 310 insertions(+) create mode 100644 Week1/index.html create mode 100644 Week1/index.js create mode 100644 Week1/style.css diff --git a/Week1/index.html b/Week1/index.html new file mode 100644 index 000000000..dad6de5de --- /dev/null +++ b/Week1/index.html @@ -0,0 +1,24 @@ + + + + + + + + + + + + + HYF-GITHUB + + + + + +

+ + + + + \ No newline at end of file diff --git a/Week1/index.js b/Week1/index.js new file mode 100644 index 000000000..ec0c33dc7 --- /dev/null +++ b/Week1/index.js @@ -0,0 +1,136 @@ +'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 selectOptions(nameOption) { + const repoSelect = document.getElementById('repoSelect'); + for (let i = 0; i < nameOption.length; i++) { + createAndAppend('option', repoSelect, { value: i, text: nameOption[i].name }); + } + } + + // Create table on left within main div + function displayInfo(element) { + const container = document.getElementById('container'); + const divInfo = createAndAppend('div', container, { + id: 'leftSide', + class: 'left-div whiteframe', + }); + // Table info + createAndAppend('table', divInfo, { id: 'table' }); + const table = document.getElementById('table'); + createAndAppend('tbody', table, { id: 'tbody' }); + function createTableRow(label, description) { + const tableR = createAndAppend('tr', table); + createAndAppend('td', tableR, { text: label, class: 'label' }); + createAndAppend('td', tableR, { text: description }); + } + + createTableRow('Repository: ', element.name); + createTableRow('Description: ', element.description); + createTableRow('Forks : ', element.forks); + const newDate = new Date(element.updated_at).toLocaleString(); + createTableRow('Updated: ', newDate); + } + + // Contributors + function contributorsList(element) { + fetchJSON(element.contributor_url, (err, data) => { + const container = document.getElementById('container'); + createAndAppend('div', container, { + id: 'rightSide', + class: 'right-div whiteframe', + }); + const rightSide = document.getElementById('rightSide'); + createAndAppend('h7', rightSide, { + text: 'Contributions', + class: 'contributor-header', + }); + createAndAppend('ul', rightSide, { + id: 'list', + class: 'contributor-list', + }); + let contributorURL; + let contributorItem; + let contributorData; + const list = document.getElementById('list'); + for (let i = 0; i < data.length; i++) { + contributorURL = createAndAppend('a', list, { href: data[i].html_url, target: '_blank' }); + contributorItem = createAndAppend('li', contributorURL, { class: 'contributor-item' }); + createAndAppend('img', contributorItem, { + src: data[i].avatar_url, + class: 'contributor-avatar', + }); + contributorData = createAndAppend('div', contributorItem, { class: 'contributor-data' }); + createAndAppend('div', contributorData, { text: data[i].login }); + createAndAppend('div', contributorData, { + text: data[i].contributions, + class: 'contributor-badge', + }); + } + }); + } + + 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('header', root, { id: 'top', class: 'header' }); + const top = document.getElementById('top'); + createAndAppend('h7', top, { id: 'title', text: 'HYF Repositories' }); + createAndAppend('select', top, { id: 'repoSelect', class: 'repo-selector' }); + createAndAppend('div', root, { id: 'container' }); + data.sort((a, b) => a.name.localCompare(b.name)); + selectOptions(data); + displayInfo(data[0]); + contributorsList(data[0]); + + document.getElementById('repoSelect').onchange = function startListener() { + const selectItem = this.options[this.selectedIndex].value; + const leftSideInfo = document.getElementById('leftSide'); + leftSideInfo.parentNode.removeChild(leftSideInfo); + const contributors = document.getElementById('rightSide'); + contributors.parentNode.removeChild('contributors'); + + displayInfo(data[selectItem]); + contributorsList(data[selectItem]); + }; + } + }); + } + + const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; + + window.onload = () => main(HYF_REPOS_URL); +} diff --git a/Week1/style.css b/Week1/style.css new file mode 100644 index 000000000..6943ac13f --- /dev/null +++ b/Week1/style.css @@ -0,0 +1,150 @@ +.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 { + display: flex; + flex-direction: row; + align-items: flex-start; +} + +@media (max-width: 767px) { + body { + width: 100%; + } + #container { + margin: 0; + flex-direction: column; + align-items: stretch; + } +} + +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; +} + +.repo-selector { + margin-left: 16px; + font-size: 14px; + width: 250px; + height: 32px; + padding: 2px; +} + +.left-div, +.right-div { + background-color: white; + flex: 1; +} + +.left-div { + padding: 16px; + margin-right: 16px; +} + +@media (max-width: 767px) { + .left-div { + 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; +} + +.contributor-header { + font-size: 0.8rem; + color: rgb(0, 0, 0, 54%); + padding: 16px 16px 8px 16px; +} + +.contributor-item { + border-bottom: solid 1px rgb(0, 0, 0, 12%); + padding: 16px; + display: flex; + flex-direction: row; + align-items: center; + cursor: pointer; +} + +.contributor-avatar { + border-radius: 3px; + margin-right: 16px; + height: 48px; +} + +.contributor-data { + flex: 1; + display: flex; + flex-direction: row; + justify-content: space-between; + align-content: center; +} + +.contributor-badge { + 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); +} From 6aa781765c6d1396751aba64749f82456e8566b8 Mon Sep 17 00:00:00 2001 From: Sheliann Olsson <48160897+christi023@users.noreply.github.com> Date: Wed, 26 Jun 2019 14:40:08 +0200 Subject: [PATCH 3/6] Update index.js --- Week1/index.js | 28 +++++++++++++--------------- 1 file changed, 13 insertions(+), 15 deletions(-) diff --git a/Week1/index.js b/Week1/index.js index ec0c33dc7..c6e6afe6e 100644 --- a/Week1/index.js +++ b/Week1/index.js @@ -31,10 +31,10 @@ } // Header - function selectOptions(nameOption) { + function selectOptions(nameOptions) { const repoSelect = document.getElementById('repoSelect'); - for (let i = 0; i < nameOption.length; i++) { - createAndAppend('option', repoSelect, { value: i, text: nameOption[i].name }); + for (let i = 0; i < nameOptions.length; i++) { + createAndAppend('option', repoSelect, { value: i, text: nameOptions[i].name }); } } @@ -64,7 +64,7 @@ // Contributors function contributorsList(element) { - fetchJSON(element.contributor_url, (err, data) => { + fetchJSON(element.contributors_url, (err, data) => { const container = document.getElementById('container'); createAndAppend('div', container, { id: 'rightSide', @@ -79,18 +79,16 @@ id: 'list', class: 'contributor-list', }); - let contributorURL; - let contributorItem; - let contributorData; + const list = document.getElementById('list'); for (let i = 0; i < data.length; i++) { - contributorURL = createAndAppend('a', list, { href: data[i].html_url, target: '_blank' }); - contributorItem = createAndAppend('li', contributorURL, { class: 'contributor-item' }); + const contributorsURL = createAndAppend('a', list, { href: data[i].html_url, target: '_blank' }); + const contributorItem = createAndAppend('li', contributorsURL, { class: 'contributor-item' }); createAndAppend('img', contributorItem, { src: data[i].avatar_url, class: 'contributor-avatar', }); - contributorData = createAndAppend('div', contributorItem, { class: 'contributor-data' }); + const contributorData = createAndAppend('div', contributorItem, { class: 'contributor-data' }); createAndAppend('div', contributorData, { text: data[i].login }); createAndAppend('div', contributorData, { text: data[i].contributions, @@ -111,20 +109,20 @@ createAndAppend('h7', top, { id: 'title', text: 'HYF Repositories' }); createAndAppend('select', top, { id: 'repoSelect', class: 'repo-selector' }); createAndAppend('div', root, { id: 'container' }); - data.sort((a, b) => a.name.localCompare(b.name)); + data.sort((a, b) => a.name.localeCompare(b.name)); selectOptions(data); displayInfo(data[0]); contributorsList(data[0]); document.getElementById('repoSelect').onchange = function startListener() { - const selectItem = this.options[this.selectedIndex].value; + const selectedItem = this.options[this.selectedIndex].value; const leftSideInfo = document.getElementById('leftSide'); leftSideInfo.parentNode.removeChild(leftSideInfo); const contributors = document.getElementById('rightSide'); - contributors.parentNode.removeChild('contributors'); + contributors.parentNode.removeChild(contributors); - displayInfo(data[selectItem]); - contributorsList(data[selectItem]); + displayInfo(data[selectedItem]); + contributorsList(data[selectedItem]); }; } }); From 33050f5fefd2e70e3d196b9775a781bb836c7bdc Mon Sep 17 00:00:00 2001 From: Sheliann Olsson <48160897+christi023@users.noreply.github.com> Date: Thu, 27 Jun 2019 09:19:48 +0200 Subject: [PATCH 4/6] Update index.js --- Week1/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Week1/index.js b/Week1/index.js index c6e6afe6e..c28ee7fe7 100644 --- a/Week1/index.js +++ b/Week1/index.js @@ -82,8 +82,8 @@ const list = document.getElementById('list'); for (let i = 0; i < data.length; i++) { - const contributorsURL = createAndAppend('a', list, { href: data[i].html_url, target: '_blank' }); - const contributorItem = createAndAppend('li', contributorsURL, { class: 'contributor-item' }); + const contributorURL = createAndAppend('a', list, { href: data[i].html_url, target: '_blank' }); + const contributorItem = createAndAppend('li', contributorURL, { class: 'contributor-item' }); createAndAppend('img', contributorItem, { src: data[i].avatar_url, class: 'contributor-avatar', From d662960f67e4139d97d96a0a6dcd6bad487bfb16 Mon Sep 17 00:00:00 2001 From: christi023 Date: Fri, 5 Jul 2019 16:46:14 +0200 Subject: [PATCH 5/6] first commit --- .vscode/tasks.json | 12 +++ Week1/.vscode/settings.json | 3 + Week1/index.html | 23 ++++++ Week1/index.js | 142 ++++++++++++++++++++++++++++++++++ Week1/style.css | 150 ++++++++++++++++++++++++++++++++++++ Week2/App.js | 81 +++++++++++++++++++ Week2/Contributor.js | 19 +++++ Week2/Repository.js | 33 ++++++++ Week2/Util.js | 35 +++++++++ Week2/hyf.png | Bin 0 -> 6971 bytes Week2/index.html | 23 ++++++ Week2/index.js | 142 ++++++++++++++++++++++++++++++++++ Week2/index2.html | 27 +++++++ Week2/style.css | 150 ++++++++++++++++++++++++++++++++++++ homework/App.js | 2 +- 15 files changed, 841 insertions(+), 1 deletion(-) create mode 100644 .vscode/tasks.json create mode 100644 Week1/.vscode/settings.json create mode 100644 Week1/index.html create mode 100644 Week1/index.js create mode 100644 Week1/style.css create mode 100644 Week2/App.js create mode 100644 Week2/Contributor.js create mode 100644 Week2/Repository.js create mode 100644 Week2/Util.js create mode 100644 Week2/hyf.png create mode 100644 Week2/index.html create mode 100644 Week2/index.js create mode 100644 Week2/index2.html create mode 100644 Week2/style.css diff --git a/.vscode/tasks.json b/.vscode/tasks.json new file mode 100644 index 000000000..75d0b1e09 --- /dev/null +++ b/.vscode/tasks.json @@ -0,0 +1,12 @@ +{ + // See https://go.microsoft.com/fwlink/?LinkId=733558 + // for the documentation about the tasks.json format + "version": "2.0.0", + "tasks": [ + { + "type": "npm", + "script": "install", + "problemMatcher": [] + } + ] +} \ No newline at end of file diff --git a/Week1/.vscode/settings.json b/Week1/.vscode/settings.json new file mode 100644 index 000000000..aef844305 --- /dev/null +++ b/Week1/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/Week1/index.html b/Week1/index.html new file mode 100644 index 000000000..5f8d3332a --- /dev/null +++ b/Week1/index.html @@ -0,0 +1,23 @@ + + + + + + + + + + + + + HYF-GITHUB + + + + + +

+ + + + \ No newline at end of file diff --git a/Week1/index.js b/Week1/index.js new file mode 100644 index 000000000..918e38d7e --- /dev/null +++ b/Week1/index.js @@ -0,0 +1,142 @@ +'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 selectOptions(nameOptions) { + const repoSelect = document.getElementById('repoSelect'); + for (let i = 0; i < nameOptions.length; i++) { + createAndAppend('option', repoSelect, { value: i, text: nameOptions[i].name }); + } + } + + // Create table on left within main div + function displayInfo(element) { + const container = document.getElementById('container'); + const divInfo = createAndAppend('div', container, { + id: 'leftSide', + class: 'left-div whiteframe', + }); + // Table info + createAndAppend('table', divInfo, { id: 'table' }); + const table = document.getElementById('table'); + createAndAppend('tbody', table, { id: 'tbody' }); + function createTableRow(label, description) { + const tableR = createAndAppend('tr', table); + createAndAppend('td', tableR, { text: label, class: 'label' }); + createAndAppend('td', tableR, { text: description }); + } + + createTableRow('Repository: ', element.name); + createTableRow('Description: ', element.description); + createTableRow('Forks : ', element.forks); + const newDate = new Date(element.updated_at).toLocaleString(); + createTableRow('Updated: ', newDate); + } + + // Contributors + function contributorsList(element) { + fetchJSON(element.contributors_url, (err, data) => { + const container = document.getElementById('container'); + createAndAppend('div', container, { + id: 'rightSide', + class: 'right-div whiteframe', + }); + const rightSide = document.getElementById('rightSide'); + createAndAppend('h7', rightSide, { + text: 'Contributions', + class: 'contributor-header', + }); + createAndAppend('ul', rightSide, { + id: 'list', + class: 'contributor-list', + }); + + const list = document.getElementById('list'); + for (let i = 0; i < data.length; i++) { + const contributorURL = createAndAppend('a', list, { + href: data[i].html_url, + target: '_blank', + }); + const contributorItem = createAndAppend('li', contributorURL, { + class: 'contributor-item', + }); + createAndAppend('img', contributorItem, { + src: data[i].avatar_url, + class: 'contributor-avatar', + }); + const contributorData = createAndAppend('div', contributorItem, { + class: 'contributor-data', + }); + createAndAppend('div', contributorData, { text: data[i].login }); + createAndAppend('div', contributorData, { + text: data[i].contributions, + class: 'contributor-badge', + }); + } + }); + } + + // Main Function + 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('header', root, { id: 'top', class: 'header' }); + const top = document.getElementById('top'); + createAndAppend('h7', top, { id: 'title', text: 'HYF Repositories' }); + createAndAppend('select', top, { id: 'repoSelect', class: 'repo-selector' }); + createAndAppend('div', root, { id: 'container' }); + data.sort((a, b) => a.name.localeCompare(b.name)); + selectOptions(data); + displayInfo(data[0]); + contributorsList(data[0]); + + document.getElementById('repoSelect').onchange = function startListener() { + const selectedItem = this.options[this.selectedIndex].value; + const leftSideInfo = document.getElementById('leftSide'); + leftSideInfo.parentNode.removeChild(leftSideInfo); + const contributors = document.getElementById('rightSide'); + contributors.parentNode.removeChild(contributors); + + displayInfo(data[selectedItem]); + contributorsList(data[selectedItem]); + }; + } + }); + } + + const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; + + window.onload = () => main(HYF_REPOS_URL); +} diff --git a/Week1/style.css b/Week1/style.css new file mode 100644 index 000000000..487cfe943 --- /dev/null +++ b/Week1/style.css @@ -0,0 +1,150 @@ +.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 { + display: flex; + flex-direction: row; + align-items: flex-start; +} + +@media (max-width: 767px) { + body { + width: 100%; + } + #container { + margin: 0; + flex-direction: column; + align-items: stretch; + } +} + +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; +} + +.repo-selector { + margin-left: 16px; + font-size: 14px; + width: 250px; + height: 32px; + padding: 2px; +} + +.left-div, +.right-div { + background-color: white; + flex: 1; +} + +.left-div { + padding: 16px; + margin-right: 16px; +} + +@media (max-width: 767px) { + .left-div { + 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; +} + +.contributor-header { + font-size: 0.8rem; + color: rgb(0, 0, 0, 54%); + padding: 16px 16px 8px 16px; +} + +.contributor-item { + border-bottom: solid 1px rgb(0, 0, 0, 12%); + padding: 16px; + display: flex; + flex-direction: row; + align-items: center; + cursor: pointer; +} + +.contributor-avatar { + border-radius: 3px; + margin-right: 16px; + height: 48px; +} + +.contributor-data { + flex: 1; + display: flex; + flex-direction: row; + justify-content: space-between; + align-content: center; +} + +.contributor-badge { + 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); +} diff --git a/Week2/App.js b/Week2/App.js new file mode 100644 index 000000000..2cd7f83ae --- /dev/null +++ b/Week2/App.js @@ -0,0 +1,81 @@ +'use strict'; + +/* global Util, Repository, Contributor */ + +class App { + constructor(url) { + this.initialize(url); + } + + /** + * Initialization + * @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