tchapeaux · AlfiYusrina · May 27, 2019 · May 27, 2019 · May 30, 2019
diff --git a/alfi.txt b/alfi.txt
@@ -0,0 +1 @@
+Week 1 Homework
diff --git a/homework/index.js b/homework/index.js
@@ -31,14 +31,114 @@
   }
 
   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 rootContainer = document.getElementById("root");
+        const header = document.createElement("header");
+        header.className = "header";
+        const titleHeader = document.createElement("p");
+        titleHeader.innerHTML = "HYF Repositories: ";
+        const repoSelector = document.createElement("select");
+        repoSelector.className = "repo-selector";
+        header.appendChild(titleHeader);
+        header.appendChild(repoSelector);
+
+        const container = document.createElement("div");
+        container.className = "container";
+
+        const containerLeft = document.createElement("div");
+        containerLeft.className = "left-div";
+        containerLeft.className += " whiteframe";
+
+        const containerRight = document.createElement("div");
+        containerRight.className = "right-div";
+        containerRight.className += " whiteframe";
+
+        const table = document.createElement("table");
+        const tableBody = document.createElement("tbody");
+        table.appendChild(tableBody);
+        containerLeft.appendChild(table);
+        const removeAllChildren = (parent) => {
+          while (parent.firstChild) {
+            parent.removeChild(parent.firstChild);
+          }
+        };
+        const contributorHeader = document.createElement("p");
+        contributorHeader.className = "contributor-header";
+        contributorHeader.innerHTML = "Contributors";
+        const contributorList = document.createElement("ul");
+        contributorList.className = "contributor-list";
+        containerRight.appendChild(contributorHeader);
+        containerRight.appendChild(contributorList);
+
+        container.appendChild(containerLeft);
+        container.appendChild(containerRight);
+        rootContainer.appendChild(header);
+        rootContainer.appendChild(container);
+
+
+        const repos = document.querySelector(".repo-selector");
+        data.sort(function (a, b) {
+            return a.name.localeCompare(b.name);
+          });
+
+        repos.innerHTML = data.map(
+          (repo, i) => `<option value="${i}">${repo.name}</option>`
+        ).join("");
+
+        const tableRow = document.createElement("tr");
+        tableBody.appendChild(tableRow);
+
+        const makeRow = (label, content) => {
+          const tableRow = document.createElement("tr");
+          tableBody.appendChild(tableRow);
+          const tableData = document.createElement("td");
+          const repoName = document.createElement("td");
+          tableRow.appendChild(tableData);
+          tableRow.appendChild(repoName);
+          tableData.innerHTML = label;
+          tableData.className = "label";
+          repoName.innerHTML = content;
+        };
+        const createContributorItems = (url) => {
+          fetch(url)
+            .then(response => response.json())
+            .then(data => {
+              contributorList.innerHTML = data.map((item, i) =>
+                `<li class="contributor-item" aria-label=${item.login} tabindex="${i}">
+                  <img src="${item.avatar_url}" height="48" class="contributor-avatar">
+                  <div class="contributor-data">
+                    <a href="https://github.com/${item.login}" target="_blank">${item.login}</a>
+                    <span class="contributor-badge">${item.contributions}</span>
+                  </div>
+                </li>`)
+                .join("");
+
+            });
+        };
+        const createRepoInfo = (repoId) => {
+          makeRow("Repository: ", `<a href="https://github.com/HackYourFuture/${data[repoId].name}" target="_blank">${data[repoId].name}</a>`);
+          makeRow("Description: ", data[repoId].description);
+          makeRow("Forks: ", data[repoId].forks);
+          makeRow("Updated: ", new Date(data[repoId].updated_at).toLocaleDateString("en-US"));
+        };
+        const setRepo = (repoId) => {
+          removeAllChildren(tableRow);
+          createRepoInfo(repoId);
+          createContributorItems(data[repoId].contributors_url);
+        };
+        setRepo(0);
+        repos.addEventListener("change", function(){
+          const repoId = this.value;
+          setRepo(repoId);
+        });
       }
     });
+
   }
 
   const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';

diff --git a/homework/style.css b/homework/style.css
@@ -1,3 +1,93 @@
+body {
+  font-family: 'Roboto', sans-serif;
+}
+header {
+  background-color: #a1c7cb;
+  display: flex;
+  padding-left: 2em;
+  align-items: center;
+  margin-bottom: 2em;
+}
+#root {
+  margin: 0 auto;
+  width: 960px;
+}
+.repo-selector {
+  margin-left: 2em;
+  font-size: 14px;
+  width: 250px;
+  height: 32px;
+}
+.container {
+  display: flex;
+  align-items: flex-start;
+  flex-direction: row;
+}
+.left-div {
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+  margin-right: 16px;
+  flex: 1;
+}
+.right-div {
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+  margin-right: 16px;
+  flex: 1;
+}
+
+td {
+    vertical-align: top;
+}
+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, .2), 0 3px 4px 0 rgba(0, 0, 0, .14), 0 3px 3px -2px rgba(0, 0, 0, .12);
+}
+.contributor-avatar {
+    border-radius: 3px;
+    margin-right: 16px;
+}
+.contributor-list {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+}
+.contributor-header {
+    font-size: 0.8rem;
+    color: rgb(0, 0, 0, 54%);
+    padding: 8px 16px 4px 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-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;
+}
 .alert-error {
     color: red;
-}
+}