Nahui · Nahui · Mar 20, 2019 · Mar 20, 2019
diff --git a/homework/App.js b/homework/App.js
@@ -72,7 +72,8 @@ class App {
    * @param {Error} error An Error object describing the error.
    */
   renderError(error) {
-    console.log(error); // TODO: replace with your own code
+    return error;
+    // console.log(error); // TODO: replace with your own code
   }
 }
 

diff --git a/homework/index.js b/homework/index.js
@@ -12,7 +12,7 @@
         cb(new Error(`Network error: ${xhr.status} - ${xhr.statusText}`));
       }
     };
-    xhr.onerror = () => cb(new Error('Network request failed'));
+    xhr.onerror = () => cb(new Error('Network request failed')); // “communication errors”: connection is lost or the remote server does not respond at all.
     xhr.send();
   }
 
@@ -30,13 +30,109 @@
     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('pre', root, { text: JSON.stringify(data, null, 2) });
+        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]);
+        };
       }
     });
   }

diff --git a/homework/indexTemp.js b/homework/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/homework/style.css b/homework/style.css
@@ -1,3 +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: red;
-}
+  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);
+}