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

Peerdino #5175

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Peerdino #5175

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b54c202
Update index.html
PeerDino Aug 21, 2023
9caae01
Update index.js
PeerDino Aug 21, 2023
89061ac
Update styles.css
PeerDino Aug 21, 2023
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
40 changes: 25 additions & 15 deletions Frontend-Projects/github-profile viewer/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,33 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Github Profiles</title>
<link rel="stylesheet" href="./styles.css" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GitHub Profile Finder</title>
<!-- <link rel="stylesheet" href="style.css"> -->
<link rel="stylesheet" href="./styles.css">
</head>

<body>
<form id="form" onsubmit="return formSubmit()">
<input type="text" id="search" autofocus placeholder="Search a Github User Here" />
<button id="submit"><pre>Submit</pre></button>
</form>
<main id="main">
</main>


<script src="./index.js" defer></script>
<div class="container">
<h1>GitHub Profile Finder</h1>
<div class="profileTop">
<form id="search-form" >
<input type="text" id="username" placeholder="Enter GitHub username">
<button type="submit">Search User</button>
</form>
</div>

<div id="user-details">
<!-- Display user details here -->
</div>
</div>

<script src="./index.js" ></script>

</body>
</html>

</html>
</script>
</body>
</html>
94 changes: 33 additions & 61 deletions Frontend-Projects/github-profile viewer/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,69 +1,41 @@
const APIURL = "https://api.github.com/users/";
const main = document.querySelector("#main");
const searchBox = document.querySelector("#search")
const getUser = async(username) => {
const response = await fetch(APIURL + username);
const data = await response.json()
const card = `
<div class="card">
<div>
<img class="avatar" src="${data.avatar_url}" alt="Florin Pop">
</div>
<div class="user-info">
<h2>${data.name}</h2>
<p>${data.bio}</p>

<ul class="info">
<li>${data.followers}<strong>Followers</strong></li>
<li>${data.following}<strong>Following</strong></li>
<li>${data.public_repos}<strong>Repos</strong></li>
</ul>
const form = document.getElementById('search-form');
const userDetails = document.getElementById('user-details');

<div id="repos">

</div>
</div>
</div>
`
main.innerHTML = card;
getRepos(username)
}


// init call
getUser("shreyans2004")
form.addEventListener('submit', function(event) {
event.preventDefault();

const username = document.getElementById('username').value;
fetchUserData(username);
});

const getRepos = async(username) => {
const repos = document.querySelector("#repos")
const response = await fetch(APIURL + username + "/repos")
const data = await response.json();
data.forEach(
(item) => {
function fetchUserData(username) {
const apiUrl = `https://api.github.com/users/${username}`;

const elem = document.createElement("a")
elem.classList.add("repo")
elem.href = item.html_url
elem.innerText = item.name
elem.target = "_blank"
repos.appendChild(elem)
}
)
fetch(apiUrl)
.then(response => response.json())
.then(data => {
displayUserDetails(data);
})
.catch(error => {
console.error('Error fetching data:', error);
});
}

const formSubmit = () => {
if (searchBox.value != "") {
getUser(searchBox.value);
searchBox.value = ""
}
return false;
function displayUserDetails(user) {
userDetails.innerHTML = `
<div class="name">
<img src="${user.avatar_url}" alt="Profile Picture">
<h2>${user.name}</h2>
<a href="${user.html_url}" target="_blank">Visit Profile</a>
</div>
<div class="bio">
<p>${user.bio}</p>
<p>Repositories: ${user.public_repos}</p>
</div>
<div class="follow"
<p>Followers: ${user.followers}</p>
<p>Following: ${user.following}</p>
</div>
`;
}

submit=document.getElementById("submit");
submit.addEventListener(
"click",
function() {
formSubmit()
}
)

146 changes: 49 additions & 97 deletions Frontend-Projects/github-profile viewer/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,116 +1,68 @@
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap");
* {
box-sizing: border-box;
padding: 0;
margin: 0;
body{
margin: 0;
padding: 0;
color: white;
background-image: url(https://cdn.neowin.com/news/images/uploaded/2021/04/1619644762_github-desktop_story.jpg);
}
.container{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
flex-wrap: wrap;

}

body {
background-color: #FFC300;

#user-details {
margin-top: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: "Poppins", sans-serif;
margin: 0;
min-height: 100vh;
}

input {
background:linear-gradient(90deg,#FF5733 50%,#C70039 50%);
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);
color: white;
font-family: inherit;
font-size: 1rem;
padding: 1rem;
margin-bottom: 2rem;
flex-direction: column;
width: 400px;
}
button{


background:#C70039;
height: auto;
text-align: center;
border: 1px solid red;
border-radius: 10px;
background-color: white;
color: black;

border:2px solid black;
cursor: pointer;
color: white;
font-family: inherit;
font-size: 1rem;
padding: 1rem;
margin-bottom: 2rem;
margin-left:10px;
width: 80px;

}
button:hover{
transform:scale(1.1);
transition:transform 1s;
}

input::placeholder {
color: white;
}

input:focus {
outline: none;
form{
width: 100%;
height: auto;
}

.card {
background-color:#FF5733;
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;
form input{
text-align: center;
font-size: 16px;
width: 300px;
height: 20px;
border-radius: 10px;
flex-wrap: wrap;
}

.avatar {
border: 10px solid #2a2a72;
img{
height: 80px;
width: 80px;
object-fit: cover;
border-radius: 50%;
height: 150px;
width: 150px;
}

.user-info {
color: #eee;
margin-left: 2rem;
}

.user-info h2 {
margin-top: 0;
.bio,.name,.follow{
margin-top: 10px;
width: 100%;
border-bottom: 1px solid grey;
margin: 0;
}

.user-info ul {
display: flex;
justify-content: space-between;
list-style-type: none;
padding: 0;
max-width: 400px;
.bio p{
color: green;
}

.user-info ul li {
.follow{
display: flex;
margin-right: 10px;
flex-direction: row;
justify-content: space-evenly;
align-items: center;

}

.user-info ul li strong {
font-size: 0.9rem;
margin-left: 0.5rem;
.follow p,.bio p,.name p{
margin: 20px 20px;

}

.repo {
background-color: #2a2a72;
border-radius: 5px;
display: inline-block;
color: white;
font-size: 0.7rem;
padding: 0.25rem 0.5rem;
margin-right: 0.5rem;
margin-bottom: 0.5rem;
text-decoration: none;
}