From 6d6e8d04f9d8d847c20540164df2b6501c395c90 Mon Sep 17 00:00:00 2001 From: Vazhin Tayeb Date: Mon, 1 Jun 2020 21:30:50 +0300 Subject: [PATCH 1/6] used fetch --- index.css | 12 ++++++++ index.html | 2 +- js/index.js | 80 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 93 insertions(+), 1 deletion(-) diff --git a/index.css b/index.css index 46e7ce5..7909c43 100644 --- a/index.css +++ b/index.css @@ -10,4 +10,16 @@ ul { list-style: none; +} + +.images { + width: 200px; + height: auto; +} + +.user-div { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; } \ No newline at end of file diff --git a/index.html b/index.html index bd2d837..04949b7 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,7 @@

GitHub Search

- +
diff --git a/js/index.js b/js/index.js index e69de29..d9d3125 100644 --- a/js/index.js +++ b/js/index.js @@ -0,0 +1,80 @@ +window.addEventListener('load', () => { + + let submitBtn = document.querySelector('#submit-btn') + let inputText = document.querySelector('#search') + let userList = document.querySelector('#user-list') + + submitBtn.addEventListener('click', (e) => { + e.preventDefault(); + + + fetch(`https://api.github.com/search/users?q=${inputText.value}`) + .then((response) => response.json()) + .then((object) => { + + for (element of object.items) { + + let userLi = document.createElement('li') + let img = document.createElement('img') + let p = document.createElement('p') + let link = document.createElement('a') + let userDiv = document.createElement('div') + let showRepoBtn = document.createElement('button') + + link.setAttribute('href', element.html_url) + p.innerText = element.login + img.src = element.avatar_url + link.innerText = element.login + img.classList.add('images') + userDiv.classList.add('user-div') + showRepoBtn.innerText = "show user's repos" + + userDiv.appendChild(p) + userDiv.appendChild(img) + userDiv.appendChild(link) + userDiv.appendChild(showRepoBtn) + userLi.appendChild(userDiv) + userList.appendChild(userLi) + + showRepoBtn.addEventListener('click', (e) => { + + e.preventDefault(); + + fetchUserRepos(element.login); + + }) + } + }) + }) +}) + +function fetchUserRepos(login) { + fetch(`https://api.github.com/users/${login}/repos`) + .then((response) => response.json()) + .then((object) => { + let repoList = document.querySelector('#repos-list') + + + for (element of object) { + console.log(element.html_url) + + let repoLi = document.createElement('li') + let repoLink = document.createElement('a') + + repoLink.setAttribute('href', element.html_url) + repoLink.setAttribute('target', '_blank') + repoLink.innerText = element.html_url + + repoLi.appendChild(repoLink) + repoList.appendChild(repoLi) + } + + }) +} + + + + + + + From 1a4b01041ab032400724886fe90743ec0eafdbed Mon Sep 17 00:00:00 2001 From: Vazhin Tayeb Date: Mon, 1 Jun 2020 21:52:16 +0300 Subject: [PATCH 2/6] fixed something --- js/index.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/js/index.js b/js/index.js index d9d3125..067fb02 100644 --- a/js/index.js +++ b/js/index.js @@ -12,6 +12,8 @@ window.addEventListener('load', () => { .then((response) => response.json()) .then((object) => { + userList.innerHTML = '' + for (element of object.items) { let userLi = document.createElement('li') @@ -52,12 +54,11 @@ function fetchUserRepos(login) { fetch(`https://api.github.com/users/${login}/repos`) .then((response) => response.json()) .then((object) => { - let repoList = document.querySelector('#repos-list') + let repoList = document.querySelector('#repos-list') for (element of object) { - console.log(element.html_url) - + let repoLi = document.createElement('li') let repoLink = document.createElement('a') From 1dbc97529080fd3e3c6ebaa2430c3d3f715564d4 Mon Sep 17 00:00:00 2001 From: Vazhin Tayeb Date: Mon, 1 Jun 2020 22:17:42 +0300 Subject: [PATCH 3/6] cleaned up the code --- js/index.js | 126 ++++++++++++++++++++++++++++------------------------ 1 file changed, 67 insertions(+), 59 deletions(-) diff --git a/js/index.js b/js/index.js index 067fb02..3b72599 100644 --- a/js/index.js +++ b/js/index.js @@ -3,75 +3,83 @@ window.addEventListener('load', () => { let submitBtn = document.querySelector('#submit-btn') let inputText = document.querySelector('#search') let userList = document.querySelector('#user-list') + let repoList = document.querySelector('#repos-list') submitBtn.addEventListener('click', (e) => { e.preventDefault(); + fetchUsers(inputText.value) + }) - - fetch(`https://api.github.com/search/users?q=${inputText.value}`) + function fetchUsers(userName) { + fetch(`https://api.github.com/search/users?q=${userName}`) .then((response) => response.json()) .then((object) => { - userList.innerHTML = '' - - for (element of object.items) { - - let userLi = document.createElement('li') - let img = document.createElement('img') - let p = document.createElement('p') - let link = document.createElement('a') - let userDiv = document.createElement('div') - let showRepoBtn = document.createElement('button') - - link.setAttribute('href', element.html_url) - p.innerText = element.login - img.src = element.avatar_url - link.innerText = element.login - img.classList.add('images') - userDiv.classList.add('user-div') - showRepoBtn.innerText = "show user's repos" - - userDiv.appendChild(p) - userDiv.appendChild(img) - userDiv.appendChild(link) - userDiv.appendChild(showRepoBtn) - userLi.appendChild(userDiv) - userList.appendChild(userLi) - - showRepoBtn.addEventListener('click', (e) => { - - e.preventDefault(); - - fetchUserRepos(element.login); - - }) - } + iterateOver(object.items) }) - }) -}) - -function fetchUserRepos(login) { - fetch(`https://api.github.com/users/${login}/repos`) - .then((response) => response.json()) - .then((object) => { - let repoList = document.querySelector('#repos-list') - - - for (element of object) { - - let repoLi = document.createElement('li') - let repoLink = document.createElement('a') - - repoLink.setAttribute('href', element.html_url) - repoLink.setAttribute('target', '_blank') - repoLink.innerText = element.html_url - - repoLi.appendChild(repoLink) - repoList.appendChild(repoLi) - } + } + function fetchUserRepos(login) { + fetch(`https://api.github.com/users/${login}/repos`) + .then((response) => response.json()) + .then((object) => { + iterateOverRepos(object); + }) + } + + function iterateOver(users) { + for (element of users) { + + let userLi = document.createElement('li') + let img = document.createElement('img') + let p = document.createElement('p') + let link = document.createElement('a') + let userDiv = document.createElement('div') + let showRepoBtn = document.createElement('button') + + link.setAttribute('href', element.html_url) + p.innerText = element.login + img.src = element.avatar_url + link.innerText = element.login + img.classList.add('images') + userDiv.classList.add('user-div') + showRepoBtn.innerText = "show user's repos" + + userDiv.appendChild(p) + userDiv.appendChild(img) + userDiv.appendChild(link) + userDiv.appendChild(showRepoBtn) + userLi.appendChild(userDiv) + userList.appendChild(userLi) + + btnClick(showRepoBtn) + } + } + + function iterateOverRepos(repo) { + for (element of repo) { + + let repoLi = document.createElement('li') + let repoLink = document.createElement('a') + + repoLink.setAttribute('href', element.html_url) + repoLink.setAttribute('target', '_blank') + repoLink.innerText = element.html_url + + repoLi.appendChild(repoLink) + repoList.appendChild(repoLi) + } + } + + function btnClick (btn) { + btn.addEventListener('click', (e) => { + e.preventDefault(); + repoList.innerHTML = '' + fetchUserRepos(element.login); }) -} + } + +}) From 70f2a56bb8cc8b86ae222cb586fef3376594ea31 Mon Sep 17 00:00:00 2001 From: Vazhin Tayeb Date: Mon, 1 Jun 2020 22:32:48 +0300 Subject: [PATCH 4/6] fixes and some more clean up --- js/index.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/js/index.js b/js/index.js index 3b72599..7d0db42 100644 --- a/js/index.js +++ b/js/index.js @@ -15,6 +15,7 @@ window.addEventListener('load', () => { .then((response) => response.json()) .then((object) => { userList.innerHTML = '' + repoList.innerHTML = '' iterateOver(object.items) }) } @@ -52,7 +53,7 @@ window.addEventListener('load', () => { userLi.appendChild(userDiv) userList.appendChild(userLi) - btnClick(showRepoBtn) + btnClick(showRepoBtn, element.login) } } @@ -71,11 +72,11 @@ window.addEventListener('load', () => { } } - function btnClick (btn) { + function btnClick(btn, login) { btn.addEventListener('click', (e) => { e.preventDefault(); repoList.innerHTML = '' - fetchUserRepos(element.login); + fetchUserRepos(login); }) } From f19903ba04f6dc535a0145df1b0e5fce0b3ea4ae Mon Sep 17 00:00:00 2001 From: Vazhin Tayeb Date: Mon, 1 Jun 2020 22:54:56 +0300 Subject: [PATCH 5/6] adding a header to fetch --- js/index.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/js/index.js b/js/index.js index 7d0db42..c98cf59 100644 --- a/js/index.js +++ b/js/index.js @@ -5,13 +5,19 @@ window.addEventListener('load', () => { let userList = document.querySelector('#user-list') let repoList = document.querySelector('#repos-list') + let configObj = { + headers: { + 'Accept': 'application/vnd.github.v3+json' + } + } + submitBtn.addEventListener('click', (e) => { e.preventDefault(); fetchUsers(inputText.value) }) function fetchUsers(userName) { - fetch(`https://api.github.com/search/users?q=${userName}`) + fetch(`https://api.github.com/search/users?q=${userName}`, configObj) .then((response) => response.json()) .then((object) => { userList.innerHTML = '' @@ -21,7 +27,7 @@ window.addEventListener('load', () => { } function fetchUserRepos(login) { - fetch(`https://api.github.com/users/${login}/repos`) + fetch(`https://api.github.com/users/${login}/repos`, configObj) .then((response) => response.json()) .then((object) => { iterateOverRepos(object); From fc5f8d8d240de5ccc22b69fcc0965431db4b6930 Mon Sep 17 00:00:00 2001 From: Vazhin Tayeb Date: Mon, 1 Jun 2020 23:26:30 +0300 Subject: [PATCH 6/6] did the Bonus toggle button --- index.css | 4 ++++ index.html | 2 ++ js/index.js | 35 ++++++++++++++++++++++++++++++++--- 3 files changed, 38 insertions(+), 3 deletions(-) diff --git a/index.css b/index.css index 7909c43..d1ed9d7 100644 --- a/index.css +++ b/index.css @@ -22,4 +22,8 @@ ul { flex-direction: column; justify-content: center; align-items: center; +} + +.toggle-btn { + margin-bottom: 25px; } \ No newline at end of file diff --git a/index.html b/index.html index 04949b7..ce24aff 100644 --- a/index.html +++ b/index.html @@ -12,6 +12,8 @@

GitHub Search

+ +
diff --git a/js/index.js b/js/index.js index c98cf59..e3e7765 100644 --- a/js/index.js +++ b/js/index.js @@ -4,6 +4,18 @@ window.addEventListener('load', () => { let inputText = document.querySelector('#search') let userList = document.querySelector('#user-list') let repoList = document.querySelector('#repos-list') + let toggleBtn = document.querySelector('#toggle-btn') + let searchUsers = true; + + toggleBtn.addEventListener('click', () => { + if (searchUsers) { + toggleBtn.innerText = 'search for repos' + searchUsers = false; + } else { + toggleBtn.innerText = 'search for users' + searchUsers = true; + } + }) let configObj = { headers: { @@ -13,15 +25,32 @@ window.addEventListener('load', () => { submitBtn.addEventListener('click', (e) => { e.preventDefault(); - fetchUsers(inputText.value) + if (searchUsers) { + fetchUsers(inputText.value) + } else { + fetchRepos(inputText.value) + } }) + function resetDom() { + userList.innerHTML = '' + repoList.innerHTML = '' + } + + function fetchRepos(repo) { + fetch(`https://api.github.com/search/repositories?q=${repo}`) + .then((response) => response.json()) + .then((object) => { + resetDom(); + iterateOverRepos(object.items) + }) + } + function fetchUsers(userName) { fetch(`https://api.github.com/search/users?q=${userName}`, configObj) .then((response) => response.json()) .then((object) => { - userList.innerHTML = '' - repoList.innerHTML = '' + resetDom(); iterateOver(object.items) }) }