foocoding · annagabain · Aug 9, 2019 · Aug 9, 2019 · Aug 16, 2019 · Aug 19, 2019
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -6,5 +6,6 @@
  "editor.tabSize": 2,
  "cSpell.words": [
    "tabindex"
-  ]
+  ],
+  "workbench.colorCustomizations": {}
 }
diff --git a/homework/README.md b/homework/README.md
@@ -0,0 +1,2 @@
+The visual result----->
+https://aaaat.github.io/JavaScript3/homework/
diff --git a/homework/index.html b/homework/index.html
@@ -1,23 +1,38 @@
 <!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="./style.css" />
+  </head>
+  <header>    
+    <div id="root"><label>HYF Repositories </label></div>
+    <!--<select>
+      <option value="0">alumni</option>
+      <option value="1">angular</option>
+       etc 
+    </select>-->
+  </header>
+
+  <body>
+    <script src="./index.js"></script>
+
+    <!--<p>The repositories will be displayed here</p> testing the body contents-->
+    <div id="forRepoBlock"></div>
+    <div id="forContributorsBlock"></div>
+  </body>
+</html>

-<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="./style.css">
-</head>

-<body>
-  <div id="root"></div>
-  <script src="./index.js"></script>
-</body>

-</html>
diff --git a/homework/index.js b/homework/index.js
@@ -32,11 +32,44 @@

  function main(url) {
    fetchJSON(url, (err, data) => {
-      const root = document.getElementById('root');
+      const root = document.getElementById('root','forRepoBlock', 'forContributorsBlock');
      if (err) {
        createAndAppend('div', root, { text: err.message, class: 'alert-error' });
      } else {
-        createAndAppend('pre', root, { text: JSON.stringify(data, null, 2) });
+        //createAndAppend('pre', root, { text: JSON.stringify(data, null, 2) });
+        const select = createAndAppend('select', root);
+        createAndAppend('option', select, { text: 'Click here to choose a Repository' });
+        data.forEach(repo => {
+          const name = repo.name;
+          createAndAppend('option', select, { text: name });
+        });
+
+        const repoInfo = createAndAppend('div', forRepoBlock);
+        const contribs = createAndAppend('div', forContributorsBlock);
+        select.addEventListener('change', evt => {
+          const selectedRepo = evt.target.value;
+          const repo = data.filter(r => r.name == selectedRepo)[0];
+          console.log(repo);
+          repoInfo.innerHTML = '';
+          contribs.innerHTML = '';
+
+          const addInfo = (label, value) => {
+            const container = createAndAppend('div', repoInfo);
+            createAndAppend('span', container, { text: label });
+            createAndAppend('span', container, { text: value });
+          };
+          addInfo('Name: ', repo.name);
+          addInfo('Desciption: ', repo.description);
+          addInfo('Number of forks: ', repo.forks);
+          addInfo('Updated: ', repo.updated_at);
+
+          const contribsUrl = repo.contributors_url;
+          fetchJSON(contribsUrl, (err, contribData) => {
+            contribData.forEach(contributor => {
+              createAndAppend('div', contribs, { text: contributor.login });
+            });
+          });
+        });
      }
    });
  }
@@ -45,3 +78,6 @@

  window.onload = () => main(HYF_REPOS_URL);
 }
+
+
+
diff --git a/homework/style.css b/homework/style.css
@@ -1,3 +1,40 @@
+header {
+    background-color: rgb(116, 56, 13); 
+    color: white; 
+    padding: 1rem; 
+}
+
+body {
+    background-color:rgb(197, 197, 197);
+    color: black;
+    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+    font-size: 1rem;
+    padding-right: 1px;
+}
+
 .alert-error {
    color: red;
+}
+
+
+select {
+    font-size: .9rem;
+    padding: 4px 25px;
+    margin-left: 10px;
+    border-radius: 20px;
+}
+
+#forRepoBlock {
+    color: purple;
+    font-size: .9rem;
+    padding: 1px 25px;
+    margin-left: 2px;
+    border-radius: 20px;
+}
+#forContributorsBlock {
+    color: brown;
+    font-size: .9rem;
+    padding: 4px 25px;
+    margin-left: 25px;
+    border-radius: 20px;
 }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		The visual result----->
		https://aaaat.github.io/JavaScript3/homework/