JSFiddle - React, Tailwind, and code Playground
by Hidayat Rifan
HTML
<body>
<div id='page'>
<form id='searchForm' method='post'>
<fieldset>
<input id='s' type='text' />
<input id='submitButton' type='submit' value='Search' />
</fieldset>
</form>
<div id='searchInContainer'>
<input id='searchSite' name='check' type='radio' value='site' />
<label for='searchSite' id='siteNameLabel'>Search</label>
<input id='searchWeb' name='check' type='radio' value='web' />
<label for='searchWeb'>Search The Web</label>
</div>
<ul class='icons'>
<li class='web' data-searchType='web' title='Web Search'>Web</li>
<li class='images' data-searchType='images' title='Image Search'>Images</li>
<li class='news' data-searchType='news' title='News Search'>News</li>
<li class='videos' data-searchType='video' title='Video Search'>Videos</li>
</ul>
</div>
<div id='resultsDiv'></div>
</body>
CSS
body {background-color:#222}
#searchForm {}
fieldset {
border:none
}
#searchInputContainer {
width:420px;
height:34px;
background:#fff;
float:left;
margin-right:12px
}
#s {
border:1px solid #52e052;
color:#888;
background:#f1f1f1 url(https://lh4.googleusercontent.com/-kWepQUL6ypo/T_bcpvbb5nI/AAAAAAAACFo/OhezBRoj15E/s30/search_icon.png) no-repeat;
float:left;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
height:34px;
line-height:34px;
margin-right:12px;
outline:medium none;
text-shadow:1px 1px 0 #FFF;
width:385px;
padding:0 0 0 25px
}
.icons {
list-style:none;
height:19px;
position:relative;
margin:10px 0 0 425px
}
.icons li {
background:url(https://lh3.googleusercontent.com/-Xyccrz3MDwo/UnYglQqX6AI/AAAAAAAAGfw/Z3_0cOfYbxk/h120/icons.png) no-repeat;
float:left;
height:19px;
text-indent:-9999px;
cursor:pointer;
margin-right:5px
}
li.web {
width:15px
}
li.images {
width:22px;
background-position:-18px 0
}
li.images.active, li.images:hover {
background-position:-18px bottom
}
li.news {
width:14px;
background-position:-44px 0
}
li.news.active, li.news:hover {
background-position:-44px bottom
}
li.videos {
width:17px;
background-position:right 0
}
li.videos.active, li.videos:hover {
background-position:right bottom
}
span.arrow {
width:11px;
height:6px;
position:absolute;
background:url(https://lh3.googleusercontent.com/-ovQis5wQTjo/UnZSOGoMFoI/AAAAAAAAGgY/goZf43qJt9I/h120/arrow.png) no-repeat;
left:0;
margin:15px 0 0 5px;
}
#submitButton {
background:#52e052;
color:#000;
width:83px;
height:36px;
overflow:hidden;
text-transform:uppercase;
font-weight:bold;
border:1px solid #32CD32;
outline:1px solid #228B22;
cursor:pointer
}
#searchInContainer {
...
JavaScript
$(document).ready(function () {
function n(t) {
t = $.extend({}, e, t);
t.term = t.term || $("#s").val();
if (t.searchSite) {
t.term = "site:" + t.siteURL + " " + t.term
}
var i = "http://ajax.googleapis.com/ajax/services/search/" + t.type + "?v=1.0&callback=?";
var s = $("#resultsDiv");
$.getJSON(i, {
q: t.term,
rsz: t.perPage,
start: t.page * t.perPage
}, function (e) {
var i = e.responseData.results;
$("#more").remove();
if (i.length) {
var o = $("<div>", {
className: "pageContainer"
});
for (var u = 0; u < i.length; u++) {
o.append(new r(i[u]) + "")
}
if (!t.append) {
s.empty()
}
o.append('<div class="clear"></div>').hide().appendTo(s).fadeIn("slow");
var a = e.responseData.cursor;
if (+a.estimatedResultCount > (t.page + 1) * t.perPage) {
$("<div>", {
id: "more"
}).appendTo(s).click(function () {
n({
append: true,
page: t.page + 1
});
$(this).fadeOut()
})
}
} else {
s.empty();
$("<p>", {
className: "notFound",
html: "No Results Were Found!"
}).hide().appendTo(s).fadeIn()
}
})
}
function r(e) {
var t = [];
switch (e.GsearchResultClass) {
case "GwebSearch":
t = ['<div class="webResult">', '<h2><a href="', e.unescapedUrl, '" target="_blank">', e.title, "</a></h2>", "<p>", e.content, "</p>", '<a href="', e.unescapedUrl,...