JSFiddle - React, Tailwind, and code Playground

by vijayweb

HTML

<textarea id="vjso"></textarea>

<div id="tool">

</div>
<div id="report">

</div>
<div id="granularity">

</div>
<div id="graph">

</div>

JavaScript

$( "#vjso" ).keyup(function() {

        var text = $( "#vjso" ).val();

        var adobe = "adobe";
        var google = "google";
        var sales = "sales";

        var pages = "pages";
        var trafficsources = "traffic sources";
        var browsers = "browsers";

        var daily = "daily";
        var monthly = "monthly";
        var hourly = "hourly";

        var trend = "trend";
        var share = "share";
        var table = "table";
  
 if( text.indexOf( trend ) != -1 ){$( "#graph" ).html( trend );}
 else if( text.indexOf( share ) != -1){$( "#graph" ).html( share );}
 else if( text.indexOf( table ) != -1){$( "#graph" ).html( table );}  
 
 if( text.indexOf( pages ) != -1 ){$( "#tool" ).html( pages );}
 else if( text.indexOf( trafficsources ) != -1){$( "#tool" ).html( trafficsources );}
 else if( text.indexOf( browsers ) != -1){$( "#tool" ).html( sales );}
 
 if( text.indexOf( adobe ) != -1 ){$( "#report" ).html( adobe );}
 else if( text.indexOf( google ) != -1){$( "#report" ).html( google );}
 else if( text.indexOf( sales ) != -1){$( "#report" ).html( sales );}
 
 if( text.indexOf( monthly ) != -1 ){$( "#granularity" ).html( monthly );}
 else if( text.indexOf( daily ) != -1){$( "#granularity" ).html( daily );}
 else if( text.indexOf( hourly ) != -1){$( "#granularity" ).html( hourly );}  
 
});