week2 works added to homework

codeveloper-ysf · codeveloper-ysf · commit 3b41b4f05a21 · 2020-05-17T00:26:26.000+02:00
diff --git a/homework/index.js b/homework/index.js
@@ -21,21 +21,37 @@
     parent.appendChild(elem);
     Object.entries(options).forEach(([key, value]) => {
       if (key === 'Repository' || key === 'Description' || key === 'Forks' || key === 'Updated') {
-        elem.innerHTML += `<strong>${key}:</strong> ${value} <br>`;
-      } else {
+        elem.innerHTML += `<strong>${key}:</strong> ${value} <br> `;
+      }
+      else if (key === 'foto') {
+        elem.innerHTML += `<img src="${value}"></img>`
+      }
+      else if (key === 'name') {
+        elem.innerHTML += `<span>${value}</span>`
+      }
+      else if (key === 'count') {
+        elem.innerHTML += `<span>${value}</span>`
+      }
+      else {
         elem.setAttribute(key, value);
       }
     });
     return elem;
   }
-  function renderRepoDetails(repo, ul) {
-    createAndAppend('li', ul, { Repository: repo.name, Description: repo.description, Forks: repo.forks, Updated: repo.updated_at });
-  }
 
   function main(url) {
+    const header = document.createElement('header');
     const heading = document.createElement('h1');
     heading.innerText = 'HYF Repositories';
-    document.body.prepend(heading);
+    header.prepend(heading);
+    const selectBox = document.createElement('select');
+    var firstOption = document.createElement("option");
+    firstOption.setAttribute("value", 0);
+    var firstOptionContent = document.createTextNode('Choose a Repository...');
+    firstOption.appendChild(firstOptionContent);
+    selectBox.appendChild(firstOption);
+    header.appendChild(selectBox);
+    document.body.prepend(header);
     fetchJSON(url, (err, repos) => {
       const root = document.getElementById('root');
       if (err) {
@@ -45,14 +61,43 @@
         });
         return;
       }
-      const ul = createAndAppend('ul', root);
+      const repoDetails = createAndAppend('ul', root);
+      const repoContributions = createAndAppend('ul', root);
       repos.sort((a, b) => a.name.localeCompare(b.name, 'en', { sensitivity: 'base' }));
-      // repos.slice(0, 10);
-      repos.forEach(repo => renderRepoDetails(repo, ul));
+      repos.forEach(repo => {
+        const repoOptions = document.createElement("option");
+        repoOptions.setAttribute("value", repo.id);
+        const repoOptionsContent = document.createTextNode(repo.name);
+        repoOptions.appendChild(repoOptionsContent);
+        selectBox.appendChild(repoOptions);
+      });
+      if (selectBox.value === '0') {
+        repoDetails.textContent = '';
+      }
+      selectBox.addEventListener('change', () => {
+        repoDetails.textContent = '';
+        repoContributions.textContent = '';
+        const selectedRepo = selectBox.options[selectBox.selectedIndex].value;
+        const filteredRepo = repos.filter(a => a.id == selectedRepo);
+        createAndAppend('li', repoDetails, { Repository: filteredRepo[0].name, Description: filteredRepo[0].description, Forks: filteredRepo[0].forks, Updated: filteredRepo[0].updated_at })
+        fetchJSON(filteredRepo[0].contributors_url, (err, reposContributors) => {
+          if (err) {
+            createAndAppend('div', root, {
+              text: err.message,
+              class: 'alert-error',
+            });
+            return;
+          }
+          reposContributors.forEach(contributors => {
+            createAndAppend('li', repoContributions, { foto: contributors.avatar_url, name: contributors.login, count: contributors.contributions })
+          });
+        });
+      });
     });
   }
 
   const HYF_REPOS_URL =
     'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
+
   window.onload = () => main(HYF_REPOS_URL);
 }
diff --git a/homework/style.css b/homework/style.css
@@ -1,24 +1,77 @@
-body{
+body {
   padding: 0;
   margin: 0;
   background-color: rgb(221, 221, 221);
 }
-.alert-error {
-  color: red;
-}
-h1{
-  color:white;
+header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
   background-color: blue;
+}
+h1 {
+  color: white;
   margin: 0;
   padding: 1%;
 }
-ul{
+select {
+  margin-left: 3%;
+  height: 30px;
+}
+#root {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+ul {
   list-style: none;
   padding: 0;
   margin: 1%;
+  width: 100%;
 }
-li{
+li {
   padding: 1%;
   margin-bottom: 1%;
   background-color: white;
-}
+  border: 1px solid rgb(196, 196, 196);
+  border-radius: 5px;
+  box-shadow: 3px 3px 3px grey;
+}
+ul:last-child > li {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 2% 10%;
+}
+ul:last-child > li img {
+  width: 10%;
+  border-radius: 10%;
+}
+ul:last-child > li span:last-child {
+  padding: 1% 3%;
+  background-color: grey;
+  color: white;
+  border-radius: 15%;
+  box-shadow: 2px 2px 5px black;
+}
+.alert-error {
+  color: red;
+}
+
+@media all and (max-width: 600px) {
+  header {
+    flex-direction: column;
+  }
+  select {
+    margin-bottom: 5%;
+  }
+  #root {
+    flex-direction: column;
+    padding: 2% 10%;
+  }
+  ul:last-child > li img {
+    width: 25%;
+    border-radius: 10%;
+  }
+}
