JSFiddle - React, Tailwind, and code Playground

by yomoore

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<title>The Real Live Search</title> 
<link href="opensearch.xml" rel="search" title="The Real Live Search" type="application/opensearchdescription+xml" /> 
</head> 
 
<body> 
 
<div id="throbber"> 
</div> 
<div class="header"> 
    <h1>The Real <em>Live</em> Search</h1> 
    <h2>- your browser and Bing&#39;s AJAX APIs make sweet love</h2> 
</div> <form id="der">
<div id="search"> 
    <div id="searchgroup"> 
        <div><form id="form"><input id="searchbox" autocomplete="off" type="text" value="" /></form></div> 
        <div id="suggest"></div> 
    </div> 
    <div id="imgresults"></div> 
    <div class="clear"></div> 
    <div id="videoresults"></div> 
    <div class="clear"></div> 
    <div id="related"></div> 
</div> 
<div id="results"> 
    <div id="txtresults"></div> 
</div> 
<div class="clear"></div> 
<div id="footer"> 
    <p style="color:#555;font-family:Verdana,serif;font-size:11px;">results by <a href="http://www.bing.com/"><img src="style/bing.gif" alt="Bing" style="vertical-align:middle;" /></a></p> 
    <p>Painstakingly put together by Long Zheng from <a href="http://www.istartedsomething.com/">www.istartedsomething.com</a>. (c) 2009 Don't copy this yadi yada.</p> 
</div> 
<!-- Start of StatCounter Code --> 
<script type="text/javascript"> 
var sc_project=5034619; 
var sc_invisible=1; 
var sc_partition=57; 
var sc_click_stat=1; 
var sc_security="94e81e72"; 
</script> 
<script src="http://www.statcounter.com/counter/counter.js" type="text/javascript"></script> 
<noscript> 
<div class="statcounter">
<a href="http://www.statcounter.com/wordpress.com/" target="_blank" title="wordpress counter">
<img alt="wordpress counter" class="statcounter"...

CSS

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    padding: 20px;
}
p {
    margin: 0 0 7px 0;
}
h1 {
    font-size: 20px;
    font-weight: normal;
    display: inline;
}
h2 {
    font-size: 16px;
    font-weight: normal;
    color: #666;
    display: inline;
}
h3 {
    margin: 0 0 7px;
}

.header {
    margin: 0 0 20px;
}
.clear {
    clear:both;
}

#search {
    width: 400px;
    margin-bottom: 30px;
    float: left;
}
    #search input {
        width: 366px;
        font-size: 20px;
        color: #d84700;
        padding: 4px 30px 4px 4px;
        border: 1px inset #ccc;
        margin: 0;
    }
        #search input:hover,#search input:focus {
            border: 1px inset #3aa0ff;
        }
        #search input.throbber {
            background:#fff9dc url(ajax-loader.gif) center right no-repeat;
        }
    #searchgroup {
        margin-bottom: 260px;
    }
    
#imgresults ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
    #imgresults ul li {
        float: left;
        width: 86px;
        height: 100px;
        overflow: hidden;
        margin: 0 14px 10px 0;
    }
    #imgresults img {
        width: 80px;
        height: 90px;
    }
    #imgresults a img {
        border: 3px solid #eee;
    }
        #imgresults a:hover img {
            border: 3px solid #0099FF;
        }
#videoresults ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
    #videoresults ul li {
        float: left;
        width: 86px;
        height: 100px;
        overflow: hidden;
        margin: 0 14px 10px 0;
    }
    #videoresults img {
        width: 80px;
        height: 90px;
    }
    #videoresults a img {
        border: 3px solid #eee;
    }
        #videoresults a:hover img {
            border: 3px solid #0099FF;
        }

#results {
    width: 600px;
    margin-left: 430px;
}
    #results ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    #results h3.title {
  ...

JavaScript

// our document is ready 
$(document).ready(function() {

// set focus to search box
$("input#searchbox").focus();

// init Bing API variables
var AppId = "AppId=86F7F70727A6D88CCE422ED44905A378E9780D81";    // bing API ID
var Query = "Query=";
var Sources = "Sources=Web+Image+Video+RelatedSearch";
var Version = "Version=2.2";
var Market = "Market=en-us";
var WebCount = "Web.Count=10";
var WebOffset = "Web.Offset=0";
var ImgCount = "Image.Count=8";
var ImgOffset = "Image.Offset=0";
var VideoCount = "Video.Count=4";
var VideoOffset = "Video.Offset=0";

// temp
var lastSearch = '';
var lastResult = '';
var lastSuggestSearch = '';
var lastSuggestResult = '';

// perform search   
function doSearch(search,suggest,validate){
  
      if (suggest==null) {suggest=true;}
      if (validate==null) {validate=false;}
  
    // if our search is not blank AND is not what we last searched for
    if ((search!='') && (search!=lastSearch))
        {

          lastSearch = search;

          // encode our search query to send to Bing
          searchEnc = encodeURIComponent(search);
          
          // set our HTTP GET path
          var arr = [AppId, Query + searchEnc, Sources, Version, WebCount, WebOffset, ImgCount, ImgOffset, VideoCount, VideoOffset, "JsonType=callback", "JsonCallback=?"];
          var requestStr = "http://api.bing.net/json.aspx?" + arr.join("&");
    
          // add a throbber
          $("#searchbox").addClass('throbber');
    
          // make the call
          $.ajax({
              type: "GET",
              url: requestStr,
              dataType: "jsonp",
              cache: true,
              timeout: 5,
              success: function(msg) {
                      if((lastSearch!='')&&(validate!=true))
                      {
                          // process the search result
                          SearchCompleted(msg, search);
                      }else if (lastSearch==search){
                          SearchCompleted(msg,...