Week03

Week2/lecture.js

@@ -0,0 +1,5 @@
+//promises.them and catch
+//build small app that shows ransom dogs and cats
+// try and catch
+
+//event loop 

homework/index.js

@@ -1,46 +1,79 @@
 'use strict';
 
-{
-  function fetchJSON(url, cb) {
-    const xhr = new XMLHttpRequest();
-    xhr.open('GET', url);
-    xhr.responseType = 'json';
-    xhr.onload = () => {
-      if (xhr.status >= 200 && xhr.status <= 299) {
-        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 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;
+}
+
+
+
+async function main(url) {
+  try {
+    const response = await fetch(url);
+    const json = await response.json();
+    const root = document.getElementById('root');
+    const select = createAndAppend('select', root, { class: 'select' });
+    createAndAppend('option', select, { text: 'Choose your favorite repo' });
+    let sorted = json.sort((a, b) => (a.name.toLowerCase() > b.name.toLowerCase()));
+
+    sorted.forEach(repo => {
+      const name = repo.name;
+      createAndAppend('option', select, { text: name });
+    })
+    const wraper = createAndAppend('div', root, { class: 'wraper' });
+    const repoInfo = createAndAppend('div', wraper, { class: 'repoinfo' });
+    const contribs = createAndAppend('div', wraper, { class: 'contribs' });
+
+    select.addEventListener('change', evt => {
+      const selectedRepo = evt.target.value;
+      const repo = json.filter(r => r.name == selectedRepo)[0];
+      getContributorInformation();
+      repoInfo.innerHTML = '';
+      contribs.innerHTML = '';
+      const addInfo = (label, value) => {
+        const container = createAndAppend('div', repoInfo, { class: 'container' });
+        createAndAppend('span', container, { text: label });
+        createAndAppend('span', container, { text: value });
+      };
+      addInfo('Name: ', repo.name);
+      addInfo('Desciption: ', repo.description);
+      addInfo('Number of forks: ', repo.forks);
+      addInfo('Updated: ', repo.updated_at)
+
+    })
+
+  }
+  catch (err) {
+    const root = document.getElementById('root');
+    createAndAppend('div', root, { text: err.message, class: 'alert-error' })
   }
 
-  function main(url) {
-    fetchJSON(url, (err, repositories) => {
+  async function getContributorInformation(data) {
+    try {
+      const contribs = await fetch(data.contributors_url);
+      const jsonData = await contribs.json();
+
+
+      jsonData.forEach(contributor => {
+        createAndAppend('div', contribs, { text: contributor.login, class: 'contributor' })
+        createAndAppend('img', contribs, { src: contributor.avatar_url, height: 150, widtth: 150, id: 'img' })
+        createAndAppend('div', contribs, { text: contributor.contributions })
+      })
+    } catch (err) {
       const root = document.getElementById('root');
-      if (err) {
-        createAndAppend('div', root, { text: err.message, class: 'alert-error' });
-        return;
-      }
-      createAndAppend('pre', root, { text: JSON.stringify(repositories, null, 2) });
-    });
+      createAndAppend('div', contribs, { text: err.message, class: 'alert-error' })
+    }
   }
-
-  const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
-  window.onload = () => main(HYF_REPOS_URL);
 }
+const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
+window.onload = () => main(HYF_REPOS_URL);

homework/style.css

@@ -1,3 +0,0 @@
-.alert-error {
-    color: red;
-}