Google Alphabet

by afarris

HTML

</style>
<div id="results">
<h1>Google Alphabet</h1>
	<p id="A"></p>
	<p id="B"></p>
	<p id="C"></p>
	<p id="D"></p>
	<p id="E"></p>
	<p id="F"></p>
	<p id="G"></p>
	<p id="H"></p>
	<p id="I"></p>
	<p id="J"></p>
	<p id="K"></p>
	<p id="L"></p>
	<p id="M"></p>
	<p id="N"></p>
	<p id="O"></p>
	<p id="P"></p>
	<p id="Q"></p>
	<p id="R"></p>
	<p id="S"></p>
	<p id="T"></p>
	<p id="U"></p>
	<p id="V"></p>
	<p id="W"></p>
	<p id="X"></p>
	<p id="Y"></p>
	<p id="Z"></p>
<h2>And Numbers</h2>
	<p id="1"></p>
	<p id="2"></p>
	<p id="3"></p>
	<p id="4"></p>
	<p id="5"></p>
	<p id="6"></p>
	<p id="7"></p>
	<p id="8"></p>
	<p id="9"></p>
	<p id="10"></p>	
</div>

CSS

body {
		font-family: Arial, Helvetica, sans-serif;
		font-size:120%;
	} 

	#results {
		width:1024;
		margin-left:auto;
		margin-right:auto;
		text-align:center;
	}
	
	#results p {
		margin: 2px;
		padding:0px;
	}
	
	#results > p:first-letter {
		font-weight:bolder;
	}
	
	#results > p a{
		text-decoration:none;
	}

JavaScript

$(document).ready(function() {
	$( "#results > p" ).each(function( index ) {
	  var divId = $(this).attr('id');
	  callGoogle(divId);
	});
		
	suggestCallBack = function (data){
		var key = "#" + data[0];
		var value = data[1][0][0];
		value = "<a target='_blank' href='http:\/\/www.google.com\/search?q=" + value + "'>" + value + "<\/a>";
		$(key).append(value);
	}
})

function callGoogle(searchString){
	$.getJSON("http://suggestqueries.google.com/complete/search?callback=?",
		{ 
		  "hl":"en",              
		  "jsonp":"suggestCallBack",
		  "q":searchString,
		  "client":"youtube"
		}
	);	
	
}