diff --git a/js-week2/index.css b/js-week2/index.css new file mode 100644 index 000000000..6a5df18c4 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/js-week2/index.html b/js-week2/index.html new file mode 100644 index 000000000..268eb38ce --- /dev/null +++ b/js-week2/index.html @@ -0,0 +1,46 @@ + + + + + + + + Hack Your Repo II + + + + + +
+
+ +
+

HYF Repositories

+ +
+ +
+
+ +
+
+
+ +
+
+
+ +
+ + + +
+ + + + + + + + + \ No newline at end of file diff --git a/js-week2/index.js b/js-week2/index.js new file mode 100644 index 000000000..462625ec4 --- /dev/null +++ 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 = ` ${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 = "Repository : " + + facts[s].name + + "
" + + "Description : " + + facts[s].description + + "
" + + "Forks : " + + facts[s].forks_count + + "
" + + "Updated : " + + 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); \ No newline at end of file diff --git a/week1/ex1/whoIsHere.html b/week1/ex1/whoIsHere.html new file mode 100644 index 000000000..c4e3d5531 --- /dev/null +++ b/week1/ex1/whoIsHere.html @@ -0,0 +1,69 @@ + + + + + + + + who is here + + + + + + + + + + + + \ No newline at end of file diff --git a/week1/ex2/humor.html b/week1/ex2/humor.html new file mode 100644 index 000000000..471ced485 --- /dev/null +++ b/week1/ex2/humor.html @@ -0,0 +1,66 @@ + + + + + + + + Humor + + + + + + + + + + \ No newline at end of file diff --git a/week1/ex3/DogPhotoGallery.html b/week1/ex3/DogPhotoGallery.html new file mode 100644 index 000000000..11ec08ffb --- /dev/null +++ b/week1/ex3/DogPhotoGallery.html @@ -0,0 +1,144 @@ + + + + + + + + Dog photo gallery + + + + + + +
+ +
+ + + + +
+ + + +
+ + + + + + + + \ No newline at end of file diff --git a/week1/project/index.html b/week1/project/index.html new file mode 100644 index 000000000..091334b5c --- /dev/null +++ b/week1/project/index.html @@ -0,0 +1,58 @@ + + + + + + + + Hack Your Repo I + + + + + +
+ +
HYF Repositories
+
+ + + + + + + \ No newline at end of file diff --git a/week1/project/index.js b/week1/project/index.js new file mode 100644 index 000000000..81bcdab9d --- /dev/null +++ b/week1/project/index.js @@ -0,0 +1,46 @@ +const HYF_REPOS_URL = + "https://api.github.com/orgs/HackYourFuture/repos?per_page=10"; + +const root = document.querySelector("#root"); + +function main(url) { + function creatLi(txt) { + const liRepo = document.createElement("li"); + liRepo.innerHTML = txt; + const ulRepo = document.createElement("ul"); + ulRepo.appendChild(liRepo); + root.appendChild(ulRepo); + } + + function fetchJSON(url) { + const hyfRepo = new XMLHttpRequest(); + + function reqListener() { + const facts = JSON.parse(this.response); + + for (i in facts) { + const liTxt = + "Repository : " + + facts[i].name + + "
" + + "Description : " + + facts[i].description + + "
" + + "Forks : " + + facts[i].forks_count + + "
" + + "Updated : " + + facts[i].updated_at; + creatLi(liTxt); + } + } + + hyfRepo.open("GET", url, true); + hyfRepo.send(); + hyfRepo.addEventListener("load", reqListener); + } + + return fetchJSON(url); +} + +main(HYF_REPOS_URL); \ No newline at end of file