diff --git a/Week1/index.html b/Week1/index.html
new file mode 100644
index 000000000..9c8f80c1a
--- /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..3c7692db4
--- /dev/null
+++ b/Week1/index.js
@@ -0,0 +1,143 @@
+'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')); // “communication errors”: connection is lost or the remote server does not respond at all.
+ 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;
+ }
+
+ // Display repository options in the header
+ function selectOptions(nameOption) {
+ const selectRepoHYF = document.getElementById('selectRepoHYF');
+ for (let i = 0; i < nameOption.length; i++) {
+ createAndAppend('option', selectRepoHYF, { value: i, text: nameOption[i].name });
+ }
+ }
+
+ // Information on left side inside a table
+ function displayInformation(element) {
+ const container = document.getElementById('container');
+ const infoDiv = createAndAppend('div', container, {
+ id: 'leftArea',
+ class: 'left-div whiteframe',
+ });
+ createAndAppend('table', infoDiv, { id: 'table' });
+ const table = document.getElementById('table');
+ createAndAppend('tbody', table, { id: 'tbody' });
+ function createTableRow(label, description) {
+ const tRow = createAndAppend('tr', table);
+ createAndAppend('td', tRow, { text: label, class: 'label' });
+ createAndAppend('td', tRow, { text: description });
+ }
+
+ createTableRow('Repository: ', element.name);
+ createTableRow('Description: ', element.description);
+ createTableRow('Forks : ', element.forks);
+ const date2 = new Date(element.updated_at).toLocaleString();
+ createTableRow('Updated: ', date2);
+ }
+
+ // Show contributors
+ function contributorsList(element) {
+ fetchJSON(element.contributors_url, (err, data) => {
+ const container = document.getElementById('container');
+ createAndAppend('div', container, {
+ id: 'rightArea',
+ class: 'right-div whiteframe',
+ });
+ const rightArea = document.getElementById('rightArea');
+ createAndAppend('h7', rightArea, {
+ text: 'Contributions',
+ class: 'contributor-header',
+ });
+ createAndAppend('ul', rightArea, {
+ id: 'contList',
+ class: 'contributor-list',
+ });
+ let contributorURL;
+ let contributorItem;
+ let contributorData;
+ const contList = document.getElementById('contList');
+ for (let i = 0; i < data.length; i++) {
+ contributorURL = createAndAppend('a', contList, {
+ 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: 'topArea', class: 'header' });
+ const topArea = document.getElementById('topArea');
+ createAndAppend('h7', topArea, { id: 'title', text: 'HYF Repositories' });
+ createAndAppend('select', topArea, { id: 'selectRepoHYF', class: 'repo-selector' });
+ createAndAppend('div', root, { id: 'container' });
+ data.sort((a, b) => a.name.localeCompare(b.name));
+ selectOptions(data);
+ displayInformation(data[0]);
+ contributorsList(data[0]);
+
+ document.getElementById('selectRepoHYF').onchange = function startListener() {
+ const selectedItem = this.options[this.selectedIndex].value;
+ const infoLeft = document.getElementById('leftArea');
+ infoLeft.parentNode.removeChild(infoLeft);
+ const contributors = document.getElementById('rightArea');
+ contributors.parentNode.removeChild(contributors);
+
+ displayInformation(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/indexTemp.js b/Week1/indexTemp.js
new file mode 100644
index 000000000..d3a97645e
--- /dev/null
+++ b/Week1/indexTemp.js
@@ -0,0 +1,47 @@
+'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;
+ }
+
+ 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 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..b3c23c168
--- /dev/null
+++ b/Week1/style.css
@@ -0,0 +1,152 @@
+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;
+}
+
+.alert-error {
+ color: #721c24;
+ background-color: #f8d7da;
+}
+
+.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/index.html b/Week2/index.html
new file mode 100644
index 000000000..9c8f80c1a
--- /dev/null
+++ b/Week2/index.html
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+
+
+
+
+
+
+ HYF-GITHUB
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Week2/index.js b/Week2/index.js
new file mode 100644
index 000000000..3ce768524
--- /dev/null
+++ b/Week2/index.js
@@ -0,0 +1,144 @@
+'use strict';
+
+{
+ function fetchJSON(url) {
+ return new Promise((resolve, reject) => {
+ const xhr = new XMLHttpRequest();
+ xhr.open('GET', url);
+ xhr.responseType = 'json';
+ xhr.onload = () => {
+ if (xhr.status < 400) {
+ resolve(xhr.response);
+ } else {
+ reject(new Error(`Network error: ${xhr.status} - ${xhr.statusText}`));
+ }
+ };
+ 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;
+ }
+
+ // Display repository options in the header
+ function selectOptions(nameOption) {
+ const selectRepoHYF = document.getElementById('selectRepoHYF');
+ for (let i = 0; i < nameOption.length; i++) {
+ createAndAppend('option', selectRepoHYF, { value: i, text: nameOption[i].name });
+ }
+ }
+
+ // Information on left side inside a table
+ function displayInformation(element) {
+ const container = document.getElementById('container');
+ const infoDiv = createAndAppend('div', container, {
+ id: 'leftArea',
+ class: 'left-div whiteframe',
+ });
+ createAndAppend('table', infoDiv, { id: 'table' });
+ const table = document.getElementById('table');
+ createAndAppend('tbody', table, { id: 'tbody' });
+ function createTableRow(label, description) {
+ const tRow = createAndAppend('tr', table);
+ createAndAppend('td', tRow, { text: label, class: 'label' });
+ createAndAppend('td', tRow, { text: description });
+ }
+
+ createTableRow('Repository: ', element.name);
+ createTableRow('Description: ', element.description);
+ createTableRow('Forks : ', element.forks);
+ const date2 = new Date(element.updated_at).toLocaleString();
+ createTableRow('Updated: ', date2);
+ }
+
+ // Show contributors
+ function contributorsList(element) {
+ fetchJSON(element.contributors_url).then(data => {
+ const container = document.getElementById('container');
+ createAndAppend('div', container, {
+ id: 'rightArea',
+ class: 'right-div whiteframe',
+ });
+ const rightArea = document.getElementById('rightArea');
+ createAndAppend('h7', rightArea, {
+ text: 'Contributions',
+ class: 'contributor-header',
+ });
+ createAndAppend('ul', rightArea, {
+ id: 'contList',
+ class: 'contributor-list',
+ });
+ let contributorURL;
+ let contributorItem;
+ let contributorData;
+ const contList = document.getElementById('contList');
+ for (let i = 0; i < data.length; i++) {
+ contributorURL = createAndAppend('a', contList, {
+ 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) {
+ const root = document.getElementById('root');
+ fetchJSON(url)
+ .catch(reject => {
+ createAndAppend('div', root, { text: reject.message, class: 'alert-error' });
+ })
+ .then(data => {
+ createAndAppend('header', root, { id: 'topArea', class: 'header' });
+ const topArea = document.getElementById('topArea');
+ createAndAppend('h7', topArea, { id: 'title', text: 'HYF Repositories' });
+ createAndAppend('select', topArea, { id: 'selectRepoHYF', class: 'repo-selector' });
+ createAndAppend('div', root, { id: 'container' });
+ data.sort((a, b) => a.name.localeCompare(b.name));
+ selectOptions(data);
+ displayInformation(data[0]);
+ contributorsList(data[0]);
+
+ document.getElementById('selectRepoHYF').onchange = function startListener() {
+ const selectedItem = this.options[this.selectedIndex].value;
+ const infoLeft = document.getElementById('leftArea');
+ infoLeft.parentNode.removeChild(infoLeft);
+ const contributors = document.getElementById('rightArea');
+ contributors.parentNode.removeChild(contributors);
+
+ displayInformation(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/Week2/indexTemp.js b/Week2/indexTemp.js
new file mode 100644
index 000000000..d3a97645e
--- /dev/null
+++ b/Week2/indexTemp.js
@@ -0,0 +1,47 @@
+'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;
+ }
+
+ 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 HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
+
+ window.onload = () => main(HYF_REPOS_URL);
+}
diff --git a/Week2/style.css b/Week2/style.css
new file mode 100644
index 000000000..b3c23c168
--- /dev/null
+++ b/Week2/style.css
@@ -0,0 +1,152 @@
+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;
+}
+
+.alert-error {
+ color: #721c24;
+ background-color: #f8d7da;
+}
+
+.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/Week3/part1/index.html b/Week3/part1/index.html
new file mode 100644
index 000000000..9c8f80c1a
--- /dev/null
+++ b/Week3/part1/index.html
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+
+
+
+
+
+
+ HYF-GITHUB
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Week3/part1/index.js b/Week3/part1/index.js
new file mode 100644
index 000000000..8d3bac382
--- /dev/null
+++ b/Week3/part1/index.js
@@ -0,0 +1,144 @@
+'use strict';
+
+{
+ function fetchJSON(url) {
+ return new Promise((resolve, reject) => {
+ const xhr = new XMLHttpRequest();
+ xhr.open('GET', url);
+ xhr.responseType = 'json';
+ xhr.onload = () => {
+ if (xhr.status < 400) {
+ resolve(xhr.response);
+ } else {
+ reject(new Error(`Network error: ${xhr.status} - ${xhr.statusText}`));
+ }
+ };
+ xhr.onerror = () => reject(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;
+ }
+
+ // Display repository options in the header
+ function selectOptions(nameOption) {
+ const selectRepoHYF = document.getElementById('selectRepoHYF');
+ for (let i = 0; i < nameOption.length; i++) {
+ createAndAppend('option', selectRepoHYF, { value: i, text: nameOption[i].name });
+ }
+ }
+
+ // Information on left side inside a table
+ function displayInformation(element) {
+ const container = document.getElementById('container');
+ const infoDiv = createAndAppend('div', container, {
+ id: 'leftArea',
+ class: 'left-div whiteframe',
+ });
+ createAndAppend('table', infoDiv, { id: 'table' });
+ const table = document.getElementById('table');
+ createAndAppend('tbody', table, { id: 'tbody' });
+ function createTableRow(label, description) {
+ const tRow = createAndAppend('tr', table);
+ createAndAppend('td', tRow, { text: label, class: 'label' });
+ createAndAppend('td', tRow, { text: description });
+ }
+
+ createTableRow('Repository: ', element.name);
+ createTableRow('Description: ', element.description);
+ createTableRow('Forks : ', element.forks);
+ const date2 = new Date(element.updated_at).toLocaleString();
+ createTableRow('Updated: ', date2);
+ }
+
+ // Show contributors
+ function contributorsList(element) {
+ fetchJSON(element.contributors_url).then(data => {
+ const container = document.getElementById('container');
+ createAndAppend('div', container, {
+ id: 'rightArea',
+ class: 'right-div whiteframe',
+ });
+ const rightArea = document.getElementById('rightArea');
+ createAndAppend('p', rightArea, {
+ text: 'Contributions',
+ class: 'contributor-header',
+ });
+ createAndAppend('ul', rightArea, {
+ id: 'contList',
+ class: 'contributor-list',
+ });
+ let contributorURL;
+ let contributorItem;
+ let contributorData;
+ const contList = document.getElementById('contList');
+ for (let i = 0; i < data.length; i++) {
+ contributorURL = createAndAppend('a', contList, {
+ 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',
+ });
+ }
+ });
+ }
+
+ async function main(url) {
+ const root = document.getElementById('root');
+ try {
+ const data = await fetchJSON(url);
+ data.sort((a, b) => a.name.localeCompare(b.name));
+ createAndAppend('header', root, { id: 'topArea', class: 'header' });
+ const topArea = document.getElementById('topArea');
+ createAndAppend('p', topArea, { id: 'title', text: 'HYF Repositories' });
+ createAndAppend('select', topArea, { id: 'selectRepoHYF', class: 'repo-selector' });
+ createAndAppend('div', root, { id: 'container' });
+ selectOptions(data);
+ displayInformation(data[0]);
+ contributorsList(data[0]);
+
+ document.getElementById('selectRepoHYF').onchange = function startListener() {
+ const selectedItem = this.options[this.selectedIndex].value;
+ const infoLeft = document.getElementById('leftArea');
+ infoLeft.parentNode.removeChild(infoLeft);
+ const contributors = document.getElementById('rightArea');
+ contributors.parentNode.removeChild(contributors);
+
+ displayInformation(data[selectedItem]);
+ contributorsList(data[selectedItem]);
+ };
+ } catch (err) {
+ createAndAppend('div', root, { text: err.message, class: 'alert-error' });
+ }
+ }
+
+ const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
+
+ window.onload = () => main(HYF_REPOS_URL);
+}
diff --git a/Week3/part1/style.css b/Week3/part1/style.css
new file mode 100644
index 000000000..b3c23c168
--- /dev/null
+++ b/Week3/part1/style.css
@@ -0,0 +1,152 @@
+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;
+}
+
+.alert-error {
+ color: #721c24;
+ background-color: #f8d7da;
+}
+
+.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/Week3/part2/App.js b/Week3/part2/App.js
new file mode 100644
index 000000000..513627ca9
--- /dev/null
+++ b/Week3/part2/App.js
@@ -0,0 +1,82 @@
+'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