upload homework unfinished

lfcoding1 · lfcoding1 · commit 620b85c14b6d · 2018-11-15T11:49:44.000+01:00
diff --git a/homework/src/index.js b/homework/src/index.js
@@ -29,19 +29,71 @@
     });
     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) });
+    while (root.firstChild) {
+      root.removeChild(root.firstChild);
+    }
+   
+    fetchJSON( HYF_REPOS_URL, (err, data) => {
+      let newArray = [];
+      let forkArray = [];
+      let languageArray = [];
+      let newURLArray = [];
+      let contributorsArray = [];
+      for (let i = 0; i < data.length; i++){
+        newArray.push(data[i].name);
+        newArray.sort();
+        forkArray.push(data[i].forks);
+        languageArray.push(data[i].language);
+        contributorsArray.push(data[i].contributors_url);
+        contributorsArray.sort();
+        newURLArray.push(data[i].html_url);
+        newURLArray.sort();
+      }
+   
+    let app = document.getElementById('root');   
+    const header = createAndAppend('h1', app, { text: "Hack Your Future Repositories", class: 'title' });
+    const subHeader = createAndAppend('h3', app, { text: "Select a repository:  ", class: 'subtitle'});
+    const selectList = createAndAppend('select', app, { text: 'Select a Repo', id: "mySelect" });
+    const container = createAndAppend('div', app, {class: 'container'});
+    const card = createAndAppend('div', container, {text: "Description of this repository ", class: 'card'});
+    const ul = createAndAppend('ul', card, {id: "myUl", });
+    const contributorsheader = createAndAppend('h1', root, { text: "Contributors", class: 'title' });
+    const contributorsContainer = createAndAppend('div', root, { class: 'container'})
+    const contributorsCard = createAndAppend('div', contributorsContainer, {text: "Contributors to this Repository", class: 'card'});
+    const contributorsUl = createAndAppend('ul', contributorsCard, {id: 'contributorsUl'});
+  
+    data.forEach((repo) => {  
+      for (let i = 0; i < newArray.length; i++) {
+        createAndAppend('option', selectList, {id: "myOption", value: i, text: newArray[i]});
+        }
+      });
+    
+    function removeNodes(container){
+        while (ul.hasChildNodes()) {
+          ul.removeChild(ul.firstChild);
+        }
+        while (contributorsUl.hasChildNodes()) {
+          contributorsUl.removeChild(contributorsUl.firstChild);
+        }
       }
+
+    selectList.onchange = function(selectedIndex){
+      createAndAppend('li', ul, { text: "Repository: " + newArray[this.selectedIndex], class: 'nameInContainer', function: removeNodes()});
+      createAndAppend('li', ul, { text: "Number of Forks: " + forkArray[this.selectedIndex], class: 'forksInContainer'});
+      createAndAppend('li', ul, { text: "Language: " + languageArray[this.selectedIndex], class: 'languageInContainer'});
+      createAndAppend('li', contributorsUl, { text: newURLArray[this.selectedIndex], class: 'contributorsInContainer'});
+
+      }
+
     });
   }
 
   const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
-
+  const theContributors_URL = 'https://api.github.com/repos/HackYourFuture/contributors';
   window.onload = () => main(HYF_REPOS_URL);
-}
+  window.onload = () => main(theContributors_URL);
+}
diff --git a/homework/src/style.css b/homework/src/style.css
@@ -1,3 +1,79 @@
 .alert-error {
     color: red;
-}
+}
+
+.title{
+    color: white;
+    background-color: darkslateblue;
+    font-size: 2rem;
+    border: 2px;
+    margin: 1rem;
+    padding-top: 1rem;
+}
+#root {
+    max-width: 1200px;
+    margin: 0 auto;
+    background-color: darkslateblue;
+  }
+  
+  .container {
+    display: flex;
+    flex-wrap: wrap;
+    border: 2px solid gray;
+    background-color: darkslateblue;
+  }
+
+  .contributorsContainer {
+    display: flex;
+    flex-wrap: wrap;
+    border: 2px solid gray;
+    background-color: darkslateblue;
+  }
+  
+  .card {
+    margin: 1rem;
+    border: 2px solid gray;
+    background-color: white;
+    color: black;
+  }
+  .contributorsCard {
+    margin: 1rem;
+    border: 2px solid gray;
+    background-color: darkslateblue;
+
+  }
+
+  .subtitle {
+      color: white;   
+      margin: 1rem;
+  }
+  #mySelect{
+    margin: 2rem;
+    padding: 1rem;
+    font-size: 1rem;
+    background-color: white;
+    color: black;
+  }
+
+  #myUl{
+    list-style-type: none;
+    font-size: 1.5rem;
+    }
+    
+  #contributorsUl{
+    list-style-type: none;
+    font-size: 1rem;
+    }
+ 
+  
+  @media screen and (min-width: 600px) {
+    .card {
+      flex: 1 1 calc(50% - 2rem);
+    }
+  }
+  
+  @media screen and (min-width: 900px) {
+    .card {
+      flex: 1 1 calc(33% - 2rem);
+    }
+  }
