From 06b5a92042e5011eceeb16b34e7076ef8bcb4130 Mon Sep 17 00:00:00 2001
From: Louise Francois <louise.ban@gmail.com>
Date: Tue, 4 Dec 2018 12:16:47 +0100
Subject: [PATCH 1/2] week3 changes

---
 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 -
 16 files changed, 829 insertions(+), 214 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/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

From 70c911a94f9e339cf4ba7d44cb4eaa2732fca43c Mon Sep 17 00:00:00 2001
From: Louise Francois <louise.ban@gmail.com>
Date: Tue, 4 Dec 2018 12:25:43 +0100
Subject: [PATCH 2/2] added week3 homework file

---
 Week3/homework/.eslintrc          |  47 +++++++++
 Week3/homework/src/App.js         | 118 +++++++++++++++++++++
 Week3/homework/src/Contributor.js |  35 +++++++
 Week3/homework/src/Repository.js  | 144 ++++++++++++++++++++++++++
 Week3/homework/src/Util.js        |  35 +++++++
 Week3/homework/src/hyf.png        | Bin 0 -> 6971 bytes
 Week3/homework/src/index.html     |  30 ++++++
 Week3/homework/src/index.js       | 166 ++++++++++++++++++++++++++++++
 Week3/homework/src/index2Fetch.js | 145 ++++++++++++++++++++++++++
 Week3/homework/src/style.css      | 163 +++++++++++++++++++++++++++++
 10 files changed, 883 insertions(+)
 create mode 100644 Week3/homework/.eslintrc
 create mode 100644 Week3/homework/src/App.js
 create mode 100644 Week3/homework/src/Contributor.js
 create mode 100644 Week3/homework/src/Repository.js
 create mode 100644 Week3/homework/src/Util.js
 create mode 100644 Week3/homework/src/hyf.png
 create mode 100644 Week3/homework/src/index.html
 create mode 100644 Week3/homework/src/index.js
 create mode 100644 Week3/homework/src/index2Fetch.js
 create mode 100644 Week3/homework/src/style.css

diff --git a/Week3/homework/.eslintrc b/Week3/homework/.eslintrc
new file mode 100644
index 0000000..ae81895
--- /dev/null
+++ b/Week3/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/Week3/homework/src/App.js b/Week3/homework/src/App.js
new file mode 100644
index 0000000..cfa1032
--- /dev/null
+++ b/Week3/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/Week3/homework/src/Contributor.js b/Week3/homework/src/Contributor.js
new file mode 100644
index 0000000..76baaca
--- /dev/null
+++ b/Week3/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/Week3/homework/src/Repository.js b/Week3/homework/src/Repository.js
new file mode 100644
index 0000000..f861585
--- /dev/null
+++ b/Week3/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/Week3/homework/src/Util.js b/Week3/homework/src/Util.js
new file mode 100644
index 0000000..038828e
--- /dev/null
+++ b/Week3/homework/src/Util.js
@@ -0,0 +1,35 @@
+'use strict';
+
+// eslint-disable-next-line no-unused-vars
+class Util {
+  static 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;
+  }
+
+  static fetchJSON(url) {
+    return new Promise((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();
+    });
+  }
+}
\ No newline at end of file
diff --git a/Week3/homework/src/hyf.png b/Week3/homework/src/hyf.png
new file mode 100644
index 0000000000000000000000000000000000000000..a4626c91cc28dd92f3a8843aa3919c472d609984
GIT binary patch
literal 6971
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

literal 0
HcmV?d00001

diff --git a/Week3/homework/src/index.html b/Week3/homework/src/index.html
new file mode 100644
index 0000000..5dd5ff5
--- /dev/null
+++ b/Week3/homework/src/index.html
@@ -0,0 +1,30 @@
+<!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">
+  <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>
+<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/Week3/homework/src/index.js b/Week3/homework/src/index.js
new file mode 100644
index 0000000..21b4913
--- /dev/null
+++ b/Week3/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/Week3/homework/src/index2Fetch.js b/Week3/homework/src/index2Fetch.js
new file mode 100644
index 0000000..bec2562
--- /dev/null
+++ b/Week3/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/Week3/homework/src/style.css b/Week3/homework/src/style.css
new file mode 100644
index 0000000..7cd5646
--- /dev/null
+++ b/Week3/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