Fnished project week2

n4cr · Dec 29, 2020 · Dec 19, 2020 · Dec 19, 2020 · Dec 20, 2020 · Dec 21, 2020
commit 5d733acdec4796e5def1debadd57dd96a0cf28c5
diff --git a/hackyourrepo-app/Masoud/week2/css/style.css b/hackyourrepo-app/Masoud/week2/css/style.css
@@ -10,7 +10,6 @@ body{
   font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
   width: 100vw;
   height: calc(100vh - 20px);
-  overflow: hidden;
 }
 
 header{
@@ -39,13 +38,13 @@ img{
 
 .selector{
   padding: 10px;
-  font-size: 1.7em;
+  font-size: 1.4em;
   background-color: rgb(252, 103, 49);
   color: white;
 }
 
 #repo-items{
-  font-size: 16px;
+  font-size: 12px;
   font-family: sans-serif;
   font-weight: 700;
   color: #444;
@@ -65,10 +64,31 @@ img{
 }
 
 .description, .contributers{
-  width: 50%;
-  border: 3px rgb(223, 152, 152) solid;
+  border: 2px rgb(223, 152, 152) solid;
   margin: 5px;
-
+  height: 70vh;
+  overflow: auto;
+}
+
+.description {
+  width: 40%;
+}
+
+.contributers{
+  width: 60%;
+}
+
+.contributers img{
+  width: 20%;
+  border-radius: 50%;
+}
+
+.items {
+  display: flex;
+ justify-content: space-between;
+ padding: 5px 15px;
+ margin: 5px;
+ align-items: center;
 }
 
 table{
@@ -82,11 +102,18 @@ table{
   }
   .description, .contributers{
     width: 90%;
+    overflow:visible;
+    height: auto;
   }
   .selector{
     text-align: center;
   }
   #repo-items{
     margin-top: 10px;
   }
+
+  body{
+    width: 100%;
+    height: 100%;
+  }
 }
diff --git a/hackyourrepo-app/Masoud/week2/index.html b/hackyourrepo-app/Masoud/week2/index.html
@@ -10,56 +10,6 @@
 </head>
 
 <body>
-  <header>
-    <a href="#"><img src="img/hyf.png"></a>
-  </header>
-
-  <div class="container">
-    <main>
-      <section class="selector">
-        <label for="repo-items">Hack Your Future Repositories:</label>
-        <select id="repo-items">
-          <option value="SampleRepo1">SampleRepo1</option>
-          <option value="AndAnotherOne">AndAnotherOne</option>
-          <option value="HYF-Is-The-Best">HYF-Is-The-Best</option>
-        </select>
-      </section>
-
-      <div class="des-con">
-        <section class="description">
-          <table>
-            <tbody>
-              <tr>
-                <td>Repository</td>
-                <td>SampleRepo1</td>
-              </tr>
-              <tr>
-                <td>Description</td>
-                <td>This repository is meant to be a sample</td>
-              </tr>
-              <tr>
-                <td>Forks</td>
-                <td>5</td>
-              </tr>
-              <tr>
-                <td>Updated</td>
-                <td>2020-05-27 12:00:00</td>
-              </tr>
-              <tr>
-              </tr>
-            </tbody>
-          </table>
-        </section>
-
-        <section class="contributers">
-          <h3>contributers</h3>
-        </section>
-      </div>
-
-    </main>
-
-  </div>
-
 
   <script src="js/script.js"></script>
 </body>

diff --git a/hackyourrepo-app/Masoud/week2/js/script.js b/hackyourrepo-app/Masoud/week2/js/script.js
@@ -1 +1,165 @@
-console.log('ssadfd');
+//Calling main function after window load
+window.onload = main;
+
+//Define main function
+function main() {
+  //Create header element and its children
+  const header = document.createElement('header');
+  const imgLink = document.createElement('a');
+  const imgHeader = document.createElement('img');
+
+  imgLink.href = '#';
+  imgHeader.src = '../img/hyf.png';
+  imgHeader.alt = 'HYF logo';
+  document.body.appendChild(header);
+  header.appendChild(imgLink);
+  imgLink.appendChild(imgHeader);
+
+  //Create container and main tag
+  const container = document.createElement('div');
+  const main = document.createElement('main');
+
+  container.classList.add('container');
+  document.body.appendChild(container);
+  container.appendChild(main);
+
+  //Create section for select repositories
+  const selectorSection = document.createElement('section');
+  selectorSection.classList.add('selector');
+  main.appendChild(selectorSection);
+
+  const labelElement = document.createElement('label');
+  labelElement.for = 'repo-items';
+  labelElement.textContent = 'Hack Your Future Repositories:';
+  selectorSection.appendChild(labelElement);
+
+  const selectElement = document.createElement('select');
+  selectElement.id = 'repo-items';
+  selectorSection.appendChild(selectElement);
+
+
+  //Create description and contributers
+  //Description
+  const desconElement = document.createElement('div');
+  desconElement.classList.add('des-con');
+  main.appendChild(desconElement);
+
+  const descriptionSection = document.createElement('section');
+  descriptionSection.classList.add('description');
+  desconElement.appendChild(descriptionSection);
+
+  const desTable = document.createElement('table');
+  descriptionSection.appendChild(desTable);
+
+  const bodyTable = document.createElement('tbody');
+  desTable.appendChild(bodyTable);
+
+  //Contributers
+  const contributersSection = document.createElement('section');
+  contributersSection.classList.add('contributers');
+  desconElement.appendChild(contributersSection);
+
+  fetchRepoList(selectElement, bodyTable, contributersSection);
+};
+
+
+function fetchRepoList(selectElement, bodyTable, contributersSection) {
+  const url = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
+  fetch(url)
+    .then(function (response) {
+      return response.json();
+    })
+    .then(function (myJson) {
+      myJson.forEach(element => {
+        const option = document.createElement('option');
+        option.value = element.name;
+        option.textContent = element.name;
+        selectElement.appendChild(option);
+      })
+      addDataToDOM(myJson, selectElement, bodyTable, contributersSection);
+    })
+    .catch(function (error) {
+      const errElement = document.createElement('h3');
+      errElement.style.backgroundColor = 'orange';
+      errElement.style.color = 'white';
+      errElement.style.display = 'block';
+      errElement.style.padding = '10px';
+      errElement.innerHTML = `
+      network request failed
+      <br>
+      ${error}`;
+      bodyTable.parentNode.insertBefore(errElement, bodyTable);
+    });
+};
+
+
+function addDataToDOM(data, selectElement, bodyTable, contributersSection) {
+  selectElement.addEventListener('input', () => {
+    contributersSection.innerHTML = '';
+    data.forEach(element => {
+      if (element.name == selectElement.value) {
+        const table = ` 
+        <tr>
+          <td>Repository</td>
+          <td>${element.name}</td>
+        </tr>
+        <tr>
+          <td>Description</td>
+          <td>${element.description}</td>
+         </tr>
+         <tr>
+          <td>Forks</td>
+          <td>${element.forks}</td>
+         </tr>
+         <tr>
+          <td>Updated</td>
+          <td>${element.updated_at}</td>
+        </tr>`;
+        bodyTable.innerHTML = table;
+
+        const url = element.contributors_url;
+        fetchContributers(url, contributersSection);
+      }
+    })
+  })
+};
+
+function fetchContributers(url, contributersSection) {
+  fetch(url)
+    .then(function (response) {
+      return response.json();
+    })
+    .then(function (myJson) {
+
+      myJson.forEach(element => {
+        const contItem = document.createElement('div');
+        const image = document.createElement('img');
+        const gitName = document.createElement('h3');
+        const contributionsNum = document.createElement('h4');
+
+        contItem.appendChild(image);
+        contItem.appendChild(gitName);
+        contItem.appendChild(contributionsNum);
+
+        contributersSection.appendChild(contItem);
+
+        image.src = element.avatar_url;
+        gitName.textContent = element.login;
+        contributionsNum.textContent = element.contributions;
+        contItem.classList.add('items');
+      })
+
+    })
+    .catch(function (error) {
+      const errElement = document.createElement('h3');
+      errElement.style.backgroundColor = 'orange';
+      errElement.style.color = 'white';
+      errElement.style.display = 'block';
+      errElement.style.padding = '10px';
+      errElement.innerHTML = `
+      network request failed
+      <br>
+      ${error}`;
+      contributersSection.parentNode.insertBefore(errElement, contributersSection);
+    });
+};