Skip to content

Commit 512c87d

Browse files
coderzamancoderzaman
committed
Github Finder Project Complete
1 parent c2e2211 commit 512c87d

File tree

4 files changed

+160
-0
lines changed

4 files changed

+160
-0
lines changed

‎11. Document Object Model(DOM)/img/thumb-1920-1325121.png

958 KB
Loading

‎21. Github Finder/img/image.png

357 KB
Loading

‎21. Github Finder/index.html

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Git Hub Finder</title>
8+
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&display=swap" rel="stylesheet">
9+
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap" rel="stylesheet">
10+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
11+
<style>
12+
* {
13+
margin: 0;
14+
padding: 0;
15+
}
16+
17+
.error {
18+
background: red;
19+
}
20+
21+
.style_head {
22+
border-radius: 0 0 10px 10px;
23+
font-family: "Caveat", cursive;
24+
font-weight: 700;
25+
}
26+
27+
.search_bg {
28+
padding: 20px;
29+
border-radius: 10px;
30+
font-family: "Fredoka", sans-serif;
31+
color: #202020;
32+
}
33+
34+
.img-sec a {
35+
text-decoration: none;
36+
37+
}
38+
39+
.badges span {
40+
padding: 7px 15px;
41+
font-weight: 400;
42+
}
43+
</style>
44+
</head>
45+
46+
47+
48+
49+
<body style="background-color: #202020;">
50+
51+
<div class="container">
52+
<div class="row">
53+
<h3 class="fs-2 p-2 shadow style_head text-bg-light text-center">GITHUB FINDER</h3>
54+
</div>
55+
</div>
56+
57+
58+
<div class="container">
59+
<div class="row search_bg shadow text-bg-light">
60+
<h4 class="fs-3 mb-0">Search GITHUB Users</h4>
61+
<p>Enter a username to fetch user profile and repos</p>
62+
<hr><br>
63+
<input type="text" class="form-control" id="serchUserName" placeholder="Enter User Name">
64+
<button class="btn btn-dark mt-3" id="serchBtn">Search</button>
65+
</div>
66+
</div>
67+
68+
</div>
69+
<div class="container userDetails ">
70+
71+
</div>
72+
<div class="container not_found"></div>
73+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
74+
<script src="js/script.js"></script>
75+
<p></p>
76+
</body>
77+
78+
</html>

‎21. Github Finder/js/script.js

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
let usersDeatails = document.querySelector(".userDetails");
2+
let userNotFound = document.querySelector(".not_found");
3+
let searchUser = document.querySelector("#serchUserName");
4+
let searchBtn = document.querySelector("#serchBtn");
5+
6+
class UI {
7+
static showUser(user) {
8+
userNotFound.innerHTML = '';
9+
console.log(user);
10+
usersDeatails.innerHTML = `
11+
<div class="row shadow mt-2 py-4 px-3 userDetails rounded-3 border border-secondary text-bg-light">
12+
<div class="col-md-3 img-sec text-center">
13+
<img src="${user.avatar_url}" class="img-fluid rounded-2" alt="">
14+
<a href="${user.html_url}" target="_blank" class="bg-dark d-block mt-3 text-center text-white fs-4 rounded-3">${user.name}</a>
15+
</div>
16+
<div class="col-md-9">
17+
<div class="badges">
18+
<span class="badge bg-primary">Public Repors: ${user.public_repos}</span>
19+
<span class="badge bg-secondary">Public Gist: ${user.public_gists}</span>
20+
<span class="badge bg-success">Follower: ${user.followers} </span>
21+
<span class="badge bg-danger">Following: ${user.following} </span>
22+
<span class="badge bg-danger">Location: ${user.location} </span>
23+
</div>
24+
25+
<div class="list-Item mt-3">
26+
<ul class="list-group">
27+
<li class="list-group-item">Company: ${user.company}</li>
28+
<li class="list-group-item">Website: ${user.blog}</li>
29+
<li class="list-group-item">Email: ${user.email}</li>
30+
<li class="list-group-item">User Since: ${user.created_at}</li>
31+
</ul>
32+
</div>
33+
</div>
34+
</div>
35+
`
36+
37+
}
38+
39+
static notFound() {
40+
usersDeatails.innerHTML = '';
41+
userNotFound.innerHTML = `
42+
<div class="row">
43+
<p class="text-bg-danger p-1 fs-2 text-center mt-3 rounded-2 shadow">User is Not Found...</p>
44+
</div>
45+
`;
46+
setTimeout(function () {
47+
userNotFound.innerHTML = "";
48+
searchUser.value = '';
49+
}, 2000);
50+
51+
}
52+
}
53+
54+
async function getUserObject(file) {
55+
let myObject = await fetch(file);
56+
let myText = await myObject.json();
57+
return myText;
58+
}
59+
60+
async function getUser(username) {
61+
62+
console.log(username);
63+
let usrDet = await getUserObject(`https://api.github.com/users/${username}`);
64+
65+
if (usrDet.message === "Not Found") {
66+
UI.notFound();
67+
} else {
68+
UI.showUser(usrDet);
69+
}
70+
}
71+
72+
searchBtn.addEventListener("click", function (e) {
73+
let username = searchUser.value.trim();
74+
if (username == '') {
75+
usersDeatails.innerHTML = "";
76+
alert("Please Enter User Name")
77+
} else {
78+
getUser(username);
79+
}
80+
});
81+
82+

0 commit comments

Comments
 (0)