GitHub Profile Finder | Build a GitHub Profile Finder app using HTML, CSS and JavaScript | Dabananda Mitra

Anonymous

21 Jul, 2022

GitHub Profile Finder

Built a GitHub profile finder app from scratch using only HTML, CSS and JavaScript

What is GitHub

GitHub is a version control system using Git. It also used for free hosting for opensource projects. It provides many useful features such as bug tracking, feature requests, task management, continuous integration, and wikis for every project. The headquarter of GitHub is = in California, it has been a subsidiary of Microsoft since 2018.

It is widely used to host open-source and mostly static projects. As of June 2022, GitHub reports having over 83 million developers and more than 200 million repositories (including at least 28 million public repositories). There is several version control system but GitHub is the largest source code host as of November 2021.

To know more about GitHub please visit the link: GitHub | Wikipedia

Why do I need a GitHub

Developers use GitHub to store, control and share their work and projects with their teammate, fellow and others. If you are a developer it is good to use GitHub. Because, If you upload your code to GitHub it will not lose. It happens many times when accidently your pc gets damage or hard drive or ssd crashed. If is happens then all of your codes loses. When you work on a big project than sometimes you writes bugged code and then you need to get back to the previous version of your code. GitHub gives you the freedom to back to the previous version of your code. If your project is opensource and you pushed it on GitHub then other developers can check it and push their new code to extend and make rich your project.

What is GitHub Profile

Every developer on GitHub has an account. They makes repository to store their code. On the profile they have followers, following, stars, repository etc to show.

GitHub Profile Finder source code link

https://github.com/dabananda/github-finder

You can download or clone the repository for further use.

All codes pasted here

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" />

<link

rel="stylesheet"

href="./node_modules/bootstrap/dist/css/bootstrap.min.css"

<!-- <link

href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css"

rel="stylesheet"

integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"

crossorigin="anonymous"

/> -->

<link rel="stylesheet" href="./styles.css">

<title>GitHub Finder | Dabananda Mitra</title>

</head>

<body class="bg-light">

<div class="container main">

<h3 class="text-center mt-3">GitHub Profile Finder</h3>

<hr />

<form>

<div class="input-group m-auto w-50">

<input

class="form-control"

id="input"

type="text"

placeholder="Enter username..."

<button class="btn btn-primary" id="button" type="submit">

Find

</button>

</div>

</form>

<div

id="profile"

class="mt-5 d-flex align-items-center justify-content-center"

></div>

</div>

<footer class="text-center">

<hr>

</footer>

<script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>

<!-- <script

src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"

integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"

crossorigin="anonymous"

></script> -->

<script src="./scripts/ui.js"></script>

<script src="./scripts/main.js"></script>

</body>

</html>

styles.css

.main {

min-height: 88vh;

}

Now make a folder named “scripts”. Then make two files names “ui.js” and “main.js”.

main.js

const btn = document.querySelector('#button');

const input = document.querySelector('#input');

const ui = new UI();

btn.addEventListener('click', e => {

e.preventDefault();

const userName = input.value;

if (userName != '') {

fetch(`https://api.github.com/users/${userName}`)

.then(response => response.json())

.then(data => {

if (data.message === 'Not Found') {

// Not found alert

input.value = '';

ui.showAlert('User not found!', 'alert alert-danger');

} else {

// Show profile

input.value = '';

ui.showProfile(data);

}

});

} else {

// Clear input

alert('Please enter a username');

ui.clearProfile();

}

});

ui.js

class UI {

constructor() {

this.profile = document.querySelector('#profile');

}

showProfile(data) {

this.profile.innerHTML = `

<div class="card mb-3" style="max-width: 540px">

<div class="row g-0">

<div class="col-md-4">

<img

src="${data.avatar_url}"

class="img-fluid rounded-start"

alt="user-image"

</div>

<div class="col-md-8">

<div class="card-body">

<h5 class="card-title">${data.name}</h5>

<small class="text-muted">${data.login}</small>

<p class="card-text">${data.bio}</p>

<a class="btn btn-primary btn-small" href="${data.html_url}" target="_blank">View Profile</a>

</div>

<div class="d-flex justify-content-between my-3 px-2">

<p>

Followers

<span class="badge bg-primary">${data.followers}</span>

</p>

<p>

Following

<span class="badge bg-primary">${data.following}</span>

</p>

<p>

Public gists

<span class="badge bg-primary">${data.public_gists}</span>

</p>

<p>

Public repos

<span class="badge bg-primary">${data.public_repos}</span>

</p>

</div>

<div class="card mx-auto">

<ul class="list-group list-group-flush">

<li class="list-group-item">Company: ${data.company}</li>

<li class="list-group-item">Website/Blog: ${data.blog}</li>

<li class="list-group-item">Twitter: ${data.twitter_username}</li>

<li class="list-group-item">Location: ${data.location}</li>

</ul>

</div>

}

clearProfile() {

this.profile.innerHTML = '';

}

showAlert(message, className) {

const div = document.createElement('div');

div.className = className;

div.appendChild(document.createTextNode(message));

const profile = document.querySelector('#profile');

profile.innerHTML = `

<div class="${className}">

<h3>Ops... ${message}</h3>

</div>

}

This is my file structure

You can code with your own style. Do not just copy paste the code. Read the code and understand it. Then write the code with your own. It is the best practice. You can ask me if you do not understand somewhere in my code or need any help for this project. It will my pleasure to help you.