Embedded Files
<html><head><base href="https://tip-calculator.example.com#about">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enhanced Github Profile Finder</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
h1 {
color: #333;
margin-bottom: 20px;
}
.search-container {
display: flex;
margin-bottom: 20px;
}
.search-input {
padding: 10px;
font-size: 16px;
border: 2px solid #ddd;
border-radius: 4px 0 0 4px;
width: 300px;
}
.search-btn {
padding: 10px 20px;
font-size: 16px;
background-color: #0366d6;
color: white;
border: none;
border-radius: 0 4px 4px 0;
cursor: pointer;
transition: background-color 0.3s ease;
}
.search-btn:hover {
background-color: #0056b3;
}
.loading-text {
display: none;
font-size: 18px;
color: #666;
}
.loading-text.show {
display: block;
}
.github-profile-details {
background-color: white;
border-radius: 8px;
padding: 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
text-align: center;
max-width: 400px;
width: 100%;
}
.github-profile-details.hide {
display: none;
}
.github-profile-details img {
width: 150px;
height: 150px;
border-radius: 50%;
margin-bottom: 15px;
}
.username {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
.stats {
display: flex;
justify-content: space-around;
margin-top: 15px;
}
.stat {
text-align: center;
}
.stat-value {
font-size: 20px;
font-weight: bold;
color: #0366d6;
}
.stat-label {
font-size: 14px;
color: #666;
}
.error-message {
color: #d73a49;
font-size: 16px;
margin-top: 10px;
text-align: center;
}
</style>
</head>
<body>
<h1>Enhanced Github Profile Finder</h1>
<div class="search-container">
<input type="text" placeholder="Enter GitHub username" class="search-input" />
<button class="search-btn">Search</button>
</div>
<p class="loading-text">Loading Data! Please Wait...</p>
<div class="github-profile-details"></div>
<script>
const searchInput = document.querySelector(".search-input");
const searchBtn = document.querySelector(".search-btn");
const BASE_URL = "https://api.github.com/users/";
const githubProfileDetails = document.querySelector(".github-profile-details");
const loader = document.querySelector(".loading-text");
function showLoader() {
loader.classList.add("show");
githubProfileDetails.classList.add("hide");
}
function removeLoader() {
loader.classList.remove("show");
githubProfileDetails.classList.remove("hide");
}
async function fetchGithubProfileDetails() {
showLoader();
try {
const response = await fetch(`${BASE_URL}${searchInput.value}`);
const result = await response.json();
if (response.ok) {
displayProfileDetails(result);
} else {
displayErrorMessage(result.message);
}
} catch (error) {
displayErrorMessage("An error occurred. Please try again.");
} finally {
removeLoader();
searchInput.value = '';
}
}
function displayProfileDetails(profileDetails) {
const { login, avatar_url, public_repos, followers, following, name, bio, blog } = profileDetails;
githubProfileDetails.innerHTML = `
<img src="${avatar_url}" alt="${login}'s profile picture">
<p class="username">${name || login}</p>
${bio ? `<p class="bio">${bio}</p>` : ''}
${blog ? `<a href="${blog}" target="_blank" rel="noopener noreferrer">Website</a>` : ''}
<div class="stats">
<div class="stat">
<div class="stat-value">${public_repos}</div>
<div class="stat-label">Repos</div>
</div>
<div class="stat">
<div class="stat-value">${followers}</div>
<div class="stat-label">Followers</div>
</div>
<div class="stat">
<div class="stat-value">${following}</div>
<div class="stat-label">Following</div>
</div>
</div>
`;
}
function displayErrorMessage(message) {
githubProfileDetails.innerHTML = `<p class="error-message">${message}</p>`;
}
searchBtn.addEventListener("click", fetchGithubProfileDetails);
searchInput.addEventListener("keypress", (e) => {
if (e.key === "Enter") {
fetchGithubProfileDetails();
}
});
</script>
</body>
</html>
Page updated
Google Sites
Report abuse