foocoding · suthatta · Aug 21, 2019 · Aug 23, 2019 · Aug 23, 2019 · Aug 23, 2019
diff --git a/Week1/index.html b/Week1/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <meta name="theme-color" content="#000000" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="format-detection" content="telephone=no" />
+    <link rel="apple-touch-icon" href="./hyf.png" />
+    <link rel="shortcut icon" type="image/png" href="./hyf.png" />
+    <title>HYF-GITHUB</title>
+    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" />
+    <link rel="stylesheet" href="./style.css" />
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script src="./index.js"></script>
+  </body>
+</html>
diff --git a/Week1/index.js 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);
+}
diff --git a/Week1/style.css 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;
+}