-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
141 lines (117 loc) · 4.08 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!doctype html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title> UserLang | GitHub User Favourite language finder </title>
<style>
body{
text-align: center;
background:#d3e3f3;
}
input[type=text]{
margin: 0;
min-width: 40%;
line-height: 40px;
font-size: 17px;
border: 1px solid #bbb;
}
table{
background-color: #cee1ff;
}
td,th{
padding: 20px;
border: 1px solid black;
}
</style>
</head>
<body>
<script>
//processes the username in the text field
function processName(){
var username = document.getElementById("form-user-name").value;
var url = "https://api.github.com/users/" + username + "/repos";
var languages = {};
//resets the table to nothing
document.getElementById("output").innerHTML = "";
httpGet(url,function getLanguages(response) {
var githubResult = JSON.parse(response);
var numContributedRepos = Object.keys(githubResult).length;
if(numContributedRepos == 0){
document.getElementById("output").innerHTML = "The user does not have any repos";
return false;
}
var ajaxReturns =0;
//parse through each repo and get commits created by username
//greater than is OK because index starts at 0 so we want to stop counting one before reaching the length of contributedRepos
for (var repoNum = 0; repoNum < numContributedRepos; repoNum++){
httpGet(githubResult[repoNum]["languages_url"], function printLanguages(responce){
githubResult = JSON.parse(responce);
for (language in githubResult){
//checks to see if the language has been added already
if(language in languages){
languages[language] = languages[language] + githubResult[language];
}else{
languages[language] = githubResult[language];
}
}
ajaxReturns++;
//when all calls have been processed then this is run
if( ajaxReturns == numContributedRepos){
sortedLanguages = sort(languages);
var output = "<table align='center'> <th>Language</th> <th>Lines</th>";
for (var index =0; index < sortedLanguages.length; index++){
output += "<tr><td>" + sortedLanguages[index][0] + "</td><td>" + sortedLanguages[index][1] + "</td?</tr>";
}
output += "</table>"
document.getElementById("output").innerHTML = output;
}
});
}
});
//returns false so page does not refresh
return false;
}
//sorts a dictionary see http://stackoverflow.com/a/25500462/5922350
//UNBOXED: This function is not my code but I did not see the point in reinventing the wheel, so I decided the best approach was to copy it
function sort(dict){
var items = Object.keys(dict).map(function(key) {
return [key, dict[key]];
});
items.sort(function(first, second) {
return second[1] - first[1];
});
return items;
}
//Performs an Async HTTP Get Request
function httpGet(url, callback){
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
callback(xmlHttp.responseText);
}else
//if browser recieves a 404 "not found" from a get request and the url contains "https://api.github.com/users/" ; This means the username does not exist
if (xmlHttp.readyState == 4 && xmlHttp.status == 404 && url.includes("https://api.github.com/users/")){
document.getElementById("output").innerHTML = "The username you entered does not exist";
}else
//if browser recieves a 403 "forbidden" from a get request; This means too many requests have been made
if (xmlHttp.readyState == 4 && xmlHttp.status == 403){
document.getElementById("output").innerHTML = "Too many requests have been made; Please try again in an hour";
}
}
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
</script>
<h1> UserLang </h1>
<h2> GitHub User Favourite Language Finder </h2>
<form name="search" onsubmit="return processName()" >
<p> Input a GitHub username and you will get a list of their favourite languages </p>
<input type="text" name="name" id="form-user-name">
<br>
<input type="submit" name="Submit" value="Submit">
</form>
<br>
<br>
<div id="output"></div>
</body>
</html>