GitHub Profile Search
GitHub serves as a widely utilized platform for code repository hosting and collaborative work. With a substantial user base and numerous projects, it offers a wealth of data related to developers and their contributions. This tutorial outlines the steps to create a GitHub Profile Search feature from the ground up, using HTML, CSS, and JavaScript.
Prerequisites
Before we dive into the code, make sure you have the following prerequisites in place:
- A text editor for writing code (e.g., Visual Studio Code, Sublime Text, or Notepad++).
- Basic knowledge of HTML, CSS, and JavaScript.
- An internet connection to access GitHub’s API.
Getting Started
Set up your HTML structure
To get started, create an HTML file and set up the basic structure of your webpage. You’ll want to include an area where users can type in a GitHub username, a button they can click to start the search, and a place to show the search results.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="search-container">
<input type="text" id="username" placeholder="Enter a GitHub username">
<button id="search">Search</button>
</div>
<div id="profile"></div>
<script src="script.js"></script>
</body>
</html>
Style your page with CSS
Create a CSS file (styles.css) to style your page and make it look presentable.
body {
font-family: Arial, sans-serif;
}
.search-container {
text-align: center;
margin: 20px;
}
#username {
padding: 10px;
width: 300px;
}
#search {
background-color: #0074E4;
color: #fff;
border: none;
padding: 10px 20px;
cursor: pointer;
}
#search:hover {
background-color: #0059B3;
}
#profile {
text-align: center;
}
JavaScript to Fetch GitHub Data
Create a JavaScript file (script.js) to handle the functionality of searching GitHub profiles and displaying the results.
document.getElementById("search").addEventListener("click", function () {
const username = document.getElementById("username").value;
fetch(`https://api.github.com/users/${username}`)
.then(response => response.json())
.then(data => {
document.getElementById("profile").innerHTML = `
<h2>${data.login}</h2>
<img src="${data.avatar_url}" alt="${data.login}" width="150">
<p>Name: ${data.name}</p>
<p>Followers: ${data.followers}</p>
<p>Following: ${data.following}</p>
`;
})
.catch(error => {
document.getElementById("profile").innerHTML = `<p>User not found.</p>`;
});
});
In the provided JavaScript code, we begin by attaching an event listener to the “Search” button. This event listener is responsible for executing a function when the user clicks the button. Inside this function, we employ the fetch API to retrieve data from GitHub’s API, specifically focusing on the username inputted by the user. Subsequently, we present the user’s details, encompassing their username, profile image, name, number of followers, and the accounts they follow.
[ You might also like: 7 Best GitHub Repositories for Developers ]
Conclusion
With this simple HTML, CSS, and JavaScript code, you can create a basic GitHub profile search feature for your website or project. Users can enter a GitHub username, click the “Search” button, and view the profile information.
You can further enhance this project by adding error handling, pagination, and additional user information. This is just a starting point, and you can expand and customize it to fit your specific needs.
However, this is just the beginning of your journey. You can expand on this project by adding more advanced features like user repositories, contributions, and further customization to match your specific needs. Remember that web development is a dynamic field, and there’s always room for enhancement and innovation.
By mastering these web technologies and building practical applications like the GitHub profile search, you’re not only honing your skills but also contributing to the ever-growing world of web development. We encourage you to keep exploring, experimenting, and refining your coding abilities. If you have any questions or suggestions for improvement, please feel free to share your comments and feedback. Your input is invaluable and helps us continue to provide quality content and support to our community.
Happy coding!
