Catsudemo · Catsudemo · Aug 27, 2019 · Aug 27, 2019 · Aug 28, 2019 · Aug 30, 2019
diff --git a/.DS_Store b/.DS_Store
diff --git a/Week2/.DS_Store b/Week2/.DS_Store
diff --git a/apps/.DS_Store b/apps/.DS_Store
diff --git a/homework/.DS_Store b/homework/.DS_Store
diff --git a/homework/App.js b/homework/App.js
diff --git a/homework/Contributor.js b/homework/Contributor.js
diff --git a/homework/Repository.js b/homework/Repository.js
diff --git a/homework/Util.js b/homework/Util.js
@@ -17,6 +17,7 @@ class Util {
   }
 
   static fetchJSON(url) {
+
     return new Promise((resolve, reject) => {
       const xhr = new XMLHttpRequest();
       xhr.open('GET', url);

diff --git a/homework/index.html b/homework/index.html
diff --git a/homework/style.css b/homework/style.css
diff --git a/homework/week-2/.DS_Store b/homework/week-2/.DS_Store
diff --git a/homework/hyf.png → homework/week-2/hyf.png b/homework/hyf.png → homework/week-2/hyf.png
diff --git a/homework/week-2/index.html b/homework/week-2/index.html
@@ -0,0 +1,39 @@
+<!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="./newStyle.css" />
+</head>
+
+<body>
+  <div class="header" id="selector_header">
+    <form name="chooseRepo">
+      <select onchange class="selector" id="repoSelect" name="repoSelect" selected=""> </select>
+    </form>
+  </div>
+  <div class="flex-wrapper">
+    <div id="repo">
+      Repo facts
+    </div>
+    <div id="contribDiv">
+      <b>Contributions</b>
+      <div id=contributorsDiv>
+      </div>
+    </div>
+  </div>
+  <div id="root"></div>
+  <script src="./indexscript.js"></script>
+
+</body>
+
+</html>
diff --git a/homework/week-2/indexscript.js b/homework/week-2/indexscript.js
@@ -0,0 +1,118 @@
+'use strict';
+
+//fetch the data from the URL and convert to json
+// create the select element and populate with options. These should be the name of the repos in the json.
+// when the user changes the selector go to the URL for that repo and get the json
+// create a ul showing relevant data
+// go to the URL of each contributor in the repo and fetch the data
+// create a ul showing relevant data
+
+const repoSelector = document.querySelector('#repoSelect');
+const contribDiv = document.querySelector('#contributorsDiv');
+const repoDiv = document.querySelector('#repo');
+const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
+
+
+function 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;
+}
+
+function buildSelect(data, repoSelector) {
+
+  data
+    .map(repo => repo.name)
+    .map(repo => repo.toUpperCase())
+    .sort()
+    .forEach(name => {
+      createAndAppend('OPTION', repoSelector, { text: name, value: name });
+    })
+}
+
+function main(url) {
+
+  fetch(url)
+    .then(response => {
+      if (response.ok) return response
+      throw new Error(response.statusText)
+    })
+    .then(response => response.json())
+    .then(repoSelector.innerHTML = '')
+    .then(json => buildSelect(json, repoSelector))
+    .catch(error => createAndAppend('div', root, { text: error, class: 'alert-error' }))
+
+  const selectElement = document.querySelector('.selector');
+
+  selectElement.addEventListener('change', event => {
+    let repo = document.getElementById('repoSelect').value;
+    let repoURL = `https://api.github.com/repos/HackYourFuture/${repo}`;
+    let contribURL = `https://api.github.com/repos/HackYourFuture/${repo}/contributors`;
+
+    displayPage(repoURL, contribURL);
+
+  })
+
+}
+
+function displayContrib(contributor, contributions, avatar) {
+  let eachPersonUl = createAndAppend('ul', contribDiv)
+  createAndAppend('IMG', eachPersonUl, { src: avatar, width: "42", id: 'avatar' })
+  createAndAppend('li', eachPersonUl, { class: "badge", id: 'contbadge', text: `${contributions}` })
+  createAndAppend('li', eachPersonUl, { text: `${contributor}` })
+}
+
+function displayRepo(repository, description, forks, updated) {
+  let eachRepoUl = createAndAppend('ul', repoDiv)
+  createAndAppend('li', eachRepoUl, { text: `Repository: ${repository}` })
+  createAndAppend('li', eachRepoUl, { text: `Description: ${description}` })
+  createAndAppend('li', eachRepoUl, { text: `Forks: ${forks}` })
+  createAndAppend('li', eachRepoUl, { text: `Updated: ${updated}` })
+}
+
+function displayPage(repoURL, contribURL) {
+  fetch(repoURL)
+    .then(response => {
+      if (response.ok) return response
+      throw new Error(response.statusText)
+    })
+    .then(response => response.json())
+    .then(data => {
+      repoDiv.innerHTML = '';
+      let repository = data.name;
+      let description = data.description;
+      let forks = data.forks;
+      let updated = data.updated_at.split("T", 1);
+      displayRepo(repository, description, forks, updated);
+    })
+    .catch(error => createAndAppend('div', root, { text: error, class: 'alert-error' }));
+
+  fetch(contribURL)
+    .then(response => {
+      if (response.ok) return response
+      throw new Error(response.statusText)
+    })
+    .then(response => response.json())
+    .then(data => {
+      contribDiv.innerHTML = '';
+      data.forEach(object => {
+        let contributor = object.login;
+        let contributions = object.contributions;
+        let avatar = object.avatar_url;
+        displayContrib(contributor, contributions, avatar);
+      });
+    })
+    .catch(error => createAndAppend('div', root, { text: error, class: 'alert-error' }))
+}
+
+
+
+window.onload = () => main(HYF_REPOS_URL)
diff --git a/homework/newStyle.css → homework/week-2/newStyle.css b/homework/newStyle.css → homework/week-2/newStyle.css
@@ -19,6 +19,18 @@
   padding: 5px;
 }
 
+.badge {
+  background: grey;
+  float: right;
+  color: white;
+  width: 18px;
+  height: 18px;
+  text-align: center;
+  line-height: 18px;
+  border-radius: 50%;
+  padding: 10px;
+}
+
 .flex-wrapper {
   font-family: Abel;
   background-color: grey;
@@ -33,6 +45,11 @@
   color: #444;
 }
 
+#contributorsDiv.IMG {
+  padding: 20px;
+  margin: 20px;
+}
+
 #repo {
   background-color: whitesmoke;
   border-color: #2E2C2F;
@@ -51,6 +68,11 @@
   margin: 20px;
 }
 
+ul {
+  list-style-type: none;
+  padding: 10px;
+}
+
 @media screen and (max-width: 600px) {
   .flex-wrapper {
     -webkit-flex-direction: column;