AJAX Poster Finder

find movie posters using the themoviedb API. Created by Ben Howdle for an article in smashing magazine.

HTML

<div class="container">
   <header>
      <h1>Front Row</h1>
       <p>find movie posters using the <a href="http://api.themoviedb.org/2.1/">themoviedb API</a>
   </header>
   <section id="fetch">
      <input type="text" placeholder="Enter a movie title" id="term" />
      <button id="search">Find me a poster</button>
   </section>
   <section id="poster">
   </section>
   <footer>
       <p>Created by <a href="http://twostepmedia.co.uk">Ben Howdle</a> for an <a href="http://coding.smashingmagazine.com/2012/02/09/beginners-guide-jquery-based-json-api-clients/">article in smashing magazine</a></p>
   </footer>
</div>

JavaScript

$('#term').on('focus', function() {
    if ($("#poster").has("img").length > 0) {
        $('#poster').empty();
    }
});

var getPoster = function() {
    var film = $('#term').val();
    console.log("will find " + film);
    if (film == '') {

        $('#poster').html("<h2 class='loading'>Please enter something.</h2>");

    } else {

        $('#poster').html("<h2 class='loading'>Your poster is on its way!</h2>");

        var key = "23afca60ebf72f8d88cdcae2c4f31866" ;
        var url = "http://api.themoviedb.org/2.1/Movie.search/en/json/" + key + "/";

        $.getJSON(url + film + "?callback=?", function(data) {
            if (data != "Nothing found.") {
                console.log("json has been loaded and converted to....");
                console.dir(data);
                $('#poster').html('<h2 class="loading">found a poster!</h2>' + '<img id="thePoster" src=' + data[0].posters[0].image.url + ' />');
            } else {

                $('#poster').html('<h2 class="loading">not found</h2>');
            }

        });

}

return false;
}

$('#search ').on('click', getPoster);
$('#term ').on('keyup', function(event) {
    if (event.keyCode == 13) {
        getPoster();
    }
});