API request from GitHub for repos and members using Array.reduce method HW-JS-Week7

Ramicode · Ramicode · commit 91f7de68b158 · 2017-08-11T18:49:48.000+02:00
diff --git a/README.md b/README.md
@@ -0,0 +1 @@
+# API-Request-HW-JS-Week7
diff --git a/client.js b/client.js
@@ -0,0 +1,44 @@
+const GitHubORG = 'HackYourFuture';
+const HYFReposApiEndPoint = `https://api.github.com/orgs/${GitHubORG}/repos`;
+const HYFMembersApiEndPoint = `https://api.github.com/orgs/${GitHubORG}/members`
+
+function fetchAPI(url, cb) {
+    let request = new XMLHttpRequest();
+    request.addEventListener('load', function () {
+        cb(JSON.parse(this.responseText));
+    })
+    request.open('GET', url);
+    request.send();
+}
+function RenderRepoList(name, url) {
+    const ul = document.getElementsByClassName("repos")[0];
+    const li = document.createElement('li');
+    const a = document.createElement("a");
+    a.textContent = name;
+    a.setAttribute('href', url);
+    li.appendChild(a);
+    ul.appendChild(li);
+}
+function RenderMembersList(name, url) {
+    const ul = document.getElementsByClassName("members")[0];
+    const li = document.createElement('li');
+    const a = document.createElement('a');
+    const img = document.createElement('img');
+    img.setAttribute('src', url);
+    img.setAttribute('width', 100);
+    li.appendChild(img);
+    a.setAttribute('href', url);
+    a.textContent = name;
+    li.appendChild(a);
+    ul.appendChild(li);
+}
+fetchAPI(HYFReposApiEndPoint, function cb(repositoriesList) {
+    let list = repositoriesList.reduce((prev, current) => {
+        RenderRepoList(current.name, current.url);
+    }, '');
+});
+fetchAPI(HYFMembersApiEndPoint, (membersList) => {
+    let list = membersList.reduce((prev, current) => {
+        RenderMembersList(current.login, current.avatar_url);
+    }, '');
+});
diff --git a/index.html b/index.html
@@ -0,0 +1,26 @@
+<!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 href="style.css" rel="stylesheet">
+    <title>HackYourFuture Repositories List on GitHub</title>
+</head>
+
+<body>
+    <container class="outerContainer">
+        <div class="leftWrapper">
+            <h1>Repositories</h1>
+            <ul class="repos"></ul>
+        </div>
+        <div class="rightWrapper">
+            <h1>Members</h1>
+            <ul class="members"></ul>
+        </div>
+    </container>
+    <script src="./client.js"></script>
+</body>
+
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,77 @@
+* {
+  box-sizing: border-box;
+  list-style-type: none;
+  font-family: fantasy;
+  font-size: 8px;
+  display: block;
+  padding: 0;
+  margin: 0;
+}
+
+body {
+  background-color: background-image: -webkit-gradient(linear, left top, left bottom, from(gray), to(whitesmoke));
+  background-image: -webkit-linear-gradient(top, gray, whitesmoke);
+  background-image: -moz-linear-gradient(top, gray, whitesmoke);
+  background-image: linear-gradient(to bottom, gray, whitesmoke);
+  ;
+}
+
+title {
+  padding: 1%;
+  text-align: left;
+  font-size: 2em;
+  margin: auto;
+}
+
+h1 {
+  font-size: 1.5em;
+  margin-bottom: 10px%;
+}
+
+.rightWrapper {
+  margin-top: 5%;
+}
+
+.rightWrapper > ul > li {
+  margin-top: 5px;
+}
+
+.leftWrapper > ul > li {
+  margin-top: 5px;
+}
+
+.outerContainer {
+  overflow: hidden;
+  margin: 1%;
+  max-height: max-content;
+}
+
+@media only screen and (min-width: 600px) {
+  title {
+    font-size: 4em;
+  }
+  h1 {
+    font-size: 3em;
+  }
+  .outerContainer {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-around;
+  }
+  .leftWrapper {
+    width: 50%;
+  }
+  .rightWrapper {
+    margin: 0;
+    width: 50%;
+  }
+  .rightWrapper > ul > li > a {
+    font-size: 2em;
+  }
+  .leftWrapper > ul > li > a {
+    font-size: 2em;
+  }
+  img {
+    border-radius: 10%;
+  }
+}
