foocoding · chichiglacierz · Aug 25, 2019 · Aug 31, 2019 · Aug 31, 2019 · Aug 31, 2019
diff --git a/homework/index.html b/homework/index.html
@@ -18,7 +18,9 @@
   </head>
 
   <body>
-    <div id="root"></div>
+    <header>
+      <div id="root"></div>
+    </header>
     <script src="./index.js"></script>
   </body>
 </html>
diff --git a/homework/index.js b/homework/index.js
@@ -1,20 +1,24 @@
 '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 fetchJSON(url) {
+    const p = 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(xhr.statusText));
+        }
+      };
+      xhr.onerror = () => reject(new Error('Network Request failed'));
+      console.log();
+      xhr.send();
+    });
   }
+  const REPOS_URL = 'https://api.github.com/orgs/foocoding/repos?per_page=100';
 
   function createAndAppend(name, parent, options = {}) {
     const elem = document.createElement(name);
@@ -30,18 +34,106 @@
     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) });
-      }
+  function fetchContributors(contributors, contribContainer) {
+    createAndAppend('p', contribContainer, { text: 'Contributors', id: 'contributors' });
+    contributors.forEach(contributor => {
+      const contribDiv = createAndAppend('div', contribContainer, { class: 'contrib-info' });
+      createAndAppend('img', contribDiv, {
+        src: contributor.avatar_url,
+        text: contributor.login,
+        height: 150,
+        width: 150,
+        class: 'image',
+      });
+      createAndAppend('a', contribDiv, {
+        text: contributor.login,
+        href: contributor.html_url,
+        target: 'blank',
+        class: 'contrib-link',
+      });
+      createAndAppend('p', contribDiv, {
+        text: contributor.contributions,
+        class: 'contributor-badge',
+      });
     });
   }
 
+  function fetchAndAddContribData(repoInfo, repoContainer, contribContainer, root) {
+    repoContainer.innerHTML = repo.name;
+    contribContainer.innerHTML = repo.name;
+
+    createAndAppend('span', repoContainer, { text: 'Repository', class: 'repository' });
+    createAndAppend('a', repoContainer, {
+      text: '${repoInfo.name}',
+      href: repoInfo.html_url,
+      target: '_blank',
+      class: 'repo-link',
+    });
+
+    createAndAppend('p', repoInfo, {
+      text: 'Description: ${repoInfo.description}',
+      class: 'repo-child',
+    });
+
+    createAndAppend('p', repoInfo, {
+      text: 'Fork: ${repoInfo.forks}',
+      class: 'repo-child',
+    });
+
+    createAndAppend('p', repoInfo, {
+      text: 'Updated: ${Updated: ${updatedAt.toLocaleString()}',
+      class: 'repo-child',
+    });
+
+    fetchJSON(repoInfo.contributors_url)
+      .then(contributors => {
+        addContributors(contributors, contribContainer);
+      })
+      .catch(err => {
+        createAndAppend('div', root, { text: err.message, class: 'alert-error' });
+      });
+
+
+
+
+
+    function populateSelect(root, repos) {
+      const header = createAndAppend('header', root, { class: 'header' });
+      createAndAppend('p', header, { text: 'HYF Repositories', id: 'p' });
+      const select = createAndAppend('select', header, { id: 'select' });
+
+      repos.sort((a, b) => a.name.localeCompare(b.name));
+
+      repos.forEach((repo, index) => {
+        createAndAppend('option', select, { text: repo.name, value: index });
+      });
+      //console.log(populateSelect);
+
+      const mainContainer = createAndAppend('div', root, { id: 'main' });
+      const repoContainer = createAndAppend('div', mainContainer, { id: 'repo-container' });
+      const contribContainer = createAndAppend('div', mainContainer, {
+        id: 'contributor-container',
+      });
+
+
+
+    }
+  }
+
+
+    const header = createAndAppend('header', root, { class: 'header' });
+    const h1 = createAndAppend('h1', header, { text: 'FooCoding Repos', class: 'h1' });
+
+    const select = createAndAppend('select', root, { class: 'select' });
+    createAndAppend('option', select, { text: 'Choose your favorite repo below:' });
+
+    data.forEach(repo => {
+      const name = repo.name;
+      createAndAppend('option', select, { text: name });
+    });
+  }
   const REPOS_URL = 'https://api.github.com/orgs/foocoding/repos?per_page=100';
 
   window.onload = () => main(REPOS_URL);
+
 }
diff --git a/homework/style.css b/homework/style.css
@@ -1,3 +1,64 @@
+#root {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+}
+@media screen and (max-width: 768px) {
+  .h1.h1 {
+    width: 100%;
+  }
+  .right-div {
+    width: 100%;
+  }
+  .left-div {
+    width: 100%;
+  }
+}
 .alert-error {
-    color: red;
-}
+  color: red;
+}
+.h1 {
+  text-align: center;
+}
+.container {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  margin: 10px;
+}
+
+.right-div {
+  color: green;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  margin: 10px;
+  flex-grow: 1;
+  height: 200px;
+  width: 200px;
+}
+
+.left-div {
+  color: brown;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+  flex-grow: 1;
+
+  align-items: right;
+  margin: 10px;
+}
+header {
+  width: 800px;
+  height: 70px;
+  background-color: purple;
+  text-emphasis-color: white;
+  text-align: left;
+}
+.info-container {
+  text-align: left;
+  width: 40;
+  height: 30;
+}