Skip to content

Instantly share code, notes, and snippets.

@Ge0rg3

Ge0rg3/.UserSearcher.html

Last active October 5, 2018 10:20
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Ge0rg3/1836ab862b099166efe7bd8cb019efde to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Ge0rg3/1836ab862b099166efe7bd8cb019efde to your computer and use it in GitHub Desktop.
Download ZIP
An AngularJS App to view details about a user's github profile. View it at https://georgeom.net/userSearcher/webpage.html
Raw
.UserSearcher.html
An AngularJS App to view details about a user's github profile. View it at https://georgeom.net/userSearcher/webpage.html
Code spread across the 4 attached files.
Raw
app.js
var app = angular.module('myApp', []); // Just for initialisation.
Raw
controller.js
app.controller('githubCtrl', function($scope, $http) {
var access_token = ""
$scope.buttonText = "SEARCH"
var onError = function(reason) {
$scope.buttonText = "SEARCH"
$scope.bg = "";
$scope.error = reason.data.message;
$scope.repos = null;
};
var parseData = function(response) {
$scope.buttonText = "";
$scope.error = "";
$scope.resp = response.data;
$scope.bg = response.data.avatar_url;
};
$scope.gistName = function(files, type) {
if (type == "fn") return files[Object.keys(files)[0]].filename;
if (type == "lang") return files[Object.keys(files)[0]].language;
if (type == "size") return files[Object.keys(files)[0]].size;
};
$scope.searchUsername = function(username) {
try {
// Get user info:
$http.get("https://api.github.com/users/"+username+"?access_token="+access_token)
.then(parseData, onError);
//Get user repos:
$http.get("https://api.github.com/users/"+username+"/repos"+"?access_token="+access_token)
.then(function(response) {$scope.repos = response.data}, onError);
//Get user gists:
$http.get("https://api.github.com/users/"+username+"/gists"+"?access_token="+access_token)
.then(function(response) {$scope.gists = response.data}, onError);
} catch(err) {null};
};
$scope.sortRepos = "-stargazers_count";
});
Raw
style.css
/*Acts as a CSS Reset*/
html, body, * {margin: 0;padding: 0; overflow: overlay;}
input:focus,select:focus,textarea:focus,button:focus {outline: none;}
a {text-decoration: none; color: inherit;}
/*Global font*/
*, #UserSearch {
font-family: 'Roboto', sans-serif;
background-size: cover;
}
a:hover {
font-weight: bold;
}
/*For search box at the top*/
#header {}
#userSearch {
float: left;
text-align: center;
outline: none;
font-weight: 700;
border: none;
background-color: #6079a0;
border-bottom: 5px solid #355993;
width: 95vw;
height: 10vh;
font-size: 400%;
color: white;
}
#userSearch::placeholder {
color: white;
}
#submitSearch {
position: relative;
width: 5vw;
height: 10vh;
float: right;
padding: 1px 1px;
border: 0;
border-bottom: 5px solid #355993;
cursor: pointer;
top: 0;
}
/*For actual body*/
table,tr, td, th {
text-align: center;
border-collapse: collapse;
border-width:3px;
border-style:solid;
}
td {
height: 4vh;
width: 20vw;
}
Raw
webpage.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" type="text/css" href="./style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<script src="./angular.min.js"></script>
<script src="./app.js"></script>
<script src="./controller.js"></script>
</head>
<body ng-controller="githubCtrl">
<div id="header">
<form name="userSearch" ng-submit="searchUsername(username)" autocomplete="off">
<input type="search" id="userSearch" placeholder="Enter Username Here" ng-model="username"> <!--ng-change=searchUsername(username)-->
<button type="submit" id="submitSearch" ng-style="{ 'background-image': 'url(' + bg + ')' }"><b>{{buttonText}}</b></button>
</form>
</div>
<br><br>
<!--Directive:-->
<h1>{{error}}</h1>
<div id="results" ng-show="repos">
<h2 ng-show="resp.name">Name: {{resp.name}}</h2>
<h4 ng-show="resp.bio">Bio: <i>{{resp.bio}}</i></h4>
<h5>Followers: {{resp.followers}}</h5>
<h5>Following: {{resp.following}}</h5>
<h5>User ID: {{resp.id}}</h5>
<h5>Public Gists: {{resp.public_gists}}</h5>
<h5>Public Repos: {{resp.public_repos}}</h5>
<h5>Account Type: {{resp.type}}</h5>
<h5 ng-show="resp.email">Email: {{resp.email}}</h5>
<h5 ng-show="resp.blog">Blog: <a href={{resp.blog}} target="_blank">{{resp.blog}}</a></h5>
<h5 ng-show="resp.location">Location: {{resp.location}}</h5>
<br>
<div id="repos" ng-show="repos.length > 0">
<h3 ng-click="showRepos = !showRepos" style="cursor: pointer">Show/Hide Repos</h3>
<div id="repoView" ng-show="showRepos">
Order:
<select ng-model="sortRepos">
<option value="+name">Name</option>
<option value="-stargazers_count">Stars</option>
<option value="+language">Language</option>
</select>
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Stars</th>
<th>Language</th>
</tr>
</thead>
<tbody>
<!--<tr ng-repeat="repo in repos | orderBy:'stargazers_count':true">-->
<tr ng-repeat="repo in repos | orderBy:sortRepos">
<td><a href={{repo.html_url}} target="_blank">{{repo.name}}</a></td>
<td>{{repo.stargazers_count | number}}</td>
<td>{{repo.language}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="gists" ng-show="gists.length > 0">
<h3 ng-click="showGists = !showGists" style="cursor: pointer">Show/Hide Gists</h3>
<div id="gistView" ng-show="showGists">
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Language</th>
<th>Size</th>
</tr>
</tead>
<tbody>
<tr ng-repeat="gist in gists">
<td><a href={{gist.html_url}} target="_blank">{{gistName(gist.files, "fn")}}</a></td>
<td>{{gistName(gist.files, "lang")}}</td>
<td>{{gistName(gist.files, "size") | number}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<br>
<!--<div ng-include="'footer.html'"></div>-->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment