NajiNabulsi · NajiNabulsi · Feb 1, 2020 · Feb 1, 2020
diff --git a/js-week2/index.css b/js-week2/index.css
@@ -0,0 +1,94 @@
+:root {
+    --shadow: 5px 5px 8px rgb(65, 60, 60);
+}
+
+body {
+    margin: 0;
+    padding: 0;
+}
+
+#root {
+    width: 100%;
+    margin: 50px auto;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+}
+
+ul {
+    width: 100%;
+    border: 1px solid black;
+    box-shadow: var(--shadow);
+    padding: 15px;
+    word-wrap: break-word;
+}
+
+li {
+    border: ipx solid black;
+    list-style: none;
+}
+
+.first {
+    width: 100%;
+    background-color: rgb(57, 57, 224);
+    box-shadow: var(--shadow);
+    color: white;
+    padding: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    justify-content: space-around;
+}
+
+select {
+    width: 200px;
+    height: 50px;
+}
+
+option {
+    text-align: center;
+}
+
+.all-elem {
+    max-width: 1000px;
+    margin: auto;
+}
+
+.main-container {
+    margin-top: 20px;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    box-sizing: border-box;
+}
+
+.repo-container {
+    width: 45%;
+}
+
+#repoDiv {
+    padding: 15px;
+    border: 1px solid black;
+    box-shadow: var(--shadow);
+    margin: 10px;
+}
+
+.contributors-container {
+    width: 45%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+img {
+    width: 100px;
+    height: 100px;
+}
+
+#contri {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
diff --git a/js-week2/index.html b/js-week2/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Hack Your Repo II</title>
+    <link rel="stylesheet" href="index.css">
+
+</head>
+
+<body>
+    <header class="all-elem">
+        <div id="root">
+
+            <div class="first">
+                <h1>HYF Repositories</h1>
+                <select name="repo" id="repo"></select>
+            </div>
+
+        </div>
+        <main class="main-container">
+
+            <section class="repo-container">
+                <div id="repoDiv"></div>
+            </section>
+
+            <section class="contributors-container">
+                <div id="contri"></div>
+            </section>
+
+        </main>
+
+
+
+    </header>
+
+</body>
+
+<!-- script -->
+<script src="index.js"></script>
+
+</body>
+
+</html>
diff --git a/js-week2/index.js b/js-week2/index.js
@@ -0,0 +1,101 @@
+'use strict';
+
+const HYF_REPOS_URL =
+    "https://api.github.com/orgs/HackYourFuture/repos?per_page=10";
+
+const root = document.querySelector("#root");
+const select = document.querySelector("#repo");
+const repoContaine = document.querySelector('.repo-containe');
+const repoDiv = document.querySelector('#repoDiv');
+const op = document.querySelector('option');
+const contri = document.querySelector('#contri');
+
+
+function main(url) {
+
+    // to creat ul and li element
+    function creatLi(txt) {
+        const liRepo = document.createElement("li");
+        liRepo.innerHTML = txt;
+        const ulRepo = document.createElement("ul");
+        ulRepo.appendChild(liRepo);
+        contri.appendChild(ulRepo);
+    }
+
+    // to creat option element and append it to to select 
+    function creatOption(txt, num) {
+        let opt = document.createElement('option');
+
+        opt.textContent = txt;
+        opt.setAttribute('value', num);
+        select.appendChild(opt);
+    }
+
+    // load document and add it to ul 
+    function loadDoc(url) {
+        var xhttp = new XMLHttpRequest();
+        xhttp.onreadystatechange = function() {
+            if (this.readyState == 4 && this.status == 200) {
+                const data = JSON.parse(xhttp.response);
+                data.forEach(ele => {
+                    const txt = `<img src="${ele.avatar_url}"> ${ele.login} ${ele.contributions}`;
+                    creatLi(txt);
+                });
+
+            }
+        };
+        xhttp.open("GET", url, true);
+        xhttp.send();
+    }
+
+    function fetchJSON(url) {
+        const hyfRepo = new XMLHttpRequest();
+
+        function reqListener() {
+            const facts = JSON.parse(this.response);
+            let arr = [];
+            for (let i in facts) {
+                arr.push([{ "name": facts[i].name }, { "description": facts[i].description }, { "forks_count": facts[i].forks_count }, { "updated_at": facts[i].updated_at }]);
+            }
+
+            arr.forEach((ele, i) => {
+                creatOption(ele[0].name, i);
+            });
+
+            console.log(facts);
+
+            select.addEventListener('change', () => {
+                contri.innerHTML = "";
+                let s = select.value;
+
+                let txt = "<strong>Repository : </strong>" +
+                    facts[s].name +
+                    "<br>" +
+                    "<strong>Description : </strong>" +
+                    facts[s].description +
+                    "<br>" +
+                    "<strong>Forks : </strong>" +
+                    facts[s].forks_count +
+                    "<br>" +
+                    "<strong>Updated : </strong>" +
+                    facts[s].updated_at;
+
+                repoDiv.innerHTML = txt + s;
+                let link = facts[s].contributors_url;
+
+                loadDoc(link);
+            });
+
+
+        }
+
+        hyfRepo.open("GET", url, true);
+        hyfRepo.send();
+        hyfRepo.addEventListener("load", reqListener);
+    }
+
+
+    return fetchJSON(url);
+}
+
+main(HYF_REPOS_URL);