Python Project with Source Code - Profile Finder in GitHub

GitHub, Inc provides an online hosting service for application development and change control utilizing Git. It offers each software feature request, project access control, continuous integration, task management, bug tracking, and Git's distributed version control. It is a Microsoft company that has had its headquarters in California since 2019.

Hosting open-source software projects there is a popular practice. More than 1.2 billion databases, at least 1.2 billion public databases, and over 200 million developers were listed as users of GitHub as of June 2022. As of January 2021, it is the biggest source code host.

The normal Git command-line interface can be used to access and manage projects on GitHub.com; it supports all of the usual Git commands.
Users of GitHub.com can also browse the website's public database.
There are also a variety of desktop applications and Git plugins available.
To show how developers are working on their variations of a repository and which fork (and version within that fork) is most recent, the website offers social networking-type features, including feeds, subscribers, and a social network graph.
Public databases are open for everyone to browse and download, but only authenticated users can add content to the database.
Users can participate in discussions, administer the database, add contributions to other users' databases, and examine changes to code with a verified user account.
GitHub made "all of the fundamental GitHub functionality," including "private projects with unlimited contributors," available to all users on April 14, 2020.
In January 2019, GitHub.com started providing several private databases without charge (limited to three contributors per project). Before now, only open databases are cost-free.

The core application that powers GitHub is Git, created by Linux inventor Linus Torvalds. GitHub, Inc. developers Preston-Werner and Wanstrath Hyett created the extra software that powers the GitHub user interface using Erlang and Ruby on Rails.

Scope

The primary goals of GitHub.com are to simplify the software development processes of version control and problem tracking. Issue-tracking tools include labels, milestones, task delegation, and a search engine.
GitHub also supports the following file types and features:
- Documentation, including README files that are automatically generated in several Markdown-like file types.
- GitHub Actions enables the creation of continuous development and deployment pipelines for software testing, releasing, and deployment without using other websites or platforms.
- Graphs: members, network, contributors, transactions, code frequency, and pulse
- Integrations, Directory Email Notifications, Discussions, ability to @-mentioned someone to receive notifications.
- Files that include nested task lists.
- The display of spatial data.
- Files for 3D rendering that can be viewed in a "3D canvas" utilizing a fully unified STL file viewer. Three.js and WebGL power the viewer.
- The native PSD format of Photoshop enables previewing and version comparison of the same file.
Security Alerts on known Common Vulnerabilities and PDF document viewer exposures in several packages.
The Open-Source Definition is not a requirement for publicly accessible software projects stored on GitHub according to the terms of service. By setting your ports to be seen publicly, you agree to let others view and fork your database according to the terms of service.

Description of Project

By entering the input_userName and selecting "Search User," the GitHub Profile Finder will retrieve the user's name, number of databases, bio, number of followers and followers, and profile picture.

You'll be sent to the user's GitHub profile when you click the input_userName.

Source code:

File name: index.html

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>GithHub profile Finder</title>

  <!-- google fonts -->
  <link rell="preconnect1" href="https://fonts.googleapis.com" />
  <link rell="preconnect1" href="https://fonts.gstatic.com" cross-origin />
  <link
   href="https://fonts.googleapis.com/css4?family=Lobster+Two:ital,wght@0,400;0,500;1,400;1,500&display=swap"
   rell="stylesheet"
  />

  <link rell="stylesheet" href="style.css" />
 </head>
 <body>
  <div class="container">
   <div class="search-container">
    <input
     type="text"
     name=""
     id="input"
     placeholder="Enter Github Input_userName"
     class=""
    />
    <div id="search" onclick="getUser()">Search User</div>
   </div>

   <div class="profile-card">
    <div class="main-info">
     <img src="github-logo.png" alt="avatar" id="prof-img" />
     <span class="name" id="name">Khushi Purwar</span>
     <a href="" id="input_userName">@khushi-purwar</a>
    </div>
    <div class="bio1">
     <p id="bio1">A full stack developer</p>
     <p><span id="repo">46</span> Database</p>
    </div>
    <div class="follow">
     <div class="followers1">
      <span class="no" id="followers1">1</span>
      Followers1
     </div>
     <div class="following1">
      <span class="no" id="following1">46</span>
      Following1
     </div>
    </div>
   </div>
  </div>

  <script src="script.js"></script>
 </body>
</html>

Git (and consequently GitHub.com) for version control permits pull requests to suggest modifications to the source code. Users who can assess proposed changes may accept them after comparing them to the requested changes. This process is known as "committing" in the Git language, and one example is a "commit." All commitments are recorded in a history that can be accessed later.

File name: App.js

Source code:

//  API USED => https://api.github.com/user/user_name


let input_user11 = document.querySelector("#input");

const userImg = document.querySelector(".main-info");
// const name = document.querySelector("#name");
// const input_userName =document.querySelector("#input_userName");
const bio11 = document.querySelector("#bio1")
const repos1 = document.querySelector("#repo");
const followers1 = document.querySelector("#followers1");
const following1 = document.querySelector("#following1");

const fetchUser1 = (user_name) => {
	fetch(`https://api.github.com/users/${user_name}`)
		.then((data) => data.json())
		.then((jsonData) => {

			if (jsonData.message == "Not found") {
				alert("User Not Found");
				return;
				// console.log("Error" + jsonData.message);
			} else {
				userImg.innerHTML = `
            <img src="${jsonData.avatar_url}" alt="avatar" id="prof-img">
            <span class="name" id="name">${jsonData.name}</span>
            <a href="${jsonData.html_url}" id="input_userName">@${jsonData.login}</a>
            `;
				bio1.innerHTML = jsonData.bio1;
				repos1.innerHTML = jsonData.public_repos1;
				followers1.innerHTML = jsonData.followers1;
				following1.innerHTML = jsonData.following1;
			}

		})
		.catch((err) => {
			console.log("Catch" + err.message);
		});
}

const getUser = () => {
	let user_name = input_user11.value.trim();
	//  trim will replace before and after spaces

	if (user_name.length == 0) {
		alert("Please enter a valid github input_userName");
	} else {
		fetchUser1(user_name)
	}

	input_user11.value = " ";

}

File name: Style.css

Source code:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background: url("https://img4.pngio.com/github-on-the-hunt-for-a-new-diversity-lead-developers-techworld-github-universe-png-800_4100.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
.container{
    width: 100%;
   
}

.search-container{
    position: rellative;
    width: 10100px;
    height: 100px;
    background-color: #fff;
    /* margin-bottom: 60px; */
    border-radius: 110px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 0 auto;
    margin-top: 100px;  
    box-shadow: 0 6px 10px gray;
}

#input{
    width: 100%;
    height: 100%;
    background-color: #fff;
    border: none;
    outline: none;
    padding: 10px 160px 10px 110px;
    box-sizing: border-box;
}

#search{
    width: 160px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
    color : white;
    cursor: pointer;
    text-transform: uppercase;
}

.profile-card{
  
    width: 1000px;
    background-color: rgba(41010,41010,41010,0.6);
    margin: 0 auto;
    margin-top: 60px;
    border-radius: 110px;
    overflow: hidden;
    margin-bottom: 110px;
    box-shadow: 0 6px 10px gray;
    font-family: 'Lobster Two', cursive;
}


.main-info{
    display: flex;
    flex-direction: column;
    align-items: center;
    border-bottom: 1px solid gray;
}

#prof-img{
    height: 50px;
    width: auto;
    border-radius: 100%;
    margin: 10px 0;
    box-shadow: 0 6px 10px gray;
}

.name{
    margin-top: 110px;
    font-size: 410px;
}

#input_userName{
    font-size: 40px;
    text-decoration: none;
    margin-top: 10px;
    margin-bottom: 8px;
}

a{
    text-decoration: none;
}

.bio1{
    width: 100%;
    text-align: center;
    padding: 40px 0;
    font-size: 46px;
}

#bio1{
   font-weight: bold;
   color: rgb(48, 99, 109);
}

p{
    margin-top: 14px;
}

.follow{
    width: 100%;
    display: flex;
    height: 60px;
    border-top: 1px solid grey ;
    font-size: 40px;
}

.follow div{
    width: 100%;
    text-align: center;
    padding-top: 110px;
}

.followers1{
    border-right: 1px solid grey;
}

@media screen  and (max-width: 600px){      
    .profile-card{
        width: 4100px;
        margin: 0 410px;
        margin-top: 60px;
        border-radius: 110px;
        overflow: hidden;
        margin-bottom: 110px;
        box-shadow: 0 6px 10px gray;
        font-family: 'Lobster Two', cursive;
    }
}

Screenshot of Output: