Skip to content

Instantly share code, notes, and snippets.

@richardj

richardj/index.html

Created March 26, 2015 08:54
Show Gist options
  • Save richardj/4faf6d2c83c6658a6053 to your computer and use it in GitHub Desktop.
Save richardj/4faf6d2c83c6658a6053 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin - My Template // source http://jsbin.com/yoquha
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin - My Template</title>
<style id="jsbin-css">
*, *:before, *:after {
box-sizing: border-box;
}
html, body {
height: 100%;
font-family: sans-serif;
text-align: center;
background: #eefeee;
}
.btn {
border: none;
padding: 10px 20px;
font-size: 2rem;
border-radius: 15px;
text-decoration: none;
color: #008cba;
border: 1px solid #008cba;
background: #fff;
}
.btn:hover {
color: #fff;
background: #008CBA;
}
.username {
font-size: 1rem;
}
input[type="text"] {
font-size: 1rem;
border: none;
color: #000;
background: transparent;
border-bottom: 1px dashed;
}
.now {
display: block;
}
.error {
padding: 10px 20px;
background: white;
border: 1px solid red;
color: red;
}
</style>
</head>
<body ng-app="nowplaying">
<form get-play>
<p>Hello <input type="text" placeholder="lastfm username" ng-model="username" ng-minlength="1" /></p>
<p>Click the button to get the information</p>
<p><a class="btn" ng-click="getData()" href="javascript:(function(){ })()"><span class="username">{{ username }} is</span> now playing</a></p>
<!-- <p><small>click to post or drag to bookmark bar to create bookmarklet</small></p> -->
<h3 class="now" ng-show="track">
{{ track['@attr'].nowplaying ? 'is listening to' : 'last listened to' }} {{ track.artist['#text'] }} - {{ track.name }} (from the album {{track.album['#text'] }} ) <br />
<img ng-src="{{ track.image[3]['#text'] }}" />
</h3>
<p class="error" ng-show="error">
{{ error.message }}
</p>
</form>
<script id="jsbin-javascript">
var app = angular.module('nowplaying', []);
app.directive('getPlay', function($http) {
return {
link: function(scope, element, attrs) {
scope.getData = function() {
var user = scope.username;
var baseUrl = "http://ws.audioscrobbler.com/2.0/";
var method = "?method=user.getrecenttracks&user=";
var key = "b2917a358f8427be7ab7f00adb263ffd";
var format = "json";
var limit = 1;
var get = baseUrl + method + "&user=" + user + "&api_key=" + key + "&format=" + format + "&limit=" + limit;
var track = {};
$http.get(get).
success(function(data, status, headers, config) {
if (typeof data.recenttracks !== 'undefined') {
if (data.recenttracks.track instanceof Array) {
track = data.recenttracks.track[0];
}
else {
track = data.recenttracks.track;
}
scope.track = track;
}
else {
// errorrrr
scope.error = data;
}
}).
error(function(data, status, headers, config) {
console.log(status);
// called asynchronously if an error occurs
// or server returns response with an error status.
});
};
}
};
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"><\/script>
<meta charset="utf-8">
<title>JS Bin - My Template</title>
</head>
<body ng-app="nowplaying">
<form get-play>
<p>Hello <input type="text" placeholder="lastfm username" ng-model="username" ng-minlength="1" /></p>
<p>Click the button to get the information</p>
<p><a class="btn" ng-click="getData()" href="javascript:(function(){ })()"><span class="username">{{ username }} is</span> now playing</a></p>
<\!-- <p><small>click to post or drag to bookmark bar to create bookmarklet</small></p> -->
<h3 class="now" ng-show="track">
{{ track['@attr'].nowplaying ? 'is listening to' : 'last listened to' }} {{ track.artist['#text'] }} - {{ track.name }} (from the album {{track.album['#text'] }} ) <br />
<img ng-src="{{ track.image[3]['#text'] }}" />
</h3>
<p class="error" ng-show="error">
{{ error.message }}
</p>
</form>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">*, *:before, *:after {
box-sizing: border-box;
}
html, body {
height: 100%;
font-family: sans-serif;
text-align: center;
background: #eefeee;
}
.btn {
border: none;
padding: 10px 20px;
font-size: 2rem;
border-radius: 15px;
text-decoration: none;
color: #008cba;
border: 1px solid #008cba;
background: #fff;
}
.btn:hover {
color: #fff;
background: #008CBA;
}
.username {
font-size: 1rem;
}
input[type="text"] {
font-size: 1rem;
border: none;
color: #000;
background: transparent;
border-bottom: 1px dashed;
}
.now {
display: block;
}
.error {
padding: 10px 20px;
background: white;
border: 1px solid red;
color: red;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">var app = angular.module('nowplaying', []);
app.directive('getPlay', function($http) {
return {
link: function(scope, element, attrs) {
scope.getData = function() {
var user = scope.username;
var baseUrl = "http://ws.audioscrobbler.com/2.0/";
var method = "?method=user.getrecenttracks&user=";
var key = "b2917a358f8427be7ab7f00adb263ffd";
var format = "json";
var limit = 1;
var get = baseUrl + method + "&user=" + user + "&api_key=" + key + "&format=" + format + "&limit=" + limit;
var track = {};
$http.get(get).
success(function(data, status, headers, config) {
if (typeof data.recenttracks !== 'undefined') {
if (data.recenttracks.track instanceof Array) {
track = data.recenttracks.track[0];
}
else {
track = data.recenttracks.track;
}
scope.track = track;
}
else {
// errorrrr
scope.error = data;
}
}).
error(function(data, status, headers, config) {
console.log(status);
// called asynchronously if an error occurs
// or server returns response with an error status.
});
};
}
};
});</script></body>
</html>
Raw
jsbin.yoquha.css
*, *:before, *:after {
box-sizing: border-box;
}
html, body {
height: 100%;
font-family: sans-serif;
text-align: center;
background: #eefeee;
}
.btn {
border: none;
padding: 10px 20px;
font-size: 2rem;
border-radius: 15px;
text-decoration: none;
color: #008cba;
border: 1px solid #008cba;
background: #fff;
}
.btn:hover {
color: #fff;
background: #008CBA;
}
.username {
font-size: 1rem;
}
input[type="text"] {
font-size: 1rem;
border: none;
color: #000;
background: transparent;
border-bottom: 1px dashed;
}
.now {
display: block;
}
.error {
padding: 10px 20px;
background: white;
border: 1px solid red;
color: red;
}
Raw
jsbin.yoquha.js
var app = angular.module('nowplaying', []);
app.directive('getPlay', function($http) {
return {
link: function(scope, element, attrs) {
scope.getData = function() {
var user = scope.username;
var baseUrl = "http://ws.audioscrobbler.com/2.0/";
var method = "?method=user.getrecenttracks&user=";
var key = "b2917a358f8427be7ab7f00adb263ffd";
var format = "json";
var limit = 1;
var get = baseUrl + method + "&user=" + user + "&api_key=" + key + "&format=" + format + "&limit=" + limit;
var track = {};
$http.get(get).
success(function(data, status, headers, config) {
if (typeof data.recenttracks !== 'undefined') {
if (data.recenttracks.track instanceof Array) {
track = data.recenttracks.track[0];
}
else {
track = data.recenttracks.track;
}
scope.track = track;
}
else {
// errorrrr
scope.error = data;
}
}).
error(function(data, status, headers, config) {
console.log(status);
// called asynchronously if an error occurs
// or server returns response with an error status.
});
};
}
};
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment