HackYourFuture · abdulsalamalmahdi · Jun 6, 2019
diff --git a/homework/View.js b/homework/View.js
@@ -0,0 +1,45 @@
+class View {
+  constructor(e) {
+    this.initialize(e);
+  }
+  async initialize(e) {
+    const t = document.getElementById('root'), r = Util.createAndAppend('header', t, { class: 'header' });
+    Util.createAndAppend('p', r, { html: 'HYF Repositories' });
+    const n = Util.createAndAppend('select', r, {
+      class: 'repo-selector',
+      'aria-label': 'HYF Repositories',
+    });
+    n.addEventListener('change', () => this.fetchAndRender(n.value)),
+      Util.createAndAppend('div', t, { id: 'container' });
+    try {
+      const t = await Util.fetchJSON(e);
+      (this.repos = t.sort((e, t) => e.name.localeCompare(t.name)).map(e => new Repository(e))),
+        this.repos.forEach((e, t) => {
+          Util.createAndAppend('option', n, { html: e.name(), value: t });
+        }),
+        this.fetchAndRender(n.value);
+    }
+    catch (e) {
+      this.renderError(e);
+    }
+  }
+  async fetchAndRender(e) {
+    const t = this.repos[e], r = document.getElementById('container');
+    try {
+      const e = await t.fetchContributors();
+      r.innerHTML = '';
+      const n = Util.createAndAppend('div', r, { class: 'left-div whiteframe' }), i = Util.createAndAppend('div', r, { class: 'right-div whiteframe' });
+      Util.createAndAppend('p', i, { html: 'Contributions', class: 'contributor-header' });
+      const a = Util.createAndAppend('ul', i, { class: 'contributor-list' });
+      t.render(n), e.map(e => new Contributor(e)).forEach(e => e.render(a));
+    }
+    catch (e) {
+      this.renderError(e);
+    }
+  }
+  renderError(e) {
+    const t = document.getElementById('container');
+    (t.innerHTML = ''),
+      Util.createAndAppend('div', t, { html: e.message, class: 'alert alert-error' });
+  }
+}
diff --git a/homework/index.html b/homework/index.html
@@ -16,8 +16,13 @@
 </head>
 
 <body>
-  <div id="root"></div>
-  <script src="./index.js"></script>
+  <div id="root"> <h2>HYF Repositories<h2> </div>
+
+ <div id="roota">
+    <p id="repoInfo"></p>
+    <p id="repoContributers"><sub>Contributins : <br /></sub></h6></p>
+ </div>
+  <script src="index.js"></script>
 </body>
 
 </html>
diff --git a/homework/index.js b/homework/index.js
@@ -29,14 +29,31 @@
     });
     return elem;
   }
+  function createLI(root, sel, options = []) {
+    const select = document.createElement(sel);
+
+    root.appendChild(select);
+    select.innerHTML = options
+      .sort()
+      .map(repo => `<option value="${repo.id}">${repo.name}</option>`)
+      .join('\n');
+    select.addEventListener('change', function() {
+      const chosenRepoId = +this.value;
+      const selectedRepo = options.find(repo => repo.id === chosenRepoId);
+      document.getElementById('repoInfo').innerHTML = 'repository: ' + selectedRepo.name + '<br />' + 'Description: ' + selectedRepo.description + "<br />>" + 'forks: ' + selectedRepo.forks + '<br />' + 'updated: ' + selectedRepo.updated_at;
+      document.getElementById('repoContributers').innerHTML 
+
+    });
+  }
 
   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('pre', root, { text: JSON.stringify(data, null, 2) });
+        createLI(root, 'select', data);
       }
     });
   }