diff --git a/Existing_API_Collection/GithubAPI/README.md b/Existing_API_Collection/GithubAPI/README.md new file mode 100644 index 0000000..3d88795 --- /dev/null +++ b/Existing_API_Collection/GithubAPI/README.md @@ -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 diff --git a/Existing_API_Collection/GithubAPI/image.png b/Existing_API_Collection/GithubAPI/image.png new file mode 100644 index 0000000..13171de Binary files /dev/null and b/Existing_API_Collection/GithubAPI/image.png differ diff --git a/Existing_API_Collection/GithubAPI/index.html b/Existing_API_Collection/GithubAPI/index.html new file mode 100644 index 0000000..35a99f7 --- /dev/null +++ b/Existing_API_Collection/GithubAPI/index.html @@ -0,0 +1,29 @@ + + +
+ + +Followers: ${user.followers}
+Following: ${user.following}
+ `; + }) + .catch(error => { + console.error('Error fetching user data:', error); + userProfile.innerHTML = 'User not found.
'; + }); + + fetch(`https://api.github.com/users/${username}/repos`) + .then(response => response.json()) + .then(repos => { + // Display user repositories + const repoList = repos.map(repo => `Repositories not found.
'; + }); +}); diff --git a/Existing_API_Collection/GithubAPI/style.css b/Existing_API_Collection/GithubAPI/style.css new file mode 100644 index 0000000..15aa0ab --- /dev/null +++ b/Existing_API_Collection/GithubAPI/style.css @@ -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; +} \ No newline at end of file