Harshil Chovatiya's 100DaysOfCode Journey: Day 41: Building a GitHub User Search App
Welcome to Day 41 of my 100 Days of Code journey! Today, I want to share my experience with building a GitHub user search app. This project has been an exciting adventure, and I'm thrilled to walk you through it.
Here's a brief overview of the app I've created:
Introduction
In this project, I set out to create a user-friendly GitHub user search app using HTML, CSS, and JavaScript. The goal was to make it easy for users to search for GitHub profiles, view user details, and explore repositories. Let's dive into how I achieved this.
File Structure:
Before we delve into the application's details, let's take a look at its file structure. Understanding how the GitHub-user Search App is organized behind the scenes can help you navigate and customize it effectively.
The app's file structure typically consists of the following components:
GitHubUser Search/
│
└── index.html
└── style.css
└── index.js
- index.html: This is the main HTML file that serves as the entry point for the application. It contains the structure of the app's user interface.
- styles.css: The stylesheet file, GithubUser Search the app's visual design is defined. You can customize the app's appearance by modifying this file.
- app.js: The JavaScript file responsible for handling the app's logic. It fetches currency prices data, processes it, and updates the user interface accordingly.
Code Snippets:
Here are code snippets for the three main files:
index.html (UI Creation):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<meta name="
description"
content="GitHub User Search by Harshil Chovatiya - Find GitHub
users and display their profiles.">
<meta name="author" content="Harshil Chovatiya">
<title>GitHub User Search by Harshil Chovatiya</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="container">
<h1>GitHub User Search</h1>
<div class="search-container">
<input class="search-input"
type="text" placeholder="Enter username Ex.harshilchovatiya">
<button class="search-button"
onclick="handleSearch()">Search</button>
</div>
<div class="user-profile">
</div>
</div>
</body>
</html>
style.css (Visual Design):
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
.container {
max-width: 600px;
margin: 4% auto;
padding: 20px;
background-color: #ffffff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
h1 {
text-align: center;
color: #333;
margin-bottom: 20px;
}
/* UserProfile component styles */
.user-profile {
text-align: center;
margin: 40px auto;
max-width: 300px;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
.user-profile h2 {
font-size: 24px;
margin-bottom: 10px;
}
.user-profile img {
border-radius: 50%;
margin-bottom: 20px;
max-width: 150px;
}
.user-profile p {
font-size: 16px;
margin: 5px 0;
}
/* Search component styles */
.search-container {
display: flex;
justify-content: center;
align-items: center;
margin-top: 40px;
/* Increased top margin for more spacing */
}
.search-input {
padding: 10px;
font-size: 16px;
border: 2px solid #007bff;
/* Added border and changed border color */
border-radius: 4px;
margin-right: 10px;
width: 300px;
/* Increased input width for better visibility */
}
.search-button {
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
padding: 10px 20px;
cursor: pointer;
font-size: 16px;
}
.search-button:hover {
background-color: #0056b3;
}
script.js (Logic and Data Handling):
window.onload = () => {
fetchGitHubUser("harshilchovatiya");
};
function fetchGitHubUser(username) {
fetch(`https://api.github.com/users/${username}`)
.then((response) => {
if (response.ok) {
return response.json();
} else {
throw new Error('Network response was not ok');
}
})
.then((userData) => {
renderUserProfile(userData);
})
.catch((error) => {
console.error('Error fetching GitHub user:', error);
});
}
function handleSearch() {
const username = document.querySelector('.search-input').value;
fetchGitHubUser(username);
}
function renderUserProfile(user) {
const userProfileContainer =
document.querySelector('.user-profile');
userProfileContainer.innerHTML = ''; // Clear previous content
if (user) {
const h2 = document.createElement('h2');
h2.textContent = user.name;
const img = document.createElement('img');
img.src = user.avatar_url;
img.alt = user.login;
img.width = 150;
const username = document.createElement('p');
username.textContent = `Username: ${user.login}`;
const followers = document.createElement('p');
followers.textContent = `Followers: ${user.followers}`;
const following = document.createElement('p');
following.textContent = `Following: ${user.following}`;
const publicRepos = document.createElement('p');
publicRepos.textContent = `Public Repos: ${user.public_repos}`;
userProfileContainer.appendChild(h2);
userProfileContainer.appendChild(img);
userProfileContainer.appendChild(username);
userProfileContainer.appendChild(followers);
userProfileContainer.appendChild(following);
userProfileContainer.appendChild(publicRepos);
}
}
If you'd like to use the GithubUser Search App and access currency price data, you'll need an API key from Exchangerate-api. Here's how you can obtain your API key:
- Visit exchangerate-api.com/.
- Create an account if you don't already have one.
- Explore the The Accurate & Reliable Exchange Rate API section on the website.
- Follow the instructions to obtain your unique API key.
- Once you have your API key, you can use it in any project to access currency data for various Currency.
Live Example
Here is the Live Preview of the above code
If you're interested in accessing the source code for this GithubUser Search application, simply click on this link to visit the repository: Click Here. To get a feel for how the application works, you can check out the live preview by clicking here.
Conclusion
As I wrap up Day 41 of my 100 Days of Code journey, I'm proud of the progress I've made with my GitHub user search app. This project allowed me to sharpen my front-end development skills and create a useful tool for GitHub enthusiasts. I can't wait to see where the next days of code take me!
Comments
Post a Comment