jQuery – Who is following who application (in GitHub)

Posted on February 8, 2016 by

Vitosh Posted in JQuery

Stalking other people is creepy. Probably. The social media makes its money on this, so it cannot be that bad. Or this is one of the reasons why social medias are bad?

Anyhow, today I have decided to come up with an application, using the GitHub Api, showing simply who is following who. The application is divided into three main divs – the first one is with the avatars of the followers, the second one of the people, that are followed and the third one is with the repositories of the person in mind.

So, in oder to change the account, for whom you are showing the followers and the following people, you should simply change the username in the only input box and then click on the “something like button” thing 🙂

In order to make the app a little more interesting, I have decided to take the username of every picture over which you hover and enter it in the input box. Furthermore, the pictures are links to the repositories of the users. Thus, if you click on them, they would redirect you.

The application works only for 60 requests per hour, because of GitHub settings. Thus, I have considered that it is a good idea to create a button and not to make anything automatic upon click.

There are still points for improvement in a lot of places, as far as I consider the writeLeaders and writeFollowers pretty much the same function with two different parameters, but so far I am not able to write it into one quickly. Probably later.

The function writeLeaders looks like this:

function writeLeaders(){
$('#my_leaders').empty();
if(gen_leaders.readyState == 4 && gen_leaders.status == 200){
		var result = gen_leaders.responseText;
		var obj = eval("("+result+")");				
		var ul = document.createElement("ul");
		
		for (var index in obj){					
			var element = obj[index];
			var avatar = element.avatar_url;
			var urlSite = element.html_url;
	
			$("#my_leaders").append($("<a>", 
			{
				href: urlSite, 
				html: $("<img>", { src: avatar }),
				mylogin: element.login,
			}).mouseover(function() {
				$('repoName').val($(this).attr('href'));
				$('#my_leaders_link').empty();
				$('#my_leaders_link').append($(this).attr('href')); 
				$('#repoName').val($(this).attr('mylogin'));				
			})); 
		}
	}
};

function writeLeaders(){

$('#my_leaders').empty();

if(gen_leaders.readyState == 4 && gen_leaders.status == 200){

var result = gen_leaders.responseText;

var obj = eval("("+result+")");

var ul = document.createElement("ul");

for (var index in obj){

var element = obj[index];

var avatar = element.avatar_url;

var urlSite = element.html_url;

$("#my_leaders").append($("<a>",

{

href: urlSite,

html: $("<img>", { src: avatar }),

mylogin: element.login,

}).mouseover(function() {

$('repoName').val($(this).attr('href'));

$('#my_leaders_link').empty();

$('#my_leaders_link').append($(this).attr('href'));

$('#repoName').val($(this).attr('mylogin'));

}));

}

};

After some discussions with a user named Ryuu in StackOverflow, we managed to build the mouseover function the way I wanted to. So, special thanks, Ryuu! 🙂

Pretty much that is all. The project is available in my site here – vitoshacademy.com/github. The requests for the GitHub api are 60 per hour per IP, if you do not increase them. Thus, it won’t work forever…

Here is the project in GitHub.

Enjoy it! 😀

jQuery – Who is following who application (in GitHub)

Related posts: