From 0e1cc5a4fb52322aac3197045cbec19640318db8 Mon Sep 17 00:00:00 2001
From: Louise Francois <louise.ban@gmail.com>
Date: Tue, 4 Dec 2018 12:11:59 +0100
Subject: [PATCH] added week2 as branch

---
 Week2/homework/src/App.js         |  63 +++++++++---
 Week2/homework/src/Contributor.js |  19 +++-
 Week2/homework/src/Repository.js  | 122 ++++++++++++++++++++--
 Week2/homework/src/Util.js        |   2 +-
 Week2/homework/src/index.html     |   4 +-
 Week2/homework/src/index.js       |  61 ++++++++---
 Week2/homework/src/index2Fetch.js |  48 ++++++---
 homework/.eslintrc                |  47 +++++++++
 homework/App.js                   |  81 ---------------
 homework/Contributor.js           |  19 ----
 homework/Repository.js            |  33 ------
 homework/index.js                 |  47 ---------
 homework/index2.html              |  27 -----
 homework/src/App.js               | 118 +++++++++++++++++++++
 homework/src/Contributor.js       |  35 +++++++
 homework/src/Repository.js        | 144 ++++++++++++++++++++++++++
 homework/{ => src}/Util.js        |   4 +-
 homework/{ => src}/hyf.png        | Bin
 homework/{ => src}/index.html     |  11 +-
 homework/src/index.js             | 166 ++++++++++++++++++++++++++++++
 homework/src/index2Fetch.js       | 145 ++++++++++++++++++++++++++
 homework/src/style.css            | 163 +++++++++++++++++++++++++++++
 homework/style.css                |   3 -
 23 files changed, 1092 insertions(+), 270 deletions(-)
 create mode 100644 homework/.eslintrc
 delete mode 100644 homework/App.js
 delete mode 100644 homework/Contributor.js
 delete mode 100644 homework/Repository.js
 delete mode 100644 homework/index.js
 delete mode 100644 homework/index2.html
 create mode 100644 homework/src/App.js
 create mode 100644 homework/src/Contributor.js
 create mode 100644 homework/src/Repository.js
 rename homework/{ => src}/Util.js (95%)
 rename homework/{ => src}/hyf.png (100%)
 rename homework/{ => src}/index.html (70%)
 create mode 100644 homework/src/index.js
 create mode 100644 homework/src/index2Fetch.js
 create mode 100644 homework/src/style.css
 delete mode 100644 homework/style.css

diff --git a/Week2/homework/src/App.js b/Week2/homework/src/App.js
index 3e0660c..cfa1032 100644
--- a/Week2/homework/src/App.js
+++ b/Week2/homework/src/App.js
@@ -12,23 +12,55 @@ class App {
    * @param {string} url The GitHub URL for obtaining the organization's repositories.
    */
   async initialize(url) {
-    // Add code here to initialize your app
-    // 1. Create the fixed HTML elements of your page
-    // 2. Make an initial XMLHttpRequest using Util.fetchJSON() to populate your <select> element
-
     const root = document.getElementById('root');
-    // ...
-
     try {
-      // ...
-      const repos = await Util.fetchJSON(url);
-      this.repos = repos.map(repo => new Repository(repo));
-      // ...
+      const data = await Util.fetchJSON(url);
+      this.data = data.map(repo => new Repository(repo));
+      await renderContainer(data)
     } catch (error) {
       this.renderError(error);
     }
+    
+
+    function renderIndex0(data){
+      for (let i = 0; i < data.length; i++){          
+        let Image0Link = Util.createAndAppend('li', contributorsUl, {})
+        let contributor0Name = Util.createAndAppend('img', Image0Link, {src: data[i].avatar_url, class: 'imageSrc'});
+        let contributor0Link = Util.createAndAppend('a', Image0Link, {text: data[i].login, target: "_blank", href: data[i].html_url, id: 'link'});
+        let contributor0Badge = Util.createAndAppend('li', Image0Link, {text:"Contributions: " + data[i].contributions, class: 'badge'});
+      } //end for
+
+     
+                                       
+    data.forEach((repo) => {  
+      for (let i = 0; i < newArray.length; i++) {
+        Util.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);
+      }
+    } //end removeNodes
+                          
+    selectList.onchange = function(selectedIndex){                          
+    let repoName = Util.createAndAppend('li', ul, { text: "Repository: ", class: 'nameInContainer', function: removeNodes()});
+    Util.createAndAppend('a', repoName, { text: newArray[this.selectedIndex], id: 'linkInContainer', target: "_blank", href: htmlArray[this.selectedIndex]});
+    Util.createAndAppend('li', ul, {text: "Description: " + descriptionArray[this.selectedIndex], class: 'descriptionInContainer'});
+    Util.createAndAppend('li', ul, { text: "Number of Forks: " + forkArray[this.selectedIndex], class: 'forksInContainer'});
+    Util.createAndAppend('li', ul, { text: "Language: " + languageArray[this.selectedIndex], class: 'languageInContainer'});
+    let dates = new Date (updatedAt[this.selectedIndex]);
+    dates = dates.toUTCString();
+    Util.createAndAppend('li', ul, {text: "Updated at: " + dates, class: 'updatedAtInContainer'});               
+    }// end of onchange
+    }// end renderIndex0
   }
 
+
   /**
    * Removes all child elements from a container element
    * @param {*} container Container element to clear
@@ -71,11 +103,16 @@ class App {
    * Render an error to the DOM.
    * @param {Error} error An Error object describing the error.
    */
-  renderError(error) {
-    // Replace this comment with your code
+  
+  renderError(err) {
+    let catsrc = 'https://us.123rf.com/450wm/photodeti/photodeti1702/photodeti170200132/72587923-cat-holding-stop-sign-isolated-on-white-background-.jpg?ver=6';
+    Util.createAndAppend('div', root, { text: err.message, class: 'alert-error' }), 
+    Util.createAndAppend('img', root, {id: 'catImage', src: catsrc});
   }
 }
 
 const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
+let index0API = 'https://api.github.com/repos/HackYourFuture/alumni/contributors';
+
 
-window.onload = () => new App(HYF_REPOS_URL);
+window.onload = () => new App(HYF_REPOS_URL);
\ No newline at end of file
diff --git a/Week2/homework/src/Contributor.js b/Week2/homework/src/Contributor.js
index 34bcc81..76baaca 100644
--- a/Week2/homework/src/Contributor.js
+++ b/Week2/homework/src/Contributor.js
@@ -13,6 +13,23 @@ class Contributor {
    * @param {HTMLElement} contributorList The parent element in which to render the contributor.
   */
   render(contributorList) {
-    // Replace this comment with your code
+    function renderContributors(data){
+      for (let i = 0; i < data.length; i++){          
+        let ImageLink = Util.createAndAppend('li', contributorsUl, {})
+        let contributorName = Util.createAndAppend('img', ImageLink, {src: data[i].avatar_url, class: 'imageSrc'});
+        let contributorLink = Util.createAndAppend('a', ImageLink, {text: data[i].login, target: "_blank", href: data[i].html_url, id: 'link'});
+        let contributorBadge = Util.createAndAppend('li', ImageLink, {text:"Contributions: " + data[i].contributions, class: 'badge'});
+      } //end for
+    }//end renderContributors
   }
 }
+
+//this is not part of Contributor constructor, but is here
+function renderContributors(data){
+  for (let i = 0; i < data.length; i++){          
+    let ImageLink = Util.createAndAppend('li', contributorsUl, {})
+    let contributorName = Util.createAndAppend('img', ImageLink, {src: data[i].avatar_url, class: 'imageSrc'});
+    let contributorLink = Util.createAndAppend('a', ImageLink, {text: data[i].login, target: "_blank", href: data[i].html_url, id: 'link'});
+    let contributorBadge = Util.createAndAppend('li', ImageLink, {text:"Contributions: " + data[i].contributions, class: 'badge'});
+  } //end for
+}//end renderContributors (called in Repository.js)
\ No newline at end of file
diff --git a/Week2/homework/src/Repository.js b/Week2/homework/src/Repository.js
index c4d3ec7..f861585 100644
--- a/Week2/homework/src/Repository.js
+++ b/Week2/homework/src/Repository.js
@@ -6,16 +6,14 @@
 class Repository {
   constructor(data) {
     this.data = data;
-  }
+  } //end constructor
 
   /**
    * Render the repository info to the DOM.
    * @param {HTMLElement} parent The parent element in which to render the repository.
    */
-  render(parent) {
-    //
-    // Replace this comment with your code
-    //
+  renderContainer(data) {
+
   }
 
   /**
@@ -30,5 +28,117 @@ class Repository {
    */
   name() {
     return this.data.name;
+  } //end name
+} //end Repository
+function renderContainer(data){
+  async function get0API(url){
+    try{
+      let data = await Util.fetchJSON(index0API)
+      await renderIndex0(data) 
+      } catch(error) {
+        this.renderError(error);
+      }  
+  } //end asyn function
+
+  get0API(index0API)
+  let newArray = [];
+  let forkArray = [];
+  let languageArray = [];
+  let descriptionArray = [];
+  let updatedAt = [];
+  let htmlArray = [];
+  const root = document.getElementById('root'); 
+  data.sort((a, b) => (a.name).localeCompare(b.name));
+                        
+  for (let i = 0; i < data.length; i++){
+    newArray.push(data[i].name);
+    descriptionArray.push(data[i].description);
+    forkArray.push(data[i].forks);
+    languageArray.push(data[i].language);
+    updatedAt.push(data[i].updated_at);
+    htmlArray.push(data[i].html_url); 
+    var date =  new Date ((data[i].updated_at));
+    date = date.toUTCString();
+    }
+                                                
+  while (root.firstChild) {
+    root.removeChild(root.firstChild);
   }
-}
+                    
+  Util.createAndAppend('h1', root, { text: "Hack Your Future Repositories", class: 'title' });
+  Util.createAndAppend('h3', root, { text: "Select a repository:  ", class: 'subtitle'});
+  const selectList = Util.createAndAppend('select', root, {id: "mySelect" });
+  const headerDiv = Util.createAndAppend('div', root, {class: 'headerdiv'});
+  Util.createAndAppend('h3', headerDiv, { text: "Repository Information", class: 'subtitle', id: 'repoHeader' });
+  Util.createAndAppend('h3', headerDiv, { text: "Contributors", class: 'subtitle', id:'contributorHeader' });
+  const container = Util.createAndAppend('div', root, {class: 'container'});
+  const card = Util.createAndAppend('div', container, { class: 'card'});
+  const ul = Util.createAndAppend('ul', card, {id: "myUl", });
+  const contributorsCard = Util.createAndAppend('div', container, {class: 'card'});
+  const contributorsUl = Util.createAndAppend('ul', contributorsCard, {id: 'contributorsUl'});
+  const Index0Name = Util.createAndAppend ('li', ul, {text: "Repository: ", class: 'nameInContainer'});
+  const Index0Link = Util.createAndAppend ('a', Index0Name, {text: newArray[0], target: "_blank", href: htmlArray[0]});
+  const Index0Description = Util.createAndAppend('li', ul, {text: "Description: " + descriptionArray[0], class:"descriptionInContainer"});
+  const Index0Fork = Util.createAndAppend ('li', ul, {text: "Number of Forks: " + forkArray[0], class: 'forksInContainer'});
+  const Index0Language = Util.createAndAppend ('li', ul, {text: "Language: "  + languageArray[0], class: 'updatedAtInContainer'});
+  const Index0UpdatedAt = Util.createAndAppend ('li', ul, {text: "Updated at: " + date, class: 'updatedAtInContainer'})
+                                             
+  function renderIndex0(data){
+    for (let i = 0; i < data.length; i++){          
+      let Image0Link = Util.createAndAppend('li', contributorsUl, {})
+      let contributor0Name = Util.createAndAppend('img', Image0Link, {src: data[i].avatar_url, class: 'imageSrc'});
+      let contributor0Link = Util.createAndAppend('a', Image0Link, {text: data[i].login, target: "_blank", href: data[i].html_url, id: 'link'});
+      let contributor0Badge = Util.createAndAppend('li', Image0Link, {text:"Contributions: " + data[i].contributions, class: 'badge'});
+    } //end for
+                                     
+  data.forEach((repo) => {  
+    for (let i = 0; i < newArray.length; i++) {
+      Util.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);
+    }
+  } //end removeNodes
+                        
+  selectList.onchange = function(selectedIndex){
+    let contributorAPI = 'https://api.github.com/repos/HackYourFuture/' + newArray[this.selectedIndex] + '/contributors'
+    async function getAPI(url){
+      try{
+        let data = await Util.fetchJSON(contributorAPI)
+        await renderContributors(data) 
+      } catch(error) {
+        this.renderError(error);
+      }  
+  }
+         
+  getAPI(contributorAPI);
+  let repoName = Util.createAndAppend('li', ul, { text: "Repository: ", class: 'nameInContainer', function: removeNodes()});
+  Util.createAndAppend('a', repoName, { text: newArray[this.selectedIndex], id: 'linkInContainer', target: "_blank", href: htmlArray[this.selectedIndex]});
+  Util.createAndAppend('li', ul, {text: "Description: " + descriptionArray[this.selectedIndex], class: 'descriptionInContainer'});
+  Util.createAndAppend('li', ul, { text: "Number of Forks: " + forkArray[this.selectedIndex], class: 'forksInContainer'});
+  Util.createAndAppend('li', ul, { text: "Language: " + languageArray[this.selectedIndex], class: 'languageInContainer'});
+  let dates = new Date (updatedAt[this.selectedIndex]);
+  dates = dates.toUTCString();
+  Util.createAndAppend('li', ul, {text: "Updated at: " + dates, class: 'updatedAtInContainer'});
+
+  
+                  
+  }// end of onchange
+  }// end renderIndex0
+  } //end renderContainer
+
+  function renderContributors(data){
+  
+    for (let i = 0; i < data.length; i++){          
+      let ImageLink = Util.createAndAppend('li', contributorsUl, {})
+      let contributorName = Util.createAndAppend('img', ImageLink, {src: data[i].avatar_url, class: 'imageSrc'});
+      let contributorLink = Util.createAndAppend('a', ImageLink, {text: data[i].login, target: "_blank", href: data[i].html_url, id: 'link'});
+      let contributorBadge = Util.createAndAppend('li', ImageLink, {text:"Contributions: " + data[i].contributions, class: 'badge'});
+    } //end for
+  }//end createStuff3
\ No newline at end of file
diff --git a/Week2/homework/src/Util.js b/Week2/homework/src/Util.js
index 3c54241..038828e 100644
--- a/Week2/homework/src/Util.js
+++ b/Week2/homework/src/Util.js
@@ -32,4 +32,4 @@ class Util {
       xhr.send();
     });
   }
-}
+}
\ No newline at end of file
diff --git a/Week2/homework/src/index.html b/Week2/homework/src/index.html
index 1ba6991..5dd5ff5 100644
--- a/Week2/homework/src/index.html
+++ b/Week2/homework/src/index.html
@@ -18,7 +18,9 @@
 
 <body>
   <div id="root"></div>
-  <script src="./index.js"></script>
+  <script src="./index.js"></script>  
+ 
+
 </body>
 <footer id ="footer">
   <p>Created by: Louise Francois</p>
diff --git a/Week2/homework/src/index.js b/Week2/homework/src/index.js
index 5b55a10..21b4913 100644
--- a/Week2/homework/src/index.js
+++ b/Week2/homework/src/index.js
@@ -30,18 +30,28 @@ function createAndAppend(name, parent, options = {}) {
   });
   return elem;
 }
-      
-function main(url) {
-  fetchJSON(HYF_REPOS_URL)
-  .then(data => createStuff(data))
-  .catch(err => createAndAppend('div', root, { text: err.message, class: 'alert-error' }), 
-                createAndAppend('img', root, {id: 'catImage', src: 'https://us.123rf.com/450wm/photodeti/photodeti1702/photodeti170200132/72587923-cat-holding-stop-sign-isolated-on-white-background-.jpg?ver=6'}));
-  } //end main
+let catsrc = 'https://us.123rf.com/450wm/photodeti/photodeti1702/photodeti170200132/72587923-cat-holding-stop-sign-isolated-on-white-background-.jpg?ver=6';
 
-function createStuff(data){
-  fetchJSON('https://api.github.com/repos/HackYourFuture/alumni/contributors')
-  .then(data => createStuff2(data))
+async function main(url) {
+  try {
+    let data = await fetchJSON(url)
+    await renderContainer(data)
+  } catch(error) {
+    renderError(error);
+  } // end catch
+  } //end main
 
+function renderContainer(data){
+    async function get0API(url){
+      try{
+        let data = await fetchJSON(index0API)
+        await renderIndex0(data) 
+        } catch(error) {
+          renderError(error);
+        }  
+    } //end asyn function
+  
+  get0API(index0API)
   let newArray = [];
   let forkArray = [];
   let languageArray = [];
@@ -84,7 +94,7 @@ function createStuff(data){
   const Index0Language = createAndAppend ('li', ul, {text: "Language: "  + languageArray[0], class: 'updatedAtInContainer'});
   const Index0UpdatedAt = createAndAppend ('li', ul, {text: "Updated at: " + date, class: 'updatedAtInContainer'})
                                              
-  function createStuff2(data){
+  function renderIndex0(data){
     for (let i = 0; i < data.length; i++){          
       let Image0Link = createAndAppend('li', contributorsUl, {})
       let contributor0Name = createAndAppend('img', Image0Link, {src: data[i].avatar_url, class: 'imageSrc'});
@@ -108,9 +118,17 @@ function createStuff(data){
   } //end removeNodes
                         
   selectList.onchange = function(selectedIndex){
-    fetchJSON('https://api.github.com/repos/HackYourFuture/' + newArray[this.selectedIndex] + '/contributors')
-      .then(data => createStuff3(data))
-                         
+    let contributorAPI = 'https://api.github.com/repos/HackYourFuture/' + newArray[this.selectedIndex] + '/contributors'
+    async function getAPI(url){
+      try{
+        let data = await fetchJSON(contributorAPI)
+        await renderContributors(data) 
+      } catch(error) {
+        this.renderError(error);
+      }  
+  }
+  
+  getAPI(contributorAPI);
   let repoName = createAndAppend('li', ul, { text: "Repository: ", class: 'nameInContainer', function: removeNodes()});
   createAndAppend('a', repoName, { text: newArray[this.selectedIndex], id: 'linkInContainer', target: "_blank", href: htmlArray[this.selectedIndex]});
   createAndAppend('li', ul, {text: "Description: " + descriptionArray[this.selectedIndex], class: 'descriptionInContainer'});
@@ -124,16 +142,25 @@ function createStuff(data){
   }// end createStuff2
   } //end createStuff
 
-  function createStuff3(data){
+  function renderContributors(data){
+  
     for (let i = 0; i < data.length; i++){          
       let ImageLink = createAndAppend('li', contributorsUl, {})
       let contributorName = createAndAppend('img', ImageLink, {src: data[i].avatar_url, class: 'imageSrc'});
       let contributorLink = createAndAppend('a', ImageLink, {text: data[i].login, target: "_blank", href: data[i].html_url, id: 'link'});
       let contributorBadge = createAndAppend('li', ImageLink, {text:"Contributions: " + data[i].contributions, class: 'badge'});
     } //end for
-  }//end createStuff3
+  }//end renderContributors
+
+  function renderError(err) {
+    let catsrc = 'https://us.123rf.com/450wm/photodeti/photodeti1702/photodeti170200132/72587923-cat-holding-stop-sign-isolated-on-white-background-.jpg?ver=6';
+    createAndAppend('div', root, { text: err.message, class: 'alert-error' }), 
+    createAndAppend('img', root, {id: 'catImage', src: catsrc});
+  }
                 
   const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
+  let index0API = 'https://api.github.com/repos/HackYourFuture/alumni/contributors';
   window.onload = () => main(HYF_REPOS_URL);
                 
-  }
\ No newline at end of file
+  }
+  
\ No newline at end of file
diff --git a/Week2/homework/src/index2Fetch.js b/Week2/homework/src/index2Fetch.js
index aa6ef5d..bec2562 100644
--- a/Week2/homework/src/index2Fetch.js
+++ b/Week2/homework/src/index2Fetch.js
@@ -14,16 +14,19 @@ function createAndAppend(name, parent, options = {}) {
         });
         return elem;
 }    
-function main(url) {
-    fetch(HYF_REPOS_URL)
-        .then(response => response.json())
-        .then(json => createStuff(json))
-        .catch(err => createAndAppend('div', root, { text: err.message, class: 'alert-error' }), 
-                      createAndAppend('img', root, {id: 'catImage', src: 'https://us.123rf.com/450wm/photodeti/photodeti1702/photodeti170200132/72587923-cat-holding-stop-sign-isolated-on-white-background-.jpg?ver=6'}));
-  
+
+async function main(url) {
+    try{
+        let response = await fetch(HYF_REPOS_URL);
+        const data = await response.json()
+        await createStuff(data)
+    } catch(err) {
+        createAndAppend('div', root, { text: err.message, class: 'alert-error' }), 
+        createAndAppend('img', root, {id: 'catImage', src: 'https://us.123rf.com/450wm/photodeti/photodeti1702/photodeti170200132/72587923-cat-holding-stop-sign-isolated-on-white-background-.jpg?ver=6'});
+    }
 } //end main
 
-function createStuff(data){
+async function createStuff(data){
     let newArray = [];
     let forkArray = [];
     let languageArray = [];
@@ -68,10 +71,16 @@ function createStuff(data){
     const Index0UpdatedAt = createAndAppend ('li', ul, {text: "Updated at: " + date, class: 'updatedAtInContainer'})
         
     fetch('https://api.github.com/repos/HackYourFuture/' + newArray[0] + '/contributors')
-        .then(response =>response.json())
-        .then(json => createStuff2(json))
-        .catch(err => createAndAppend('div', root, { text: err.message, class: 'alert-error' }))
-        
+    try {
+        let response = await fetch('https://api.github.com/repos/HackYourFuture/' + newArray[0] + '/contributors')
+        let data = await response.json()
+        await createStuff2(data)
+    }catch(err) {
+        createAndAppend('div', root, { text: err.message, class: 'alert-error' }), 
+        createAndAppend('img', root, {id: 'catImage', src: 'https://us.123rf.com/450wm/photodeti/photodeti1702/photodeti170200132/72587923-cat-holding-stop-sign-isolated-on-white-background-.jpg?ver=6'});
+    } //end catch
+
+
     function createStuff2(data){
         for (let i = 0; i < data.length; i++){          
             let Image0Link = createAndAppend('li', contributorsUl, {})
@@ -97,12 +106,17 @@ function createStuff(data){
             }
         } //end removeNodes
         
-        selectList.onchange = function(selectedIndex){
+        selectList.onchange = async function(selectedIndex){
           fetch('https://api.github.com/repos/HackYourFuture/' + newArray[this.selectedIndex] + '/contributors')
-            .then(response =>response.json())
-            .then(json => createStuff3(json))
-            .catch(err => createAndAppend('div', root, { text: err.message, class: 'alert-error' }))
-          
+          try {
+              let response = await fetch('https://api.github.com/repos/HackYourFuture/' + newArray[this.selectedIndex] + '/contributors')
+              let data = await response.json()
+              await createStuff3(data)
+          }catch (err) {
+            createAndAppend('div', root, { text: err.message, class: 'alert-error' }), 
+            createAndAppend('img', root, {id: 'catImage', src: 'https://us.123rf.com/450wm/photodeti/photodeti1702/photodeti170200132/72587923-cat-holding-stop-sign-isolated-on-white-background-.jpg?ver=6'});
+          } //end catch
+
           function createStuff3(data){
               for (let i = 0; i < data.length; i++){          
                 let ImageLink = createAndAppend('li', contributorsUl, {})
diff --git a/homework/.eslintrc b/homework/.eslintrc
new file mode 100644
index 0000000..ae81895
--- /dev/null
+++ b/homework/.eslintrc
@@ -0,0 +1,47 @@
+{
+  "env": {
+    "browser": true,
+    "commonjs": true,
+    "es6": true,
+    "node": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 2017,
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "sourceType": "module"
+  },
+  "extends": [
+    "eslint:recommended"
+  ],
+  "rules": {
+    "no-const-assign": "warn",
+    "no-this-before-super": "warn",
+    "no-undef": "warn",
+    "no-unreachable": "warn",
+    "no-unused-vars": "warn",
+    "constructor-super": "warn",
+    "valid-typeof": "warn",
+    "no-var": "warn",
+    "prefer-const": "warn",
+    "no-multiple-empty-lines": "warn",
+    "eol-last": [
+      "error",
+      "always"
+    ],
+    "no-console": "off",
+    "camelcase": "warn",
+    "eqeqeq": [
+      "error",
+      "always",
+      {
+        "null": "ignore"
+      }
+    ],
+    "semi": [
+      "warn",
+      "always"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/homework/App.js b/homework/App.js
deleted file mode 100644
index 32b71e3..0000000
--- a/homework/App.js
+++ /dev/null
@@ -1,81 +0,0 @@
-'use strict';
-
-/* global Util, Repository, Contributor */
-
-class App {
-  constructor(url) {
-    this.initialize(url);
-  }
-
-  /**
-   * Initialization
-   * @param {string} url The GitHub URL for obtaining the organization's repositories.
-   */
-  async initialize(url) {
-    // Add code here to initialize your app
-    // 1. Create the fixed HTML elements of your page
-    // 2. Make an initial XMLHttpRequest using Util.fetchJSON() to populate your <select> element
-
-    const root = document.getElementById('root');
-
-    Util.createAndAppend('h1', root, { text: 'It works!' }); // TODO: replace with your own code
-
-    try {
-      const repos = await Util.fetchJSON(url);
-      this.repos = repos.map(repo => new Repository(repo));
-      // TODO: add your own code here
-    } catch (error) {
-      this.renderError(error);
-    }
-  }
-
-  /**
-   * Removes all child elements from a container element
-   * @param {*} container Container element to clear
-   */
-  static clearContainer(container) {
-    while (container.firstChild) {
-      container.removeChild(container.firstChild);
-    }
-  }
-
-  /**
-   * Fetch contributor information for the selected repository and render the
-   * repo and its contributors as HTML elements in the DOM.
-   * @param {number} index The array index of the repository.
-   */
-  async fetchContributorsAndRender(index) {
-    try {
-      const repo = this.repos[index];
-      const contributors = await repo.fetchContributors();
-
-      const container = document.getElementById('container');
-      App.clearContainer(container);
-
-      const leftDiv = Util.createAndAppend('div', container);
-      const rightDiv = Util.createAndAppend('div', container);
-
-      const contributorList = Util.createAndAppend('ul', rightDiv);
-
-      repo.render(leftDiv);
-
-      contributors
-        .map(contributor => new Contributor(contributor))
-        .forEach(contributor => contributor.render(contributorList));
-    } catch (error) {
-      this.renderError(error);
-    }
-  }
-
-  /**
-   * Render an error to the DOM.
-   * @param {Error} error An Error object describing the error.
-   */
-  renderError(error) {
-    console.log(error); // TODO: replace with your own code
-  }
-}
-
-const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
-
-window.onload = () => new App(HYF_REPOS_URL);
diff --git a/homework/Contributor.js b/homework/Contributor.js
deleted file mode 100644
index 0bfd5a1..0000000
--- a/homework/Contributor.js
+++ /dev/null
@@ -1,19 +0,0 @@
-'use strict';
-
-/* global Util */
-
-// eslint-disable-next-line no-unused-vars
-class Contributor {
-  constructor(contributor) {
-    this.contributor = contributor;
-  }
-
-  /**
-   * Render the contributor info to the DOM.
-   * @param {HTMLElement} container The container element in which to render the contributor.
-   */
-  render(container) {
-    // TODO: replace the next line with your code.
-    Util.createAndAppend('pre', container, JSON.stringify(this.contributor, null, 2));
-  }
-}
diff --git a/homework/Repository.js b/homework/Repository.js
deleted file mode 100644
index 267960a..0000000
--- a/homework/Repository.js
+++ /dev/null
@@ -1,33 +0,0 @@
-'use strict';
-
-/* global Util */
-
-// eslint-disable-next-line no-unused-vars
-class Repository {
-  constructor(repository) {
-    this.repository = repository;
-  }
-
-  /**
-   * Render the repository info to the DOM.
-   * @param {HTMLElement} container The container element in which to render the repository.
-   */
-  render(container) {
-    // TODO: replace the next line with your code.
-    Util.createAndAppend('pre', container, JSON.stringify(this.repository, null, 2));
-  }
-
-  /**
-   * Returns an array of contributors as a promise
-   */
-  fetchContributors() {
-    return Util.fetchJSON(this.repository.contributors_url);
-  }
-
-  /**
-   * Returns the name of the repository
-   */
-  name() {
-    return this.repository.name;
-  }
-}
diff --git a/homework/index.js b/homework/index.js
deleted file mode 100644
index 64e419c..0000000
--- a/homework/index.js
+++ /dev/null
@@ -1,47 +0,0 @@
-'use strict';
-
-{
-  function fetchJSON(url, cb) {
-    const xhr = new XMLHttpRequest();
-    xhr.open('GET', url);
-    xhr.responseType = 'json';
-    xhr.onload = () => {
-      if (xhr.status < 400) {
-        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.innerText = value;
-      } else {
-        elem.setAttribute(key, value);
-      }
-    });
-    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) });
-      }
-    });
-  }
-
-  const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
-
-  window.onload = () => main(HYF_REPOS_URL);
-}
diff --git a/homework/index2.html b/homework/index2.html
deleted file mode 100644
index 2d1fc8f..0000000
--- a/homework/index2.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
-    />
-    <meta name="theme-color" content="#000000" />
-    <meta name="apple-mobile-web-app-capable" content="yes" />
-    <meta name="mobile-web-app-capable" content="yes" />
-    <meta name="format-detection" content="telephone=no" />
-    <link rel="apple-touch-icon" href="./hyf.png" />
-    <link rel="shortcut icon" type="image/png" href="./hyf.png" />
-    <title>HYF-GITHUB</title>
-    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" />
-    <link rel="stylesheet" href="./style.css" />
-  </head>
-
-  <body>
-    <div id="root"></div>
-    <script src="./Util.js"></script>
-    <script src="./Repository.js"></script>
-    <script src="./Contributor.js"></script>
-    <script src="./App.js"></script>
-  </body>
-</html>
diff --git a/homework/src/App.js b/homework/src/App.js
new file mode 100644
index 0000000..cfa1032
--- /dev/null
+++ b/homework/src/App.js
@@ -0,0 +1,118 @@
+'use strict';
+
+/* global Util, Repository, Contributor */
+
+class App {
+  constructor(url) {
+    this.initialize(url);
+  }
+
+  /**
+   * Initialization
+   * @param {string} url The GitHub URL for obtaining the organization's repositories.
+   */
+  async initialize(url) {
+    const root = document.getElementById('root');
+    try {
+      const data = await Util.fetchJSON(url);
+      this.data = data.map(repo => new Repository(repo));
+      await renderContainer(data)
+    } catch (error) {
+      this.renderError(error);
+    }
+    
+
+    function renderIndex0(data){
+      for (let i = 0; i < data.length; i++){          
+        let Image0Link = Util.createAndAppend('li', contributorsUl, {})
+        let contributor0Name = Util.createAndAppend('img', Image0Link, {src: data[i].avatar_url, class: 'imageSrc'});
+        let contributor0Link = Util.createAndAppend('a', Image0Link, {text: data[i].login, target: "_blank", href: data[i].html_url, id: 'link'});
+        let contributor0Badge = Util.createAndAppend('li', Image0Link, {text:"Contributions: " + data[i].contributions, class: 'badge'});
+      } //end for
+
+     
+                                       
+    data.forEach((repo) => {  
+      for (let i = 0; i < newArray.length; i++) {
+        Util.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);
+      }
+    } //end removeNodes
+                          
+    selectList.onchange = function(selectedIndex){                          
+    let repoName = Util.createAndAppend('li', ul, { text: "Repository: ", class: 'nameInContainer', function: removeNodes()});
+    Util.createAndAppend('a', repoName, { text: newArray[this.selectedIndex], id: 'linkInContainer', target: "_blank", href: htmlArray[this.selectedIndex]});
+    Util.createAndAppend('li', ul, {text: "Description: " + descriptionArray[this.selectedIndex], class: 'descriptionInContainer'});
+    Util.createAndAppend('li', ul, { text: "Number of Forks: " + forkArray[this.selectedIndex], class: 'forksInContainer'});
+    Util.createAndAppend('li', ul, { text: "Language: " + languageArray[this.selectedIndex], class: 'languageInContainer'});
+    let dates = new Date (updatedAt[this.selectedIndex]);
+    dates = dates.toUTCString();
+    Util.createAndAppend('li', ul, {text: "Updated at: " + dates, class: 'updatedAtInContainer'});               
+    }// end of onchange
+    }// end renderIndex0
+  }
+
+
+  /**
+   * Removes all child elements from a container element
+   * @param {*} container Container element to clear
+   */
+  clearContainer(container) {
+    while (container.firstChild) {
+      container.removeChild(container.firstChild);
+    }
+  }
+
+  /**
+   * Fetch contributor information for the selected repository and render the
+   * repo and its contributors as HTML elements in the DOM.
+   * @param {number} index The array index of the repository.
+   */
+  async fetchContributorsAndRender(index) {
+    try {
+      const repo = this.repos[index];
+      const contributors = await repo.fetchContributors();
+
+      const container = document.getElementById('container');
+      this.clearContainer(container);
+
+      const leftDiv = Util.createAndAppend('div', container);
+      const rightDiv = Util.createAndAppend('div', container);
+
+      const contributorList = Util.createAndAppend('ul', rightDiv);
+
+      repo.render(leftDiv);
+
+      contributors
+        .map(contributor => new Contributor(contributor))
+        .forEach(contributor => contributor.render(contributorList));
+    } catch (error) {
+      this.renderError(error);
+    }
+  }
+
+  /**
+   * Render an error to the DOM.
+   * @param {Error} error An Error object describing the error.
+   */
+  
+  renderError(err) {
+    let catsrc = 'https://us.123rf.com/450wm/photodeti/photodeti1702/photodeti170200132/72587923-cat-holding-stop-sign-isolated-on-white-background-.jpg?ver=6';
+    Util.createAndAppend('div', root, { text: err.message, class: 'alert-error' }), 
+    Util.createAndAppend('img', root, {id: 'catImage', src: catsrc});
+  }
+}
+
+const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
+let index0API = 'https://api.github.com/repos/HackYourFuture/alumni/contributors';
+
+
+window.onload = () => new App(HYF_REPOS_URL);
\ No newline at end of file
diff --git a/homework/src/Contributor.js b/homework/src/Contributor.js
new file mode 100644
index 0000000..76baaca
--- /dev/null
+++ b/homework/src/Contributor.js
@@ -0,0 +1,35 @@
+'use strict';
+
+/* global Util */
+
+// eslint-disable-next-line no-unused-vars
+class Contributor {
+  constructor(data) {
+    this.data = data;
+  }
+
+  /**
+   * Render the contributor info to the DOM.
+   * @param {HTMLElement} contributorList The parent element in which to render the contributor.
+  */
+  render(contributorList) {
+    function renderContributors(data){
+      for (let i = 0; i < data.length; i++){          
+        let ImageLink = Util.createAndAppend('li', contributorsUl, {})
+        let contributorName = Util.createAndAppend('img', ImageLink, {src: data[i].avatar_url, class: 'imageSrc'});
+        let contributorLink = Util.createAndAppend('a', ImageLink, {text: data[i].login, target: "_blank", href: data[i].html_url, id: 'link'});
+        let contributorBadge = Util.createAndAppend('li', ImageLink, {text:"Contributions: " + data[i].contributions, class: 'badge'});
+      } //end for
+    }//end renderContributors
+  }
+}
+
+//this is not part of Contributor constructor, but is here
+function renderContributors(data){
+  for (let i = 0; i < data.length; i++){          
+    let ImageLink = Util.createAndAppend('li', contributorsUl, {})
+    let contributorName = Util.createAndAppend('img', ImageLink, {src: data[i].avatar_url, class: 'imageSrc'});
+    let contributorLink = Util.createAndAppend('a', ImageLink, {text: data[i].login, target: "_blank", href: data[i].html_url, id: 'link'});
+    let contributorBadge = Util.createAndAppend('li', ImageLink, {text:"Contributions: " + data[i].contributions, class: 'badge'});
+  } //end for
+}//end renderContributors (called in Repository.js)
\ No newline at end of file
diff --git a/homework/src/Repository.js b/homework/src/Repository.js
new file mode 100644
index 0000000..f861585
--- /dev/null
+++ b/homework/src/Repository.js
@@ -0,0 +1,144 @@
+'use strict';
+
+/* global Util */
+
+// eslint-disable-next-line no-unused-vars
+class Repository {
+  constructor(data) {
+    this.data = data;
+  } //end constructor
+
+  /**
+   * Render the repository info to the DOM.
+   * @param {HTMLElement} parent The parent element in which to render the repository.
+   */
+  renderContainer(data) {
+
+  }
+
+  /**
+   * Returns an array of contributors as a promise
+   */
+  fetchContributors() {
+    return Util.fetchJSON(this.data.contributors_url);
+  }
+
+  /**
+   * Returns the name of the repository
+   */
+  name() {
+    return this.data.name;
+  } //end name
+} //end Repository
+function renderContainer(data){
+  async function get0API(url){
+    try{
+      let data = await Util.fetchJSON(index0API)
+      await renderIndex0(data) 
+      } catch(error) {
+        this.renderError(error);
+      }  
+  } //end asyn function
+
+  get0API(index0API)
+  let newArray = [];
+  let forkArray = [];
+  let languageArray = [];
+  let descriptionArray = [];
+  let updatedAt = [];
+  let htmlArray = [];
+  const root = document.getElementById('root'); 
+  data.sort((a, b) => (a.name).localeCompare(b.name));
+                        
+  for (let i = 0; i < data.length; i++){
+    newArray.push(data[i].name);
+    descriptionArray.push(data[i].description);
+    forkArray.push(data[i].forks);
+    languageArray.push(data[i].language);
+    updatedAt.push(data[i].updated_at);
+    htmlArray.push(data[i].html_url); 
+    var date =  new Date ((data[i].updated_at));
+    date = date.toUTCString();
+    }
+                                                
+  while (root.firstChild) {
+    root.removeChild(root.firstChild);
+  }
+                    
+  Util.createAndAppend('h1', root, { text: "Hack Your Future Repositories", class: 'title' });
+  Util.createAndAppend('h3', root, { text: "Select a repository:  ", class: 'subtitle'});
+  const selectList = Util.createAndAppend('select', root, {id: "mySelect" });
+  const headerDiv = Util.createAndAppend('div', root, {class: 'headerdiv'});
+  Util.createAndAppend('h3', headerDiv, { text: "Repository Information", class: 'subtitle', id: 'repoHeader' });
+  Util.createAndAppend('h3', headerDiv, { text: "Contributors", class: 'subtitle', id:'contributorHeader' });
+  const container = Util.createAndAppend('div', root, {class: 'container'});
+  const card = Util.createAndAppend('div', container, { class: 'card'});
+  const ul = Util.createAndAppend('ul', card, {id: "myUl", });
+  const contributorsCard = Util.createAndAppend('div', container, {class: 'card'});
+  const contributorsUl = Util.createAndAppend('ul', contributorsCard, {id: 'contributorsUl'});
+  const Index0Name = Util.createAndAppend ('li', ul, {text: "Repository: ", class: 'nameInContainer'});
+  const Index0Link = Util.createAndAppend ('a', Index0Name, {text: newArray[0], target: "_blank", href: htmlArray[0]});
+  const Index0Description = Util.createAndAppend('li', ul, {text: "Description: " + descriptionArray[0], class:"descriptionInContainer"});
+  const Index0Fork = Util.createAndAppend ('li', ul, {text: "Number of Forks: " + forkArray[0], class: 'forksInContainer'});
+  const Index0Language = Util.createAndAppend ('li', ul, {text: "Language: "  + languageArray[0], class: 'updatedAtInContainer'});
+  const Index0UpdatedAt = Util.createAndAppend ('li', ul, {text: "Updated at: " + date, class: 'updatedAtInContainer'})
+                                             
+  function renderIndex0(data){
+    for (let i = 0; i < data.length; i++){          
+      let Image0Link = Util.createAndAppend('li', contributorsUl, {})
+      let contributor0Name = Util.createAndAppend('img', Image0Link, {src: data[i].avatar_url, class: 'imageSrc'});
+      let contributor0Link = Util.createAndAppend('a', Image0Link, {text: data[i].login, target: "_blank", href: data[i].html_url, id: 'link'});
+      let contributor0Badge = Util.createAndAppend('li', Image0Link, {text:"Contributions: " + data[i].contributions, class: 'badge'});
+    } //end for
+                                     
+  data.forEach((repo) => {  
+    for (let i = 0; i < newArray.length; i++) {
+      Util.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);
+    }
+  } //end removeNodes
+                        
+  selectList.onchange = function(selectedIndex){
+    let contributorAPI = 'https://api.github.com/repos/HackYourFuture/' + newArray[this.selectedIndex] + '/contributors'
+    async function getAPI(url){
+      try{
+        let data = await Util.fetchJSON(contributorAPI)
+        await renderContributors(data) 
+      } catch(error) {
+        this.renderError(error);
+      }  
+  }
+         
+  getAPI(contributorAPI);
+  let repoName = Util.createAndAppend('li', ul, { text: "Repository: ", class: 'nameInContainer', function: removeNodes()});
+  Util.createAndAppend('a', repoName, { text: newArray[this.selectedIndex], id: 'linkInContainer', target: "_blank", href: htmlArray[this.selectedIndex]});
+  Util.createAndAppend('li', ul, {text: "Description: " + descriptionArray[this.selectedIndex], class: 'descriptionInContainer'});
+  Util.createAndAppend('li', ul, { text: "Number of Forks: " + forkArray[this.selectedIndex], class: 'forksInContainer'});
+  Util.createAndAppend('li', ul, { text: "Language: " + languageArray[this.selectedIndex], class: 'languageInContainer'});
+  let dates = new Date (updatedAt[this.selectedIndex]);
+  dates = dates.toUTCString();
+  Util.createAndAppend('li', ul, {text: "Updated at: " + dates, class: 'updatedAtInContainer'});
+
+  
+                  
+  }// end of onchange
+  }// end renderIndex0
+  } //end renderContainer
+
+  function renderContributors(data){
+  
+    for (let i = 0; i < data.length; i++){          
+      let ImageLink = Util.createAndAppend('li', contributorsUl, {})
+      let contributorName = Util.createAndAppend('img', ImageLink, {src: data[i].avatar_url, class: 'imageSrc'});
+      let contributorLink = Util.createAndAppend('a', ImageLink, {text: data[i].login, target: "_blank", href: data[i].html_url, id: 'link'});
+      let contributorBadge = Util.createAndAppend('li', ImageLink, {text:"Contributions: " + data[i].contributions, class: 'badge'});
+    } //end for
+  }//end createStuff3
\ No newline at end of file
diff --git a/homework/Util.js b/homework/src/Util.js
similarity index 95%
rename from homework/Util.js
rename to homework/src/Util.js
index 693e1bd..038828e 100644
--- a/homework/Util.js
+++ b/homework/src/Util.js
@@ -5,7 +5,7 @@ class Util {
   static createAndAppend(name, parent, options = {}) {
     const elem = document.createElement(name);
     parent.appendChild(elem);
-    Object.keys(options).forEach(key => {
+    Object.keys(options).forEach((key) => {
       const value = options[key];
       if (key === 'text') {
         elem.innerText = value;
@@ -32,4 +32,4 @@ class Util {
       xhr.send();
     });
   }
-}
+}
\ No newline at end of file
diff --git a/homework/hyf.png b/homework/src/hyf.png
similarity index 100%
rename from homework/hyf.png
rename to homework/src/hyf.png
diff --git a/homework/index.html b/homework/src/index.html
similarity index 70%
rename from homework/index.html
rename to homework/src/index.html
index 9c8f80c..5dd5ff5 100644
--- a/homework/index.html
+++ b/homework/src/index.html
@@ -13,11 +13,18 @@
   <title>HYF-GITHUB</title>
   <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
   <link rel="stylesheet" href="./style.css">
+  <link href="https://fonts.googleapis.com/css?family=Allerta+Stencil|Play" rel="stylesheet">
 </head>
 
 <body>
   <div id="root"></div>
-  <script src="./index.js"></script>
-</body>
+  <script src="./index.js"></script>  
+ 
 
+</body>
+<footer id ="footer">
+  <p>Created by: Louise Francois</p>
+  <p> <a href="https://github.com/lfcoding1?tab=repositories">
+  Check out my Repositories here</a>.</p>
+</footer>
 </html>
\ No newline at end of file
diff --git a/homework/src/index.js b/homework/src/index.js
new file mode 100644
index 0000000..21b4913
--- /dev/null
+++ b/homework/src/index.js
@@ -0,0 +1,166 @@
+'use strict';
+{
+function fetchJSON(url) {
+  return new Promise(function(resolve, reject){
+  const xhr = new XMLHttpRequest();
+    xhr.open('GET', url);
+    xhr.responseType = 'json';
+    xhr.onload = () => {
+      if (xhr.status < 400) {
+        resolve(xhr.response);
+      } else {
+        reject(new Error(`Network error: ${xhr.status} - ${xhr.statusText}`));
+      }
+    }
+    xhr.onerror = () => reject(new Error('Network request failed'));
+    xhr.send();
+  }); // end promise
+ } //end fetchJSON
+ 
+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.innerText = value;
+      } else {
+      elem.setAttribute(key, value);
+      }
+  });
+  return elem;
+}
+let catsrc = 'https://us.123rf.com/450wm/photodeti/photodeti1702/photodeti170200132/72587923-cat-holding-stop-sign-isolated-on-white-background-.jpg?ver=6';
+
+async function main(url) {
+  try {
+    let data = await fetchJSON(url)
+    await renderContainer(data)
+  } catch(error) {
+    renderError(error);
+  } // end catch
+  } //end main
+
+function renderContainer(data){
+    async function get0API(url){
+      try{
+        let data = await fetchJSON(index0API)
+        await renderIndex0(data) 
+        } catch(error) {
+          renderError(error);
+        }  
+    } //end asyn function
+  
+  get0API(index0API)
+  let newArray = [];
+  let forkArray = [];
+  let languageArray = [];
+  let descriptionArray = [];
+  let updatedAt = [];
+  let htmlArray = [];
+  const root = document.getElementById('root'); 
+  data.sort((a, b) => (a.name).localeCompare(b.name));
+                        
+  for (let i = 0; i < data.length; i++){
+    newArray.push(data[i].name);
+    descriptionArray.push(data[i].description);
+    forkArray.push(data[i].forks);
+    languageArray.push(data[i].language);
+    updatedAt.push(data[i].updated_at);
+    htmlArray.push(data[i].html_url); 
+    var date =  new Date ((data[i].updated_at));
+    date = date.toUTCString();
+    }
+                                                
+  while (root.firstChild) {
+    root.removeChild(root.firstChild);
+  }
+                    
+  createAndAppend('h1', root, { text: "Hack Your Future Repositories", class: 'title' });
+  createAndAppend('h3', root, { text: "Select a repository:  ", class: 'subtitle'});
+  const selectList = createAndAppend('select', root, {id: "mySelect" });
+  const headerDiv = createAndAppend('div', root, {class: 'headerdiv'});
+  createAndAppend('h3', headerDiv, { text: "Repository Information", class: 'subtitle', id: 'repoHeader' });
+  createAndAppend('h3', headerDiv, { text: "Contributors", class: 'subtitle', id:'contributorHeader' });
+  const container = createAndAppend('div', root, {class: 'container'});
+  const card = createAndAppend('div', container, { class: 'card'});
+  const ul = createAndAppend('ul', card, {id: "myUl", });
+  const contributorsCard = createAndAppend('div', container, {class: 'card'});
+  const contributorsUl = createAndAppend('ul', contributorsCard, {id: 'contributorsUl'});
+  const Index0Name = createAndAppend ('li', ul, {text: "Repository: ", class: 'nameInContainer'});
+  const Index0Link = createAndAppend ('a', Index0Name, {text: newArray[0], target: "_blank", href: htmlArray[0]});
+  const Index0Description = createAndAppend('li', ul, {text: "Description: " + descriptionArray[0], class:"descriptionInContainer"});
+  const Index0Fork = createAndAppend ('li', ul, {text: "Number of Forks: " + forkArray[0], class: 'forksInContainer'});
+  const Index0Language = createAndAppend ('li', ul, {text: "Language: "  + languageArray[0], class: 'updatedAtInContainer'});
+  const Index0UpdatedAt = createAndAppend ('li', ul, {text: "Updated at: " + date, class: 'updatedAtInContainer'})
+                                             
+  function renderIndex0(data){
+    for (let i = 0; i < data.length; i++){          
+      let Image0Link = createAndAppend('li', contributorsUl, {})
+      let contributor0Name = createAndAppend('img', Image0Link, {src: data[i].avatar_url, class: 'imageSrc'});
+      let contributor0Link = createAndAppend('a', Image0Link, {text: data[i].login, target: "_blank", href: data[i].html_url, id: 'link'});
+      let contributor0Badge = createAndAppend('li', Image0Link, {text:"Contributions: " + data[i].contributions, class: 'badge'});
+    } //end for
+                                     
+  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);
+    }
+  } //end removeNodes
+                        
+  selectList.onchange = function(selectedIndex){
+    let contributorAPI = 'https://api.github.com/repos/HackYourFuture/' + newArray[this.selectedIndex] + '/contributors'
+    async function getAPI(url){
+      try{
+        let data = await fetchJSON(contributorAPI)
+        await renderContributors(data) 
+      } catch(error) {
+        this.renderError(error);
+      }  
+  }
+  
+  getAPI(contributorAPI);
+  let repoName = createAndAppend('li', ul, { text: "Repository: ", class: 'nameInContainer', function: removeNodes()});
+  createAndAppend('a', repoName, { text: newArray[this.selectedIndex], id: 'linkInContainer', target: "_blank", href: htmlArray[this.selectedIndex]});
+  createAndAppend('li', ul, {text: "Description: " + descriptionArray[this.selectedIndex], class: 'descriptionInContainer'});
+  createAndAppend('li', ul, { text: "Number of Forks: " + forkArray[this.selectedIndex], class: 'forksInContainer'});
+  createAndAppend('li', ul, { text: "Language: " + languageArray[this.selectedIndex], class: 'languageInContainer'});
+  let dates = new Date (updatedAt[this.selectedIndex]);
+  dates = dates.toUTCString();
+  createAndAppend('li', ul, {text: "Updated at: " + dates, class: 'updatedAtInContainer'});
+                  
+  }// end of onchange
+  }// end createStuff2
+  } //end createStuff
+
+  function renderContributors(data){
+  
+    for (let i = 0; i < data.length; i++){          
+      let ImageLink = createAndAppend('li', contributorsUl, {})
+      let contributorName = createAndAppend('img', ImageLink, {src: data[i].avatar_url, class: 'imageSrc'});
+      let contributorLink = createAndAppend('a', ImageLink, {text: data[i].login, target: "_blank", href: data[i].html_url, id: 'link'});
+      let contributorBadge = createAndAppend('li', ImageLink, {text:"Contributions: " + data[i].contributions, class: 'badge'});
+    } //end for
+  }//end renderContributors
+
+  function renderError(err) {
+    let catsrc = 'https://us.123rf.com/450wm/photodeti/photodeti1702/photodeti170200132/72587923-cat-holding-stop-sign-isolated-on-white-background-.jpg?ver=6';
+    createAndAppend('div', root, { text: err.message, class: 'alert-error' }), 
+    createAndAppend('img', root, {id: 'catImage', src: catsrc});
+  }
+                
+  const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
+  let index0API = 'https://api.github.com/repos/HackYourFuture/alumni/contributors';
+  window.onload = () => main(HYF_REPOS_URL);
+                
+  }
+  
\ No newline at end of file
diff --git a/homework/src/index2Fetch.js b/homework/src/index2Fetch.js
new file mode 100644
index 0000000..bec2562
--- /dev/null
+++ b/homework/src/index2Fetch.js
@@ -0,0 +1,145 @@
+'use strict';
+
+{
+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.innerText = value;
+          } else {
+            elem.setAttribute(key, value);
+          }
+        });
+        return elem;
+}    
+
+async function main(url) {
+    try{
+        let response = await fetch(HYF_REPOS_URL);
+        const data = await response.json()
+        await createStuff(data)
+    } catch(err) {
+        createAndAppend('div', root, { text: err.message, class: 'alert-error' }), 
+        createAndAppend('img', root, {id: 'catImage', src: 'https://us.123rf.com/450wm/photodeti/photodeti1702/photodeti170200132/72587923-cat-holding-stop-sign-isolated-on-white-background-.jpg?ver=6'});
+    }
+} //end main
+
+async function createStuff(data){
+    let newArray = [];
+    let forkArray = [];
+    let languageArray = [];
+    let descriptionArray = [];
+    let updatedAt = [];
+    let htmlArray = [];
+    data.sort((a, b) => (a.name).localeCompare(b.name));
+        
+    for (let i = 0; i < data.length; i++){
+        newArray.push(data[i].name);
+        descriptionArray.push(data[i].description);
+        forkArray.push(data[i].forks);
+        languageArray.push(data[i].language);
+        updatedAt.push(data[i].updated_at);
+        htmlArray.push(data[i].html_url); 
+        var date =  new Date ((data[i].updated_at));
+        date = date.toUTCString();
+    }
+           
+    const root = document.getElementById('root');   
+        
+    while (root.firstChild) {
+          root.removeChild(root.firstChild);
+        }
+    
+    createAndAppend('h1', root, { text: "Hack Your Future Repositories", class: 'title' });
+    createAndAppend('h3', root, { text: "Select a repository:  ", class: 'subtitle'});
+    const selectList = createAndAppend('select', root, {id: "mySelect" });
+    const headerDiv = createAndAppend('div', root, {class: 'headerdiv'});
+    createAndAppend('h3', headerDiv, { text: "Repository Information", class: 'subtitle', id: 'repoHeader' });
+    createAndAppend('h3', headerDiv, { text: "Contributors", class: 'subtitle', id:'contributorHeader' });
+    const container = createAndAppend('div', root, {class: 'container'});
+    const card = createAndAppend('div', container, { class: 'card'});
+    const ul = createAndAppend('ul', card, {id: "myUl", });
+    const contributorsCard = createAndAppend('div', container, {class: 'card'});
+    const contributorsUl = createAndAppend('ul', contributorsCard, {id: 'contributorsUl'});
+    const Index0Name = createAndAppend ('li', ul, {text: "Repository: ", class: 'nameInContainer'});
+    const Index0Link = createAndAppend ('a', Index0Name, {text: newArray[0], target: "_blank", href: htmlArray[0]});
+    const Index0Description = createAndAppend('li', ul, {text: "Description: " + descriptionArray[0], class:"descriptionInContainer"});
+    const Index0Fork = createAndAppend ('li', ul, {text: "Number of Forks: " + forkArray[0], class: 'forksInContainer'});
+    const Index0Language = createAndAppend ('li', ul, {text: "Language: "  + languageArray[0], class: 'updatedAtInContainer'});
+    const Index0UpdatedAt = createAndAppend ('li', ul, {text: "Updated at: " + date, class: 'updatedAtInContainer'})
+        
+    fetch('https://api.github.com/repos/HackYourFuture/' + newArray[0] + '/contributors')
+    try {
+        let response = await fetch('https://api.github.com/repos/HackYourFuture/' + newArray[0] + '/contributors')
+        let data = await response.json()
+        await createStuff2(data)
+    }catch(err) {
+        createAndAppend('div', root, { text: err.message, class: 'alert-error' }), 
+        createAndAppend('img', root, {id: 'catImage', src: 'https://us.123rf.com/450wm/photodeti/photodeti1702/photodeti170200132/72587923-cat-holding-stop-sign-isolated-on-white-background-.jpg?ver=6'});
+    } //end catch
+
+
+    function createStuff2(data){
+        for (let i = 0; i < data.length; i++){          
+            let Image0Link = createAndAppend('li', contributorsUl, {})
+            let contributor0Name = createAndAppend('img', Image0Link, {src: data[i].avatar_url, class: 'imageSrc'});
+            let contributor0Link = createAndAppend('a', Image0Link, {text: data[i].login, target: "_blank", href: data[i].html_url, id: 'link'});
+            let contributor0Badge = createAndAppend('li', Image0Link, {text:"Contributions: " + data[i].contributions, class: 'badge'});
+        } //end for
+  
+       
+      
+        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);
+            }
+        } //end removeNodes
+        
+        selectList.onchange = async function(selectedIndex){
+          fetch('https://api.github.com/repos/HackYourFuture/' + newArray[this.selectedIndex] + '/contributors')
+          try {
+              let response = await fetch('https://api.github.com/repos/HackYourFuture/' + newArray[this.selectedIndex] + '/contributors')
+              let data = await response.json()
+              await createStuff3(data)
+          }catch (err) {
+            createAndAppend('div', root, { text: err.message, class: 'alert-error' }), 
+            createAndAppend('img', root, {id: 'catImage', src: 'https://us.123rf.com/450wm/photodeti/photodeti1702/photodeti170200132/72587923-cat-holding-stop-sign-isolated-on-white-background-.jpg?ver=6'});
+          } //end catch
+
+          function createStuff3(data){
+              for (let i = 0; i < data.length; i++){          
+                let ImageLink = createAndAppend('li', contributorsUl, {})
+                let contributorName = createAndAppend('img', ImageLink, {src: data[i].avatar_url, class: 'imageSrc'});
+                let contributorLink = createAndAppend('a', ImageLink, {text: data[i].login, target: "_blank", href: data[i].html_url, id: 'link'});
+                let contributorBadge = createAndAppend('li', ImageLink, {text:"Contributions: " + data[i].contributions, class: 'badge'});
+              } //end for
+           }//end createStuff3
+          
+            let repoName = createAndAppend('li', ul, { text: "Repository: ", class: 'nameInContainer', function: removeNodes()});
+            createAndAppend('a', repoName, { text: newArray[this.selectedIndex], id: 'linkInContainer', target: "_blank", href: htmlArray[this.selectedIndex]});
+            createAndAppend('li', ul, {text: "Description: " + descriptionArray[this.selectedIndex], class: 'descriptionInContainer'});
+            createAndAppend('li', ul, { text: "Number of Forks: " + forkArray[this.selectedIndex], class: 'forksInContainer'});
+            createAndAppend('li', ul, { text: "Language: " + languageArray[this.selectedIndex], class: 'languageInContainer'});
+            let dates = new Date (updatedAt[this.selectedIndex]);
+            dates = dates.toUTCString();
+            createAndAppend('li', ul, {text: "Updated at: " + dates, class: 'updatedAtInContainer'});
+  
+        }// end of onchange
+      }// end createStuff2
+      } //end createStuff
+
+  const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
+  window.onload = () => main(HYF_REPOS_URL);
+
+}
\ No newline at end of file
diff --git a/homework/src/style.css b/homework/src/style.css
new file mode 100644
index 0000000..7cd5646
--- /dev/null
+++ b/homework/src/style.css
@@ -0,0 +1,163 @@
+.alert-error {
+    color: white;
+    background-color:black;
+    font-size: 4rem;
+}
+
+#root {
+    max-width: 1200px;
+    margin: 0 auto;
+    background-color: darkslateblue;
+  }
+  
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  border: 2px solid gray;
+  background-color: darkslateblue;
+  clear: both;
+}
+  
+.card {
+  margin: 1rem;
+  border: 2px solid gray;
+  background-color: white;
+  color: black;
+  display: flex;
+  justify-content: left;
+  font-size: 20px;
+}
+
+.contributorsCard {
+  margin: 1rem;
+  border: 2px solid gray;
+  background-color: darkslateblue;
+  display: flex;
+  justify-content: right;
+  font-size: 20px;
+  text-align: center;
+}
+
+.card:hover {
+  background-color: lightblue;
+}
+
+.header{
+  float: center;
+  clear: both;
+}
+
+.title{
+  color: white;
+  background-color: darkslateblue;
+  font-size: 2rem;
+  border: 2px;
+  margin: 1rem;
+  padding-top: 1rem;
+  font-size: 3rem;
+  text-align: center;
+  font-family:  'Allerta Stencil', sans-serif;
+}   
+.subtitle {
+  color: white;  
+  margin: 1rem;
+  font-size: 1.5rem;
+  font-family: 'Play', sans-serif;
+}
+
+#repoHeader {
+  float: left;
+  }
+
+#contributorHeader {
+  float: right;
+  }
+
+#mySelect{
+  margin: 2rem;
+  margin-top: 0;
+  padding: 1.5rem;
+  font-size: 1.5rem;
+  background-color: white;
+  color: black;
+  font-family: 'Play', sans-serif;
+}
+
+#mySelect:hover {
+  background-color: lightblue;
+  outline-color: white; 
+}
+
+#myOption {
+  font-size: 1.5rem;
+  background-color: white;
+  color: black;
+  font-family: 'Play', sans-serif;
+}
+
+#myUl{
+  list-style-type: none;
+  font-size: 1.5rem;
+  font-family: 'Play', sans-serif;
+}
+
+#myUl:hover {
+  background-color: lightblue;
+}
+    
+#contributorsUl{
+  list-style-type: none;
+  font-size: 1.5em;
+  font-family: 'Play', sans-serif;
+}
+
+img{
+  border: 1px solid #ddd; 
+  border-radius: 4px; 
+  margin: 10px; 
+  padding: 25px;
+  width: 150px; 
+  display: flex;
+  justify-content: center;
+}
+#catImage{
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  width: 50%;
+}
+
+#link {
+  font-size: 20px;
+  text-align: left;
+}
+  
+.badge{
+  font-size: 20px;
+}
+
+#footer{
+  text-align: center;
+}
+
+  @media screen and (max-width: 600px) {
+    .card, .header {
+      flex: 1 1 calc(33% - 2rem);
+    }
+    #contributorHeader{
+      display: none;
+    }
+    #mySelect, #myOption {
+      width: 300px;
+    }
+    
+  }
+  
+  @media screen and (min-width: 600px) {
+    .card, .header {
+      flex: 1 1 calc(33% - 2rem);
+    }
+    #mySelect, #myOption {
+      width: 400px;
+    }
+  }
\ No newline at end of file
diff --git a/homework/style.css b/homework/style.css
deleted file mode 100644
index a8985a8..0000000
--- a/homework/style.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.alert-error {
-    color: red;
-}
\ No newline at end of file