Skip to content

Instantly share code, notes, and snippets.

@josephmtinangi

josephmtinangi/index.html

Created July 8, 2017 13:47
Show Gist options
  • Save josephmtinangi/94141dc56362debd6a6cba51c0c7e7f6 to your computer and use it in GitHub Desktop.
Save josephmtinangi/94141dc56362debd6a6cba51c0c7e7f6 to your computer and use it in GitHub Desktop.
Download ZIP
Top Github Users // source https://jsbin.com/gaqohe
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Top Github Users</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cosmo/bootstrap.min.css">
<style id="jsbin-css">
.loading {
display: none;
}
</style>
</head>
<body>
<div class="jumbotron">
<div class="container text-center">
<h1>Top Github Users</h1>
</div>
</div>
<div id="app">
<div class="container">
<div class="row">
<div class="col-sm-3">
<ul class="list-group">
<li class="list-group-item"
v-for="user in users"
v-on:click="getRepos(user.login)">
<img v-bind:src="user.avatar_url" class="img-circle" width="50" height="50" alt=""> &nbsp;
{{ user.login }}
</li>
</ul>
</div>
<div class="col-sm-9">
<div class="loading text-center">
<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
</div>
<div class="panel panel-default" v-for="repo in repos">
<div class="panel-heading">
<h3 class="panel-title">{{ repo.name }}</h3>
</div>
<div class="panel-body">
<p>
{{ repo.description }}
</p>
<p>
<a v-bind:href="repo.html_url"><i class="fa fa-external-link" aria-hidden="true"></i>&nbsp; Visit</a>
</p>
</div>
<div class="panel-footer">
<i class="fa fa-star"></i> {{ repo.stargazers_count }}
<i class="fa fa-eye"></i> {{ repo.watchers_count }}
<i class="fa fa-code"></i> {{ repo.language }}
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script id="jsbin-javascript">
var app = new Vue({
el: '#app',
data: {
users: [],
repos: []
},
methods: {
getRepos: function(login) {
this.repos = [];
$('.loading').show();
$.get('https://api.github.com/users/' + login + '/repos', function(response) {
$('.loading').hide();
this.repos = response;
}.bind(this));
}
},
mounted() {
$.get('https://api.github.com/users', function(response) {
this.users = response;
}.bind(this));
}
});
</script>
<script id="jsbin-source-css" type="text/css">.loading {
display: none;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">var app = new Vue({
el: '#app',
data: {
users: [],
repos: []
},
methods: {
getRepos: function(login) {
this.repos = [];
$('.loading').show();
$.get('https://api.github.com/users/' + login + '/repos', function(response) {
$('.loading').hide();
this.repos = response;
}.bind(this));
}
},
mounted() {
$.get('https://api.github.com/users', function(response) {
this.users = response;
}.bind(this));
}
});</script></body>
</html>
Raw
jsbin.gaqohe.css
.loading {
display: none;
}
Raw
jsbin.gaqohe.js
var app = new Vue({
el: '#app',
data: {
users: [],
repos: []
},
methods: {
getRepos: function(login) {
this.repos = [];
$('.loading').show();
$.get('https://api.github.com/users/' + login + '/repos', function(response) {
$('.loading').hide();
this.repos = response;
}.bind(this));
}
},
mounted() {
$.get('https://api.github.com/users', function(response) {
this.users = response;
}.bind(this));
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment