HackYourFuture · AllouhM · Jun 17, 2018 · Jun 19, 2018
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -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"
+    ]
+  }
+}
diff --git a/Week2/HYFRepoPromise.css b/Week2/HYFRepoPromise.css
@@ -0,0 +1,177 @@
+*{
+     box-sizing:border-box; 
+}
+
+#root {
+  width: 100%;
+
+}
+#selection-wrapper{
+    margin-top:40px;
+    width : 100%;
+    height:100px;
+    background-color:dimgray;
+    text-align: center;
+    padding-top: 25px;
+    border:2px solid black;
+    border-radius: 25px;
+    font-family: 'Josefin Sans', sans-serif;
+    font-size: 2em;
+    box-shadow: 5px 2px 2px black;
+}
+#selections{
+    width:30%;
+    height:30px;
+    font-size:18px;
+    font-family: 'Josefin Sans', sans-serif;
+    padding: 2px 10px  2px 15px ;
+    box-shadow: 7px 5px 5px rgb(0, 0, 0);
+    border-radius: 25px;
+}
+.main-wrapper{
+  display: flex;
+}
+
+#errText{
+   font-family: 'Josefin Sans', sans-serif; 
+    font-size: 20px;
+}
+#repo-Info{
+
+    background-color:yellow;
+    margin: 40px 0 0 30px;
+    width:40%;
+    height:250px;
+    box-shadow: 10px 2px 2px rgba(0, 0, 0, 0.7);
+    border-radius: 25px;
+    padding:5px; 
+
+}
+
+#repo-info-ul{
+    list-style: none;
+    line-height: 40px;
+    font-family:'Josefin Sans', sans-serif;
+    font-size: 20px;
+
+}
+.cont-name-link{
+      text-decoration: none;
+}
+#cont-info{
+    background-color:aqua;
+    width:55%;
+    margin:40px 0 0 70px;
+    box-shadow: 10px 2px 2px rgba(0, 0, 0, 0.7);
+    border-radius: 25px;
+}
+.section-name{
+   margin:30px 0 0 30px;
+   font-family:'Josefin Sans', sans-serif;
+   font-size: 25px;
+}
+#cont-info-ul{
+    margin-top:20px;
+}
+#per-contributor{
+    list-style: none;
+    display: flex;
+    padding-top:20px;
+}
+.contributor-image{
+    width:50px;
+    height:50px;
+    border-radius: 50%;
+    margin:10px 10px 10px 30px; 
+}
+
+.cont-name{
+    width:80px;
+    margin:18px 35px 0 0 ;   
+}
+.contributor-link{
+    display: flex;
+    text-decoration: none;
+    font-family:'Josefin Sans', sans-serif;
+    font-size: 20px;
+    padding-top:10px;
+
+}
+ .contributor-link:hover{
+
+     border:3px  solid rgba(4, 4, 252,6); 
+     border-radius: 10px; 
+     background-color:rgb(5, 107, 107);
+     color: white;
+    }  
+
+.Contributions-text{
+    font-family:'Josefin Sans', sans-serif;
+    font-size: 20px;
+    margin-left:40px;
+
+}
+#cont-count{
+  width:30px;
+  height:20px;
+  background-color: black;
+  margin-left:10px;
+  text-align: center;
+  border-radius: 2px;
+  color:white;
+}
+
+@media screen and (max-width:950px) {
+
+    #repo-Info{
+        width:50%;
+        height: 300px;
+        margin:40px 0 0 20px;
+    }
+    #repo-info-ul{
+         font-size: 15px;
+    }
+    #cont-info{
+       width:50%;
+       margin:40px 0 0 30px;
+    }
+    .cont-name{
+         font-size: 15px;
+    }
+    .Contributions-text{
+        display: none;
+    }
+    .section-name{
+        padding-top:30px;
+    }
+}
+
+@media screen and (max-width:620px) {
+    .main-wrapper{
+         display: flex;
+         flex-wrap: wrap;
+         justify-content: center;
+    }  
+    #repo-Info{
+        width:70%;
+        height: 400px;
+        overflow: auto;
+        margin:40px 0 0 20px;
+    }
+    #cont-info{
+
+      width:90%;
+    }
+
+    #selection-wrapper{
+        height: 120px;
+        font-size: 25px;
+    }
+     .section-name{
+         font-size: 20px;
+     }
+     #selections{
+         width:80%;
+     }
+}
+
diff --git a/Week2/HYFRepoPromise.js b/Week2/HYFRepoPromise.js
@@ -0,0 +1,118 @@
+'use strict';
+
+const gitHub = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
+
+function createAppendElement(name, parent, options = {}) {
+    const htmlElem = document.createElement(name);
+    parent.appendChild(htmlElem);
+    Object.keys(options).forEach(key => {
+        const value = options[key];
+        if (key === 'html') {
+            htmlElem.innerHTML = value;
+        } else {
+            htmlElem.setAttribute(key, value);
+        }
+    });
+
+    return htmlElem;
+}
+
+function content() {
+
+    const main = document.getElementById('root');
+
+    const header = createAppendElement('header', main, { id: 'selection-wrapper' });
+    createAppendElement('label', header, { html: 'Select Repository' + ' ', class: 'labelcls' });
+    createAppendElement('select', header, { id: 'selections' });
+
+    const wrapperDiv = createAppendElement('div', main, { class: 'main-wrapper' });
+    createAppendElement('h3', wrapperDiv, { id: 'errText' });
+
+    const repoInfoDiv = createAppendElement('div', wrapperDiv, { id: 'repo-Info' });
+    createAppendElement('ul', repoInfoDiv, { id: 'repo-info-ul' });
+
+    const contInfoDiv = createAppendElement('div', wrapperDiv, { id: 'cont-info' });
+    createAppendElement('p', contInfoDiv, { html: 'Contributions', class: 'section-name' });
+    createAppendElement('div', contInfoDiv, { id: 'cont-info-ul' });
+
+    retrieveData(gitHub)
+
+        .then(constructOptions)
+        .catch(showError);
+}
+
+function retrieveData(url) {
+    return new Promise((resolve, reject) => {
+        const xhr = new XMLHttpRequest();
+        xhr.open('GET', url, true);
+        xhr.responseType = "json";
+        xhr.onreadystatechange = () => {
+            const repositories = xhr.response;
+            if (xhr.readyState === 4) {
+                if (xhr.status < 400) {
+                    resolve(repositories);
+                } else {
+                    reject(new Error(xhr.statusText));
+                }
+            }
+        };
+        xhr.send();
+    }
+
+    );
+}
+function showError(err) {
+    const errorText = document.getElementById('errText');
+    errorText.innerHTML = 'Error ' + err.message;
+}
+
+function constructOptions(repos) {
+    repos.sort((a, b) => a.name.localeCompare(b.name));
+    const select = document.getElementById('selections');
+
+    repos.forEach((repo, i) => {
+        createAppendElement('option', select, { html: repos[i].name, value: i });
+
+    });
+
+    select.addEventListener('change', () => {
+
+        setEachRepoInfo(repos[select.value]);
+    });
+
+    setEachRepoInfo(repos[0]);
+}
+
+function setEachRepoInfo(repo) {
+    const repoUl = document.getElementById('repo-info-ul');
+    repoUl.innerHTML = '';
+
+    const nameLink = createAppendElement('li', repoUl, { html: 'Name : ', class: 'repo-name' });
+    createAppendElement('a', nameLink, { html: repo.name, class: 'cont-name-link', href: repo.html_url, target: '_blank' });
+    createAppendElement('li', repoUl, { html: 'Description : ' + repo.description });
+    createAppendElement('li', repoUl, { html: ' Forks : ' + repo.forks });
+    createAppendElement('li', repoUl, { html: 'Updated : ' + repo.updated_at });
+    setContributorsInfo(repo.contributors_url);
+    console.log(repo.contributors_url);
+}
+
+function setContributorsInfo(url) {
+    const contributorsInfo = document.getElementById('cont-info-ul');
+    contributorsInfo.innerHTML = '';
+
+    retrieveData(url)
+        .then(contributors => {
+            contributors.forEach(contributor => {
+                const bla = createAppendElement('a', contributorsInfo, { class: 'contributor-link', href: contributor.html_url, target: '_blank' });
+                createAppendElement('img', bla, { class: 'contributor-image', src: contributor.avatar_url });
+                createAppendElement('p', bla, { html: contributor.login, class: 'cont-name' });
+                createAppendElement('p', bla, { html: ' Contributions # ', class: 'Contributions-text' });
+                createAppendElement('p', bla, { html: contributor.contributions, id: 'cont-count' });
+
+            });
+        })
+        .catch(error => showError(error));
+}
+
+window.onload = content;
+
diff --git a/Week2/RepoPromise.html b/Week2/RepoPromise.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8" />
+    <title>HYF Repositories </title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="shortcut icon" type="image/png" href="https://s15.postimg.cc/ankcktyvv/p_Bee_JQDQ_400x400.png" />
+    <link href="https://fonts.googleapis.com/css?family=Josefin+Sans|Permanent+Marker" rel="stylesheet" />
+    <link rel="stylesheet" type="text/css" media="screen" href="HYFRepoPromise.css" />
+
+
+</head>
+
+<body>
+    <div id="root"> </div>
+    <script src="HYFRepoPromise.js"></script>
+</body>
+
+</html>