Merge pull request #3 from AaaaT/homework-week1

annagabain · web-flow · commit df16ee47a38d · 2019-08-19T09:16:05.000+02:00
starting to make it work with js!
diff --git a/homework/index.html b/homework/index.html
@@ -17,19 +17,22 @@
     <link rel="stylesheet" href="./style.css" />
   </head>
   <header>    
-    <label>HYF Repositories </label>
-    <select>
+    <div id="root"><label>HYF Repositories </label></div>
+    <!--<select>
       <option value="0">alumni</option>
       <option value="1">angular</option>
-      <!-- etc -->
-    </select>
+       etc 
+    </select>-->
   </header>
 
   <body>
-    <!--<div id="root"></div>
-    <script src="./index.js"></script> -->
+    <script src="./index.js"></script>
 
-    <p>The repositories will be displayed here</p>
-    
+    <!--<p>The repositories will be displayed here</p> testing the body contents-->
+    <div id="forRepoBlock"></div>
+    <div id="forContributorsBlock"></div>
   </body>
 </html>
+
+
+
diff --git a/homework/index.js b/homework/index.js
@@ -31,28 +31,53 @@
   }
 
   function main(url) {
-    fetchJSON(url, (err, repositories) => {
-      const root = document.getElementById('root');
-      console.log(err, repositories);
+    fetchJSON(url, (err, data) => {
+      const root = document.getElementById('root','forRepoBlock', 'forContributorsBlock');
       if (err) {
         createAndAppend('div', root, { text: err.message, class: 'alert-error' });
-        const div = document.createElement('div');
-        div.textContent = err.message;
-        div.setAttribute('class', 'alert-error');
-        root.appendChild(div);
-        return;
-      }
-      createAndAppend('pre', root, { text: JSON.stringify(repositories, null, 2) });
+      } else {
+        //createAndAppend('pre', root, { text: JSON.stringify(data, null, 2) });
+        const select = createAndAppend('select', root);
+        createAndAppend('option', select, { text: 'Click here to choose a Repository' });
+        data.forEach(repo => {
+          const name = repo.name;
+          createAndAppend('option', select, { text: name });
+        });
+
+        const repoInfo = createAndAppend('div', forRepoBlock);
+        const contribs = createAndAppend('div', forContributorsBlock);
+        select.addEventListener('change', evt => {
+          const selectedRepo = evt.target.value;
+          const repo = data.filter(r => r.name == selectedRepo)[0];
+          console.log(repo);
+          repoInfo.innerHTML = '';
+          contribs.innerHTML = '';
+
+          const addInfo = (label, value) => {
+            const container = createAndAppend('div', repoInfo);
+            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);
 
-      /* //getting the names
-      repositories.forEach(repo => {
-        console.log(repo.name);
-        createAndAppend('div', root, { text: repo.name });*/
-      }); 
+          const contribsUrl = repo.contributors_url;
+          fetchJSON(contribsUrl, (err, contribData) => {
+            contribData.forEach(contributor => {
+              createAndAppend('div', contribs, { text: contributor.login });
+            });
+          });
+        });
+      }
     });
   }
 
   const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
 
   window.onload = () => main(HYF_REPOS_URL);
 }
+
+
+
diff --git a/homework/style.css b/homework/style.css
@@ -9,14 +9,30 @@ body {
     color: black;
     font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
     font-size: 1rem;
-    padding-right: 10px;
+    padding-right: 1px;
 }
 
 .alert-error {
     color: red;
 }
 
+
 select {
+    font-size: .9rem;
+    padding: 4px 25px;
+    margin-left: 10px;
+    border-radius: 20px;
+}
+
+#forRepoBlock {
+    color: purple;
+    font-size: .9rem;
+    padding: 1px 25px;
+    margin-left: 2px;
+    border-radius: 20px;
+}
+#forContributorsBlock {
+    color: brown;
     font-size: .9rem;
     padding: 4px 25px;
     margin-left: 25px;
