HackYourFuture · marwanaboudaoud · Aug 29, 2018 · Aug 29, 2018 · Aug 29, 2018 · Aug 29, 2018
diff --git a/Week1/assets/app.js b/Week1/assets/app.js
@@ -0,0 +1,73 @@
+
+'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);
+    }
+  }
+
+  /**
+   * 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');
+      // Erase previously generated inner HTML from the container div
+      container.innerHTML = '';
+
+      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/assets/index.html b/Week1/assets/index.html
@@ -0,0 +1,23 @@
+<!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="./index.js"></script>
+</body>
+
+</html>
diff --git a/Week1/assets/index.js b/Week1/assets/index.js
@@ -0,0 +1,47 @@
+'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 === 'html') {
+        elem.innerHTML = 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, { html: err.message, class: 'alert-error' });
+      } else {
+        createAndAppend('pre', root, { html: 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/src/index.js b/homework/src/index.js
@@ -1,47 +1,103 @@
 '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 === 'html') {
-        elem.innerHTML = 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, { html: err.message, class: 'alert-error' });
-      } else {
-        createAndAppend('pre', root, { html: 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);
+    function fetchJSON(url, cb) {
+        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 = () => 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 === 'html') {
+                elem.innerHTML = value;
+            } else {
+                elem.setAttribute(key, value);
+            }
+        });
+        return elem;
+    }
+
+    function main(url) {
+
+        const root = document.getElementById('root');
+        const div = createAndAppend('div', root, { class: 'container' });
+        const contributorsContainer = createAndAppend('div', root, { class: 'container' });
+        const header = createAndAppend('h1', div, { html: "HYF Repositories  ", class: 'header' });
+        const select = createAndAppend('select', header, { class: "chose" });
+        const table = createAndAppend('table', div, { class: 'font' });
+        const tablebody = createAndAppend('tbody', table);
+        const title = createAndAppend('a', tablebody);
+        const descripTitle = createAndAppend('tr', tablebody);
+        const titleFork = createAndAppend('tr', tablebody, { class: 'font' });
+        const newTitle = createAndAppend('tr', tablebody, { class: 'font' });
+        fetchJSON(url)
+            .then((repositories) => {
+                repositories.sort(function (a, b) {
+                    return a.name.localeCompare(b.name);
+                });
+                repositories.forEach((repository, index) => {
+                    createAndAppend('option', select, { html: repository.name, value: index });
+                });
+
+
+                select.addEventListener('change', (event) => {
+                    const index = event.target.value;
+                    const repository = repositories[index];
+                    title.setAttribute("href", repository.html_url);
+                    title.innerHTML = "Repository: " + repository.name;
+                    titleFork.innerHTML = "Forks: " + repository.forks;
+                    descripTitle.innerHTML = "Description: " + repository.description;
+                    newTitle.innerHTML = "Updated: " + new Date(repository.updated_at).toLocaleString();
+                    renderContributors(repository.contributors_url, contributorsContainer);
+                });
+
+            })
+            .catch(error => {
+                createAndAppend('div', root, { text: error.message, class: 'alert-error' });
+
+            });
+    }
+
+    function renderContributors(contributorsUrl, container) {
+        fetchJSON(contributorsUrl)
+            .then((contributors) => {
+                container.innerHTML = '';
+                contributors.forEach(contributor => {
+                    const avatar = createAndAppend('img', container, { class: 'avatar' });
+                    avatar.setAttribute("src", contributor.avatar_url);
+                    const list = createAndAppend('ul', container, { class: 'list' });
+                    const item = createAndAppend('li', list, { class: 'item' });
+                    const link = createAndAppend("a", item, { "target": "_blank", "href": contributor.html_url });
+                    const data = createAndAppend("div", link, { "class": "data" });
+                    createAndAppend("div", data, { "html": contributor.login, "class": "name" });
+                    createAndAppend("div", data, { "html": contributor.contributions, "class": "badge" });
+
+                });
+            })
+            .catch(error => {
+                createAndAppend('div', container, { text: error.message, class: 'alert-error' });
+
+            });
+
+    }
+
+    const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
+
+    window.onload = () => main(HYF_REPOS_URL);
 }
diff --git a/homework/src/style.css b/homework/src/style.css
@@ -1,3 +1,99 @@
 .alert-error {
     color: red;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+body {
+    background-color: rgba(187, 184, 184, 0.657);
+}
+
+.font {
+   font-weight: 600;
+    font-family: monospace;
+    font-size: 30px;
+}
+
+.header {
+
+    text-shadow: 3px 1px black;
+    background-color:#3B5998;
+    width: 70%;
+    color: white;
+    padding: 15px;
+    margin-left: 260px;
+    padding-left: 40px;
+
+}
+
+
+.chose {
+    margin-left: 20px;
+    width: 240px;
+    height: 32px;
+    font-size: 14px;
+}
+
+table {
+    width: 70%;
+    left:20%;
+    font-size: 14px;
+    position: relative;
+    margin-left: 70px;
+    height: 200px;
+    top: 20px;
+    padding: 20px;
+    background-color: white;
+    box-shadow: 2px 2px 2px 2px black;
+
+}
+.avatar{
+    width:40%;
+    padding-top: 50px;
+    margin-left: 300px;
+}
+
+
+
+.name{
+    margin-right: 16px;
+}
+
+
+.badge{
+    font-size: 21px;
+    align-content: center;
+    color: blue;
+}
+
+.data{
+    display: flex;
+}
+
+.item{
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    margin-left: 260px;
+}
+
+.list a {
+    text-decoration: none;
+    color: blue;
+    display: flex;
+}
+.list{
+    font-size: 22px;
+}
+
+.container {
+    float:left;
+}
+
+ul{
+    align-items: center;
+
 }