Catsudemo · Aug 27, 2019 · Aug 27, 2019 · Aug 28, 2019 · Aug 30, 2019 · Aug 31, 2019
diff --git a/homework/week-2/.DS_Store b/homework/week-2/.DS_Store
diff --git a/homework/week-2/hyf.png b/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,115 @@
+'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)
+    .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(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/week-2/newStyle.css b/homework/week-2/newStyle.css
@@ -0,0 +1,100 @@
+.header {
+  background-color: #176ab0;
+  color: white;
+  text-align: center;
+  padding: 5px;
+}
+
+#main-content {
+  width: 350px;
+  float: left;
+  padding: 10px;
+}
+
+#footer {
+  background-color: #176ab0;
+  color: white;
+  clear: both;
+  text-align: center;
+  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;
+  text-align: left;
+  padding-top: 25px;
+  padding-bottom: 25px;
+  font-size: 20px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  background-color: #2E2C2F;
+  color: #444;
+}
+
+#contributorsDiv.li {
+  text-align: center;
+  padding: 10px;
+  margin: auto;
+  display: inline;
+}
+
+#contributorsDiv.IMG {
+  padding: 20px;
+  margin: 20px;
+}
+
+#repo {
+  background-color: whitesmoke;
+  border-color: #2E2C2F;
+  width: 40%;
+  border: 5px;
+  padding: 20px;
+  margin: 20px;
+}
+
+#contribDiv {
+  background-color: whitesmoke;
+  border-color: #2E2C2F;
+  width: 40%;
+  border: 5px;
+  padding: 20px;
+  margin: 20px;
+}
+
+/* #contributionNumber {
+  text-align: right;
+  color: white;
+  background-color: grey;
+} */
+
+ul {
+  list-style-type: none;
+  padding: 10px;
+}
+
+@media screen and (max-width: 600px) {
+  .flex-wrapper {
+    -webkit-flex-direction: column;
+    flex-direction: column;
+  }
+  #repo {
+    width: 80%;
+  }
+  #contribDiv {
+    width: 80%;
+  }
+}
diff --git a/homework/week-2/package-lock.json b/homework/week-2/package-lock.json
diff --git a/homework/week-2/package.json b/homework/week-2/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "sadbox",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "node-fetch": "^2.6.0"
+  }
+}