-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.html
89 lines (68 loc) · 2.71 KB
/
main.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" type="text/javascript"></script>
<!-- just github-api source (5.3kb) -->
<script src="https://unpkg.com/github-api/dist/GitHub.min.js"></script>
<!-- standalone (20.3kb) -->
<script src="https://unpkg.com/github-api/dist/GitHub.bundle.min.js"></script>
<script src="/javascripts/git.js" type="text/javascript"></script>
<script>
$(function() {
$("#button").click(
function(event){
event.preventDefault();
var username = $('#input-username').val();
$('#user-info').html("<h2>Displaying repos for " + username +"</h2>");
var url = "https://api.github.com/users/"+username+"/repos";
$.getJSON(url + '?callback=?', function(json){
json = json.length ? json : json.data;
var html = "";
$('#repo-list').html("<tr><th>name</th><th>created</th><th>updated</th></tr>");
$.each(json, function(i, repo){
html = "<tr>";
html = html +"<td>" + repo.name + "</td>";
html = html +"<td>" + repo.created_at + "</td>";
html = html +"<td>" + repo.updated_at + "</td>";
html = html +"</tr>";
$('#repo-list').append(html);
});
});
});
});
</script>
<style>
.center {
margin: auto;
margin-top: 20px;
width: 75%;
border: 3px solid #3F51B5;
padding: 10px;
}
.btn {
background: #5C6BC0;
}
</style>
</head>
<body>
<form class="center">
<div class="form-group">
<label for="input-username">GitHub username:</label>
<input type="text" class="form-control" id="input-username" aria-describedby="username-help" placeholder="username">
<small id="username-help" class="form-text text-muted">Enter a GitHub account username to list their repos.</small>
</div>
<button type="submit" class="btn btn-primary" id="button">Submit</button>
</form>
<div id="user-info" class="center">
</div>
<table id="repo-list" class="center">
</table>
</body>
</html>