Skip to content

Commit

Permalink
Merge pull request #18 from dhruti26/api_files
Browse files Browse the repository at this point in the history
Added Github Profile Viewer
  • Loading branch information
dishamodi0910 authored Oct 1, 2023
2 parents daaf240 + b3f9a1f commit 1992034
Show file tree
Hide file tree
Showing 5 changed files with 200 additions and 0 deletions.
21 changes: 21 additions & 0 deletions Existing_API_Collection/GithubAPI/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
Github API:
-It is a set of web-based endpoints and tools provided by GitHub to allow developers to programmatically interact with and access data from the GitHub platform.
-It enables developers to build applications, automate tasks, and integrate GitHub's functionality into their own software applications or services.

Future Scope:
-The API can be used to integrate security scanning and compliance checks into the development process.
-The API could be used to gather data for advanced reporting, analytics, and visualization tools.

Implementation:
-The JavaScript code contains an HTTP GET request to the GitHub API's ,the API is sent to GitHub's servers after authentication, it fetches user's profile data from its database.

Tech Stacks used:
- HTML (frontend)
- CSS (styling)
- Javascript (API Implementation)

Output :
![Screenshot](image.png)

Reference:
https://docs.github.com/en/rest?apiVersion=2022-11-28
Binary file added Existing_API_Collection/GithubAPI/image.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
29 changes: 29 additions & 0 deletions Existing_API_Collection/GithubAPI/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GitHub Profile Viewer</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>GitHub Profile Viewer</h1>
</header>
<main>
<div id="search-container">
<input type="text" id="username-input" placeholder="Enter GitHub username">
<button id="search-button">Search</button>
</div>
<div id="profile-container">
<div id="user-profile">
<!-- User profile information-->
</div>
<div id="user-repos">
<!-- User repositories -->
</div>
</div>
</main>
<script src="script.js"></script>
</body>
</html>
42 changes: 42 additions & 0 deletions Existing_API_Collection/GithubAPI/script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
const usernameInput = document.getElementById('username-input');
const searchButton = document.getElementById('search-button');
const userProfile = document.getElementById('user-profile');
const userRepos = document.getElementById('user-repos');

searchButton.addEventListener('click', () => {
//trim() is used to ignore starting and ending spaces
const username = usernameInput.value.trim();

if (username === '') {
alert('Please enter a GitHub username.');
return;
}
//using Github API to fetch user details
fetch(`https://api.github.com/users/${username}`)
.then(response => response.json())
.then(user => {
// Display user profile information
userProfile.innerHTML = `
<h2>${user.login}</h2>
<img src="${user.avatar_url}" alt="${user.login}">
<p>Followers: ${user.followers}</p>
<p>Following: ${user.following}</p>
`;
})
.catch(error => {
console.error('Error fetching user data:', error);
userProfile.innerHTML = '<p>User not found.</p>';
});

fetch(`https://api.github.com/users/${username}/repos`)
.then(response => response.json())
.then(repos => {
// Display user repositories
const repoList = repos.map(repo => `<li>${repo.name}</li>`).join('');
userRepos.innerHTML = `<h2>Repositories</h2><ul>${repoList}</ul>`;
})
.catch(error => {
console.error('Error fetching user repositories:', error);
userRepos.innerHTML = '<p>Repositories not found.</p>';
});
});
108 changes: 108 additions & 0 deletions Existing_API_Collection/GithubAPI/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

main {
max-width: 800px;
margin: 20px auto;
padding: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
background-color: white;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

header {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
font-size: 32px;
width: 100%;
border-radius: 10px 10px 0 0;
}

#search-container {
text-align: center;
margin-bottom: 20px;
width: 100%;
}

/* Input field styles */
#username-input {
padding: 10px;
width: 300px;
font-size: 16px;
border: none;
border-radius: 5px 0 0 5px;
background-color: #f0f0f0;
}

/* Search button styles */
#search-button {
padding: 10px 20px;
font-size: 16px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 0 5px 5px 0;
cursor: pointer;
}

/* User profile container styles */
#user-profile {
flex: 1;
padding: 20px;
border: 1px solid #ddd;
background-color: #fff;
text-align: center;
border-radius: 10px;
margin-right: 10px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}

#user-profile h2 {
font-size: 24px;
margin: 10px 0;
}

#user-profile img {
max-width: 200px;
border-radius: 50%;
margin-top: 10px;
}

#user-profile p {
font-size: 16px;
}

/* User repositories container styles */
#user-repos {
flex: 1;
padding: 20px;
border: 1px solid #ddd;
background-color: #fff;
text-align: center;
border-radius: 10px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}

#user-repos h2 {
font-size: 24px;
margin: 0 0 20px;
}

#user-repos ul {
list-style: none;
padding: 0;
}

#user-repos ul li {
margin-bottom: 10px;
font-size: 18px;
}

0 comments on commit 1992034

Please sign in to comment.