Added week 3 homework

Think all is working but api 403 so can't check for a little while.
Catsudemo · Catsudemo · Aug 27, 2019 · Aug 27, 2019 · Aug 28, 2019 · Aug 30, 2019
commit 2edb0b30f6439e6c6fd1593940f62bfe7dae7a45
diff --git a/homework/week-3/App.js b/homework/week-3/App.js
@@ -12,23 +12,47 @@ class App {
    * @param {string} url The GitHub URL for obtaining the organization's repositories.
    */
   async initialize(url) {
+    this.makeDomElements()
+
+
+
     // 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
+      this.addReposToSelectElement()
     } catch (error) {
       this.renderError(error);
     }
   }
 
+  makeDomElements() {
+    const root = document.getElementById('root');
+    let header = Util.createAndAppend('div', root, { class: 'header' });
+    Util.createAndAppend('select', header, { id: 'repoSelector' });
+    Util.createAndAppend('div', root, { id: 'container', class: 'flex-wrapper' });
+    // Util.createAndAppend('div', root, { id: 'repoInfo' });
+    // Util.createAndAppend('div', root, { id: 'repoContributors' });
+  }
+
+  addReposToSelectElement() {
+    const selectorElement = document.getElementById('repoSelector');
+    for (const repo of this.repos) {
+      Util.createAndAppend('option', selectorElement, { text: repo.name() });
+    }
+    selectorElement.addEventListener('change', event => {
+      const repoName = event.target.value;
+      const chosenRepo = this.repos.filter(repo => repo.name() === repoName)[0];
+      this.fetchContributorsAndRender(chosenRepo)
+
+    })
+
+  }
+
   /**
    * Removes all child elements from a container element
    * @param {*} container Container element to clear
@@ -44,16 +68,16 @@ class App {
    * repo and its contributors as HTML elements in the DOM.
    * @param {number} index The array index of the repository.
    */
-  async fetchContributorsAndRender(index) {
+  async fetchContributorsAndRender(chosenRepo) {
     try {
-      const repo = this.repos[index];
+      const repo = chosenRepo;
       const contributors = await repo.fetchContributors();
 
-      const container = document.getElementById('container');
+      const bigContainer = document.getElementById('container');
       App.clearContainer(container);
 
-      const leftDiv = Util.createAndAppend('div', container);
-      const rightDiv = Util.createAndAppend('div', container);
+      const leftDiv = Util.createAndAppend('div', bigContainer, { id: 'repoInfo' });
+      const rightDiv = Util.createAndAppend('div', bigContainer, { id: 'repoContributors' });
 
       const contributorList = Util.createAndAppend('ul', rightDiv);
 
@@ -78,4 +102,4 @@ class App {
 
 const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
 
-window.onload = () => new App(HYF_REPOS_URL);
+window.onload = () => new App(HYF_REPOS_URL);
diff --git a/homework/week-3/Contributor.js b/homework/week-3/Contributor.js
@@ -6,14 +6,22 @@
 class Contributor {
   constructor(contributor) {
     this.contributor = contributor;
-    this.contributions = contributions;
-    this.avatar = avatar;
-    this.prototype.attach = function displayContrib(contributor, contributions, avatar) {
-      const contribDiv = document.querySelector('#contributorsDiv');
-      const eachPersonUl = createAndAppend('ul', contribDiv)
-      createAndAppend('li', eachPersonUl, { src: avatar, width: "42", id: 'avatar' })
-      createAndAppend('li', eachPersonUl, { class: "badge", id: 'contbadge', text: `${contributions}` })
-      createAndAppend('li', eachPersonUl, { text: `${contributor}` })
-    }
   }
-}
+
+  name() {
+    return this.contributor.login;
+  }
+  /**
+   * Render the contributor info to the DOM.
+   * @param {HTMLElement} container The container element in which to render the contributor.
+   */
+  render(container) {
+    const contributorDiv = Util.createAndAppend('div', container, { id: 'contribDiv' });
+    const contributorList = Util.createAndAppend('ul', contributorDiv, { id: 'contribList' });
+    Util.createAndAppend('ul', contributorDiv, { id: + this.name() });
+    Util.createAndAppend('li', contributorList, { text: 'Name: ' + this.name() });
+    Util.createAndAppend('li', contributorList, { text: 'Contributions: ' + this.contributor.contributions });
+    Util.createAndAppend('IMG', contributorDiv, { src: this.contributor.avatar_url, id: `${this.name()}Avatar` });
+  }
+
+}
diff --git a/homework/week-3/Repository.js b/homework/week-3/Repository.js
@@ -3,24 +3,25 @@
 /* global Util */
 
 // eslint-disable-next-line no-unused-vars
-const repoDiv = document.querySelector('#repo');
-
 class Repository {
-  constructor(name, description, forks, updated, liveDiv) {
-    this.name = name;
-    this.description = description;
-    this.forks = forks;
-    this.updated = updated;
-    this.container = liveDiv;
+  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(repoDiv) {
-    // TODO: replace the next line with your code.
-    Util.createAndAppend('ul', repoDiv, JSON.stringify(this.repository, null, 2));
+  render(container) {
+    const updated = this.repository.updated_at.split('T')[0]
+    const created = this.repository.created_at.split('T')[0]
+    App.clearContainer(container);
+    Util.createAndAppend('h3', container, { text: this.name() });
+    const detailsUL = Util.createAndAppend('ul', container, { id: 'detailsList' });
+    Util.createAndAppend('li', detailsUL, { text: `Forks: ${this.repository.forks}` });
+    Util.createAndAppend('li', detailsUL, { text: `Description: ${this.repository.description}` });
+    Util.createAndAppend('li', detailsUL, { text: 'Created: ' + created });
+    Util.createAndAppend('li', detailsUL, { text: 'Last updated: ' + updated });
   }
 
   /**
@@ -36,4 +37,4 @@ class Repository {
   name() {
     return this.repository.name;
   }
-}
+}
diff --git a/homework/week-3/Util.js b/homework/week-3/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.textContent = 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/homework/week-3/index2.html b/homework/week-3/index2.html
@@ -1,27 +1,26 @@
 <!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>
+<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/week-3/style.css b/homework/week-3/style.css
@@ -0,0 +1,95 @@
+.alert-error {
+    color: red;
+}
+
+.header {
+    background-color: #176ab0;
+    color: white;
+    text-align: center;
+    padding: 5px;
+}
+
+#main-content {
+    width: 350px;
+    float: left;
+    padding: 10px;
+}
+
+#footer {
+    background-color: #176ab0;
+    color: white;
+    clear: both;
+    text-align: center;
+    padding: 5px;
+}
+
+.badge {
+    background: grey;
+    float: right;
+    color: white;
+    width: 28px;
+    height: 28px;
+    text-align: center;
+    line-height: 18px;
+    border-radius: 50%;
+    padding: 10px;
+}
+
+.flex-wrapper {
+    font-family: Abel;
+    background-color: grey;
+    text-align: left;
+    padding-top: 25px;
+    padding-bottom: 25px;
+    font-size: 20px;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    background-color: #2E2C2F;
+    color: #444;
+}
+
+#repoInfo {
+    background-color: whitesmoke;
+    border-color: #2E2C2F;
+    width: 40%;
+    border: 5px;
+    padding: 20px;
+    margin: 20px;
+}
+
+#repoContributors {
+    background-color: whitesmoke;
+    border-color: #2E2C2F;
+    width: 40%;
+    border: 5px;
+    padding: 20px;
+    margin: 20px;
+}
+
+ul {
+    list-style-type: none;
+    padding: 10px;
+}
+
+li {
+    padding: 8px;
+}
+
+img {
+    width: 80px;
+    height: auto;
+}
+
+@media screen and (max-width: 600px) {
+    .flex-wrapper {
+        -webkit-flex-direction: column;
+        flex-direction: column;
+    }
+    #repo {
+        width: 80%;
+    }
+    #contribDiv {
+        width: 80%;
+    }
+}