Week1

homework/src/index.js

@@ -6,7 +6,7 @@
     xhr.open('GET', url);
     xhr.responseType = 'json';
     xhr.onload = () => {
-      if (xhr.status < 400) {
+      if (xhr.status < 400 && xhr.readyState === 4) {
         cb(null, xhr.response);
       } else {
         cb(new Error(`Network error: ${xhr.status} - ${xhr.statusText}`));
@@ -29,18 +29,77 @@
     });
     return elem;
   }
+  function addRow(table, label, value) {
+    const tr = createAndAppend('tr', table);
+    createAndAppend('td', tr, { 'html': label, 'class': 'tr' });
+    createAndAppend('td', tr, { 'html': value });
+  }
 
   function main(url) {
     fetchJSON(url, (err, data) => {
       const root = document.getElementById('root');
+      const header = createAndAppend('header', root, { 'html': '<h3> HYF Repositories <h3>' });
+      const select = createAndAppend('select', header);
+      const div = createAndAppend('div', root, { 'id': 'div1' });
+      const div2 = createAndAppend('div', root, { 'id': 'div2' });
+
       if (err) {
-        createAndAppend('div', root, { html: err.message, class: 'alert-error' });
+        createAndAppend('p', div2, { html: err.message, class: 'alert-error' });
       } else {
-        createAndAppend('pre', root, { html: JSON.stringify(data, null, 2) });
+        data.sort((a, b) => a.name.localeCompare(b.name, { ignorePunctuation: true }));
+        data.forEach((repo, index) => {
+          createAndAppend('option', select, { html: repo.name, value: index });
+        });
+
+        const contrubutorsURL = data[0].contributors_url;
+        fetchJSON(contrubutorsURL, (err, contdata) => {
+          if (err) {
+            createAndAppend('p', div2, { html: err.message, class: 'alert-error' });
+          } else {
+            contdata.forEach((contr) => {
+              rightSection(contr);
+            });
+          }
+        });
+
+        select.addEventListener('change', (event) => {
+          const contrubutorsURL = data[event.target.value].contributors_url;
+          div2.innerHTML = '';
+          fetchJSON(contrubutorsURL, (err, contdata) => {
+            if (err) {
+              createAndAppend('p', div2, { html: err.message, class: 'alert-error' });
+            } else {
+              contdata.forEach((contr) => {
+                rightSection(contr);
+              });
+            }
+          });
+        });
+
+        leftSection(data[0]);
+        select.addEventListener('change', (event) => {
+          div.innerHTML = '';
+          leftSection(data[event.target.value]);
+        });
+      }
+      function leftSection(repo) {
+
+        const table = createAndAppend('table', div);
+        addRow(table, 'Repository :', repo.name);
+        addRow(table, 'Description :', repo.description);
+        addRow(table, 'Forks :', repo.forks_count);
+        const date = new Date(repo.updated_at).toLocaleString();
+        addRow(table, 'last update :', date);
+      }
+
+      function rightSection(repo) {
+        const div3 = createAndAppend('div', div2, { 'class': 'container' });
+        createAndAppend('img', div3, { 'src': repo.avatar_url });
+        createAndAppend('a', div3, { 'html': repo.login, 'href': repo.html_url });
+        createAndAppend('p', div3, { 'html': repo.contributions, 'class': 'contributions' });
       }
     });
   }
-
   const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
 
   window.onload = () => main(HYF_REPOS_URL);

homework/src/style.css

@@ -1,3 +1,122 @@
-.alert-error {
-    color: red;
-}
+.alert-error{
+  color:black;
+}
+select{  
+
+   height: 30px;
+   overflow: hidden;
+
+}
+
+body {font-size:20px;
+  color:white;
+  padding: 0 25%;
+    font-weight: 900;
+
+}
+p , a{    text-decoration: none;
+  color:white;
+  font-size:20px;
+  margin-top:25px;
+
+}
+h3{
+  margin-right:20px;
+  margin-left:20px
+}
+
+header {min-width: 350px;
+      display: flex;
+    flex-direction: column;
+    align-items: center;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  background-color: orange;
+}
+
+#div1 {
+   min-width: 350px;
+
+  max-height: 250px;
+      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  background-color: orange;
+}
+#div2 {min-width: 350px;
+
+      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  background-color: orange;
+
+}
+
+
+
+
+td {
+    vertical-align: top;
+
+}
+
+td:first-child {
+min-width: 150px;
+
+}
+
+#root {
+  display: flex;  
+  flex-flow: row wrap;
+  font-weight: bold;
+
+}
+
+
+
+
+
+img{
+height: 100px;
+  width : 100px;
+
+}
+.contributions{
+padding-right:20px;
+}
+.container{
+      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  background-color: orange;
+
+
+      display: flex;
+    flex-direction: row;
+
+    flex: auto;
+    justify-content: space-between;
+    align-content: center;
+    margin-bottom: 10px;
+
+
+}
+
+
+#root > * {
+  margin: 20px;
+  padding: 10px;
+  flex: 1 100%;
+}
+
+
+@media all and (min-width: 600px) {
+    header{ flex-direction: row;}
+  #div1 { 
+
+      flex: 1 auto; }
+  #div2 { flex: 1 auto; }
+}
+
+@media all and (min-width: 800px) {
+
+  #div1 { 
+      min-width: auto;
+      flex: 3 0px; order: 1; } 
+  #div2 { order: 2; }
+
+}
+