Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Few More features added - followers and following view added #3

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Few More features added - followers and following view added #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion github-profiles/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,4 +13,4 @@
</form>
<main id="main"></main>
</body>
</html>
</html>
103 changes: 75 additions & 28 deletions github-profiles/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = `
<div class="card">
<p><a class="other-links" target="blank" href=${user.html_url}><strong>${user.html_url}</strong></a></p>
<div>
<img class="avatar" src="${user.avatar_url}" alt="${user.name}" />
</div>
Expand All @@ -33,12 +40,23 @@ function createUserCard(user) {
<p>${user.bio}</p>

<ul class="info">
<li>${user.followers}<strong>Followers</strong></li>
<li>${user.following}<strong>Following</strong></li>
<li>${user.public_repos}<strong>Repos</strong></li>
<li>${user.followers} <strong>Followers</strong></li>
</ul>

<div id="followers"></div>

<ul class="info">
<li>${user.following} <strong>Following</strong></li>
</ul>

<div id="following"></div>

<ul class="info">
<li>${user.public_repos} <strong>Repos</strong></li>
</ul>

<div id="repos"></div>

</div>
</div>
`;
Expand All @@ -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);
});
89 changes: 37 additions & 52 deletions github-profiles/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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;
}