Skip to content

Commit 270ed46

Browse files
shivanshi-sshivanshi-s
committed
Added a GithubFinder project in the medium folder
Also added the README file
1 parent 0226d8b commit 270ed46

File tree

9 files changed

+240
-0
lines changed

9 files changed

+240
-0
lines changed

‎medium/GitHub_Finder/README.md‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# Hacktoberfest 2022 - JavaScript Medium Programs
2+
3+
## GitHub Finder
4+
5+
### Description
6+
Github finder is a project to find users on GitHub and details about their profile easily using GitHub API
7+
8+
### Image Example
9+
![GitHubFinder](./example.png)
10+
11+
12+
13+
### Maintainer
14+
- [Anamaya](https://www.linkedin.com/in/anamaya1729/)
15+
- [Vaibhav](https://https://www.linkedin.com/in/vaibhava17/)
16+
17+
### License
18+
**This project is licensed under the GNU GENERAL PUBLIC License - see the [LICENSE](../LICENSE) file for details**
19+
20+
### Happy Coding! :smile:

‎medium/GitHub_Finder/app.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
// initialize gitHub and UI
2+
const github = new GitHub
3+
const ui = new UI
4+
5+
// search the user
6+
const searchUser = document.getElementById('searchUser')
7+
// event listener on the search
8+
searchUser.addEventListener('keyup',(e) => {
9+
// get input text
10+
const userText = e.target.value;
11+
// condition check
12+
if(userText !== ''){
13+
// make http call
14+
github.getUser(userText)
15+
.then(data =>{
16+
if(data.profile.message === 'Not Found') {
17+
// show alert
18+
ui.showAlert('User not found.','alert alert-danger')
19+
} else {
20+
// show profile
21+
// console.log(data);
22+
ui.showProfile(data.profile);
23+
ui.showRepos(data.repos);
24+
}
25+
})
26+
} else {
27+
// clear search profile
28+
ui.clearProfile();
29+
}
30+
})

‎medium/GitHub_Finder/bootstrap.min.css‎

Lines changed: 12 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎medium/GitHub_Finder/bootstrap2.min.css‎

Lines changed: 12 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎medium/GitHub_Finder/bootstrap3.min.css‎

Lines changed: 12 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎medium/GitHub_Finder/example.png‎

303 KB
Loading

‎medium/GitHub_Finder/github.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
class GitHub {
2+
constructor() {
3+
this.client_id = 'c55a05ed80396e20493f'
4+
this.client_secret = '8256c33200ca5cc213566db8a561f675702753f3'
5+
this.repos_count = 5;
6+
this.repos_sort = 'created:asc';
7+
}
8+
9+
// get user method
10+
async getUser(user){
11+
const profileResponse = await fetch(`https://api.github.com/users/${user}?client_id=${this.client_id}&client_secret=${this.client_secret}`);
12+
const repoResponse = await fetch(`https://api.github.com/users/${user}/repos?per_page=${this.repos_count}&sort=${this.repos_sort}&client_id=${this.client_id}&client_secret=${this.client_secret}`);
13+
14+
const profile = await profileResponse.json();
15+
const repos = await repoResponse.json();
16+
return {
17+
profile,repos
18+
}
19+
}
20+
}

‎medium/GitHub_Finder/index.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>GitHub Finder</title>
8+
<link rel="stylesheet" href="./bootstrap2.min.css">
9+
</head>
10+
<body>
11+
12+
<nav class="navbar-dark bg-primary mb-3">
13+
<div class="container">
14+
<a href="" class="navbar-brand">GitHub Search</a>
15+
</div>
16+
</nav>
17+
18+
<div class="container searchContainer">
19+
<div class="search card card-body">
20+
<h1>Search GitHub Users</h1>
21+
<p class="lead">Enter the usename to fetch user profile and repositories.</p>
22+
<input type="text" id="searchUser" class="form-control" placeholder="GitHub Username...">
23+
</div>
24+
<br>
25+
<div id="profile"></div>
26+
</div>
27+
28+
<footer class="mt-5 p-3 text-center bg-transparent">
29+
GitHub Search &copy;
30+
</footer>
31+
32+
33+
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
34+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
35+
<script src="./github.js"></script>
36+
<script src="./ui.js"></script>
37+
<script src="./app.js"></script>
38+
</body>
39+
</html>

‎medium/GitHub_Finder/ui.js‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
class UI {
2+
constructor() {
3+
this.profile = document.getElementById('profile')
4+
// console.log(this.profile)
5+
}
6+
7+
showProfile(user){
8+
this.profile.innerHTML = `
9+
<div class="card card-body mb-3">
10+
<div class="row">
11+
<div class="col-md-3">
12+
<img src="${user.avatar_url}" alt="" class="img-fluid mb-2">
13+
<a href="${user.html_url}" target="_blank" class="btn btn-primary btn-block mb-4">View Profile</a>
14+
</div>
15+
<div class="col-md-9">
16+
<span class="badge bg-primary">Public repositories : ${user.public_repos}</span>
17+
<span class="badge bg-primary">Public Gists : ${user.public_gists}</span>
18+
<span class="badge bg-success">Followers : ${user.followers}</span>
19+
<span class="badge bg-info">Following : ${user.following} </span>
20+
21+
<br><br>
22+
<ul class="list-group">
23+
<li class="list-group-item">Company : ${user.company}</li>
24+
<li class="list-group-item">Blog/website : ${user.blog}</li>
25+
<li class="list-group-item">Location : ${user.location}</li>
26+
<li class="list-group-item">Member Since : ${user.created_at}</li>
27+
</ul>
28+
</div>
29+
</div>
30+
</div>
31+
<h3 class="page_landing mb-3">Latest Repositories : </h3>
32+
<div id="repos"></div>
33+
`;
34+
}
35+
36+
clearProfile(){
37+
this.profile.innerHTML = '';
38+
}
39+
40+
// displaying the alert
41+
showAlert(message,className){
42+
// clearing the remaining alert
43+
this.clearAlert();
44+
45+
// create a div
46+
const div = document.createElement('div');
47+
// add a class
48+
div.className = className;
49+
// add text
50+
div.appendChild(document.createTextNode(message));
51+
// create Parent
52+
const container = document.querySelector('.searchContainer');
53+
// get search box
54+
const search = document.querySelector('.search');
55+
// insert alert
56+
container.insertBefore(div,search);
57+
58+
setTimeout( ()=>{
59+
this.clearAlert();
60+
},3000 );
61+
}
62+
63+
// clear alert message
64+
clearAlert(){
65+
const currentAlert = document.querySelector('.alert');
66+
if(currentAlert){
67+
currentAlert.remove();
68+
}
69+
}
70+
71+
// show user repos
72+
showRepos(repos) {
73+
let output = '';
74+
75+
repos.forEach(function(repo){
76+
output += `
77+
<div class="card card-body mb-2">
78+
<div class="row">
79+
<div class="col-md-6">
80+
<a href=${repo.html_url}>${repo.name}</a>
81+
</div>
82+
<div class="col-md-6">
83+
<span class="badge bg-primary">Stars: ${repo.stargazers_count}</span>
84+
<span class="badge bg-primary">Watchers : ${repo.watchers_count}</span>
85+
<span class="badge bg-primary">Forks : ${repo.forms_count}</span>
86+
</div>
87+
88+
</div>
89+
</div>
90+
`;
91+
})
92+
// output repos
93+
document.getElementById("repos").innerHTML = output;
94+
}
95+
}

0 commit comments

Comments
 (0)