Skip to content

Instantly share code, notes, and snippets.

@tonycosentini

tonycosentini/Enter.js

Created October 24, 2011 23:43
Show Gist options
  • Save tonycosentini/1310759 to your computer and use it in GitHub Desktop.
Save tonycosentini/1310759 to your computer and use it in GitHub Desktop.
Download ZIP
Empty Last.fm Page
Raw
content.html
<div id="form">
<input type="text" id="search" action="#" name="search" placeholder="Enter an artist..."/>
</div>
<div id="loading" style="display: none;">
<h1 id="loading">Loading.</h1>
</div>
<div id="content" style="display: none;">
<img id="image"/>
<h1 id="name"></h1>
<p id="bio"></p>
<a href="#" id="new">New Search</a>
</div>
Raw
Enter.js
$('#search').keypress(function(e) {
if(e.which == 13) {
$("#form").fadeOut(function() {
$("#loading").fadeIn();
});
// The rest of the code will go here.
}
});
Raw
gistfile1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Last.fm Search</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
</body>
</html>
Raw
JQuery.js
$.getJSON("http://ws.audioscrobbler.com/2.0/?method=artist.getinfo&artist=" + $("#search").val() + "&api_key=b25b959554ed76058ac220b7b2e0a026&format=json&callback=?", function(json) {
// Handle the API response here...
});
Raw
More JQuery.js
$("#name").html(json.artist.name);
$("#image").attr('src', json.artist.image[4]['#text']);
$("#bio").html(json.artist.bio.summary);
$("#loading").fadeOut(function() {
$("#content").fadeIn();
}
Raw
newsearch.js
$("a#new").click(function () {
$("#content").fadeOut(function() {
$("#form").fadeIn();
});
});
Raw
Skeleton
$(document).ready(function() {
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment