Project is added

amirhshad · Dec 31, 2020 · Jan 2, 2021 · Jan 2, 2021 · Jan 2, 2021 · Jan 2, 2021
commit e9b9329ee7982b85ad6c1b65a6b282e889c6f060
diff --git a/hackyourrepo-app/AmirHossein/index.html b/hackyourrepo-app/AmirHossein/index.html
@@ -23,6 +23,6 @@
 
 
 
-    <script src="./script.js"></script>
+    <script type="module" src="/util/script.js"></script>
   </body>
 </html>
diff --git a/hackyourrepo-app/AmirHossein/script.js b/hackyourrepo-app/AmirHossein/script.js
diff --git a/hackyourrepo-app/AmirHossein/style.css b/hackyourrepo-app/AmirHossein/style.css
@@ -122,3 +122,39 @@ img {
   margin-top: 1.3rem;
   padding: 0.2rem 0.4rem;
 }
+
+.pagenumbers {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	align-items: center;
+}
+
+.pagenumbers button {
+	width: 30px;
+	height: 30px;
+
+	appearance: none;
+	border: none;
+	outline: none;
+	cursor: pointer;
+
+	background-color: #44AAEE;
+
+	margin: 5px;
+	transition: 0.4s;
+
+	color: #FFF;
+	font-size: 18px;
+	text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
+	box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
+}
+
+.pagenumbers button:hover {
+	background-color: #44EEAA;
+}
+
+.pagenumbers button.active {
+	background-color: #44EEAA;
+	box-shadow: inset 0px 0px 4px rgba(0, 0, 0, 0.2);
+}
diff --git a/hackyourrepo-app/AmirHossein/util/addOptions.js b/hackyourrepo-app/AmirHossein/util/addOptions.js
@@ -0,0 +1,16 @@
+import elFactory from './elfactory.js';
+
+import elements from './elements.js'
+const myElements2 = elements();
+console.log(myElements2)
+
+export default function addOption(data) {
+    data.forEach(element => {
+    const option = elFactory('option', {value: ''})
+    option.innerHTML = element.name;
+    option.value = element.name;
+    // let x = myElements2.select
+    x.appendChild(option);
+    console.log(x)
+
+})};
diff --git a/hackyourrepo-app/AmirHossein/util/addRepoName.js b/hackyourrepo-app/AmirHossein/util/addRepoName.js
@@ -0,0 +1,111 @@
+import elFactory from './elfactory.js';
+
+// import addOption from './addOptions.js'
+// import {runPagination} from './pagination.js'
+
+
+function addrepoNames(data, select, cardName, card, container, pagination) {
+    data.forEach(element => {
+        const option = elFactory('option', {value: ''})
+        option.innerHTML = element.name;
+        option.value = element.name;
+        select.appendChild(option);
+    });
+    // addOption(data);
+
+    // Function to fetch data for items in select elemen.
+    select.addEventListener('change', () => {
+      document.querySelector('#left-side').style.display = 'block';
+      document.querySelector('#contributor').style.display = 'block';
+      cardName.innerHTML = ''
+      // IF the value of option is equal to element name this function will work.
+      // Despite showing error this section still works! I don't know how should I fix it.
+      data.forEach(element => {
+        if(select.value == element.name) {
+          // Adding items to description part
+          const repoDescription = card.querySelector('.rep-description');
+          const repoName = card.querySelector('.repo-link');
+          const forks = card.querySelector('.rep-fork');
+          const update = card.querySelector('.rep-update');
+          repoDescription.innerHTML = element.description;
+          repoName.innerHTML = element.name;
+          repoName.href = element.html_url;
+          forks.innerHTML = element.forks;
+          update.innerHTML = element.updated_at;
+
+          const contributorsUrl = element.contributors_url;   // URL of contributors
+          fetch(contributorsUrl)
+          .then(response => response.json())
+
+          // Creat and adding contributors name to the right side of the page.
+          .then(data2 => {
+
+            data2.forEach(element2 => {
+              console.log(element2)
+            let current_page = 1;
+            const rows = 5;
+            function displayList(items, cardName, rows_per_page, page) {
+              cardName.innerHTML = '';
+              page--;
+              let start = rows_per_page * page;
+              let end = start + rows_per_page;
+              let paginatedItems = items.slice(start, end);
+
+              for(let i = 0; i < paginatedItems.length; i++) {
+                const smallCard = elFactory('div', {class: 'card small-card'},
+                elFactory('img', {src: '', class: 'userPhoto', width: '50px'}),
+                elFactory('a', {href: '', class: 'userName'}, ''),
+                elFactory('div', {class: 'badge'}, ''));
+                const userName = smallCard.querySelector('.userName');
+                const image = smallCard.querySelector('img');
+                const badge = smallCard.querySelector('.badge');
+                let item = paginatedItems[i];
+                image.src = item.avatar_url;
+                userName.innerHTML = item.login;
+                userName.href = item.html_url;
+                badge.innerHTML = item.contributions;
+                document.getElementById('error').style.display = 'none';
+                cardName.appendChild(smallCard)
+
+              }
+            }
+
+            function setUpPagination(items, cardName, rows_per_page) {
+                cardName.innerHTML = "";
+                let page_count = Math.ceil(items.length / rows_per_page);
+                for (let i = 1; i < page_count +1 ; i++) {
+                let btn = paginationButton(i);
+                cardName.appendChild(btn);
+                }
+            }
+
+            function paginationButton(page) {
+                let button = document.createElement('button');
+                button.innerText =  page;
+                if (current_page == page) button.classList.add('active');
+                button.addEventListener('click', function () {
+                  current_page = page;
+                  displayList(data2, cardName, rows, current_page)
+                  let current_btn = document.querySelector('.pagenumbers button.active');
+		              current_btn.classList.remove('active');
+		              button.classList.add('active');
+                })
+                return button;
+            }
+
+            displayList(data2, cardName, rows, current_page)
+            setUpPagination(data2, pagination,rows)
+            });
+            })
+            .catch(error => {
+              document.getElementById('error').innerHTML = error;
+              console.log(error)
+              document.getElementById('error').style.display = 'block';
+            })
+            console.log(container)
+        }
+      })
+    })
+  };
+
+  export default addrepoNames;
diff --git a/hackyourrepo-app/AmirHossein/util/elements.js b/hackyourrepo-app/AmirHossein/util/elements.js
@@ -0,0 +1,46 @@
+import elFactory from './elfactory.js'
+
+function elements() {
+    const container = elFactory('div', { class: 'container' });
+    const header = elFactory('section', { id: 'header' },
+      elFactory('p', {}, 'HYF Repositories'),
+      elFactory('select', { class: 'selectMenu' }
+      ));
+    const bottomBox = elFactory('div', { class: 'bottom-box' });
+    const errorBox = elFactory('div', { id: 'error' });
+    const leftSide = elFactory('section', { id: 'left-side' });
+    const card = elFactory('div', { class: 'card' },
+      elFactory('table', {},
+        elFactory('tr', {},
+          elFactory('td', { class: 'col-left' }, 'Repositories: '),
+          elFactory('td', { class: 'col-right rep-text' }, elFactory('a', { href: '#', class: 'repo-link' }))),
+        elFactory('tr', {},
+          elFactory('td', { class: 'col-left' }, 'Description: '),
+          elFactory('td', { class: 'col-right rep-description' }, '')),
+        elFactory('tr', {},
+          elFactory('td', { class: 'col-left' }, 'Forks: '),
+          elFactory('td', { class: 'col-right rep-fork' }, '')),
+        elFactory('tr', {},
+          elFactory('td', { class: 'col-left' }, 'Update: '),
+          elFactory('td', { class: 'col-right rep-update' }, ''))));
+
+    const rightSide = elFactory('section', { id: 'right-side' },
+      elFactory('div', { id: 'contributor' }, 'Contributors'));
+    const select = header.querySelector('select');
+    const cardName = elFactory('div', { id: 'cardNameBox' });
+    const pagination = elFactory('div', {class: 'pagenumbers', id: 'pagination'});
+
+    container.appendChild(header);
+    container.appendChild(errorBox);
+    bottomBox.appendChild(leftSide);
+    bottomBox.appendChild(rightSide);
+    leftSide.appendChild(card);
+    rightSide.appendChild(cardName);
+    rightSide.appendChild(pagination);
+    container.appendChild(bottomBox);
+    document.body.appendChild(container)
+    return {leftSide, rightSide, card, select, cardName, container, pagination}
+
+  }
+
+  export default elements;
diff --git a/hackyourrepo-app/AmirHossein/util/elfactory.js b/hackyourrepo-app/AmirHossein/util/elfactory.js
@@ -0,0 +1,21 @@
+const elFactory = (type, attributes, ...children) => {    // Function for creating elements
+    const el = document.createElement(type);
+    let key;
+    for (key in attributes) {
+      el.setAttribute(key, attributes[key]);
+    };
+
+    children.forEach(child => {
+      if (typeof child === 'string') {
+        el.appendChild(document.createTextNode(child));
+      } else {
+        el.appendChild(child);
+      }
+    });
+
+    return el
+  };
+
+
+  export default elFactory;
+
-Original file line number
+Diff line change
@@ Expand Up / @@ -23,6 +23,6 @@ @@
-        <script src="./script.js"></script>
+        <script type="module" src="/util/script.js"></script>
       </body>
     </html>