A Beginner's Guide To jQuery-Based JSON API Clients - Practical JavaScript Techniques

HTML and CSS Reference

In-Depth Information

The idea of the Web app is to take a movie title inputted by the user, run it through TMDb ' s

8

API, and return the relevant poster. The user could then share it or save it to their computer.

The Web app is split into HTML, CSS and jQuery. We'll focus on the jQuery, because that's

where the magic happens.

THE HTML

Below is the basic structure of the Web app. Nothing special here.

<!DOCTYPE html>

< html >

< head >

< meta name =" author " content =" Ben Howdle and Dan Matthew ">

< meta name =" description " content =" A responsive movie poster grabber ">

< title > Front Row by Ben Howdle </ title >

< meta name =" viewport " content =" width = device-width, minimum-scale = 1.0,

maximum-scale = 1.0 ">

< script src =" http://ajax.aspnetcdn.com/ajax/jQuery/

jquery-1.6.2.min.js "></ script >

< script src =" scripts.js "></ script >

< script type =" text/javascript " src =" http://use.typekit.com/

oya4cmx.js "></ script >

< script type =" text/javascript "> try { Typekit . load ();} catch ( e ){}</ script >

< link rel =" stylesheet " href =" style.css " />

</ head >

< body >

< div class =" container ">

< header >

< h1 > Front Row </ h1 >

</ 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 ">

Search WWH ::

Custom Search

Home