diff --git a/github-profiles/index.html b/github-profiles/index.html index 6924a84..04b9bc0 100644 --- a/github-profiles/index.html +++ b/github-profiles/index.html @@ -13,4 +13,4 @@
- + \ No newline at end of file diff --git a/github-profiles/script.js b/github-profiles/script.js index 8885e02..77d2071 100644 --- a/github-profiles/script.js +++ b/github-profiles/script.js @@ -1,30 +1,37 @@ -const APIURL = "https://api.github.com/users/"; +const GITHUBAPIURL = "https://api.github.com/users/"; -const main = document.getElementById("main"); +const dataShowArea = document.getElementById("main"); const form = document.getElementById("form"); const search = document.getElementById("search"); -getUser("florinpop17"); +userData("Apoorva-Shukla"); -async function getUser(username) { - const resp = await fetch(APIURL + username); - const respData = await resp.json(); +async function userData(username) { + const data = await fetch(GITHUBAPIURL + username); + const jsonData = await data.json(); - createUserCard(respData); - - getRepos(username); + createUserCard(jsonData); + usersOtherData(username); } -async function getRepos(username) { - const resp = await fetch(APIURL + username + "/repos"); - const respData = await resp.json(); - +async function usersOtherData(username) { + let resp = await fetch(GITHUBAPIURL + username + "/repos"); + let respData = await resp.json(); addReposToCard(respData); + + resp = await fetch(GITHUBAPIURL + username + "/followers"); + respData = await resp.json(); + addFollowersToCard(respData); + + resp = await fetch(GITHUBAPIURL + username + "/following"); + respData = await resp.json(); + addFollowingToCard(respData); } function createUserCard(user) { const cardHTML = `
+

${user.html_url}

${user.name}
@@ -33,12 +40,23 @@ function createUserCard(user) {

${user.bio}

+ +
+ + + +
+ +
+
`; @@ -47,31 +65,60 @@ function createUserCard(user) { } function addReposToCard(repos) { - const reposEl = document.getElementById("repos"); + const reposEle = document.getElementById("repos"); + reposEle.innerHTML = ""; repos .sort((a, b) => b.stargazers_count - a.stargazers_count) - .slice(0, 10) .forEach((repo) => { const repoEl = document.createElement("a"); - repoEl.classList.add("repo"); + repoEl.classList.add("links"); repoEl.href = repo.html_url; repoEl.target = "_blank"; repoEl.innerText = repo.name; - reposEl.appendChild(repoEl); + reposEle.appendChild(repoEl); }); } -form.addEventListener("submit", (e) => { - e.preventDefault(); +function addFollowersToCard(followers) { + const flwrsEle = document.getElementById("followers"); + flwrsEle.innerHTML = ""; + + followers + .forEach((fl) => { + const flwrsEl = document.createElement("a"); + flwrsEl.classList.add("links"); + + flwrsEl.href = fl.html_url; + flwrsEl.target = "_blank"; + flwrsEl.innerText = fl.login; + + flwrsEle.appendChild(flwrsEl); + }); +} + +function addFollowingToCard(following) { + const fEle = document.getElementById("following"); + fEle.innerHTML = ""; + + following + .forEach((f) => { + const fEl = document.createElement("a"); + fEl.classList.add("links"); - const user = search.value; + fEl.href = f.html_url; + fEl.target = "_blank"; + fEl.innerText = f.login; - if (user) { - getUser(user); + fEle.appendChild(fEl); + }); +} - search.value = ""; - } -}); +form.addEventListener('submit', (e) => { + e.preventDefault(); + let searchTxt = search.value; + search.value = ""; + userData(searchTxt); +}); \ No newline at end of file diff --git a/github-profiles/style.css b/github-profiles/style.css index 1c68b87..e2d6e2d 100644 --- a/github-profiles/style.css +++ b/github-profiles/style.css @@ -1,32 +1,28 @@ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap"); - * { box-sizing: border-box; } body { - background-color: #2a2a72; - background-image: linear-gradient(315deg, #2a2a72 0%, #2e2a68 74%); - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; + background-color: #49495a; font-family: "Poppins", sans-serif; - margin: 0; - min-height: 100vh; +} + +form { + width: 50%; + margin: 1rem auto; } input { - background-color: #4c2885; + background-color: #49495a; border-radius: 10px; border: none; - box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05), - 0 15px 40px rgba(0, 0, 0, 0.1); + box-shadow: 0 5px 10px black, 0 15px 40px rgba(0, 0, 0, 0.5); color: white; font-family: inherit; font-size: 1rem; padding: 1rem; - margin-bottom: 2rem; + width: 100%; } input::placeholder { @@ -38,58 +34,47 @@ input:focus { } .card { - background-color: #4c2885; - background-image: linear-gradient(315deg, #4c2885 0%, #4c11ac 100%); - border-radius: 20px; - box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05), - 0 15px 40px rgba(0, 0, 0, 0.1); - display: flex; - padding: 3rem; - max-width: 800px; + word-wrap: break-word; + box-sizing: border-box; + padding: 33px; + width: 80%; + margin: auto; + color: white; + background-color: #343438; + border-radius: 10px; + margin-top: 2rem; + box-shadow: 0 5px 10px black, 0 15px 40px rgba(0, 0, 0, 0.5); } .avatar { - border: 10px solid #2a2a72; + border: 10px solid #26262c; border-radius: 50%; height: 150px; width: 150px; } -.user-info { - color: #eee; - margin-left: 2rem; -} - -.user-info h2 { - margin-top: 0; -} - -.user-info ul { - display: flex; - justify-content: space-between; - list-style-type: none; - padding: 0; - max-width: 400px; -} - -.user-info ul li { - display: flex; - align-items: center; -} - -.user-info ul li strong { - font-size: 0.9rem; - margin-left: 0.5rem; -} - -.repo { - background-color: #2a2a72; +.links { + background-color: #161616; border-radius: 5px; display: inline-block; color: white; font-size: 0.7rem; - padding: 0.25rem 0.5rem; + padding: 0.5rem 1rem; margin-right: 0.5rem; margin-bottom: 0.5rem; text-decoration: none; } + +.links:hover { + background-color: #2e2727; +} + +.other-links { + color: rgb(233, 17, 233); + font-size: 1.5rem; + text-decoration: none; +} + +.other-links:hover { + text-decoration: underline; +} \ No newline at end of file