lfcoding1 · lfcoding1 · Nov 26, 2018
diff --git a/Week1/App.js b/Week1/App.js
@@ -0,0 +1,81 @@
+'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');
+    // ...
+
+    try {
+      // ...
+      const repos = await Util.fetchJSON(url);
+      this.repos = repos.map(repo => new Repository(repo));
+      // ...
+    } catch (error) {
+      this.renderError(error);
+    }
+  }
+
+  /**
+   * 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(error) {
+    // Replace this comment with your 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/Week1/Contributor.js b/Week1/Contributor.js
@@ -0,0 +1,18 @@
+'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) {
+    // Replace this comment with your code
+  }
+}
diff --git a/Week1/Repository.js b/Week1/Repository.js
@@ -0,0 +1,34 @@
+'use strict';
+
+/* global Util */
+
+// eslint-disable-next-line no-unused-vars
+class Repository {
+  constructor(data) {
+    this.data = data;
+  }
+
+  /**
+   * 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
+    //
+  }
+
+  /**
+   * 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;
+  }
+}
diff --git a/Week1/Util.js b/Week1/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();
+    });
+  }
+}
diff --git a/Week1/hyf.png b/Week1/hyf.png
diff --git a/Week1/index.html b/Week1/index.html
@@ -0,0 +1,28 @@
+<!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>
diff --git a/Week1/index.js b/Week1/index.js
@@ -0,0 +1,135 @@
+'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) {
+    const root = document.getElementById('root');   
+    while (root.firstChild) {
+      root.removeChild(root.firstChild);
+    }
+
+    fetchJSON( HYF_REPOS_URL, (err, data) => {
+      if (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'})
+      }
+      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();
+       }
+
+
+
+      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'})
+      fetchJSON('https://api.github.com/repos/HackYourFuture/' + newArray[0] + '/contributors', (err, 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
+      }); //end fetchJSON
+
+
+      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){
+        fetchJSON('https://api.github.com/repos/HackYourFuture/' + newArray[this.selectedIndex] + '/contributors', (err, 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 fetchJSON
+        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 of Fetch
+    } //end main
+
+
+  const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
+  window.onload = () => main(HYF_REPOS_URL);
+
+}