Week2

Week1/github.js

@@ -0,0 +1,93 @@
+'use strict';
+
+    const URL_Rep = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
+    function renderRepository(container, repository) {
+        let dateOfRepository = new Date(repository.updated_at);
+        container.innerHTML = "";
+        const innerTable = createAndAppend("table", container);
+        const tBody = createAndAppend("tbody", innerTable);
+        const tr = createAndAppend('tr', tBody);
+        createAndAppend('td', tr, {text: "Repository:", class: "nameRow"});
+        const tdForLink = createAndAppend('td', tr,);
+        createAndAppend('a', tdForLink, {text: repository.name, href: repository.html_url})
+        const tr1 = createAndAppend('tr', tBody);
+        createAndAppend('td', tr1, {text: "Description:", class: "nameRow"});
+        createAndAppend('td', tr1, {text: repository.description});
+        const tr2 = createAndAppend('tr', tBody);
+        createAndAppend('td', tr2, {text: "Forks:", class: "nameRow"});
+        createAndAppend('td', tr2, {text: repository.forks});
+        const tr3 = createAndAppend('tr', tBody);
+        createAndAppend('td', tr3, {text: "Updated:", class: "nameRow"});
+        createAndAppend('td', tr3, {text: dateOfRepository.toLocaleString()});
+
+
+    }
+    //contributors box
+    function renderContributors(containerForContributors, repository) {
+        containerForContributors.innerHTML = "";
+        const contributorsURL = repository['contributors_url'];
+        createAndAppend('p', containerForContributors, { text: 'Contributions' });
+        fetchJSON(contributorsURL)
+            .catch(err => {
+                createAndAppend('div', containerForContributors, { text: err.message, class: 'alert-error' });
+              })
+
+              .then(contributors => {
+                const contributorsTable = createAndAppend('table', containerForContributors, { id: 'contributorsTable' });
+
+                const contributorsTbody = createAndAppend('tbody', contributorsTable, { id: 'contributorsTbody' });
+
+                contributors.forEach(contributor => {
+
+                    const contLink = contributor.html_url;
+                    const contImg = contributor.avatar_url;
+                    const contName = contributor.login;
+                    const contNum = contributor.contributions;
+                    const contributorsLink = createAndAppend('a', contributorsTbody, { href: contLink, target: '_blank', class: 'contributorsLink' });
+
+                const contributorsTr = createAndAppend('tr', contributorsLink, { id: `${contributor['id']}`, class: 'contributorsTr' });
+
+                const tdImg = createAndAppend('td', contributorsTr, { id: `${contName}Td`, class: 'inform-contrib' });
+
+                createAndAppend('img', tdImg, { src: contImg, alt: `picture of ${contName}`, class: 'contributor-images' });
+
+                createAndAppend('td', contributorsTr, { text: contName, class: 'inform-contrib contributor-name' });
+
+                createAndAppend('td', contributorsTr, { text: contNum, class: 'inform-contrib contributor-number' });
+            });
+        })
+    }
+
+
+    function main(url) {
+       const root = document.getElementById('root');
+       const divForSelect = createAndAppend('div', root, {id: "container-select"});
+       createAndAppend('h5', divForSelect, {text: "HYF Repositories", class: "heading"});
+       const select = createAndAppend('select', divForSelect, {id: "menu"});
+       const container = createAndAppend('div', root, {id: "first-container"});
+       const containerForContributors = createAndAppend('div', root, {id: "second-container"})
+
+    fetchJSON(url)
+        .catch(err => {
+            container.innerHTML = error.message;
+            return;
+        })
+
+        .then(repositories => {
+
+            repositories.sort((a, b) => a.name.localeCompare(b.name));
+
+            repositories.forEach((repository, index) => {
+            createAndAppend('option', select, { text: repository.name, value: index });
+        });
+
+        select.addEventListener('change', (event) => {
+            renderRepository(container, repositories[event.target.value])
+            renderContributors(containerForContributors, repositories[event.target.value])
+        });
+
+        renderRepository(container, repositories[0]);
+        renderContributors(containerForContributors, repositories[0])
+    })
+    }
+    window.onload = () => main(URL_Rep);

Week1/index2.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="style2.css">
+    <title>Application for repositories</title>
+</head>
+<body>
+    <div id="root"></div>
+    <script src="util.js"></script>
+    <script src="github.js"></script>
+</body>
+</html>

Week1/style2.css

@@ -0,0 +1,119 @@
+body {
+    font-family: Arial, Helvetica, sans-serif;
+    background-color: rgb(232, 232, 236);
+    min-width: 330px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+}
+#root {
+    width: 100%
+}
+* {
+    box-sizing: border-box;
+}
+h5 {
+    padding: 0;
+    margin: 0;
+}
+#container-select {
+    color: white;
+    background-color: rgb(34, 51, 150);
+    padding: 20px 16px;
+    margin-bottom: 16px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+#menu {
+    margin-left: 15px;
+    font-size: 14px;
+    width: 270px;
+    height: 32px;
+    padding: 5px;
+}
+#root {
+    max-width: 800px;
+    margin: 0 auto;
+}
+#first-container {
+    padding: 20px;
+    border-radius: 5px;
+    background-color: #fff;
+    box-shadow: 5px 5px 8px ;
+    margin-bottom: 15px;
+}
+table {
+    border-collapse: collapse;
+}
+td {
+    padding-left: 15px;
+}
+td.nameRow {
+    font-weight: bold;
+}
+#second-container {
+    margin: 5px;
+    background-color: rgb(241, 241, 243);
+    border: 2px rgb(241, 241, 243) solid;
+    border-radius: 7px;
+    box-shadow: 1px 2px 5px 1px #888888;
+    background-color: rgb(208, 245, 245);
+}
+#second-container p {
+    margin: 20px 10px 20px 10px;
+    color: black;
+    font-size: 0.8em;
+}
+#contributorsTable {
+    width: 100%;
+}
+#second-container a:link {
+    text-decoration: none;
+    color: inherit;
+}
+#second-container a:visited {
+    text-decoration: none;
+    color: inherit;
+}
+#second-container a:nth-last-child(n+2) tr  {
+    border-bottom: 1.2px solid rgb(232, 232, 236);
+}
+.contributorsTr {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.contributor-images {
+    width: 60px;
+    border-radius: 6px;
+    margin: 10px;
+}
+.contributor-name {
+    margin-right: auto;
+}
+.contributor-number {
+    display: inline;
+    background-color: rgb(111, 111, 111);
+    min-width: 25px;
+    border-radius: 5px;
+    color: rgb(232, 232, 236);
+    padding: 5px;
+    text-align: center;
+    margin-right: 5px;
+}
+@media only screen and (min-width:700px) {
+    #root {
+        max-width: 800px;
+    }
+
+    #first-container {
+        width: calc(60% - 10px);
+        float:left;
+    }
+
+    #second-container {
+        width: calc(40% - 15px);
+        float: right;
+    }
+}

Week1/util.js

@@ -0,0 +1,35 @@
+'use strict';
+{
+function 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();
+    });
+}
+function createAndAppend(name, parent, options = {}) {
+    const elem = document.createElement(name);
+    parent.appendChild(elem);
+    Object.keys(options).forEach(key => {
+        if (key === "text") {
+            elem.innerHTML = options[key];
+        } else {
+            elem.setAttribute(key, options[key]);
+        }
+    })
+    return elem;
+}
+window.fetchJSON = fetchJSON;
+window.createAndAppend = createAndAppend;
+}