Skip to content

Commit 0de0ac9

Browse files
tajulafreentajulafreen
authored
Merge pull request #30 from tajulafreen/Github_Profile_Finder
50Projects-HTML-CSS-JavaScript : GitHub profile finder
2 parents 824a1b5 + e1c2d50 commit 0de0ac9

File tree

6 files changed

+243
-0
lines changed

6 files changed

+243
-0
lines changed

Diff for: ‎README.md

+11
Original file line numberDiff line numberDiff line change
@@ -309,6 +309,17 @@ In order to run this project you need:
309309
</details>
310310
</li>
311311

312+
<li>
313+
<details>
314+
<summary>Github Profile Finder</summary>
315+
<p>The GitHub User Info Finder is a web application designed to fetch and display detailed information about GitHub users. By simply entering a GitHub username, users can retrieve profile information including the avatar, name, bio, number of public repositories, followers, and following count. This project leverages the GitHub API to provide real-time data, and it is built using HTML, CSS, and JavaScript for a seamless user experience.</p>
316+
<ul>
317+
<li><a href="https://tajulafreen.github.io/50Projects-HTML-CSS-JavaScript/Source-Code/GithubProfileFinder/">Live Demo</a></li>
318+
<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/GithubProfileFinder">Source</a></li>
319+
</ul>
320+
</details>
321+
</li>
322+
312323
</ol>
313324

314325
<p align="right">(<a href="#readme-top">back to top</a>)</p>

Diff for: ‎Source-Code/GithubProfileFinder/assets/github-logo.png

66 KB
Loading

Diff for: ‎Source-Code/GithubProfileFinder/assets/github.avif

9.9 KB
Binary file not shown.

Diff for: ‎Source-Code/GithubProfileFinder/index.html

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Github Profile Finder</title>
7+
<!-- google fonts -->
8+
<link rel="preconnect" href="https://fonts.googleapis.com" />
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
10+
<link
11+
href="https://fonts.googleapis.com/css2?family=Lobster+Two:ital,wght@0,400;0,700;1,400;1,700&display=swap"
12+
rel="stylesheet"
13+
/>
14+
15+
<link rel="stylesheet" href="style.css" />
16+
</head>
17+
<body>
18+
<div class="container">
19+
<div class="search-container">
20+
<input
21+
type="text"
22+
name=""
23+
id="input"
24+
placeholder="Enter Github UserName"
25+
class=""
26+
/>
27+
<button id="search">Search User</button>
28+
</div>
29+
30+
<div class="profile-card">
31+
<div class="main-info">
32+
<img src="./assets/github-logo.png" alt="avatar" id="prof-img" />
33+
<span class="name" id="name">Tajul Afreen</span>
34+
<a href="" id="username"></a>
35+
</div>
36+
<div class="bio">
37+
<p id="bio">A full stack developer</p>
38+
<p><span id="repo">58</span> Repositories</p>
39+
</div>
40+
<div class="follow">
41+
<div class="followers">
42+
<span class="no" id="followers">49</span>
43+
Followers
44+
</div>
45+
<div class="following">
46+
<span class="no" id="following">19</span>
47+
Following
48+
</div>
49+
</div>
50+
</div>
51+
</div>
52+
53+
<script src="script.js"></script>
54+
</body>
55+
</html>

Diff for: ‎Source-Code/GithubProfileFinder/script.js

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
const inputUser = document.querySelector('#input');
2+
3+
const userImg = document.querySelector('.main-info');
4+
const search = document.getElementById('search');
5+
const bio = document.querySelector('#bio');
6+
const repos = document.querySelector('#repo');
7+
const followers = document.querySelector('#followers');
8+
const following = document.querySelector('#following');
9+
10+
const fetchUser = (username) => {
11+
fetch(`https://api.github.com/users/${username}`)
12+
.then((data) => data.json())
13+
.then((jsonData) => {
14+
if (jsonData.message === 'Not Found') {
15+
alert('User Not Found');
16+
} else {
17+
userImg.innerHTML = `
18+
<img src="${jsonData.avatar_url}" alt="avatar" id="prof-img">
19+
<span class="name" id="name">${jsonData.name}</span>
20+
<a href="${jsonData.html_url}" id="username">@${jsonData.login}</a>
21+
`;
22+
bio.innerHTML = jsonData.bio ? jsonData.bio : 'No bio available.';
23+
repos.innerHTML = jsonData.public_repos;
24+
followers.innerHTML = jsonData.followers;
25+
following.innerHTML = jsonData.following;
26+
}
27+
})
28+
.catch((err) => {
29+
console.log(`Catch: ${err.message}`);
30+
});
31+
};
32+
33+
const getUser = () => {
34+
const username = inputUser.value.trim();
35+
36+
if (username.length === 0) {
37+
alert('Please enter a valid GitHub username');
38+
} else {
39+
fetchUser(username);
40+
}
41+
42+
inputUser.value = '';
43+
};
44+
45+
// Attach event listener to the search button
46+
search.addEventListener('click', getUser);

Diff for: ‎Source-Code/GithubProfileFinder/style.css

+131
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background: url(./assets/github.avif);
9+
background-repeat: no-repeat;
10+
background-size: cover;
11+
background-position: center;
12+
background-blend-mode: darken;
13+
}
14+
15+
.search-container {
16+
width: 550px;
17+
height: 50px;
18+
background-color: #fff;
19+
display: flex;
20+
justify-content: space-evenly;
21+
margin: 0 auto;
22+
margin-top: 50px;
23+
box-shadow: 0 3px 10px gray;
24+
}
25+
26+
#input {
27+
width: 70%;
28+
height: 100%;
29+
background-color: #fff;
30+
border: none;
31+
outline: none;
32+
padding: 5px 160px 5px 15px;
33+
box-sizing: border-box;
34+
}
35+
36+
#search {
37+
height: 100%;
38+
width: 30%;
39+
background-color: #000;
40+
color: white;
41+
cursor: pointer;
42+
text-transform: uppercase;
43+
}
44+
45+
.profile-card {
46+
width: 500px;
47+
background-color: rgba(255, 255, 255, 0.6);
48+
margin: 25px auto;
49+
border-radius: 15px;
50+
overflow: hidden;
51+
margin-bottom: 15px;
52+
box-shadow: 0 3px 10px gray;
53+
font-family: 'Lobster Two', cursive;
54+
}
55+
56+
.main-info {
57+
display: flex;
58+
flex-direction: column;
59+
align-items: center;
60+
border-bottom: 1px solid gray;
61+
}
62+
63+
#prof-img {
64+
height: 70px;
65+
width: auto;
66+
border-radius: 50%;
67+
margin: 10px 0;
68+
box-shadow: 0 3px 10px rgb(96, 93, 93);
69+
}
70+
71+
.name {
72+
margin-top: 15px;
73+
font-size: 25px;
74+
}
75+
76+
#username {
77+
font-size: 20px;
78+
text-decoration: none;
79+
margin-top: 5px;
80+
margin-bottom: 8px;
81+
}
82+
83+
a {
84+
text-decoration: none;
85+
}
86+
87+
.bio {
88+
width: 100%;
89+
text-align: center;
90+
padding: 20px 10px;
91+
font-size: 23px;
92+
}
93+
94+
#bio {
95+
font-weight: bold;
96+
color: rgb(28, 99, 109);
97+
}
98+
99+
p {
100+
margin-top: 12px;
101+
}
102+
103+
.follow {
104+
width: 100%;
105+
display: flex;
106+
height: 60px;
107+
border-top: 1px solid grey;
108+
font-size: 20px;
109+
}
110+
111+
.follow div {
112+
width: 50%;
113+
text-align: center;
114+
padding-top: 15px;
115+
}
116+
117+
.followers {
118+
border-right: 1px solid grey;
119+
}
120+
121+
@media screen and (max-width: 600px) {
122+
.profile-card {
123+
width: 450px;
124+
margin: 0 45px;
125+
margin-top: 30px;
126+
border-radius: 15px;
127+
overflow: hidden;
128+
margin-bottom: 15px;
129+
box-shadow: 0 3px 10px gray;
130+
}
131+
}

0 commit comments

Comments
 (0)